Nachmittag

Responsive Designs

• Worum geht es?
• Ethan Marcotte, RWD
• Beispiel fluide mit Flexbox ohne media queries
• Intro auf W3C
• Was macht der Viewport meta Tag?
• Wie baue ich eine Media Query?
• Spezielle Media Queries
• Beispiel
• Umgang mit Bildern
• Flexbox Playground
• Frameworks Flexboxgrid
• Frameworks Bootstrap

Uebung Responsiveness

tag-5-1
Baut dieses Beispiel mit den unterschiedlichen Bildern für unterschiedliche Devices: http://responsiveimages.org/demos/variable-width/index.html Bilder als Zip

tag-5-2
Baut eine Seite mit Responsive Verhalten. Ihr könnt dazu eine extra Seite aufbauen oder ihr könnt auch eine eurer einfacheren Seiten nehmen. Die about page oder die mit dem Menü. Versucht, den Layoutfluss zu ändern. (Bsp. https://www.w3schools.com/html/html_responsive.asp) Beispiel Schriftrichtung

(Extra, optional wer will) Responsive Navigation
Lest das Tutorial zur Responsive Navigation auf W3C. Versucht, die Navigation auf eurer Prozess index Seite responsive zu machen. Tutorial Responsive Navigation

Aufgaben auf 2. Juli, 8:00

• Entwurf Songtext überarbeiten und für mindestens eine zusätzliche Devicegrösse anderes Verhalten entwerfen. Abgabe: Link zum Figma oder XD File in tag-5-1.html einbinden. Oder PDF erstellen und abgeben.
• Umsetzung Version 3 Songtext mit mindestens einer Animation. Beginn Umsetzung Responsive. Investiert mal circa 2 Stunden ins Thema Responsive und beschäftigt euch mit den Konzepten, versucht, eine Media Query (z.Bsp. für Tablet hoch) zu integrieren.
• Alles korrekt verlinken von eurer hier verlinkten Seite her: https://hzuellig.github.io/sfgz_gridandmodules/ (Stichwort Userführung)
• Alles auf Github in euren Ordner hochladen: https://github.com/hzuellig/sfgz_gridandmodules

Individueller Support und Besprechungen