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

(Mobiles) Web-Design und App-Design liegen oft nah bei einander. In einigen Bereichen überschneiden sich die Themen, in anderen müssen ganz spezielle und individuelle Anforderungen erfüllt werden. Heiko vom Webstandard-Blog hat einen sehr lesenswerten Artikel zu diesem Thema veröffentlicht den ich euch nicht vorenthalten möchte. Er erklärt an einem konkreten Praxisbeispiel Schritt für Schritt wie eine App gestalterisch aufgebaut wird und wo die Tücken liegen. Angefangen bei konzeptionellen Fragen über die Gestaltung des App-Icons, bis zur Gestaltung der Benutzeroberfläche und Bedienelemente wird die Entstehung einer iPad-App detailliert beschrieben.

Designprozess einer iPad-App

Displays mit hoher Pixeldichte, wie das Retina-Display von Apple, sind zunehmend verbreitet. Web- und App-Designer müssen sich auf diese Technologie einstellen und Quellcode, Layoutgrafiken und Inhalte optimieren. Welche Probleme das Retina-Display hervorruft und welche Lösungsansätze es gibt möchte ich in diesem Beitrag zusammenfassen.

Beitrag zu Ende lesen

Vor einigen Tagen wurde ich per Mail gefragt, wie es möglich ist mobile Besucher dazu aufzufordern die Seite auf den Home-Screen eines iPhones zu speichern und ob dieser Vorgang eventuell sogar automatisiert werden kann. Mit diesem Beitrag möchte ich die Frage gerne öffentlich beantworten und im gleichen Zug die "Mobile Bookmark Bubble" als Tool und mögliche Lösung vorstellen.

Beitrag zu Ende lesen

Ich habe in der Vergangenheit bereits über verschiedene Tools geschrieben mit denen Ihr die Darstellung einer Website auf verschiedenen Endgeräten simulieren könnt. Nun möchte ich euch ein weiteres Tool für diesen Zweck vorstellen - es ist immer schön Alternativen zu kennen. Der Responsive Design Tester simuliert verschiedene Viewports und zeigt die mittels CSS3 Media Queries optimierten Layouts parallel an.

Beitrag zu Ende lesen

Ich möchte euch gerne ein weiteres Online-Tool vorstellen, mit dem ihr eure Website auf verschiedenen Viewports testen könnt. Der Dienst nennt sich Screenfly und simuliert eine Vielzahl an (mobilen) Endgeräten. Angefangen bei Desktop-Computern über Smartphones und TV-Geräte bis hin zu Tablets werden alle gängigen Devices abgedeckt.
Besonders gut gefällt mir, dass nicht nur die Apple-Geräte berücksichtigt werden, sondern eben auch Blackberry, Android und Co. Darüber hinaus lässt sich auch noch vom Portrait- in den Landscape-Modus wechseln.

Beitrag zu Ende lesen

Media Queries und Responsive Web Design sind die aktuellen Buzzwords der Webdesign-Szene. Gemeint ist damit eine Website, die mithilfe der CSS-Technik "Media Query" für unterschiedliche Ausgabemedien und Displaygrößen optimiert wurde. Da die mobile Web-Nutzung rasant zunimmt, muss eine zeitgemäße Website auch auf Smartphones und Tablet-PCs eine gute Figur machen.
Wie ihr eine Website für iPhone, iPad & Co. optimiert, habe ich in einem früheren Artikel bereits beschrieben. Nun möchte ich euch ein Online-Tool vorstellen, mit dem sich die Darstellung auf iPhone und iPad simulieren lässt.

Beitrag zu Ende lesen