Responsive Webdesign was ist das?
Webdesign für alle und jeden?
Responsive Webdesign ermöglicht anpassungsfähige Website Layouts für unterschiedliche Ausgabegeräte wie Smartphones, Tablets, Notebook und Desktop Computer.
Vornehmlich für Internetnutzer mit mobilen Endgeräten, Smartphones und Tables, bedarf es eine neue Art der Web-Entwicklung. Durch den grafisch, dynamischen Aufbau von Webseiten reagiert das Responsive Webdesign auf die verschiedenen Bildschirmgrößen der Endgeräte. Im Folgenden werden einige Begriffe aus dem RWD beschrieben.
Responsive Webdesign
Unter RESPONSIVE-WEBDESIGN versteht man ein flexibles Design welches sich an das jeweilige Ausgabe-Medium anpasst. Zum Beispiel an ein Smartphone Display oder ein Laptop. Die Anpassungen sind dynamisch und die Übergänge sind flüssig.
Bei der Responsive-Entwicklung unterscheiden wir zwischen zwei gängigen Methoden. Die GRACEFUL-DEGRATION und das MOBILE-FIRST-PRINZIP.
Mobile-First-Prinzip
Bei dem Mobile-First-Prinzip wird zuerst das Design für ein Mobilgerät entwickelt. Das hat den Vorteil das beim Laden der Webseite nur Code geladen wird der für die Darstellung auf dem Mobilgerät benötigt wird. Dadurch wird der Quellcode nicht unnötig aufgebläht und wird klein gehalten und somit ein Performance Gewinn darstellt. Für größere Bildschirme wird der erforderliche Code nachgeladen. Aber immer nur der benötigte Code.
Es lässt sich aber nicht pauschalisieren welche Methode die Beste ist.
Kriterien sollte die Zielgruppe sein. Wird eine Webseite hauptsächlich von PC Nutzer besucht, weil zum Beispiel die Größe der Inhalte auf Mobilgeräten schwer darstellbar ist, dann ist das Mobile-First-Prinzip nicht empfehlenswert, da der Entwicklungsaufwand meist etwas größer ist.
Adaptiv-Design
Oftmals werden Adaptiv-Designs als responsive ausgegeben. Was diese aber nicht sind. Ein Adaptiv-Design beinhaltet in der Regel ein Design für ein Mobile-, Smartphone, eins für Tablets und eines die PC Version. Diese haben meist feste Breiten und sind für die jeweilige Auflösung optimiert.
Wie erkenne ich ein Adaptives-Design?
Die einfachste Möglichkeit, das Browserfenster vom Vollbild zum Mobilenansicht langsam verkleinern. Bei einem Adaptiven-Design wird die Darstellung durch einen harten Umbruch erkannt, sobald die nächst kleinere Auflösung erreicht ist. Hingegen sind die Übergänge bei einem Responsive-Design flüssig.
- Vorteil eines Adaptives-Design: einfacher Entwicklung.
- Nachteil: durch die festen Ausgabegrößen ist die Darstellung eingeschränkt. Bei der Vielzahl der Geräte auf dem Markt und deren unterschiedlichen Auflösungen müssen Kompromisse hingenommen werden.
GRACEFUL-DEGRATION
Graceful-Degration, hierbei wird das Design der Webanwendung klassisch entwickelt, für große Bildschirme. Anschließend werden die Breakpoint für kleinere Geräte gesetzt. Diese Methode hat den Vorteil, dass es für den Entwickler einfacher und schneller ist.
Nachteil, bei der Darstellung auf einem Smartphone, wird der gesamte Quellcode der Webseite geladen. Anschließend wird das Design auf die kleineren Auflösungen heruntergebrochen.
Media queries
Mediaqueries sind CSS Anweisungen die bei der jeweiligen Bedingung ausgeführt werden. Bedingungen können sein:
Ausgabemedium
Screen, Bildschirmausgabe
Print, Ausgabe für den Druck.
Screen width, Abfrage der Bildschirmauflösung
feste Werte
min, für minimal Bildschirmgröße
max, für maximal Bildschirmgröße
Breakpoints
Als Breakpoint bezeichnet man die Punkte in den Media-Queries an denen eine Design- Anpassung ausgeführt werden soll wenn die Bedingung erfüllt ist.
Beispielcode Media-Query mit einen Breakpoint by 40em [640 px]:
/* for iPhone 5 and similar (Portrait View)640px */
@media screen and (min-width:40.000em) {
Bedingung …
}
Breakpoint können in px oder em definiert werden.