Feines Webdesign

Responsive Webdesign

Für jedes Ausgabegerät die richtige Größe ?

Responsive Webdesign ist die technische Lösung für Webseiten mit flexiblem Grundgerüst und reaktionsfähigen, anpassungsfähigen Inhalten. Die Website-Inhalte und die Navigation passen sich flexibel an die Ausgabegröße des Mobilgeräts an. an.

Die Größen der Displays und die Auflösungen bei der Vielzahl der aktuell benutzten Ausgabegeräte wie Laptops, Netbooks, Desktop-PCs, Tablets, Smartphones u.s.w. variieren stark. Hinzu kommen noch die Ausrichtungen vertikal- oder horizontal (Portrait oder Landscape) und es werden stetig mehr.

Große Unterschiede in der Ausgabegröße

Der bisher übliche Gestaltungsprozess, ein statisches Screendesign mit festen Größen zu entwickeln, eignet sich nicht mehr. Die Größenangaben der Container und (Hintergrund-) Bilder sind nun relativ und damit flexibel anpassbar. Schriftgrößen und Zeilenabstände werden in % oder "em" angegeben.

Durch die flexible Anpassung des Designs, je nach Endgerät, bleiben die Inhalte in allen Fällen übersichtlich. Die Navigation, Seitenspalten, Texte und Bilder werden je nach der Größe und Ausrichtung des Displays angeordnet angepasst oder sogar ausgeblendet.

HTML5 und CSS3

Für den Aufbau von anpassungsfähigen Websites wird HTML5, CSS3 in Kombination mit Media Queries und Javascript verwendet. Die neuen strukturierenden Elemente in HTML5, wie z. B. nav, article, aside, header und footer eignen sich gut für den Aufbau anpassungsfähiger Webseiten.
Liste aller HTML- Elemente bei meiert.com »

Ältere Browser beachten

HTML5 und CSS3 funktioniert nicht für ältere Internet Explorer unter Version 9. Bei älteren Browsern sorgen sogenannte Browserhacks für eine gute Darstellung der Seiten.

Einen guten Einstieg zum Responsive Webdesign gibt es hier:
t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/ »

 

 

feines Webdesign