Kommentare 11

Webdesign goes “Mobile First”: Eine kleine Einführung in den neuen Webdesign-Trend

Einleitung mobile First Webdesign Die Optimierung von Webdesigns für unterschiedliche Bildschirmformate und Geräte (= responsive Webdesign) wird immer beliebter und wenn man sich einmal in der U-Bahn oder in einem Café umschaut wird einem auch schnell klar, warum das so ist. Immer mehr Menschen nutzen das Internet nicht mehr nur zu Hause an einem Desktop-Computer mit großem Bildschirm, sondern surfen auf ihrem Smartphone, Tablet-PC oder Laptop im Internet. Bei der Gestaltung von Webseiten wird es daher immer wichtiger, auf diese Entwicklung zu reagieren und ein Webdesign für unterschiedliche Formate und Geräte zu optimieren. Im ersten Moment liegt natürlich der Ansatz am nächsten, ein Webdesign in einem gewohnten Format zu konzipieren (z.B. mit einer Gesamtbreite von ca. 1000px) und dieses Design dann anschließend mit Hilfe von CSS Media Queries für kleinere Formate anzupassen. Der Ansatz “Mobile First” geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise einfach um und arbeitet von der kleinsten Layout-Version hin zur größten.

1. Weniger ist mehr – nicht nur für kleine Bildschirme

Da auf einem kleinen Smartphone-Bildschirm wenig Platz zur Verfügung steht, sollte man sich im Design auf das Wesentliche konzentrieren und überlegen, welche Webseiten-Elemente für den Nutzer wirklich wichtig sind. Idealerweise kommt man bei dieser Vorgehensweise auf eine übersichtliche, leicht zu bedienende Designlösung, die dann auch gleich für größere Bildschirme übernommen werden kann.

Denn warum sollte ein Webseiten-Besucher nicht eine ähnlich reduzierte und aufs Wesentliche konzentrierte Information erhalten. Nur weil man auf einem großen Desktop mehr Platz für die Gestaltung hat, muss man diesen schließlich nicht bis auf den letzten Pixel mit ablenkenden Informationen ausfüllen.

Luke W, der Autor des neusten A Book Apart-Buches “Mobile First” erläutert:

Designing for mobile first forces you to embrace these contraints to develop an eleganz mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business.
Luke Wroblewski, Mobile First

Das Konzept “Mobile First” schlägt also vor, sich die vermeidliche Schwäche (z.B. der Platzmangel auf kleinen Bildschirmen) zum Vorteil zu machen und durch Verzicht auf unwesentliche Informationen und Bedienelemente ein benutzerfreundliche, übersichtliche und optisch angenehm reduzierte Designlösung für alle Bildschirmgrößen zu finden.

2. Entwicklungen des mobilen Webs nutzen

Neben den Vorteilen im Design (durch Konzentration aus Wesentliche Übersichtlichkeit und Benutzerfreundlichkeit schaffen) gibt es auch jede Menge technische Entwicklungen für mobile Geräte, die man zu Nutzen machen kann. Natürlich ist die Technik mobiler Geräte und Browser stark in der Entwicklung und was heute eine Neuheit ist, wird morgen vielleicht schon ein alter Hut sein.

Dennoch sollte man die neuen Möglichkeiten als Webdesigner ausprobieren und beobachten und das ein oder andere Feature lässt sich eventuell sogar schon in einem Projekt verwenden.

So gibt es z.B. schon Bilder-Slider mit dem beliebten Swipe-Effekt (z.B. die Bildergalerie PhotoSwipe) und auch in Navigations-Elementen kann man sich die in mobilen Geräten integrierten Auswahl-Menüs zu nutzen machen.

Photoswipe Bildergalerie mit Swipe-Effekt

Mit Photoswipe kannst du eine Touchscreen-optimierte Bildergalerie auf deiner Webseite einbinden.

Select-Menü auf Smartphones

Ein Select-Menü wird auf Smartphones in einer neuen Ebene angezeigt.

3. Wichtige Tools

Um Webdesigns gleichzeitig für kleine mobile Geräte und große Desktop-Monitore zu optimieren, können ein paar praktische Helfer nützlich sein.

Responsive Webdesign

Mit Hilfe von CSS3 Media Queries und dem Viewport-Tag ist es möglich, einem Element bei verschiedene Bildschirmbreiten unterschiedliche CSS-Styles zuzuweisen. So kannst du dein Webseiten-Design von einem einspaltigen Layout für Smartphone zu einem komplexeren Layout anpassen. Natürlich sind mit Hilfe von CSS3 Media Queries jede Menge weitere Optionen geboten, wichtig ist aber immer, dass ein Layout sich vernünftig, also für den Benutzer nachvollziehbar anpasst. Schließlich soll sich ein Besucher, der eine Seite zum ersten mal am Desktop-Computer aufruft auch noch zurechtfinden, wenn er die gleiche Seite am nächsten Tag auf seinem Smartphone wieder besucht.

HTML5

Ein gutes Beispiel, wie man durch die Nutzung von HTML5 eine Webseite für mobile Geräte optimieren kann, sind die HTML5 Input-Typen. Wenn man z.B. den Input-Typ “email” für ein Email-Eingabeformular angibt, kann auf einem Touchscreen-Gerät gleich die entsprechend optimierte Tastatur mit @-Zeichen aufgerufen werden.

Hilfreiche JavaScript-Plugins

Es gibt etliche Plugins, die bei der Entwicklung eines responsive, mobile-first Webdesigns hilfreich sind. So kannst du z.B. mit Hilfe von jQuery Überschriften (FitText.js) und eingebettete Videos (FitVids.js)für dein responsive Webdesign optimieren. Auch für die Einbindung einer Bildergalerie gibt es Optionen, die sich automatisch an verschiedene Bildschirmgrößen anpassen.

Eine Übersicht nützlicher jQuery-Plugins findest du im Artikel “25 jQuery Plugins to help with responsive Layouts” auf dem Speckyboy-Blog. Bei der Verwendung von JavaScript-Plugins solltest du immer darauf achten, dass das Script nicht zu groß ist und auch eine Alternative zur Verfügung steht, wenn kein JavaScript aktiviert ist.

Adaptive Images

Mit der hier im Blog bereits vorgestellten Lösung „Adaptive Images“ ist es relativ leicht möglich, Bilder für die verschiedenen Bildschirmgrößen vorzubereiten. So müssen auf einem Smartphone mit langsamer mobilen Internetverbindung nicht die gleichen großen Bilder der Desktop-Version genutzt werden.

4. Resourcen zum Weiterlesen

Wenn du mehr über den Webdesign-Trend “Mobile First” erfahren möchtest, sind die folgenden Ressourcen fast schon “Must Reads” und bieten jede Menge weitere Infos über dieses spannende Thema.

  • Die Webseite von Luke W: Luke W ist quasi der Erfinder des “Mobile First”-Begriffs und auf seinem Blog findest du viele interessante Artikel, Tipps und Slides seiner Präsentationen zum Thema “Mobile First”.
  • Einen umfangreichen Überblick mit vielen praktischen Beispielen bietet das erst im Oktober erschienene Buch “Mobile First” von Luke W bei A Book Apart. Das Buch ist angenehm zu lesen und mit vielen praktischen Webseiten-Beispielen ausgestattet.

5. Mobile First-Webdesigns

Die bekannten amerikanischen Webdesigner Jason Santa Maria und Ethan Marcotte (Autor des Buches “Responsive Webdesign” bei A Book Apart) haben beide ihre Webseiten im Mobile First-Konzept umgesetzt.

Webdesign Jason Santa Maria

Mobile First Webdesign von Jason Santa Maria

Mobile First Webdesign von Jason Santa Maria

Webdesign Ethan Marcotte

Mobile First Webdesign von Ethan Marcotte

Mobile First Webdesign von Ethan Marcotte

Kennst du noch weitere Beispiele für Mobile First- Webdesigns oder hast du hilfreiche Anregungen, Tipps oder Fragen zum Thema “Mobile First”? Über deinen Kommentar freue ich mich sehr!

11 Kommentare

  1. Hi Ellen, das hast du gut beschrieben und diese Vorgehensweise hat einiges für sich, denn damit bist du so halbwegs gezwungen, deine Inhalte (Texte vor allem) gleich auch so zu gestalten, dass sie auf kleinen Anzeigegeräten auch noch einigermaßen gut aussehen. Da werde ich demnächst mal was längeres (das ist z.B. schon wieder Mist für Smart Phones etc.) zu schreiben …
    Nun gibt es natürlich einige Website-Betreiber, besonders WordPress-Nutzer, die eine schon länger existierende Site haben, die sie nicht so einfach mit einem “Responsive Design” neu gestalten können, weil sie dafür vielleicht keine Zeit, Lust oder Kenntnisse haben. Für die gibt es noch ‘ne andere Vorgehensweise (siehe http://bit.ly/tytxkh). Da muss man sich zwar auch “reinhängen”, ist aber sicher einfacher und schneller machbar, wie ein komplettes Redesign, wo es ja nicht unbedingt damit getan ist, ein bestehendes Theme einfach gegen z.B. eines von euren flexiblen Themes azszutauschen.

    CU, Dirk

  2. Pingback: Fünf Fragen (formerly known as Stöckchen)  /  Sauerstoff

  3. Pingback: Fünf Fragen von ad・formerly known as Stöckchen › tekshrek

  4. Pingback: Responsive Webdesign mit CSS3 Media Queries | Wirsing Maracuja

  5. Pingback: Responsive Webdesign mit CSS3 Media Queries | Wirsing Maracuja

  6. Pingback: Mobile First Design mit SASS für alte Internet Explorer umsetzen | Kau-Boys

  7. Pingback: Einsatz von Responsive Design | WebZapper

  8. Tja, wie man es auch dreht und wendet: diese ganze notwendige Responsivität und die ständig neuen Display-Formate bedeuten für uns Webdesigner/innen einen erheblichen Mehraufwand. Und daneben ändern sich die Webgestaltungs-Trends auch noch so alle zwei Jahre.

    Der Ansatz, vom kleinsten Gerät auszugehen und erst anschließend mehr Features für große Bildschirme einzubauen, ist schon nicht dumm – ich habe es bisher, ehrlich gesagt, immer umgekehrt gemacht. Ich werde meine Arbeitsweise aber nun doch mal langsam umstellen.

    Ich muss sagen, ich fand es gut, dass die (Desktop-) Bildschirme im Laufe der Jahre immer größer wurden. Also ich kenne ja sogar noch 14- oder 15-Zöller mit einer Auflösung von 640 x 480 oder 800 x 600 Pixeln. Und jetzt geht quasi alles wieder zurück zum kleinen Format, wobei natürlich die Auflösungen heute bei kleiner Fläche dennoch super sind und alles ist schön scharf. Aber zurück zum Thema.

    Ich finde, es gibt Branchen, bei denen es eigentlich auf ein bildgewaltiges Design ankommt. Stellt euch die Website für ein besonders gediegenes Restaurant vor. Da wirken riesige Close-ups der leckeren Gerichte einfach einladend. Wie will man das auf einem Mobiltelefönchen darstellen? Klar, die Speisekarte könnte dem Interessenten Hinweise geben, ob das Restaurant was für ihn/sie ist oder nicht. Aber ohne das, sagen wir, schöne, vollformatige Hintergrundbild – bekommt der potenzielle Gast denn dann wirklich Lust, das Restaurant aufzusuchen? Die Macht der Bilder ist ja nicht zu unterschätzen. Ja schön, die Macht einer guten (Werbe-) Sprache auch nicht, aber trotzdem.

    Kurz gesagt, ich finde es schwierig, möglichst alle Bedürfnisse des Kunden und möglichst alle zu vermutenden Intentionen von dessen Interessenten abzudecken. Und dann auch noch Preise zu gestalten, die einerseits den Kunden nicht sofort abwinken lassen und andererseits mir ein angemessenes Einkommen sichern.

  9. Rob

    @Torsten

    Ich verstehe zwar deine Gedanken aber ich denke auch dass ein User, der mit einem Smartphone unterwegs ist, andere Amsprüche an einer Internetpräsenz hat.

    Wenn ich mit meinem Phone eine Seite besuche, will ich a) Informationen, b) Etwas kaufen, c) ein Restaurant/Kneipe/bar finden wo ich/wir einkehren können.

    Da will ich eher keine riesige Bilder, sondern eine gute Beschreibung, eine Karte (Getränke und/oder Speisen und bitte nicht in PDF Format wenn die nicht responsive ist). Und wenn es Bilder gibt (Galerie mit Lightbox oder eine Slideshow) stört es mich eher weniger ob diese Bilder so berauschend sind wie auf dem Desktop.

    Ich will unterwegs ledigich schnell einen ersten Eindruck vermittelt bekommen und Dabei ist das Design der Seite eher irrelevant (sage ich als Webmann!) .

    Das ist ja auch im Grunde das Ziel von “Mobile First”. Sachen wegzulassen und nur die wesentliche Infos zu präsentieren. Twitter und Facebook Feeds, Likes unsw. haben imho nichts auf einem Phone zu suchen. Ist zwar immer wieder sehr schwierig den Kunden zu vermitteln, aber manchmal klappt das :)

    Seiten auf Phones sind reine Informationsdateien (ausser natürlich ein Shop) und nichts Anderes. Mit Bells and Whistles können wir auf Tablets (abgespeckt) und auf Smartphones (die volle Kanne) angeben.

    Man kannn aber auch mit sehr kleine Details auf einem Phone die Atmosphäre und die Klasse eines Lokals vermitteln :)

    Ich denke dass wir ein bissle umdenken und unterschiedliche Inhalte für unterschiedliche Geräte Geräte anbieten sollten.

    Wie heisst es so schön? Form follows function :)

  10. Wir arbeiten in unserer Agentur tagtäglich nach dem mobile-First-Prinzip und haben viele gute Erfahrungen gemacht.

    Meiner Meinung nach ist dieses Prinzip der beste Weg, um einfach Benutzerführungen zu entwickeln. Man konzentriert sich zuerst auf das Wesentliche und „vereinfacht“ das Webdesign. Unnötige Inhalte werden dem Smartphone-Nutzer gar nicht erst zur Verfügung gestellt und überfordern ihn nicht. Er erhält einfache Navigationsmöglichkeiten und gelangt so sehr schnell an die gewünschten Informationen. Dies muss ja nicht unbedingt bedeuten, dass man in der Desktop-Version nicht besondere Elemente oder Eyecatcher einbringen kann.

    Wenn man in flüssigen Maßen, wie z.B. Prozentangaben denkt, passt sich die Website der jeweiligen Bildschirmgröße an und man muss nicht nachdem ein neues Gerät auf den Markt gekommen ist, wieder aufarbeiten. Um dieses Ziel zu verfolgen, kann man beispielsweise das Framework „Foundation“ der Firma ZURB nutzen.

Schreibe eine Antwort