Kommentare 16

Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co

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.

mobile Webseiten Designs

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.

mobile Webseiten Designs

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.

mobile Webseiten Designs

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.

mobile Webseiten Designs

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.

mobile Webseiten Designs

5. mediaburst

Webseite: mediaburst.co.uk/m

Eine sehr schöne mobile Seite gibt’s von mediaburst.

mobile Webseiten Designs

6. WolframAlpha

Webseite: m.wolframalpha.com

Die clevere Wissensmaschine Wolfram Alpha sieht auch in der mobilen Version sehr übersichtlich aus.

mobile Webseiten Designs

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.

mobile Webseiten Designs

8. SNOOK.CA

Webseite: m.snook.ca

Das schlichte Webdesign von Jonathan Snook sieht auch in der mobified Version seiner Webseite klasse aus.

mobile Webseiten Designs

9. Erskine Design

Webseite: m.erskinedesign.com

Auch die Designagentur Eskine Design hat eine iPhone-Version ihrer Webseite.

mobile Webseiten Designs

10. upstract

Webseite: upstruct.com/m

Auch das Design Studio upstruct berlin oslo hat eine schöne mobile Webseiten-Version.

mobile Webseiten Designs

11. Crush & Lovely

Webseite: m.crushlovely.com

Die inspirierende Webseite von Crush & Lovely hat jetzt auch eine tolle mobile Version von Mobify bekommen.

mobile Webseiten Designs

12. Diesel

Webseite: m.diesel.com

Eine sehr schöne mobile Version gibt’s auch von Diesel.

mobile Webseiten Designs

13. Webdesigner Depot

Webseite: m.webdesignerdepot.com

Auch den sehr beliebten Webdesign-Blog Webdesigner Depot gibt’s jetzt Dank Mobify in Mini-Version.

mobile Webseiten Designs

14. David Praznik

Webseite: davidpraznik.com/m

David Praznik hat eine schöne mobile Version seiner Portfolios, inklusive About-Seite und Kontaktformular gebaut.

mobile Webseiten Designs

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).

mobile Webseiten Designs

16. coosh

Webseite: coosh.com/iphone

Die mobile Webseiten-Version des Headset-Herstellers Coosh.

mobile Webseiten Designs

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.

mobile Webseiten Designs

18. Pixelumbrellla

Webseite: pixelumbrella.com/iphone

Auf der mobilen Version von Pixelumbrella gibt es sogar einen Mini-Slider zu bewundern.

mobile Webseiten Designs

19. Procab Studio

Webseite: procab.ch/iphone

Eine sauber durchgestylte iPhone-Seite der schweizer Design-Agentur Procab Studio.

mobile Webseiten Designs

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.

16 Kommentare

    • 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

  1. 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

  2. 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

  3. 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/

  4. 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

  5. Pingback: Mobile-User-Interface-Beispiele | webSimon.eu

  6. Hey Manuel, danke für diese aufschlussreiche Sammlung. Mein Projekt http://www.profiling-institut.de eine Studienberatung zielt auf junge Menschen für sie das mobile Web klare Sache ist, die werden damit groß. Aber ich teile auch die Ansicht eines Kommentars das mit fortschreitender Technik das reine mobile Web nicht mehr so wichtig ist auch weil die Bildschirme der Smartphones immer grösser werden…

    Trotzdem danke denn ich werde die Vorlage bzw das Design von Depot als Vorlage ranzugehen für meine erste mobile Seite. Gruss Jan

  7. Dennis

    Hi, es gibt doch auch die möglichkeit seine Mobile Webseite mit einem Online-Tool erstellen zu lassen. Ich kenne die http://www.dnzmobile.com/ ich denke solche Seiten sind einfacher zu Handhaben vorallem wenn man keine teueren Webdesigner beauftragen möchte, oder was meint Ihr?

    Bis dann,
    Dennis

Schreibe eine Antwort