Responsive Webdesign

Responsive Webdesign, auch kurz responsive Design genannt, hat sich unter Webdesignern inzwischen schon als Standard etabliert. Die zunehmende Nutzung mobiler Endgeräte wie Smartphones und Tablet PCs erfordert ein Umdenken im Designprozess. Complett-Service.de nimmt sich in diesem Beitrag der Thematik an und beleuchtet die verschiedenen Aspekte des responsiven Webiste Designs.

Responsive Webdesign passt sich der Displaygröße an.

Responsive Webdesign passt sich jeder Display-Größe an! – © Chasing Daisy by flickr.com

Webdesigner müssen im Designprozess umdenken, um Websites mit responsive Design zu entwickeln. Vor dem Hype der Mobilgeräte galt es, Designs für die unterschiedlichsten Breiten und Höhen eines (PC-)- Monitors mit verschiedenen Auflösungen zu erstellen. In den meisten Fällen wurde früher für die jeweils aktuelle Standardauflösung optimiert, so dass die Website auf Ausgabegeräten mit dieser Auflösung gut aussah. Lediglich für bestimmte Webbrowser wie den Internet Explorer waren zusätzliche Design-Direktiven mittels CSS oder Scriptsprachen erforderlich. Ohne den Einsatz von Hilfsmitteln wie JavaScript sahen die Seiten auf verschiedenen Monitoren auch unterschiedlich aus.
Aber mit der Entwicklung und dem Aufkommen neuer Technologien wie Webhandy, Netbook, Smartphone oder Tablets hat sich der Entwicklungsaufwand für eine Website erhöht. So haben Nutzer die Erwartung, dass eine Seite auf allen ihren Geräten volle Usability und den vollen Funktionsumfang bietet. Entwickler hatten nun die Aufgabe, für diese Geräte spezielle Seiten zu erstellen. Der Aufwand für die Entwicklung und Pflege einer Website wurde dadurch nicht geringer. Die Forderung nach Interaktivität und Dynamik an moderne Websites, deren Realisierung weit komplexer und aufwändiger als die Erstellung statischer Seiten ist, macht die designerische Arbeit ebenfalls nicht einfacher und bestimmt nicht billiger. Neue Lösungen sind gefragt.
Dazu zählen neue Elemente, Tags und Anweisungen in HTML5 und CSS3, wofür sich der Begriff des Responsive Webdesign durchgesetzt hat.

Was ist responsive Webdesign?

Seit geraumer Zeit macht der Begriff des „responsiven Webdesigns“ die Runde.
Der Begriff „responsive“, der mit „reagierend“ übersetzt werden kann, bedeutet, dass sich das Design einer Webseite der Ausgabegröße des verwendeten Gerätes dynamisch und wie von Geisterhand anpasst. Das heißt, der Entwickler der Website schafft die Möglichkeit, dass Inhalte einer Website gleichermaßen auf Desktop PC, Smartphone, Handy, Tablet PC oder auch TV ansprechend dargestellt werden.
Beim responsive Webdesign beginnt die Entwicklung beim kleinsten Ausgabegerät. Alle wichtigen Funktionen der Website müssen auch in der mobilen Version verfügbar und zudem gut bedienbar sein. Bei kleineren Veränderungen in der Skalierung einer Website ist es möglich, mit dem so genannten „Liquid Designs“ ein akzeptables Ergebnis zu erzielen. Bei diesem Design wird nicht mit festen Größenangaben gearbeitet, sondern mit Prozentwerten. Dies kann bei Texten einfach festgestellt werden, wenn diese beim Skalieren des Browsers dynamisch umbrechen. Dies ist aber bei zu großen Änderungen der Auflösung nicht mehr optimal.
Möchtest du dir nach dieser Einführung in das responsive Design ein paar Beispiel-Websites ansehen, empfehle ich die folgenden Sammlungen. Die Beispielseiten sind nicht nur responsive, sondern haben auch ein modernes Design: http://mediaqueri.es/ und http://web-lovers.de/responsive-webdesign-showcase/.

Responsive Webdesign und Media Queries

Damit Webseiten auf allen mobilen Geräten und darüber hinaus passend angezeigt werden, wird beim responsive Webdesign nicht für jedes Gerät eine eigene Website konzipiert. Vielmehr wird über eine Geräte-Abfrage die Art des verwendeten Geräts ermittelt. Auch Größe, Breite oder Orientierung könnenn festgestellt werden. Dies geschieht mit Hilfe so genannter „Media Queries“. Damit wird definiert, wie die Inhalte bei verschiedenen Auflösungen, bei verschiedenen Ausgabegrößen oder auch bei unterschiedlichsten Geräten gerendert werden. Das bedeutet, für unterschiedliche Ausgaben einschließlich der Printausgabe werden unterschiedliche Styles bereitgestellt.

Responsive Design für moderne Browser

Wichtig ist hierbei, dass der Browser, also die Software zur Darstellung von Websites, auch zu den genannten Abfragen in der Lage ist. In der Regel beherrschen aber alle modernen Webbrowser die neuesten Techniken. Wer Interesse an einer Optimierung für ältere Browser hat (z. B. IE6), muss sich im Internet vorerst nach geeigneten Hacks umsehen. Auf Besonderheiten einzelner Browser wird in diesem Tutorial nicht eingegangen.

Media Queries anwenden

Nun stellt sich die Frage, wie man mit responsive Webdesign eine Website so dynamisieren kann, dass sie sich den Endgeräten anpasst. Um dies zu erreichen, gibt es verschiedene Möglichkeiten und Varianten. Du kannst den Internetautritt so aufbauen, dass, sich die Elemente einer Website bei veränderter Skalierung des Browsers neu sortieren. Zum anderen kannst du in der Stylesheet-Datei so genannte „Media Queries“ verwenden. Mit Hilfe dieser Medienabfragen kann unter CSS3 das Ausgabegerät bzw. die darstellbare Breite und Höhe festgestellt werden. Auch können Media Queries dazu verwendet werden, spezielle Stylesheet-Dateien für das jeweilige Endgerät bereitzustellen.

Überlegungen zum Aufwand

Du musst davon ausgehen, dass in der Entwicklung eines Responsive Design-Modells mehr Zeit aufgewendet werden muss, da du ja möglicherweise responsive Templates für mehrere Geräte und Auflösungen entwickeln musst. Dieses Mehr an Zeit amortisiert sich aber während des Lebenszyklus der Website, da du einen wesentlich geringeren Aufwand für die Wartung dieser Seite – bezogen auf die unterschiedlichen Ausgabegeräte – hast.
Momentan wist du vielleicht von einer existierenden Website ausgehen, die du mit Hilfe der Überlegungen modifizieren möchtest, die dem responsive Webdesign zugrunde liegen. Bei der Planung einer neuen Website empfiehlt es sich aber, zuerst das Design für mobile Geräte zu entwerfen, da hierbei auf jeden Fall die wichtigsten Inhalte Berücksichtigung finden. Für größere Ausgabeflächen wie Notebooks oder Desktops können dann zusätzliche Inhalte hinzugefügt werden.

Responsive Webdesign entwickeln

Responsive Webdesign erstellen

Responsive Webdesign kann man mit Media Queries für jede Monitorgröße erstellen. – © jiraisurfer by flickr.com

Wie schon in der Einführung zu “Responsive Webdesign” erwähnt, versteht man unter Responsive Webdesign das Reagieren des Designs auf die Veränderungen der Ausgangsgröße der Website. Dies kann durch unterschiedliche Ausgabegeräte bzw. durch die Skalierung des Browsers hervorgerufen werden.
Einer der schönen Vorteile des „responsiven Webdesings“ ist, dass es nur noch in den seltensten Fällen erforderlich ist, horizontal zu scrollen. Das Scrollen ist beim Lesen äußerst störend. Nur wenn die Skalierung des Browserfensters bestimmte Vorgabewerte unterschreitet, ist dies möglich.
Da das vorliegende Tutorial im Zusammenhang mit der Entwicklung eines Joomla Templates zustande kam, wird hierbei auf die Struktur dieses Templates Bezug genommen und dafür ein responsive Webdesign entwickelt.

Entwicklungs-Richtung beim responsiven Webdesign

Noch ein Gedanke vorweg, der nicht von mir ist, mich aber überzeugt hat: Beim Entwickeln von Websites, deren Erscheinung vom responsive Webdesign bestimmt wird, ist es sinnvoll, den Weg vom Kleinen zum Großen zu beschreiten. Das heißt, zuerst wird das Design mit den Abmessungen für die kleinste Ausgabegröße, dann werden sukzessive die Designs für die größeren Formate entwickelt. Denn es ist wesentlich einfacher, zusätzliche Inhalte für größere Formate hinzuzufügen, wenn ich einmal die wichtigsten Inhalte auf der kleinsten Fläche untergebracht habe.
Dieser Weg steht jedoch nicht immer offen. Derzeit existieren die meisten Websites bereits mit einer Konzeption für größere Ausgabeformate, bevor für zusätzlich ein Design für Mobiles entwickelt wird. In diesem Fall muss natürlich vom Großen zum Kleinen entwickelt werden.

Welche Layouts gibt es beim responsive Webdesign?

Inzwischen gibt es viele unterschiedliche Formate von Displays, Bildschirmen und Monitoren. Die Forderung an das responsive Webdesign ist nun, möglichst allen diesen Abmessungen gerecht zu werden. Um die Schreibarbeit nicht ausufern zu lassen, habe ich für dieses Tutorial beispielhaft drei Horizontal-Maße gewählt:

Responsive Webdesign Größenschablone

Responsive Webdesign für verschiedene Devices muss unterschiedliche Abmessungen berücksichtigen. – © UXmosis by flickr.com

 

  • Desktop PC: über 1024 Pixel
  • Tablet PC: 1024 Pixel (z. B. Eipäd Querformat)
  • Smartphone: 320 Pixel (Hochformat)

Für Tablets und Smartphones könnte man natürlich auch noch die Querformate optimieren, wäre hier aber nur mehr Schreibarbeit und würde erst einmal keinen zusätzlichen Erkenntnisgewinn bringen. Bei der Diskussion des Codes werde ich auf Unterschiede in der Syntax eingehen. Klar, es gibt weitaus mehr Geräteabmessungen, für die man im Sinne des responsive Webdesign optimieren könnte, und es werden immer mehr. Zuerst sollen aber nur die wichtigsten Begriffe beispielhaft angesprochen werden, die ich selbst verstehen wollte.

Media-Types im responsive Design

Wie du vielleicht weißt, gibt es die Möglichkeit, für unterschiedliche Anwendungsfälle unterschiedliche CSS-Dateien für dieselbe Website bereitzustellen.
So ist es zum Beispiel unter CSS2 möglich, Styles sowohl für eine Website und ihre Browserdarstellung als auch Styles für eine Printversion bereitzustellen. Dies wird durch das Einbinden einer entsprechenden Datei über das „link“-Tag realisiert.

Listing 1:
  1. <linkrel= „stylesheets“ media= „print“ href= „print.css“ />
  2. oder
  3. <linkrel=“stylesheets“ media=“screen“ href=“style.css“ />

Diese Möglichkeiten wurden in CSS3 erweitert. Du kannst jetzt z. B. Die „screen“-Angabe durch Spezifizierungen ergänzen.
Im folgenden Beispiel-Code wurde der „head“ der Datei durch folgende Angaben ergänzt:

Listing 2:
  1. <head>
  2. <meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8″>
  3. <link rel=“stylesheets“ media=“screen and (min-width: 1100px)“ href=“mittel.css“ />
  4. <link rel=“stylesheets“ media=“screen and (max-width: 600px)“ href=“mittel.css“ />
  5. <link rel=“stylesheets“ media=“screen and (max-width: 320px)“ href=“mittel.css“ />
  6. </head>

Diese Dateien werden in Abhängigkeit der Ausgabebreite des Geräts zur Anzeige verwendet. Den Text der Demoversion habe ich mir nicht selbst aus den Fingern gesogen, sondern er wurde vom Blindtextgenerator erzeugt.
Zu Demonstrationszwecken kannst du folgenden Code in eine HTML-Datei einfügen oder dir die Beispieldateien über den Download Button herunterladen:

Listing 3 (Responsive Webdesign Demonstrations-Datei „demo.html“):
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv=“Content-Type“ content=“text/html; charset=UTF-8″>
  6. <link rel=“stylesheet“ media=“screen and (min-width: 600px)“ href=“breit.css“ />
  7. <link rel=“stylesheet“ media=“screen and (max-width: 600px)“ href=“mittel.css“ />
  8. <link rel=“stylesheet“ media=“screen and (max-width: 320px)“ href=“klein.css“ />
  9. </head>
  10. <body>
  11. <div id=“page“>
  12. <header>
  13. <h1>Testseite Responsives Webdesign</h1>
  14. </header><!– #header –>
  15. <article><!– #content –>
  16. <h2>Demotext mit Blindtextgenerator!</h2>
  17. <p>Dies ist ein Typoblindtext. An ihm kann man sehen,
  18. ob alle Buchstaben da sind und wie sie aussehen. Manchmal
  19. benutzt man Worte wie Hamburgefonts, Rafgenduks oder
  20. Handgloves, um Schriften zu testen. Manchmal Sätze,
  21. die alle Buchstaben des Alphabets enthalten – man nennt
  22. diese Sätze »Pangrams«. Sehr bekannt ist dieser:
  23. ….
  24. </p>
  25. </article><!– #content –>
  26. <aside>
  27. <h3>Sidebar für Submenüs, WErbung etc.</h3>
  28. <p>Testumgebung für verschiedenes</p>
  29. </aside><!– #sidebar –>
  30. <footer>
  31. &copy; albet@complett-service.de
  32. </footer><!– #footer –>
  33. </div><!– #page –>
  34. </body>
  35. </html>
Listing 4 (Responsive Webdesign Demonstrations-Datei „klein.css“):
  1. body{margin:0; padding:0;background-color:#666;}
  2. header{padding:0 3.125%; background-color:#AC30FF;color:#ccc;}
  3. #page{max-width:320px; margin:0 auto;}
  4. article{width:93%; padding:0 3.125%; float:none; background-color:#3D3DFF; color:#ccc;}
  5. aside{width:93%; padding:0 3.125%; float:none; background-color:#4989FF; color:#ccc;}
  6. footer{padding:0 3.125%; background-color:#444; color:gold}
Listing 5 (Responsive Webdesign Demonstrations-Datei „mittel.css“):
  1. body{margin:0; padding:0;background-color:#666;}
  2. header{padding:0 3.125%; background-color:#AC30FF;color:#ccc;}
  3. #page{max-width:660px; margin:0 auto;}
  4. article{width:93%; padding:0 3.125%; float:none; background-color:#3D3DFF; color:#ccc;}
  5. aside{width:93%; padding:0 3.125%; float:none; background-color:#4989FF; color:#ccc;}
  6. footer{padding:0 3.125%; background-color:#444; color:gold;}
Listing 6(Responsive Webdesign Demonstrations-Datei „breit.css“):
  1. body{margin:0; padding:0;background-color:#666;}
  2. header{padding:0 3.125%; background-color:#AC88FF;color:#ccc;}
  3. #page{max-width:960px; margin:0 auto;}
  4. article{width:55.52083333%; padding:0 3.125%; float:left; background-color:#3D88FF; color:#ccc;}
  5. aside{width:31.979166667%; padding:0 3.125%; float:right; background-color:#49aaFF; color:#ccc;}
  6. footer{clear:both; padding:0 3.125%; background-color:#444; color:gold}

Wie du siehst, wurden für drei unterschiedliche Geräte drei mehr oder weniger unterschiedliche Stylesheet-Dateien erzeugt und im Kopf der HTML-Datei eingebunden. Bei den Dateien wurden die Eigenschaften „float“ und „width“ verändert, damit die Elemente bei entsprechender Skalierung neu angeordnet werden.
Mit der prozentualen Angabe der Breite der HTML5 „Contentelemente“ „article“ und „aside“ wird außerdem beim Skalieren des Browsers das horizontale Scrollen weitgehend vermieden. Die Elemente passen sich automatisch an. Der Text wird kontinuierlich neu umgebrochen.

Gedanken zum media-Attribut

Du kennst inzwischen das Attribut „media“, das du bisher vor allem in Verbindung mit „screen“ oder „print“ kennengelernt hast, da es schon vor CSS3 existiert hat.

Media-Queries Beispiele

Listing 7:
  1. <link rel=’stylesheet‘ media=’screen and
    (min-width: 700px) and (max-width: 900px)‘ href=’css/mittel.css‘ />

In diesem Snippet wird die Datei „mittel.css“ in den „head“-Bereich deiner Datei eingelingt. Die Datei ist für die Bildschirmausgabe zuständig, solange die sichtbare Breite zwischen 700 und 900 Pixel liegt.

Listing 8:
  1. <link rel=“stylesheet“ media=“only screen and
    (max-device-width: 700px)“ href=“mittel.css“ />

In diesem Snippet wird das Schlüsselwort “only” verwendet. Es sorgt dafür, dass die Styles für ältere Browser nicht sichtbar sind.
Ist dir ab und zu „@import“ über den Weg gelaufen? Damit kannst du innerhalb von Styles weitere Dateien einbinden.
Möchtest du im Sinne des responsive Webdesign auch andere Abmessungen der Ausgabe berücksichtigen, hast du die Möglichkeit, weitere „CSS“-Dateien anzulegen und die Styles dort einzufügen. Damit hast du evtl. recht übersichtliche Dateien. Es gibt aber auch einen anderen Weg, bei dem die Medien-Abfrage direkt in die Stylesheet-Datei geschrieben wird, und zwar entsprechend deinem Bedarf.

Media Queries und responsive Webdesign

Im letzten Kapitel wurde die Abfrage des Ausgabemediums über den Media-Type realisiert. Für jeden Typ wurde eine separate, ausgelagerte Stylesheet-Datei aufgerufen. Die Type-Abfrage selbst erfolgte innerhalb von <link>-Tags im Head-Bereich der HTML-Datei.
Alternativ können alle Abfragen des Media Types und der Media-Eigenschaften (Media Queries) innerhalb von <style>-Tags erfolgen. In diesem Fall wird nur eine einzige CSS-Datei benötigt, die im head-Tag eingebunden wird. Es ist auch möglich, die Style-Angaben direkt in die HTML-Seite zu schreiben (in-page-Styles). Dies ist jedoch nicht zu empfehlen, da die HTML-Seite dadurch sehr unübersichtlich wird und auch die Performance darunter leidet.

Einige einfache Beispiele

Die Syntax lautet:
@media Bedingung{ /* hier werden Klassen und IDs wie bisher auch definiert */ }
Zwischen die geschweiften Klammern schreibst du nun wie bisher deine Styles. Unter Bedingung werden z. B. der Typ gesetzt und die Bedingungen, unter denen diese Medienabfrage gelten soll.
Beispielsweise könnte als Typ Bildschirm oder Drucker festgelegt sein. In diesem Fall würden die Media-Queries wie folgt aussehen:
@media screen{ #seite{width: 100%;}} Element mit der „ID“ Seite hat eine Breite von 100 % @media print { #seite{width: 66%;}} Und bei der Druckausgabe 66 %.
Um responsive Webdesign zu realisieren, kannst du in einer CSS-Datei so viele Medien-Abfragen verwenden wie du möchtest. Du kannst Bedingungen wie in den Snippets oben angeben und diese auch miteinander verknüpfen, sei es mit „and“ oder mittels Kommata, was letztlich eine Oder-Verknüpfung darstellt.
@media all and (max-width: 700px) and (min-width: 500px), (min-width: 1200px){/*meine Styles*/}
Diese Ausgabe gilt für alle Typen (“all”), der Rest sollte selbstklärend sein. Zu beachten ist eigentlich nur, dass z. B. „min-width“ für „kleiner gleich“ (Breite) steht und „max“ dementsprechend für „größer gleich“. Innerhalb der Abfragen kann auch das „not“-Schlüsselwort verwendet werden.

Praktisches Beispiel

Ersetze im Kopf deiner „HTML“-Datei alle „Link“-Dateien durch:

Listing 9
  1. < span>link rel=“stylesheet“ media=“screen“ href=“style.css“ />

Leg eine neue Stylesheet-Datei „style.css“ mit einem Texteditor an und füge folgenden Code ein:

Listing 10
  1. body{margin:0; padding:0;background-color:#666;}
  2. header{padding:0 3.125%; background-color:#AC88FF;color:#ccc;}
  3. #page{max-width:1024px; margin:0 auto;}
  4. article{width:55.52083333%; padding:0 3.125%; float:left; background-color:#3D88FF; color:#ccc;}
  5. aside{width:31.979166667%; padding:0 3.125%; float:right; background-color:#49aaFF; color:#ccc;}
  6. footer{clear:both; padding:0 3.125%; background-color:#444; color:gold}
  7. @media screen and (max-width:480px) {
  8. article, aside {
  9. width: 93.750%;
  10. float: none;
  11. }
  12. }

Wie du siehst, wurde in dieser Datei an Zeile 7 eine Medienabfrage eingefügt. Dort wird die Eigenschaft „float“ für die Elemente „article“ und „aside“ aufgehoben. Die Elemente ordnen sich untereinander ein, was gewünscht ist.

Bandbreite und Performance beim responsiven Design

An dieser Stelle sei noch einmal darauf hinweisen, dass bei der Adaption einer Website an responsive Webdesign bzw. der Entwicklung einer Version für Smartphones heute die Performance und speziell die Datenübertragung im Funkbereich eine entscheidende Rolle spielt, egal über welchen Mobilfunkanbieter die Datenübertragung erfolgt.
Es genügt nicht nur darauf zu achten, dass Browser all die neuen Features beherrschen, die du eingebaut hast. Du musst außerdem bei Mobiles auf die Ladezeiten der Seiten achten. Wer sich mit Suchmaschinenoptimierung befasst, weiß, wie wichtig die Performance einer Website für das Ranking in den Suchergebnissen bei Google ist.
Videos und Bildern kommt in diesem Zusammenhang immer ein besonderes Augenmerk zu, da sie einen großen Teil des Traffics bei der Datenübertragung verursachen können. Es wäre daher nicht sinnvoll, ein Bild auf dein Handy zu übertragen und zu skalieren, das den ganzen Desktop-Monitor ausfüllt.

Bilder einbinden und automatisch an die Websites anpassen

Weiter oben war die Rede vom so genannten “Liquid Design”, bei dem sich Textinhalte von Websites der Browsergröße durch kontinuierlich veränderten Zeilenumbruch anpassen. Diese Anpassung der Bildgröße an das Ausgabemedium gilt es im responsive Webdesign auch für Images zu realisieren.
Websites, bei denen sich der Text anpasst, Bilder aber ihre Größe beibehalten und damit das Design der Seite zerstören, sind nicht besonders schön. Für dieses Problem gibt es eine einfache und elegante Lösung:
img { max-width: 100%; height: auto; }
Füge diesen Code in deine Stylesheet-Datei bzw. Styles ein und Bilder passe ihn an.
Wie oben beschrieben, sollte ein Mobile ein entsprechendes Bild angeboten bekommen. Dies kannst du über das „background-image“ für das body-Element realisieren. Hintergrundbilder auf Mobiles werden ja nicht skaliert, sondern haben eine feste Größe.

Bild als Background-Image einbinden beim responsive Webdesign

Solltest du gerade kein passendes Bild zum Experimentieren mit responsive Webdesign zur Hand haben, kann ich dir die Website von dummy-image-generator empfehlen, auf der du dir ganz zügig ein Bild beschaffen kannst.
Hast du dich für ein Hintergrundbild entschieden, kannst du die Größe des Hintergrunds über „background-size“ festlegen. Hier hast du wiederum verschiedene Möglichkeiten. Die Einstellung des Hintergrunds kann mit den Schlüsselwerten „cover“ oder „contain“ erfolgen, die du dem Style-Element „background-size“ zuweist. „background-size:100% auto“ ist eine weitere Möglichkeit.
Füge nun in die Stylesheet-Datei folgenden Code ein bzw. ergänze den „body“-Style folgendermaßen:

Listing 11
  1. body{font-size:96%; line-height: 150%;margin:0; padding:0;background-color:#666;
  2. background-image: url(http://http://zoom-berlin.de/wordpress/wp-content/uploads/2011/12/Buddy-Baeren-Parade.jpg);
  3. background-position: center center;
  4. background-size: cover;
  5. background-repeat: no-repeat;}

Wenn du die oben beschriebenen Werte für background-size ausprobierst, stellst du Folgendes fest:
1. „Contain“ skaliert das Bild so groß wie möglich, aber nicht größer als seine natürliche Größe. Ist die Abmessung des Browsers kleiner als die Bildmaße, wird das Bild skaliert.
2. „Cover“ skaliert das Bild so klein wie möglich, aber füllt das Element vollständig aus.
3. Background-size:100% auto; macht nach meiner Beobachtung das Gleiche wie Cover.
4. Mit den Werten für „background-size“ kannst du aber auch noch etwas herumspielen (50 %, 100 % usw.).

Responsive Webdesign testen

Du möchtest deine Website mit dem neuen responsive Webdesign auch einmal auf verschiedenen Geräten testen, besitzt aber, so wie ich, nicht diverse Mobiles, Tablet PCs und Monitore in verschiedenen Ausführungen und Auflösungen? Dann mach das doch online!
Hier eine Auswahl von Websites für das online Testen des responsive Webdesign:

  1. royal-media.com
  2. jamus.co.uk
  3. mattkersley.com
  4. testiphone.com

Website (für IE und Firefox) liefert die augenblicklichen Abmessungen des Browsers zuück: „resizemybrowser.com“

Mehr zum Thema responsive Webdesign

In diesem Tutorial konnte ich nicht alle Aspekte des responsive Webdesign umfassend behandeln. Deshalb habe ich die Punkte angesprochen, die am meisten zu meinem eigenen Verständnis des „Responsive Webdesign“ beigetragen haben und hoffe, dass diese auch dir weiterhelfen. Nun mache ich mich an die Umsetzung des Erprobten bei meiner eigener Website „Complett-Service.de“.
Sollten mir noch Ergänzungen zum Thema Responsive Webdesign einfallen, werde ich dieses Tutorial natürlich weiterführen.

Für alle, die gleich weiterlesen wollen, hier meine Buchempfehlungen zum Thema responsive Webdesign:

Responsive Webdesign - Buchempfehlung Das Buch Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen richtet sich an Designer moderner, reaktionsfähiger Websites. Erklärt werden die neuen HTML5-Attribute, Workflows und Vorgehensweisen bei der Entwicklung. Fortgeschrittene werden sich über die Kapitel zur Formulargestaltung, Typografie und Layoutgestaltung freuen. Freunde der Suchmaschinenoptimierung erhalten Tipps zur Performance-Steigerung.

Mobile Webseiten: Strategien, Techniken, Dos und Don'ts für Webentwickler. Das Buch Mobile Webseiten: Strategien, Techniken, Dos und Don’ts für Webentwickler versteht sich als Leitfaden für Entwickler mit Vorkenntnissen, die mobile Websites professionell gestalten wollen. Wer kein Papier mit sich herumtragen möchte, kann den Leitfaden außerdem als kostenloses E-Book herunterladen.

Schreibe einen Kommentar

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