Static Google Maps – bessere Karten im Responsive Design?

static-google-maps

Vor einiger Zeit habe ich einen Beitrag verfasst, in dem erklärt wird, wie Google Maps in flexiblen Web-Layouts eingebettet werden kann. In diesem Beitrag möchte ich eine – für meinen Geschmack benutzerfreundlichere – Alternative vorstellen und gerne in den Kommentaren diskutieren. Googles Kartendienst wird hierbei als automatisch generierte, statische Grafik (Static Map) eingebunden und verlinkt auf den Kartendienst.

Beitrag zu Ende lesen

Video-Training »Modernes Webdesign mit Jonas Hellwig«

Modernes Webdesign mit Jonas Hellwig

In den vergangenen Jahren haben sich sowohl die Konzeption als auch die Gestaltung und die technische Umsetzung von Websites stark verändert. Themen wie responsive Design, Prototyping, flexible Rastersysteme und modulares Design haben einen sehr hohen Stellenwert eingenommen. Die Grenze zwischen Gestaltung und Technik ist größtenteils aufgelöst. Ich freue mich daher sehr, euch mein neues Video-Training mit dem Titel »Modernes Webdesign mit Jonas Hellwig« vorstellen zu dürfen. Die DVD ist ab sofort im Buchhandel, sowie bei Amazon erhältlich.

Demo-Videos und Inhaltsverzeichnis

Farben mit Sass verändern

sass-color-functions

Eine Website basiert normalerweise auf einem durchdachten Farbschema und einigen Farbabstufungen innerhalb der jeweiligen Farbe. Sass bietet umfangreiche Möglichkeiten, Farben zu manipulieren. Wenn der Sass-Code entsprechend vorbereitet wurde, ist es sogar möglich ein Design mit nur einer Variable komplett umzufärben – inkl. Helligkeitsabstufungen, Komplementärfarben etc.

Beitrag zu Ende lesen

WooCommerce-Telefonnummer nicht als Pflichtfeld kennzeichnen

woocommerce-phone-required

WooCommerce, die beliebte eCommerce-Erweiterung für WordPress, bindet das Eingabefeld für die Telefonnummer als Pflichtfeld ein. Während des Bezahlvorgangs muss der potenzielle Kunde daher die Telefonnummer zwingend angeben. Das führt schnell zu Kaufabbrüchen. In diesem Beitrag findet ihr ein Code-Snippet, mit dem ihr das Pflichtfeld entfernt. Die Telefonnummer ist anschließend nicht mehr zwingend erforderlich, kann aber noch eingegeben werden.

Beitrag zu Ende lesen

Responsive Webdesign mit Breakpoints und Media Queries

breakpoints-media-queries

Responsive Websites basieren auf flexiblen Gestaltungsrastern und passen sich automatisch an die unterschiedlich großen Displays verschiedener (mobiler) Endgeräte an. Für die optimale Darstellung auf Tablets oder Smartphones werden dazu mithilfe von CSS Media Queries sog. Breakpoints definiert, an denen das Layout einer Website umbricht. In diesem Artikel zeige ich euch, wie die Desktopversion einer Website mit Hilfe von Breakpoints responsiv gestaltet wird, und welche Display-Eigenschaften neben der Displaygröße noch abgefragt werden können.

Beitrag zu Ende lesen

Beitragsbild (Post Thumbnail) für einzelne Post-Types entfernen

beitragsbild-wordpress-editor

WordPress bietet die Möglichkeit einzelnen Inhalten ein sog. Beitragsbild (früher Artikelbild, engl. »Post Thumbnail«) zuzuweisen. Die Option steht sowohl für Beiträge, als auch für statische Seiten und Custom Post Types zur Verfügung, muss allerdings manuell aktiviert werden.
Sobald die Funktion aktiv ist, kann mit einem speziellen Template Tag das Bild auf der Website angezeigt werden. Leider wird im Backend das Bedienfeld zum Hochladen des Bildes auch dann angezeigt, wenn der entsprechende Beitragstyp (z. B. eine statische Seite) das Bild gar nicht anzeigt. Das kann bei Kunden leicht zur Verwirrung führen, weshalb es sinnvoll ist das Bedienfeld für entsprechende Inhalte zu deaktivieren.

Beitrag zu Ende lesen

Website-Inhalte per WhatsApp-Nachricht empfehlen – WhatsApp Sharing Button

WhatsApp Icon

Der Instant-Messaging-Dienst WhatsApp erfreut sich größter Beliebtheit und wird wahrscheinlich von den meisten von euch eingesetzt. Mit Hilfe des sog. »URL Schemes« von WhatsApp kann eine Nachricht erzeugt und anschließend manuell versendet werden. Es ist also möglich einen Button in die Website zu integrieren, über den der Link zum aktuellen Beitrag über WhatsApp verschickt werden kann. In diesem Beitrag erfahrt ihr, wie ihr das URL Scheme von WhatsApp einsetzen könnt, und welche Einschränkungen es gibt.

Beitrag zu Ende lesen