Mobile Web
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "Mobile Web" versehen wurden.
Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.
Diesen Beitrag zu Ende lesen
Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.
Diesen 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.
Diesen Beitrag zu Ende lesen
Wenn ihr eine Website für mobile Endgeräte, insbesondere für Tablet PCs gestalten wollt, müsst ihr wissen mit welchen Einschränkungen, Abmessungen, Auflösungen und Möglichkeiten ihr es zu tun haben werdet. Der Tablet Markt wird allerdings zunehmend unübersichtlich und so ist es erfreulich, dass die Agentur NUISOL mit Tabletmania eine Website ins Leben gerufen hat, auf der Ihr technische Daten aller Tablet-Computer nachschlagen könnt. Neben der individuellen Display-Auflösung, dem verwendeten Betriebssystem und dem nativen Webbrowser eines Geräts könnt ihr auch statistische Durchschnittswerte - beispielsweise die gebräuchlichste Display-Auflösung - nachschlagen.
Diesen Beitrag zu Ende lesen
Responsive Webdesign und entsprechende Frameworks gewinnen in letzter Zeit zunehmend an Popularität. Amazium ist ein solches Framework und nutzt als Grundlage ein 960 Pixel-System das für die Desktop-, die Tablet- und die Smartphone-Ansicht im Portrait- und Landscape-Modus adaptiert wurde. Neben dem eigentlichen Raster bietet Amazium Gestaltungsgrundlagen für typografische Elemente, Formulare, Listen und Tabellen sowie eine Error 404-Datei. Besonders erwähnenswert ist auch die Unterstützung für responsive Images und responsive Videos.
Diesen Beitrag zu Ende lesen
Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.
Diesen 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.
Diesen Beitrag zu Ende lesen