Mobile Web Experience

Der Ausdruck »Mobile Web« bzw. richtiger »Mobile Web Experience« wird als Überbegriff für verschiedene Themen verwendet. Gemeint sind damit Konzepte und Technologien die das Web über mobile Endgeräte erlebbar machen. Der Begriff steht je nach Zusammenhang beispielsweise für eigenständige mobile Websites, Responsive bzw. Adaptive Websites, Web-Apps oder native Apps.

Automatische Verlinkung von Nummern verhindern

iban

Wenn wir mit dem Smartphone eine Telefonnummer auf einer Website suchen, dann möchten wir häufig auch direkt anrufen. Es bietet sich daher an, die Telefonnummer entsprechend zu verlinken um dem Anwender die Bedienung zu erleichtern. Wie ihr solche Links zu verschiedenen Diensten und Apps herstellt, habe ich im Blog bereits behandelt.

Einige mobile Betriebssysteme erkennen Telefonnummern sogar selbstständig und wandeln die Zahlenkette automatisch in einen Link mit Anruf-Funktion um. Lästig nur, wenn der Automatismus auch andere Zahlenketten als Telefonnummern interpretiert. In diesem Fall sollte man die Funktion deaktivieren.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

responsiveimages

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

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

Anklickbare Telefonnummern – Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website ermöglichen

Klickbare Telefonnummern

Viele Geräte mit denen Websites besucht werden sind zum Telefonieren oder Video-Chatten geeignet. Um einem Anwender, der beispielsweise mit seinem Smartphone die Website besucht, die Kontaktaufnahme so einfach wie möglich zu machen, sollten Telefonnummern anklickbar sein. Telefonate, FaceTime- oder Skype-Anrufe lassen sich ohne großen Aufwand komfortabel einrichten.

Beitrag zu Ende lesen

Smart App Banners für iOS und Android

smart-app-banner

Seit dem Update auf iOS 6 stehen in Apples mobilem Betriebssystem die sog. „Smart App Banners“ zur Verfügung. Mit Hilfe eines solchen Banners kann im mobilen Safari auf eine App im App Store hingewiesen werden, was die Downloads spürbar erhöhen kann. Neben dem App-Icon werden innerhalb des Smart Banners der Titel, der Preis und die Bewertungen der Anwendung angezeigt. Ein Button führt den Anwender zum AppStore. Wenn die App bereits installiert ist, kann über den Button die Anwendung gestartet werden.

Beitrag zu Ende lesen

Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren

aktiver-button

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

Beitrag zu Ende lesen

Tabellen im Responsive Webdesign

tabellen-responsive-design

Wer schon einmal eine Website mit tabellarischen Inhalten für mobile Endgeräte optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Ich spreche hier natürlich nicht von Tabellen die für das Layout missbraucht wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich.
Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen.

Beitrag zu Ende lesen