Smartphones sind der totale Renner, und immer mehr Nutzer wollen ihre Lieblings-Webseiten und -Blogs auch im Café oder auf dem Nachhauseweg in der U-Bahn besuchen. Da die Mini-Displays der mobilen Geräte eine echte Herausforderung sind, müssen sich die Webdesigner ganz schön ins Zeug legen, um benutzerfreundliche mobile Webdesigns zu gestalten. Das diese Aufgabe alles andere als unmöglich ist, zeigen jede Menge talentierte Webdesigner mit ihren kreativen und inspirierenden mobilen Webdesigns.
Fluid Webdesigns
Die innovativsten Beispiele mobiler Webseiten sind die neuen Webdesigns von Hicksdesigns oder SimpleBits. Die Layouts sind so flexibel konzipiert, dass sie sich dem jeweiligen Gerät (Smartphone, iPad, Laptop oder großer Desktop-Monitor) anpassen. Ein spannender Artikel zum Thema flexibles Webdesign ist »Responsive Web Design« bei A List Apart.
1. Hicksdesign
Webseite: hicksdesign.co.uk
Das neue Blogdesign von Hicksdesign verändert sich je nach Gerät in ein ein-bis vier-spaltiges Layout. Die einspaltige Version ist dabei für das 320 Pixel breite iPhone-Display optimiert. Jon Hicks beschreibt in seinem Blogartikel »Finally a fluid Hicksdesign« sehr schön das Konzept seiner neuen Seite.
2. Simple Bits
Webseite: stream.simplebits.com
Den gleichen Designansatz wie Jon Hicks hat auch Dan Cederholm von SimpleBits. Das Ergebnis seines neuen Bitstream-Designblogs ist wirklich sehr gelungen und inspirierend.
Mobile Webseiten-Versionen mit flexibler Breite
Natürlich muss man nicht gleich ein ganz neues Design für seine Webseite erstellen. Es gibt auch die Möglichkeit, eine extra Version eines Webdesigns für die unterschiedlichen Smartphone-Formate z.B. auf einer Subdomain (m.meinedomain.de) einzurichten. Dazu kann man sich entweder ein Account bei einen Online-Anbieter (z.B. Mobify) einrichten, oder falls man eine WordPress-Seite hat, auch ein WordPress-Plugin verwenden. Hier findest du jede Menge Infos zu Tools und Plugins für mobile Webseiten.
3. Tanya Ryno
Webseite: m.tanyaryno.com
Ein schönes Beispiel für eine mobile Webseiten-Version von Mobify ist die Webseite der Produzentin Tanya Ryno.
4. thirdoor
Webseite: thirdoor.com/m
Die mobile Seite von thirdoor ist sehr sehr benutzerfreundlich gestaltet. Über den Home-Button kannst du dich geschickt durch die gesamte Seite navigieren.
5. mediaburst
Webseite: mediaburst.co.uk/m
Eine sehr schöne mobile Seite gibt’s von mediaburst.
6. WolframAlpha
Webseite: m.wolframalpha.com
Die clevere Wissensmaschine Wolfram Alpha sieht auch in der mobilen Version sehr übersichtlich aus.
7. I Love Typography
Webseite: m.ilovetypography.com
Sehr schön sieht auch das minimalistische Webdesign von I Love Typography in der Mini-Version made by Mobify aus.
8. SNOOK.CA
Webseite: m.snook.ca
Das schlichte Webdesign von Jonathan Snook sieht auch in der mobified Version seiner Webseite klasse aus.
9. Erskine Design
Webseite: m.erskinedesign.com
Auch die Designagentur Eskine Design hat eine iPhone-Version ihrer Webseite.
10. upstract
Webseite: upstruct.com/m
Auch das Design Studio upstruct berlin oslo hat eine schöne mobile Webseiten-Version.
11. Crush & Lovely
Webseite: m.crushlovely.com
Die inspirierende Webseite von Crush & Lovely hat jetzt auch eine tolle mobile Version von Mobify bekommen.
12. Diesel
Webseite: m.diesel.com
Eine sehr schöne mobile Version gibt’s auch von Diesel.
13. Webdesigner Depot
Webseite: m.webdesignerdepot.com
Auch den sehr beliebten Webdesign-Blog Webdesigner Depot gibt’s jetzt Dank Mobify in Mini-Version.
14. David Praznik
Webseite: davidpraznik.com/m
David Praznik hat eine schöne mobile Version seiner Portfolios, inklusive About-Seite und Kontaktformular gebaut.
15. Coldwater Creek
Webseite: coldwatercreek.com/mobile
Die mobile Version von Coldwater Creek ist ein spannendes Beispiel für ein mobiles Shop-Design.
Mobile Webdesigns mit fixer Breite
Eine weitere Variante mobiler Webdesigns sind extra für die Smartphone-Displays gestaltete Webseiten mit einer festgelegten Breite (meist 320 Pixel wie beim iPhone).
16. coosh
Webseite: coosh.com/iphone
Die mobile Webseiten-Version des Headset-Herstellers Coosh.
17. Christopher Meeks
Webseite: christophermeeks.com
Die sehr schön gestaltete, minimalistische Seite von Christopher Meeks hat zwar kein fluid Layout, ist aber auch auf einem größeren Bildschirm schön anzusehen, ohne das sich das Design verändert.
18. Pixelumbrellla
Webseite: pixelumbrella.com/iphone
Auf der mobilen Version von Pixelumbrella gibt es sogar einen Mini-Slider zu bewundern.
19. Procab Studio
Webseite: procab.ch/iphone
Eine sauber durchgestylte iPhone-Seite der schweizer Design-Agentur Procab Studio.
20. Alex Buga
Webseite: alexbuga.com/v9/iphone
Alex Bugas Seite ist ein schönes Beispiel für ein privates Blog-Design und zeigt, dass auch der self-made Notizenbuch-Stil klasse in der Mini-Version funktioniert.
Wie gefallen dir die mobilen Webdesigns? Hast du selbst schon darüber nachgedacht, für deine Webseite oder deinen Blog eine mobile Version zu gestalten? Und kennst du noch weitere schöne Bespiele für mobiles Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr :-)
Hast du selbst kein eigenes iPhone und gerade auch keines von einem Bekannten zur Verfügung, kannst du dir die mobilen Webdesigns übrigens auch prima mit dem Online-Tool TestiPhone anschauen. Und für Google Chrome gibt es die praktische Erweiterung Window Resizer, mit der du dein Browser-Fenster schnell in die verschiedensten Größen wechseln kannst.
Sehr interessanter Beitrag, werde dieses Mobify gleich mal ausprobieren.
Hallo Marcel,
freut mich, dass dir der Beitrag über die mobilen Webseiten gefällt :-) Klasse, dass du Mobify auch gleich ausprobieren willst. Sag doch bescheid, sobald du deine Seite »mobified« hast, das würde mich riesig interessieren :-)
Viele Grüße
Manuel
Ich finde die mobilen Designs auch super spannend. Die Seiten von Hicksdesign, SimpleBits und Snook.ca finde ich besonders gelungen.
Neulich habe gab’s auch bei Smashing Magazine noch einen interessanten Artikel, wie man Webseiten mit Hilfe von CSS3 Media Queries für verschiedene Geräte flexibel machen kann.
Viele Grüße
Ellen
Vielen Dank für dein Feedback, Ellen! Der Smashing Magazine Artikel sieht echt interssant aus, den muss ich unbedingt noch lesen. Vielen Dank für den Link :-)
Gruß Manuel
Mobile Versionen von Webseiten sind seit ca. einem Jahr wirklich sinnvoll. Ich denke jedoch, dass die Notwendigkeit einer mobilen Version mit vorranschreiten der Technologie wieder abnehmen wird und die ›mobile‹-Varianten spätestens in 5 Jahren wieder tot sein werden.
Mit dem iPad ertappe ich mich selbst dabei, dass ich jedesmal (wenn ich alleine bin laut) fluche wenn ich automatisch auf eine ›mobile‹ Seite geleitet werde weil ich fälschlicher weise für ein iPhone/iPod Touch gehalten werde.
Auch das neue iPhone 4G soll ja ein weit besseres Display als das 3G haben und somit könnte da die normale Variante wieder mehr Sinn machen. (Achtung Mutmaßung - hatte leider noch kein iPhone 4G in der Hand).
Grüße
Edward
Hallo Edward,
vielen herzlichen Dank für deinen Kommentar und deine Einschätzung zum Thema mobiles Webdesign. Meiner Meinung nach wird es in der Zukunft immer wichtiger sein Webseiten flexibel zu gestalten, so dass sie sich auf das jeweilige Gerät anpassen können (siehe die Beispiele Hicksdesign, SimpleBits). So muss man dann gar keine eigene Variante einer Webseite für mobile Geräte mehr erstellen.
Viele Grüße
Ellen
Hallo,
als Bereicherung noch einen mobilen Webseitentipp: http://m.wapsters.de
Dies ist eine mobile Community mit Forum, Chat, Blog, Galerie und vieles mehr!
Grüße benny
Kann mich dem Kommentar von >Edward BlackelmastudioHicksdesign< gehen meiner Meinung nach in die richtige Richtung.
Was mich allerdings schon lange wundert, sind mobile Seiten, die von relativ großen Webagenturen erstellt werden die dann allerdings »nur« für iOS oder für Android oder für RIM-Geräte entwickelt werden.
Sobald ich diese Seiten dann mit einem kleineren Bildschirm oder einem anderen Betriebssystem besuche, bekomme ich entweder nur »Müll« oder im Idealfall die normale Desktop-Seite angezeigt.
Insbesondere trifft dies sehr häufig bei Nokia mit Symbian zu.
Doch selbst wenn ich mit meinem iPhone 3gs auf akzeptable mobile Versionen treffe, bleibt immer noch die lange Ladezeit. Webdesign lässt grüssen: da werden Desktop-Versionen 1:1 auf mobile getrimmt - mit all den Grafiken und Anhängseln.
Aber noch schlimmer finde ich es, wenn diverse Frameworks mit jQuery eingesetzt werden. Mag sein, dass einige ganz gut funktionieren. Aber in der Praxis sieht das allerdings ganz anders aus.
Ich habe das Internet die letzten Jahre für Recherchearbeiten genutzt und war auch viel unterwegs. Daher kommen auch meine Erfahrungen im Umgang mit unzähligen mobilen Seiten.
Inzwischen biete ich selbst mobile Seiten an, die ich aus der Praxis heraus entwickelt habe. Diese können zwar im Design nicht mit den etablierten Anbietern stand halten, haben jedoch einen entscheidenden Vorteil:
diese funktionieren auf allen (!) Geräten. Und zwar egal welches System und unabhängig von der Bildschirmgröße (kleinstes getestetes Display: Nokia E50).
Mag sein, dass diese in den nächsten zwei Jahren durch die neuen Generationen von Smartphones überflüssig werden. Aber ich denke, dass durch HTML5 + CSS3 diese Art von Seiten weiter entwickelt werden können.
Demo-Link: bramanoli.de/demo/
Hallo,
schöne Übersicht an Seiten.
Ich glaube auch, dass wir nicht drum herum kommen, für mobile Geräte optimierte Website-Versionen zu erstellen. Es kommt ja nicht auf die theoretisch abzubildende Detailmenge an, sondern auf eine sinnvolle Nutzbarkeit - und da muss ein kleines, mobiles Smartphone-Display anders bedient werden als ein großer Desktop-Bildschirm.
Hier auch noch 2 Beispiele:
http://m.schwarzdesign.de (auf Drupal-Basis)
http://m.koelndesign.de (mit jQueryMobile)
Grüße aus Kölle
Oliver Schwarz
Hallo,
würde mir jemand eine Webseite für iPhones erstellen ?
Leider habe ich noch nicht genügend Programmierkenntnisse,
danke,
D. S.
Hello
Thank you for mention procab studio.
We are glad to announce you the first release of iPad version :
http://www.procab.ch/ipad
and the new site version http://www.procab.ch :)
Enjoy
Pingback: Mobile-User-Interface-Beispiele | webSimon.eu