HTML/Tutorials/responsive Webdesign

Aus SELFHTML-Wiki
< HTML‎ | Tutorials(Weitergeleitet von Responsiv)
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
3x30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse Webdesign

Unter einer responsiven Gestaltung einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird. Übersetzt wird das englische Adjektiv „responsive“ etwa mit „ansprechbar“, „empfänglich“, „zugänglich“ oder „antwortend“, was auf den ersten Blick nicht sehr viel mit dem Internet zu tun hat.

Worauf sollte eine Webseite ansprechen? Nun, eine Webseite kann über media queries das Ausgabemedium analysieren und antworten, indem sie eine dem Medium angepasste Darstellung zeigt.


  1. Vorüberlegungen
    • Was ist das Web?
    • Mobile first!
    • Tastaturen, Mäuse und Touchgeräte
  2. Layoutkonzepte
    • Irrwege
    • Fixed Layout vs. Liquid Layout
    • responsives vs. adaptives Design
    • feste oder relative Größen
  3. bestehende Webseiten umbauen
    • HTML5-Grundgerüst
    • Vergessen Sie den Begriff Pixel!
    • Festlegungen für unterschiedliche Viewports
    • Sonderfälle


Siehe auch

  • Mit Flexbox können Sie auf feste Breitenangaben und floats verzichten.
Hauptartikel: CSS/Tutorials/Flexbox
  • Grid-Layout ist seit 2017 das Mittel der Wahl, um Inhalte in responsive Raster zu fassen, die sich dem Viewport automatisch anpassen.
Hauptartikel: CSS/Tutorials/Grid
  • ansprechende responsive Vorlagen, die Sie ohne jede Einschränkung nutzen können.
Hauptartikel: CSS/fertige_Layouts

Weblinks