Responsive Webdesign: Großes Kino auf kleinen Screens

Immer mehr User gehen mit dem Smartphone online. Ist eine Website nicht mobiloptimiert, sehen Besucher auf dem kleinen Bildschirm nur unleserliche Seiten – und sind frustriert. Mein Tipp: Nutzt responsive Webdesign und ihr seid auf der sicheren Seite.

Warum eure Website für Smartphones optimiert sein sollte? Weil die Zukunft der Online-Nutzung mobil ist:

Statistik: Anteil der Nutzer des mobilen Internets via Smartphone in Deutschland in den Jahren 2008 bis 2013 | Statista
2013 gingen 70 Prozent der deutschen User mit ihrem Smartphone ins Netz,
2008 waren es nur 13 Prozent. Mehr Statistiken findet ihr bei Statista.

Auch aus SEO-Sicht ist eine mobiloptimierte Website dringend zu empfehlen: Mobiloptimierung wird sehr wahrscheinlich ein Google-Rankingfaktor werden – oder ist es bereits.

In seinen mobilen Trefferlisten informiert Google mittlerweile die User, ob ein Online-Auftritt smartphonegerecht ist:


Mobiloptimierungs-Hinweis in den Google-Trefferlisten.

Mobiloptimierung & Benutzerfreundlichkeit

Navigation, Seitenspalten und Texte müssen auf einem Smartphone anders erscheinen als auf einem großen Bildschirm. Ebenso muss das Webdesign die verschiedenen Eingabemethoden berücksichtigen:
  • klicken und fahren (Maus) 
  • tippen und wischen (Tablet & Smartphone)
Immer noch gibt es viele Websites, die nicht mobiloptimiert sind. Eine Zumutung für den Smartphone-User: Er muss zoomen, schieben, drücken – bis ihn die Lust verlässt. Eine Gegenüberstellung:

➧ nicht mobiloptimiert – mein Nürnberger Lieblings-Kino macht es dem Smartphone-User richtig schwer:

Nicht-mobiloptimierte Website


➧ mobiloptimiert – die Website eures Bloggers:

Mobiloptimierte Website


Was ist responsive Webdesign?

Das englische Adjektiv "responsive" bedeutet in diesem Fall "reagierend". Responsive Websites reagieren auf die Bildschirmgröße des jeweiligen Endgerätes:
  • Laptops & Desktop-PCs (mittelgroßer bis großer Bildschirm)
  • Tablets (kleiner Bildschirm)
  • Smartphones (sehr kleiner Bildschirm)
Der große Vorteil von responsive Webdesigns: Ihr müsst eure Website nur einmal pflegen, die Änderungen werden für alle Bildschirmgrößen übernommen und optimal angezeigt.

Nutzt ihr stattdessen eine extra angelegte mobile Version eurer Website, müsst ihr doppelt pflegen: Ein und dieselbe textliche Änderung müsst ihr einmal für die "große" und einmal für die "kleine" Version vornehmen. Mit responsive Webdesign pflegt ihr dagegen nur einmal.

Wer hat's erfunden?

Der US-Webdesigner Ethan Marcotte prägte den Begriff "Responsive Webdesign" im Mai 2010 in einem Magazin-Artikel.

Er orientierte sich am Konzept der "responsive architecture": Räume reagieren auf die Bedürfnisse der Bewohner, indem sie zum Beispiel die Raumtemperatur anpassen oder das Licht dimmen.

Wie funktioniert responsive Webdesign?

➧ Grundlage sind sogenannte Media Queries ("Medienabfragen") – ein CSS3-Konzept, das verschiedene Designs je Ausgabemedium (PC, Laptop, Smartphone etc.) ermöglicht.

➧ CSS steht für "Cascading Style Sheets" ("Kaskadenstilentwurf" oder "gestufte Gestaltungsbögen") – eine Gestaltungssprache für elektronische Dokumente, die neben HTML eine der Hauptsprachen des World Wide Webs ist.

➧ CSS ermöglicht es, Inhalt und Layout bei der Webseiten-Gestaltung zu trennen.

Responsive Webdesign beachtet unter anderem folgende Faktoren:
  • Größe des Gerätes (PC, Tablet, Smartphone)
  • Bildschirmauflösung
  • Hoch- oder Querformat
  • Eingabemöglichkeiten (Tastatur, Touch, Sprache)

Und wer kann das basteln?

Natürlich die lieben Freunde aus der Coding- und Webdesign-Welt.

Ihr braucht eine Empfehlung? Meldet euch.

Fazit: Responsive Webdesign macht glücklich

Die mobile Internetnutzung wird zunehmen, mobiloptimierte Websites sind jetzt schon ein Muss. Mit responsive Webdesign wird eure Website allen Bildschirmgrößen gerecht – und das ohne Extra-Pflegeaufwand.

Klingt überzeugend? Ist überzeugend. ;-)

    Kommentare

    Mathias Sauermann

    Mathias Sauermann
    ...bloggt hier.
    >NEWSLETTER: Sichere dir die besten Beiträge meines Blogs >gratis und freibleibend!

    Vernetze dich mit mir auf FacebookTwitter Instagram.

    Weitere spannende Beiträge dieses Blogs findest du in den Rubriken:
    Online-Marketing-Tipps
    Digitalisierung

    Meinung!
    Onliner-Allerlei


    Titelbild: Digital Art unter CC0 1.0