Mobile Web

Der Begriff „mobiles Webdesign“ wird als Überbegriff für verschiedene mobile Lösungen verwendet. Er steht je nach Zusammenhang für eigenständige mobile Websites, Responsive bzw. Adaptive Websites oder Web-Apps.

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

Responsify.it – Responsive Grid Template

responsify-logo-icon

Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen sich verschiedene Breakpoints sowie die Anzahl der Spalten und der Abstand zwischen den Spalten einstellen. Die Wahl zwischen einem prozent- und einem pixelbasierten Raster habt ihr allerdings nicht, das Raster basiert immer auf flexiblen Spalten (was ja auch die schönere Variante ist).

Beitrag zu Ende lesen

“Fit fürs Mobile Web” – Mein Artikel im t3n-Magazin Nr. 28

Cover des t3n-Magazins

Das neue t3n-Magazin ist veröffentlicht worden und sollte bei den meisten Abonnenten bereits in den Briefkasten geflattert sein. Ab kommender Woche könnt ihr das Magazin dann auch im Handel erwerben.

Ich habe für die aktuelle Ausgabe einen Artikel zum Thema "Mobiles Webdesign" beigesteuert auf den ich euch natürlich gerne aufmerksam machen möchte.

Beitrag zu Ende lesen

Responsive Wireframes

responsive-wireframes

Vielen Webdesignern fällt es schwer ein Responsive Webdesign zu planen und zu verstehen wie die unterschiedlichen Layouttypen sich auf verschiedenen Displaygrößen verhalten. Die Website „Responsive Wireframes“ dient als kleines Experiment und visualisiert den Vorgang sehr schön. Anhand verschiedener Beispiele für den Aufbau einer Website (Startseite, Promotion etc.) wird gezeigt wie Inhalte auf großen und kleinen Displays angeordnet werden können.

Das Tool ist sicher auch hilfreich um Kunden das Prinzip einer responsive Website verständlich zu erklären.

Beitrag zu Ende lesen

Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) optimieren

Kulturbanause App-Icon Retina

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