Wir über uns

Beispiele / Demos für responsive Webdesign mit und ohne CMS Anbindung

Simon Collison

Eines der bekanntesten Beispiele für Responsive Webdesign ist sicherlich die Website von Simon Collison. Der vergleichsweise einfache Aufbau der Website verdeutlicht eindrucksvoll und vor allem nachvollziehbar die Reorganisation der einzelnen Inhaltselemente bei einer Veränderung der Fenstergröße des Browsers.

Die drei Screenshots zeigen die unterschiedlichen Darstellungsweisen der Website, abhängig vom jeweiligen Ausgabegerät (Smartphone, Tablet, Desktop PC). Für weitere Informationen und eine Live –Demo klicken Sie auf einen der drei Screenshots.

  • Desktop PC-Ansicht

    In der Desktop Ansicht werden jeweils 4 Blöcke nebeneinander dargestellt. Sobald das Browserfenster verkleinert wird und eine Breite von 989px unterschreitet erfolgt eine Neustrukturierung der Inhaltsblöcke zu einem zweispaltigen Layout. In der CSS Datei ist dies unter den Media Queries zu finden:

    Standard CSS Angaben:

    div#page {
       width:946px;
       margin:20px auto;
       padding:30px 17px 10px 17px;
       background:url(../images/site/graph-tile.png) center top;
    }

    Media Queries für Tablet Reorganisation:

    @media (min-device-width:1024px) and (max-width:989px),
      screen and (max-device-width:480px),
      (max-device-width:480px) and (orientation:landscape),
      (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)

    Live Demo Desktop PC Ansicht (4 spaltig)
  • Tablet-Ansicht

    Die Tablet Variante stellt die Inhaltsblöcke in 2 Spalten dar. Wird das Browserfenster weiter verkleinert (oder die Website mit einem Smartphone aufgerufen) wird die Websitestruktur erneut reorganisiert und in ein einspaltiges Layout transformiert.

    CSS Anweisung für Darstellung auf Tablets

    div#page { width:468px; }
    [...]
    div#content_pri { width:400px; margin:0; padding:0px 30px 0 0px; border-left:0px dashed #DDD; }
    div#content_sec { display:none; }
    div#content_pri #post img { width:380px; height:auto; }
    div#content_pri #post object { width:380px; height:300px; }
    div#content_pri #responses p.response { font-size:13px; }
    [...]

    Media Queries für Smartphone Reorganisation:

    @media (min-device-width:1024px) and (max-width:509px),
    (max-device-width:480px) and (orientation:portrait)

    Live Demo Tablet Ansicht (2 spaltig)
  • Smartphone-Ansicht

    In der Smartphone Ansicht wird die Website als 1 spaltiges Layout dargestellt und ist damit die kleinste Größe, die in den CSS Anweisungen ausgewiesen wird. Neben den 3 vorgestellten Größen können beliebige Zwischengrößen angelegt werden. (z.B. TV Geräte oder Phablets)

    CSS Anweisung für Darstellung auf Smartphones

    div#page { padding:30px 0px 10px 0px; width:306px; }
    [...]
    div#content_pri { width:260px; margin:0; padding:0px 30px 0 0px; border-left:0px dashed #DDD; }
    div#content_sec, div#content_pri img.gravatar { display:none; }
    div#content_pri h2 { font-size:25px; }
    .journal#article div#content_pri h2 { font-size:25px; }
    div#content_pri ol#footnotes { margin-left:10px; }
    div#content_pri #post img { width:240px; height:auto; }
    div#content_pri #post object { width:240px; height:200px; }
    div#content_pri #responses p.response { font-size:13px; }
    [...]

    Live Demo SmartPhone Ansicht (1 spaltig)
Kreatives Design trifft auf modernste Technik! Wir zeigen Ihnen wie!
Responsive Webdesign Heidelberg

Unsere Kunden