Mobile first & das beste Vorgehen bei der responsiven Konzeption – Newsletter 1/2015

2015 wird uns die Frage, wie unsere Websites auf allen möglichen Geräten gut aussehen, weiter auf Schritt und Tritt begleiten. Dazu im Folgenden einige Tipps – und am Ende eine Verlosung von Trainings-Videos zum Thema.

Vor sieben Jahren waren wir begeistert, dass wir auf dem Smartphone eine Website überhaupt ansehen konnten. Heute sind wir damit noch lange nicht zufrieden: Wir wollen eine Website nicht nur irgendwie auf dem Smartphone aufrufen können. Vielmehr soll sie gut aussehen, die wichtigsten Informationen leicht zugänglich darstellen und am besten soll sie noch Funktionen bieten, die unterwegs nützlich sind.

Für Konzepter und Designer ist das eine riesige Herausforderung. Eine Möglichkeit, diese anzugehen, ist das responsive Design.

Wichtig dabei: Unter „Design“ fällt dabei nicht nur die grafische Gestaltung – im Deutschen wird dieses Wort oft so genutzt. Vielmehr ist mit Design hier die gesamte Konzeption der Website gemeint. Eigentlich müsste man im Deutschen besser von Responsiver Konzeption sprechen.

Mir persönlich am sympathischsten ist die kürzeste Definition von responsiv:

Responsiv heißt: Geht gut auf allen Geräten.

Etwas genauer gesagt: Die Inhalte und Funktionen passen sich an das Ausgabegerät an, das der Nutzer gerade verwendet – sei es eine Smartwatch mit winzigem Display oder ein 4K-Fernseher mit einem Bildschirm so groß wie eine Tischplatte.

Außerdem passen sich Inhalte und Funktionen an die Situation an, in welcher der Nutzer gerade steckt.

Sie sehen: Es geht mehr um Konzeption als um Technik.

Wenn Sie es unbedingt technisch wollen, dann bedeutet responsiv, dass sich die Größe der Bilder an den verfügbaren Bildschirmplatz anpasst, und dass das Layout dafür sorgt, dass die Anordnung sinnvoll ist.
Das erreicht man, indem man media queries einsetzt – also CSS-Regeln, die abfragen, welche Eigenschaften das verwendete Gerät hat.

Eine Möglichkeit, responsive Designs umzusetzen, ohne dabei verrückt zu werden, ist der Ansatz mobile first.

Was heißt mobile first?

Verfolgt man den Ansatz mobile first, man macht als Erstes das Konzept für Mobilgeräte. Wenn das steht, dann entwickelt man die Anpassungen für größere Bildschirme.

So stellt man sicher, dass die Sites oder Anwendung auf allen Geräten gut funktionieren.

Früher hat man es immer so gemacht, dass man von dem größten möglichen Bildschirm ausgegangen ist und dann Schritt für Schritt die Versionen für immer kleinere Bildschirme erstellt hat. Dabei gibt es aber oft große Probleme und außerdem bekommt die Darstellung für Mobilgeräte dabei nicht die Bedeutung, die sie verdient.

Mobile first ist auch nicht ohne Tücken, aber dennoch eine Methode, die in vielen Fällen recht gute Ergebnisse liefert.

Der Erfinder von mobile first

Cover Buch Mobile FirstLuke Wroblewski hat 2009 das Buch Mobile First herausgebracht. Schön bescheiden beginnt er mit den Worten:

Dieses Buch ist nur eine kleine, einfache Idee.

Allerdings ist er durchaus ambitioniert – gleich danach schreibt Wroblewski:

Es verändert, wie wir ‚PC‘ definieren und wie wir mit dem Web umgehen.

Und tatsächlich hat Wroblewskis Buch großen Einfluss gehabt – und hat ihn immer noch. Auch wenn das Buch schon ein paar Jahre alt ist, es lohnt sich immer noch, es zu lesen.

Auf 123 Seiten beschreibt Wroblewski zunächst die Herausforderungen des mobilen Konzipierens und dann im zweiten Teil, wie man diese am besten meistert. Selbst wer das schon eine Weile macht, der findet in dem knappen, flüssig geschriebenen Buch einige Ideen, Tipps für Vorgehensweisen und Argumente für die Diskussion mit Auftraggebern und/oder Kollegen.

Das Buch gibt es nur direkt bei A Book Apart (und nur auf Englisch):
Luke Wroblewski: Mobile First, 9$ als E-Book

mobile first für Nerds

Cover Buch Responsive Design WorkflowDas Buch von Wroblewski ist für jeden, der mit dem Web arbeitet. Meine nächste Empfehlung ist nur für diejenigen, die sich mit CSS und HTML wohlfühlen. Alle anderen können gleich zum Ende dieses Newsletters springen.

In Responsive Webdesign Workflow zeigt Stephen Hay, wie er seine Website-Konzepte entwickelt. Das Besondere: Er beginnt gleich, HTML zu schreiben.

Das klingt ersteinmal wie das Gegenteil von allem, was ich und viele andere Konzepter empfehlen: erst das Konzept, dann Design und Coding.

Aber Hay schreibt seinen Code nicht für die fertige Site. Sondern er schreibt ihn, um die Konzepte zu entwicklen.

Auch wer selbst Websites codet, wird vielleicht überrascht sein, dass Hay tatsächlich jede einzelne Zeile von Hand schreibt. Aber wie gesagt, es geht ihm nicht darum, ausgefuchste, fertige Gestaltungen zu kreieren. Es geht ihm darum, zusammen mit dem Rest des Teams bzw. den Auftraggebern, ein Konzept zu entwicklen, das von Anfang an das responsive Design und die Inhalte in den Mittelpunkt stellt.

Statt also Wireframes (Seitenskizzen) zu zeichnen und viele statische Bilder zu erstellen, erstellt er von Anfang an interaktive Prototypen. Diese zeigen in der Tat oft besser, wie eine zukünftige Site funktionieren kann.

Aber dennoch habe zumindest ich viele Projekte, insbesondere bei großen Unternehmen, bei denen ich so nicht arbeiten kann. Zu sehr ist dort die traditionelle Arbeitsweise mit statischen Wireframes verwurzelt.

Trotzdem lohnt sich ein Blick in das Buch, es liefert viele Denkansätze und vielleicht lässt sich ja doch die ein oder andere Technik bei zukünftigen Projekten einmal ausprobieren.

Das Buch bei Amazon (22 €): Stephen Hay: Responsive Design Workflow

Noch mehr Tipps zum responsive design

Cover Videotraining Website-Konzeption Mobile first und responsive SitesWer sich die Dinge lieber per Video erklären lässt, dem kann ich auch weiterhelfen, und zwar mit dem Videotraining, das ich gerade für video2brain aufgenommen habe (Tochter der US-Trainings-Site lynda.com).

Es heißt:
„Website-Konzeption: Mobile first und responsive Sites
Websites planen, die auf jedem Gerät eine gute Figur machen“.

In gut eineinviertel Stunden bringe ich Ihnen die Grundlagen des responsiven Konzipierens näher. Nach den Grundlagen zu Geräten, Zielgruppen und Nutzungssituationen führe ich vor, mit welchen Werkzeugen ich arbeite, um Webseiten anzulegen und deren Inhalte sowie Funktionen festzulegen.

Schließlich sehen Sie in einem praktischen Beispiel, wie die Smartphone-, Tablet- und Desktop-Ansicht einer Website geplant wird (auf Basis von Wireframes/Seitenskizzen).

Wie Sie es schon von meinen anderen Projekten kennen, verlose ich auch diesmal etwas für Sie: Einmal den ganzen Kurs zum Download bzw. Streaming. Wie Sie bei der Verlosung mitmachen, lesen Sie am Ende des Newsletters.

Details und Probevideo zum Training: Website-Konzeption: Mobile first und responsive Sites

Und noch mehr: Video-Training User Experience (UX)

Cover Videotraining User ExperienceAußerdem habe ich noch eine Lizenz zu verschenken für das nächste Videotraining, das ich bei video2brain aufgezeichnet habe:
„User Experience – Einführung. Websites, Apps und Programme entwickeln, die ankommen“.

Darin erkläre ich, warum User Experience so wichtig ist, und warum sie so viel mehr ist als Usability. Wie Sie dafür sorgen, dass Ihre aktuelle Anwendung/Site eine gute UX hat.
Dazu stelle ich Ihnen die Methoden vor, um die es hier bei benutzerfreun.de auch immer wieder geht: vor allem Personas, User Journey Mapping, Card Sorting, Usability- und Prototyp-Tests.

Sie sehen, welche Techniken sich für Ihre Projekte anbieten, wie aufwendig sie sind, und welche Ergebnisse sie bringen.

In einer guten Stunde bekommen Sie so einen guten Überblick, welche Methoden ich bei der Konzeption derzeit einsetze und Ihnen ans Herz legen möchte. Wie Sie bei der Verlosung mitmachen, lesen Sie am Ende des Newsletters.

Details und Probevideo zum Training: User Experience – Einführung

Die Verlosung

Wollen Sie einen der beiden Kurse gewinnen, dann mailen Sie, schreiben Sie mir auf Twitter oder hinterlassen Sie einen Kommentar im Blog.
Schreiben Sie auch dazu, für welchen von beiden Kursen Sie sich interessieren.

Und als Trostpreis gibt es für 10 Teilnehmer einen 10-Tage-Testzugang, mit dem Sie alle Kurse von video2brain ansehen können – das sind derzeit über 60.000 Videos.

Jeder, der bis zum 25.1.2015 kommentiert, mailt oder zu diesem Thema twittert, nimmt an der Verlosung teil. Das natürlich gerne öfter, aber jeder nimmt nur einmal teil.

7 Gedanken zu „Mobile first & das beste Vorgehen bei der responsiven Konzeption – Newsletter 1/2015“

  1. Bereits seit 2009 (Anmeldung am 13.10.2009) erfreue ich mich an den regelmässig erscheinenden benutzerfreun.de-Newslettern. Seit etwa drei Monaten genieße ich das Leben als Digital Nomad, habe meinen Coprorate-Job, meine Wohnung, meinen 46″ Plasma-TV, meine Thunderbold-Screens und vieles mehr hinter mir gelassen und reise mit meinem Laptop und meiner Kreditkarte durch Asien. Über „Website-Konzeption: Mobile first und responsive Sites Websites planen, die auf jedem Gerät eine gute Figur machen“ würde ich mich riesig freuen! 🙂

    Antworten
  2. Hallo,
    wie auch den Newsletter würde ich mit Sicherheit auch Ihr Videotraining “User Experience – Einführung. Websites, Apps und Programme entwickeln” verschlingen 🙂
    Danke für die immer interessanten Themen!
    Jetzt drücke ich mir selbst die Daumen, um das Glück zu genießen, dieses Training zu gewinnen..
    Beste Grüße!

    Antworten
  3. Hallo,
    vielen Dank für den interessanten Newsletter. Ein interessanter Ansatz direkt mit dem Code zu beginnen um daraus mit dem Team ein Konzept zu entwickeln.
    das Videotraining “User Experience – Einführung. Websites, Apps und Programme entwickeln, die ankommen” scheint der Favorit zu sein. Meiner auch 😉

    Antworten
  4. Vielen Dank für’s Mitmachen per Kommentar, Twitter, Facebook & Mail – und vor allem für die freundlichen Worte! Die Gewinner sind gezogen und ich verschicke jetzt gleich die Benachrichtigungen.

    Antworten

Schreibe einen Kommentar