Kontaktieren Sie uns!

EINGENETZT

Im E-Port Dortmund
Mallinckrodtstrasse 320
44147 Dortmund-Hafen

0231 - 9921 9905
info@eingenetzt.net

Nutzen Sie die Kontakt-Buttons unten rechts!

Responsive Webdesign Titelbild

Responsive Webdesign erklÀrt: Was, Wozu und Wie?

Wer sich eine neue Website erstellen lassen möchte stolpert zwangslĂ€ufig frĂŒher oder spĂ€ter ĂŒber den Begriff “Responsive Webdesign”. Doch was genau ist damit eigentlich gemeint? In diesem Beitrag fasse ich zusammen, was man auf dem Weg zur neuen Website darĂŒber wirklich wissen muss.

Eines vorab: So gut wie alle neu erstellten Websites sind heute responsive und wenn Sie sich an eine seriöse Webdesign Agentur wenden wird diese Ihnen immer standardmĂ€ĂŸig eine Seite responsive Design erstellen.

Hier unser Fahrplan:

Was ist Responsive Webdesign?

Responsive Webdesign ist ein Paradigma/ Konzept, das zum Ziel hat mit einer Website möglichst jedem Nutzer die gleichen Informationen zur VerfĂŒgung zu stellen, unabhĂ€ngig davon wie dieser die Seite aufruft. Von anderen Konzepten grenzt es sich dadurch ab, wie dies erreicht wird.

Beim Responsive Webdesign wird fĂŒr alle GerĂ€tetypen, Browser und BildschirmgrĂ¶ĂŸen dieselbe Website ausgeliefert. Die gesendeten sind in allen FĂ€llen ĂŒberwiegend identisch, es können jedoch Informationen bezĂŒglich unterschiedlicher Darstellungsweisen und Quellen (z.B. Bilder) abhĂ€ngig von der BildschirmgrĂ¶ĂŸe und dem GerĂ€tetyp angegeben werden. Darin unterscheiden sich responsive Websites von veralteten Seiten, welche diese Informationen nicht mitliefern und dementsprechend nicht “Mobile Friendly” sind.

Praktikabel ist responsive Webdesign durch das heute vorherrschende Paradigma der Webentwicklung, welches eine Trennung von Inhalt und Design vorsieht. Inhalte verstehen Webbrowser in Form von HTML, Design kann Ihnen per CSS (Cascading Stylesheet) kommuniziert werden. CSS ist fĂŒr die unterschiedliche Darstellung abhĂ€ngig der DarstellungsgrĂ¶ĂŸe verantwortlich. 

Responsive vs. adaptive vs. liquide Website

Beim Adaptive Webdesign wird zwischen festen Breakpoints ein fixes Layout festgelegt, welches sich von Breakpoint zu Breakpoint Ă€ndert. 

Bei liquidem Webdesign verschieben sich die Inhalte je nach BildschirmgrĂ¶ĂŸe und nehmen dabei einen festen prozentualen Anteil ein. 

Da mir kaum ein Beispiel bekannt ist, in denen eines dieser Konzepte in Reinform umgesetzt wurde, wĂŒrde ich sowohl adaptive als auch liquides Design als Unterkonzepte des responsive Webdesign betrachten. (Wobei es sicherlich auch andere Meinungen gibt)

Responsive vs. mobile Websites

Responsive Webdesign ist also ein ĂŒbergeordnetes Konzept mit der RealitĂ€t des heutigen Internets umzugehen. Nutzer surfen im World Wide Web auf verschiedensten GerĂ€ten: Smartphones, Desktop-Computer, Tablets, Laptops oder Smart-TVs. Diese haben untereinander wiederum erhebliche Unterschiede, wie DisplaygrĂ¶ĂŸe, Bildauflösung, Webbrowser Technologie etc. 

Ein anderer Ansatz ist es fĂŒr Mobile EndgerĂ€te eine vollstĂ€ndig andere Version einer Webseite auszuliefern (eine mobile Webseite). Aufgrund der genannten Unterschiede mĂŒssen diese jedoch zumindest in begrenzten Maße ebenfalls responsive sein, da kein Website-Layout auf jedes Smartphone passt, manche Nutzer Ihre Handys auf quer drehen, etc. 

Heute kommt es am hÀufigsten vor, dass Webseiten komplett responsive sind und mobile Seiten bauen in aller Regel zusÀtzlich auf Responsive Design oder adaptive/ liquid Design. Fast alle neu erstellten Websites sind heute responsive.

Warum Responsive Design?

Die Frage warum heute fast alle Websites responsive Webdesign nutzen und auch Sie es tun sollten ist leicht zu beantworten. Die Anzahl unterschiedlicher GerĂ€tetypen, mit welchen auf das Internet zugegriffen werden steigt permanent. Der Anteil mobiler GerĂ€te liegt dabei seit Jahren ĂŒber 50% mit steigender Tendenz.

Responsive Webdesign ist heute die einfachste und gĂŒnstigste Art Websites fĂŒr ein möglichst breites Spektrum an GerĂ€ten zur VerfĂŒgung zu stellen.

Technische Umsetzung von responsive Design

Responsive Webdesign wird zum einen durch die Trennung von Inhalt und Design ermöglicht und zum anderen durch das Konzept der Media Queries, welches mit CCS3 einzug in die Cascading Stylesheets erhalten hat. So können abhĂ€ngig von der Darstellungsbreite unterschiedliche Designs ermöglicht werden. 

Was sind Breakpoints?

Herz der responsiveness sind sogenannte Breakpoints. Diese beziehen sich auf die Bildschirm- bzw. Webbrowser-Breite in Pixeln. Legt man einen Breakpoint z.B. bei 1000 Pixeln (px) fest, kann der Webdesigner festlegen was das Layout bei Darstellungen kleiner als 1000px anders machen soll als bei Darstellungen die grĂ¶ĂŸer sind.

Wie Viele Breakpoints verwendet werden mĂŒssen um eine Website möglichst gut darzustellen hĂ€ngt vom jeweiligen Layout und dem Anspruch der Entwickler ab. Zwischen den Breakpoints kann sich die Website liquide oder statisch verhalten, je nachdem wie es der Entwickler im Cascading Stylesheet definiert.

Es haben sich einige Breakpoints etabliert, welche hĂ€ufig anzutreffen sind. Das Maß 768px basiert z.B. auf dem allerersten IPad aus dem Jahr 2010. Obwohl dieses fĂŒr Entwickler kaum noch eine Rolle spielt wird der Breakpoint noch hĂ€ufig eingesetzt.

Media Queries

Media Queries sind ein Konzept, welches mit CCS3 einzug gehalten hat. Ihre Aufgabe ist es Breakpoints festzulegen – also die technische Umsetzung von Breakpoints. Es können Media Queries angelegt werden, welche entweder einen bestimmten Breakpoint als maximal- oder als minimal-Breite definieren. AbhĂ€ngig ob die Darstellungsbreite grĂ¶ĂŸer oder kleiner ist wird der Media Query dann ausgefĂŒhrt oder nicht.

Media Queries und entsprechende Breakpoints beziehen sich immer auf die Darstellungsbreite, da Höhenunterschiede in der Regel durch Scrollen ausgeglichen werden. 

Beispiele 1: Dieses Media Query blendet Elemente mit der Klasse “mobile-only” bei DarstellungsgrĂ¶ĂŸen ab 768 Pixeln aus.

@media screen and (min-width: 768px) {
.mobile-only {
       	display: none;
   	}
}

Beispiel 2: Dieses Media Query blendet Elemente mit der Klasse “desktop-only” bei DarstellungsgrĂ¶ĂŸen bis 768 Pixeln aus.

@media screen and (max-width: 768px) {
.desktop-only {
       	display: none;
   	}
}

JavaScript

Neben HTML und CSS verstehen Browser zu guter letzt noch JavaScript. Dies in der Webentwicklung immer beliebter und kann ergÀnzend bei der Umsetzung responsiver Designs eingesetzt werden.

Über Javascript können eine Menge Informationen zum jeweiligen Nutzer eingeholt und verarbeitet werden, wie z.B. GerĂ€t, Browser, BildschirmgrĂ¶ĂŸe uvm. In einigen FĂ€llen kann es erforderlich sein einen Touchscreen zu erkennen, z.B. falls Funktionen auf dem Hover mit der Maus basieren. 

Was auf den ersten Blick vielversprechend aussieht ist in der Praxis jedoch oft nicht so einfach und sehr fehleranfÀllig. AbhÀngig von GerÀt und Browser werden Informationen unterschiedlich bereitgestellt und es ist aufwendig Lösungen zu entwickeln, welche möglichst alle GerÀte abdecken und auch in ein paar Jahren noch funktionieren werden.

Es ist daher sinnvoll JavaScript eher als letzte Lösung bei der Umsetzung zu betrachten.

Responsive Images

Responsive Images helfen dabei je nach benötigter GrĂ¶ĂŸe unterschiedliche BildgrĂ¶ĂŸen zur VerfĂŒgung zu stellen. Es lassen sich zwar auch auf dem Handy HD Bilder darstellen, Ziel sollte es aber sein – gerade bei mobilen EndgerĂ€ten – Ladezeiten und Datenvolumen möglichst klein zu halten. 

Die Responsive Image Community Group hat zu diesem Zweck den <picture> HTML-Tag sowie das attribut “srcset” fĂŒr <img>-Tags entwickelt. Wie man diese einsetzt erfahren Sie in diesem großartigen Artikel.

Suchmaschinenoptimierung und responsive Webdesign – ist Ihre Seite “Mobile Friendly”?

Da Google großen Wert auf die Nutzersignale Ihrer Website legt besteht ein enger zusammenhang zwischen Webdesign und Suchmaschinenoptimierung (SEO). Der Suchmaschinengigant bewertet es negativ, wenn Nutzer nach einer Suche sofort wieder von Ihrer Website abspringen und auf ein anderes Suchergebnis klicken. Dies kann durch Layout, Design und sogar Ladezeiten Ihrer Seite maßgeblich beeinflusst werden. Wenn ein Nutzer mit dem Smartphone auf eine Seite kommt, die eigentlich nur auf dem Desktop-Bildschirm so richtig funktioniert, haben Sie in null-komma-nix ein negatives User-Signal.

Doch damit nicht genug. Google prĂŒft schon beim crawlen Ihrer Webseite, ob diese Probleme bei der mobilen Darstellung haben könnte. Wenn dem so ist, wird diese bei mobilen Suchen gar nicht erst, bzw. mit deutlich schlechteren Suchmaschinen Rankings ausgeliefert.

Das können Sie ganz leicht mit diesem Tool von Google herausfinden, indem Sie dort Ihre URL eingeben und testen.

Fazit

In den allermeisten FĂ€llen ist responsive Webdesign heute die richtige Wahl. Bietet Ihnen jemand eine Website an die nicht responsive ist, sollte er sehr gute GrĂŒnde dafĂŒr haben und diese mit Ihnen teilen. Ein Beispiel fĂŒr eine nicht vollstĂ€ndig responsive Seite aus unserem Portfolio ist diese extravagante Single Page Application, welche sich ab eine Breite von 768px vollstĂ€ndig liquide verhĂ€lt (Und das war so Kundenwunsch :-)).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Responsive Webdesign? Na Klar!
Von der Stange Individuell!