In 5 Schritten: Von der aktuellen Website zum Responsive Webdesign

Mobile First und Responsive Webdesign sind für viele Firmen das Thema der Stunde. Aber welche Möglichkeiten gibt es, um eine bereits bestehende Website noch nachträglichen für Mobile und Tablet zu optimieren? Wir haben euch fünf Tipps zusammengestellt, mit denen ihr ohne viel Aufwand jede Website responsive macht.

Wer kennt es nicht – eine bestehende Website mit fixem Pixel-Layout und starrem CMS. Der Chef hätte gerne eine für Mobile und Tablet optimierte Website – ein kompletter Relaunch ist aus Budgetgründen aber kein Thema. Wir haben für euch fünf einfach umzusetzende Quickfixes zusammengestellt, um eine Website auch nachträglich noch responsive zu machen.

Übersicht:
1. Meta Viewport
2. Stylesheet anpassen
3. Navigation anpassen
4. Responsive Images
5. Content Choreographie

1. Meta Viewport

Als allererstes definiert ihr im <head>-Tag eurer HTML-Seite den Meta Viewport (Einsteigerinfos zu Meta Viewport). Diese eine kleine Zeile Code sorgt dafür, dass die Seite auf mobilen Endgeräten korrekt skaliert.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

2. Stylesheet anpassen

Der nächste Schritt erfordert etwas mehr Einsatz. Hinsichtlich eures Stylesheets habt ihr drei Möglichkeiten:

Variante 1 Variante 2 Variante 3
Beschreibung Altes Stylesheet erweitern
Ihr verwendet euer bestehendes Stylesheet weiter und ergänzt darin am Ende Media Queries für Mobile und Tablet:
Neues Stylesheet
Ihr legt ein neues Stylesheet für Mobile/Tablet an. Im <head> könnt ihr die Stylesheets dann ganz explizit für bestimmte Auflösungen ausliefern.
Die Extrameile
Ihr kombiniert beide Varianten. Dazu legt ihr ein Stylesheet mit allgemeingültigen CSS-Anweisungen an, sowie ein Stylesheet für Mobile, Tablet und Desktop. Das bisherige Desktop-Stylesheet wird in allgemeingültiges CSS (für Desktop/Tablet/Mobile) und ein Desktop-Stylesheet aufgeteilt. In den neuen Mobile-, Tablet- und Desktop-Stylesheet fügt ihr Media Queries für die jeweiligen Auflösungen ein.
Vorteile Euer bisheriges CSS, z.B. für Überschriften und Boxen wird direkt wiederverwendet Überflüssige CSS-Anweisungen der Desktop-Seite könnt ihr euch sparen. Alle Stylesheets sind sauber von einander getrennt und werden je nach Bedarf an das Gerät ausgeliefert.
Nachteile Ein großes Desktop-Stylesheet verursacht mobil ungewünscht lange Ladezeiten. Und im Mobile-CSS seid ihr dann eher damit beschäftigt die Desktop-CSS-Anweisungen zurückzusetzen bzw. zu überschreiben. Da ihr dann mit einer ungestylten Seite beginnt, natürlich höherer Zeitaufwand, um neues CSS zu schreiben. Großer Aufwand das Desktop-Stylesheet nachträglich aufzuteilen und auf mögliche Bugs zu überprüfen.
Anwendungsfall Variante 1 solltet ihr wählen, wenn eure Seite ohnehin relativ kompakt ist und ihr viele CSS-Anweisungen auch auf Mobile wiederverwenden wollt. Variante 2 solltet ihr wählen, wenn sich euer Desktop-Stylesheet über die Jahre extrem aufgebläht hat. Oder wenn das Design eurer Mobile-Website deutlich vom bisherigen Design abweicht. Variante 3 solltet ihr wählen, wenn ihr ausreichend Zeit und Willen mitbringt eine saubere Lösung zu erstellen.
Codebeispiel Code Beispiel Code Beispiel Code Beispiel

navigation-responsive-design

Die Hauptnavigation ist das zentrale Steuerelement einer Website. Umso umfangreicher die Anzahl der Navigationspunkte, desto größer ist die Notwendigkeit auch eine einfach zu benutzende Mobile-Lösung anzubieten.

Je nach Anwendungsfall kann sich die Lösung ganz unterschiedlich gestalten. Alles unter einem Button gruppiert, als Select-Auswahl oder fancy von links hereinsliden. SpeckyBoy.com zeigt in einem empfehlenswerten Artikel 15 passende jQuery-Plugins.

4. Responsive Images

Der nächste Code-Schnipsel ist banal, aber wirkungsvoll. Mit ihm skaliert ihr alle Bilder auf die jeweilige Breite des Displays und bewirkt die typische großflächige „Mobile-Optik“.

img {max-width: 100%; height: auto;}

5. Content Choreographie

Hinter dem schmissigen Begriff „Content Choreographie“ verbirgt sich die konzeptionelle Überlegung, wie sich die Inhalte bei den verschiedenen Auflösungen verhalten. Auf einem großen Desktop-Screen funktioniert ein 4-spaltiges Layout beispielsweise noch einwandfrei. Für Mobile sollte hingegen überdacht werden, welche Spalte den relevantesten Content beinhaltet und dieser entsprechend mehr Platz einräumen.

Hier ein paar kleine Gedankenstützen für verschiedene pragmatische Lösungen:
content-choregraphieQuelle: www.thismanslife.co.uk

Kurz zusammengefasst:

Mit den beschriebenen Quickfixes kann man eine bestehende Seite relativ schnell für mobile Endgeräte und Tablets flott machen. Jeder einzelne Nutzer eurer Website wird es danken, wenn Pinch & Spread mit Daumen und Zeigefinger ein Ende hat.

Habt ihr euch selbst schon an das Thema Responsive Design gemacht? Habt ihr noch Fragen dazu?

TAGS > , , , , , ,

  • Stefan.H

    Genau was ich gesucht habe. vielen dank. Ich habe eine HP mit Parallax effekt gestaltet und nun das problem, dass die Darstellung auf Mobilgeräten sehr unschön ist

    Antworten
  • Sixtus

    Wunderbar – ich möchte mich herzlich für diese gute und auch wichtige Information bedanken. Die Möglichkeit, eine Site (z.B. basierend auf wordpress) auch nachträglich anzupassen, kenne ich. Zumal die neuen wp-Themes sowas ja im Regelfall an Bord haben. Bei einer regulären html-Site war mir das aber unbekannt. Daher: Besten Dank! Nur: beim iPad funktioniert´s , beim Samsung Galaxy auch, beim Blackberry hingegen nicht. iPhone müsste ich prüfen, weil ich das Teil nicht vorliegen habe. Für Blackberry noch einen Tipp? Ich grüße Euch, six

    Antworten
  • Blume222

    Sehr schöne Zusammenfassung.
    Allerdings habe ich ein Problem- ich habe mit mehreren CSS Datein gearbeitet, kann allerdings nur zwei im Head-Bereich einbinden. Wie ist es möglich 3 Dateien (bis 480px, bis ca. 700px und alles, was größer ist) einzubinden?
    danke!

    Antworten
    • Andreas Schäfer

      Hallo Blume222,
      der Anzahl der verlinkten CSS-Dateien im Header ist theoretisch keine Grenze gesetzt. Du musst nur die entsprechenden Min-Device-Width und Max-Device-Width definieren, für die die CSS-Datei gelten soll. Dann kannst du auch mehr als 3, 4 oder mehr verlinken.

      Grüße!

      Antworten
  • Web-Zep

    Hallo,

    ein sehr schöner Artikel. Ich beschäftige mich gerade mit diesem Thema und Eure Tipps, ersparen mir viel Zeit.
    Super. Vielen Dank

    Antworten
  • marvin

    Ein Meta Viewport oder ein Stylesheet gehören nicht in einen Header-Tag, gemeint ist sicherlich der Head-Tag.

    Antworten
    • Andreas Schäfer

      Danke! Du hast natürlich Recht.

      Antworten
  • Monika

    Hallo

    Vielen Dank für die Informationen.

    Wie ist das mit älteren Websites, die noch mit Tabellen und Zellen
    erstellt wurden? Können diese auch responsiv gemacht werden
    ohne das Ganze neu aufzuziehen?

    Liebe Grüsse
    Monika

    Antworten
    • Andreas Schäfer

      Hallo Monika,

      bei Tabellen und Zellen stößt man natürlich irgendwann an natürliche Grenzen. Ein Tabellen-Layout lässt sich möglicherweise noch für Tablet-Screens anpassen. Ab Smartphone-Größe wird es dann aber extrem kniffelig, da einzelne Elemente nicht untereinander „gefloatet“ werden können.

      Neu aufziehen ist vermutlich die nachhaltigere und pragmatischere Lösung.

      Viele Grüße,
      Andreas

      Antworten
      • Sarah

        Hallo Andreas,

        habe dies beim Surfen entdeckt, klingt toll un einfach. Geht es auch bei concrete 5? Und wie einfach kann ich das umsetzen Schritt für Schritt umsetzen?

        Liebe Grüße
        Sarah

        Antworten
        • Andreas Schäfer

          Hallo Sarah,
          das CMS Concrete5 kenne ich leider nicht konkret. Sicher lassen sich die Schritte aber auch darauf übertragen. Check doch mal die Community .. sicher bist du nicht die erste, die ihre Seite responsive machen möchte. Vielleicht gibt es auch fertige responsive Vorlagen für Concrete5.

          Viel Erfolg!

          Antworten
  • Bremen

    Besten Dank !
    Genau so eine Anleitung habe ich schon lange gesucht nun steht der Mobilen Webseite nichts mehr im weg !

    Antworten
  • Detlev

    Ich komme nicht ganz klar wo genau / wie genau

    img {max-width: 100%; height: auto;} eingefuegt werden muss

    Antworten
    • Andreas

      Hallo Detlev,
      dieser Code-Schnipsel kommt in deine CSS-Datei.
      Genauso wie du einem

      oder einem

      CSS-Anweisungen zuweist, kannst du dies auch an alle Tags machen.
      Viele Grüße!
      Antworten
  • Tom

    Ein Sehr schöner Artikel, meine Frage oder wo nach ich immer noch suche ist die Umleitung zwischen Mobil und Desktop, wodurch wird das erkannt.

    Antworten
    • Andreas

      Bei einer responsiven Website gibt es keine Umleitung. Der Nutzer bleibt auf der gleichen Seite und das Layout der Seite passt sich an das Endgerät an.
      Wonach du suchst ist eine „serverseitige Weiche“, die je Auflösung entscheidet ob der Nutzer auf eine mobile Website oder auf die Desktop Website gelangt.

      Antworten
  • 3 Möglichkeiten Ihre Webseite mobilfähig zu machen - sichtbar-im-netz

    […] Alle Webseiten bestehen aus einzelnen HTML Seiten. Je nachdem, wie dieser HTML-Code gestaltet ist, können mobile Geräte die Seiten richtig erkennen und passend zur Größe des Bildschirms darstellen. Viele ältere Webseiten erfüllen diese Voraussetzungen nicht, da die dafür benötigten Funktionen noch nicht vorhanden waren. Um eine bestehende Seite entsprechend mobilfähig zu machen, muss also der programmierte Code aktualisiert werden. Dazu ist meist leider eine komplette Überarbeitung nötig. Nur dann kann eine optimale Darstellung auf den verschiedenen Bildschirmgrößen und eine optimale Bedienbarkeit erreicht werden. Hier ein guter Artikel zu den nötigen Details: http://www.dieproduktmacher.com/in-5-schritten-von-der-aktuellen-website-zum-responsive-design/ […]

    Antworten
  • Stefan

    Wirklich tolle und vor allem leicht verständliche Erklärung. Vielen Dank. Hast Du einen Tipp für ein gutes, kostenfreies wysiwyg-Programm (auch für Existenzgründer, also nicht nur mit Privat Lizenz) mit CSS Editor etc., mit dem ich meine Website neu bauen kann. (Hab leider alles in Tabellen gemacht, weil ich das noch von früher konnte) Im Idealfall in Deutsch, muss aber nicht sein. Danke
    Besten Gruß Stefan

    Antworten
    • Andreas

      Hallo Stefan,
      von einem WYSIWYG-Editor würden wir abraten. Die Code-Ergebnisse sind selten überzeugend.
      Wenn du visuell arbeiten möchtest, wäre unsere Empfehlung den Inspector deines Browsers, z.B. Chrome zu nutzen. Den findest du via Rechtsklick in die Seite (Elemente untersuchen / inspizieren). Dann siehst du die Auswirkungen deines CSS ebenfalls sofort.

      Viel Erfolg!

      Antworten
      • Jens

        Welchen Editor kannst du empfehlen? Wie mache ich aus meine Seite eine mobile?

        Antworten
        • Andreas

          Hallo Jens,

          deine Webseite basiert auf einem Tabellen-Raster. Das ist leider eine sehr veraltete Technologie für Webseiten. Daraus eine responsive Webseite zu machen ist praktisch nicht möglich.

          Unsere Empfehlung wäre, dass du deine Webseite z.B. mit WordPress neu baust: https://de.wordpress.com
          Wordpress ist ein kostenloses Content Management System für das es viele kostenfreie Themes (fertige Designs) gibt. Sehr viele sind responsiv und fast alle sind auch SEO-optimiert.
          Mit Plugins kannst du einfach weitere Funktionen kostenfrei dazubauen.

          Ich hoffe das hilft dir weiter!

          Antworten
  • Jaqueline

    Hallo Andreas, welche zwei Voraussetzungen gibt es, damit eine Website die Anforderungen für ein Responsive Design erfüllt? Mein Chef fragte danach und ich kann nirgends im Web eine Antwort finden.

    Antworten
    • Andreas

      Hallo Jaqueline, es gibt definitiv keine festen „zwei Vorraussetzungen“. Viel eher ist es eine breite Kombination aus Code und Design, die eine Seite zur responsiven Seite machen.

      Antworten
  • sabine

    Was sollte man als Auftraggeber vorab genauer definieren, wenn man eine responsive Webseite mit serverseitigen Komponenten möchte. Gibt es für responsive Webseiten klar definierte Standards oder kann das je nach Agentur qualitativ unterschiedlich umgesetzt werden? Kannst du auf eine Liste möglicher serverseitiger Komponenten verweisen?

    Antworten
    • Sibylle

      Hallo Sabine, Responsive Web Design passiert ausschließlich im Frontend (also clientseitig), und leider variiert hier die Qualität in der Umsetzung tatsächlich von Agentur zu Agentur sehr stark. Im Einzelfall kann man RWD mit serverseitigen Komponenten kombinieren (RESS). Dieser Artikel verschafft einen guten Überblick über mögliche use cases. Bilder können dank des neuen picture Elements in vielen Fällen auch ohne device detection mit verschiedenen Auflösungen ausgespielt werden. Device Detection Services wie z.B. NetBiscuits, 51Degrees oder mobiledetect unterscheiden sich in Umfang und Preis, die Wahl hängt da vom Einzelfall ab.

      Antworten
  • Vince

    Danke, ich habe damit meine Website für die mobile Ansicht eingerichtet! Vielen Dank!

    Vince

    Antworten
  • Michaela

    Danke für die ausführliche Beschreibung. Irgendetwas scheine ich bei der Umsetzung falsch zu machen. Unter Punkt 2 wollte ich die erste Lösung wählen, aber dann wird mir die komplette Media Query als Text angezeigt…

    Antworten
  • jquery mobile tutorial deutsch | bruinrow

    […] In 5 Schritten: Von der aktuellen Website zum Responsive Webdesign …25.09.2013 – Mobile First und Responsive Webdesign sind für viele Firmen das … zeigt in einem empfehlenswerten Artikel 15 passende jQuery-Plugins. …. weil ich das noch von früher konnte) Im Idealfall in Deutsch, muss aber nicht sein. […]

    Antworten
  • Jens Wolters

    Vielen Dank für Deinen Artikel. Prinzipiell ist das Vorgehen wie Du es beschreibst recht einfach. Wenn es allerdings darum geht, dass die einzelnen Komponenten (Suche bei Reiseportalen, Formulare, Anordnung von grafischen Elementen) so aufbereitet werden, dass es die Usability auf den Mobilgeräten wirklich optimal ist (soweit man das mit dem vorhandenen Markup erreichen kann) werden schon sehr gute CSS Coding Skills benötigt. Bei einer solchen Adaption schreiben wir in der Regel einige hundert Zeilen von Code. Ich stimme Dir zu, dass ein Relaunch in einigen Fällen die einzige Lösung ist (gerade bei der Verwendung von Tabellen). Ist die Seite allerdings nicht extrem alt überarbeiten wir diese in der Regel mit überschaubarem Aufwand.

    Antworten
  • WordPress Themes nachträglich Responsive machen | DenkArt

    […] Hier die Anleitung: In 5 Schritten: Von der aktuellen Website zum Responsive Webdesign […]

    Antworten
  • Maik

    Hey Zusammen, kann ich diese Webseite: http://gartenliege-holz.de (WordPress) Downloaden und als HTML Hochladen?

    Antworten
  • Martin Töws

    Hey, ich habe eine Frage. Und zwar würde ich gerne wissen wollen wo ich diesen Teil einfügen muss : „“ einfach in die Css Datei? Bin in Programmieren echt ne null. Würde mich über eine schnelle Antwort freuen.

    Antworten
    • Andreas

      Stand da noch was zwischen den Anführungszeichen? Evtl wird das hier automatisch geblockt, wenn es auführbarer Code ist.

      Antworten
  • Sami

    Sehr schöner Artikel top information gefällt mir gut.

    Antworten
  • Koliofotis

    Super die Seite – klingt trotzdem ziemlich kompliziert. Frage mich nun, würde das mit obiger Bewerbunsseite gehen, die responsiv hinzubekommen?
    Danke

    Antworten
    • Andreas

      Ich habe mir deine Seite und Code mal angesehen. Ja, das würde auch mit deiner Seite klappen.
      Wenn du noch nicht soviel Erfahrung hast, musst du dich natürlich etwas reinfuchsen. Aber möglich ist alles ;)
      Viel Erfolg!

      Antworten
  • Fabian

    Hi Andreas, wirklich ein sehr gelungener Artikel. Ich versuche davon etwas in eine Mobile Ansicht für das Microsoft Share Point zu verwenden. Meinst du das ist der richtige Weg oder muss ich da doch eher ganz wo anders anfangen?

    Danke dir

    Antworten
    • Andreas

      Hallo Fabian,
      mit MS Share Point habe ich leider keine Erfahrung. Meine Erwartung wäre aber, dass dort die gleichen Code-Snippets greifen sollten.
      Viel Erfolg!

      Antworten
      • Fabian

        Ich danke dir für den Hinweis

        Antworten
  • Maria Locher

    Hallo Andreas, könntest du dir meine website mal anschauen? Sie ist nur auf Tabellen aufgebaut. Würde es etwas helfen, wenn ich sie einfach verkleinere, um sie mobil-fähig zu machen oder muss ich sie komplett neu bauen mit stylesheets? Ein Traum wäre es, wenn ich nur Punkt 1 umsetzen müsste. Vielen Dank im Voraus für deine Hilfe! Maria

    Antworten
    • Andreas

      Hallo Maria,
      auch wenn das natürlich mit ein wenig Arbeit verbunden ist, wäre meine Empfehlung die Seite neu aufzusetzen.
      Das Tabellen-Layout lässt es leider nicht zu, dass die Seite mobil-fähig wird. Viel Erfolg!

      Antworten
  • Maria Locher

    Guten Morgen, Andreas,
    danke für die Antwort! Ich hatte es mir schon gedacht und bastle erst einmal alles auf css um. Ist es richtig, dass eine Fixierung der Boxen in Pixel nicht sinnvoll ist und wo kommt dann der Media Viewport hin und was sind Mobile Queries? Vielen Dank für deine Geduld! Liebe Grüße, Maria

    Antworten

Post a comment