Web-Typografie: Perfekte Zeilenlängen im Responsive Design

responsive-typo

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Beitrag zu Ende lesen

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

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 URL Scheme

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