Flexibles skalbierbares Layout

Dieses Thema im Forum "Webdesign" wurde erstellt von SidDasFaultier, 17. August 2012 .

Schlagworte:
  1. 17. August 2012
    Zuletzt bearbeitet: 17. August 2012
    Hey Rushler,

    ich habe mir überlegt meiner Website einen Relaunch zu verpassen.

    Nun würde ich gerne ein flexibles/skalierbares Layout umsetzen.

    Das bedeutet:
    Je nach Browserfenster-Größe sollte sich Layout (Also einzelnen divs), Schriftgröße und die Größe der Bilder verändern. Also das komplette Bild der Website sollte sich vergrößern oder verkleinern.
    Und muss ich hier nun eine feste Positionierung der divs festlegen oder müssen diese auch flexibel sein? oder geht beides? was ist besser/praktischer?

    Meine Frage lautet nun lässt sich das überhaupt so umsetzten und wenn ja was muss ich beachten und welche "Technik" anwenden? Vielleicht habt ich da ein paar Tipps&Links

    EDIT: Achja, und wie sieht es da mit der Browserkompabilität aus? Macht da einer mukken oder läuft das in jedem Browser?

    Vielen Dank!
     
  2. 18. August 2012
    AW: Flexibles skalbierbares Layout

    Ja die Zeit ist aus meiner Sicht reif dafür, um ein solches Projekt zu realisieren. Zu diesem Thema (Responsive Design 1) gibt es viele gute Ansätze und tgl. kommen neue hinzu. Die Technik die sich herraus kristalisiert hat trägt den Slogan "Mobile First" und setzt auf responsive Webdesign das mit Hilfe von CSS3 Media Queries (2) CSS Stylesheet für verschiedene Bildschirmformate selektiert bereitstellt wobei das Ausgangs Design für Smartphone gestaltet wird.

    Auch die Browserkompabilität stellt aus meinen derzeitigen Wissenstand keinerlei Hinternisse mehr dar, da Dank HTML5Shim (3) ein Javascript eingebunden wird mit dem es möglich ist sogenannte Polyfills den Browsern beizubringen(4), die mit HTML 5 nicht anfangen können.

    Anfangen würde ich mit einen gut strukturierten Template, basierend auf HTML5 Boilerplate (5). Als Leading System würde ich derzeit auf Wordpress setzen das man sowohl als Blog/News System als auch als CMS verwenden kann. Dann jedoch muss du anhand deiner Vorgaben abwegen für welches Blank Template du dich entscheidest - eine kleine Übersicht (6) findet man schnell im Web.

    1. Responsive Design
    2. CSS3 Media Queries Video
    3. html5shim
    4. HTML 5 Video Workshop
    5. HTML 5 Boilerplate
    6. Responsive WordPress Blank-Themes in der Übersicht

    Weitere Interessante Links zum Thema:

    CSS3 & HTML5 - Einstieg in die neuen Webstandards
    Was können CSS3 Media Queries wirklich leisten? | Elmastudio
    Mobile-first Webdesign: Hilfreiche Tipps und Erfahrungswerte | Elmastudio
     
    1 Person gefällt das.
  3. 20. August 2012
    AW: Flexibles skalbierbares Layout

    Vielen Dank für deine Tipps&Links.

    Ich werde mich da mal reinlesen und reindenken!
    Und wieder melden.

    Falls jemand weitere Tipps hat - immer her damit!
     
  4. 20. August 2012
    Zuletzt bearbeitet: 20. August 2012
    AW: Flexibles skalbierbares Layout

    ich kann nur von meinen erfahrungen sprechen, aber ein skalierbares spalten-layout is extrem pain-in-the-ass, es sei denn du nutzt die neuen flexbox eigenschaften, da geht das ganz gut - ist aber fehleranfällig, da es noch experimentell und nicht in allen browsern implementiert ist.

    ansonsten würde ich für desktop/tablet fixed-width anbieten (von 980 - 1200px) und separat ein ein-spaltiges layout für mobile (320 - 480px portrait, bis zu 800px landscape)

    und nicht vergessen das ganze auch für retina zu optimieren.
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.