Click here to load reader

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

  • View
    321

  • Download
    0

Embed Size (px)

DESCRIPTION

Einführung in die Besoderheiten des Responsive Webdesigns.

Text of Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

  • 1. em 100%? Wie das?Einfhrung in responsive Webdesign

2. Joscha Krug Geschftsfhrer 3. Steffen Jany Design 4. App oder Mobile template oder responsive webdesign 5. Vorteilevon responsive Webdesign nur eine URL SEO - kein doppelter Content Barrierearmut keine extra Lsung fr dieses und jenes geringerer Pflegeaufwand 6. DESIGNer`s Problems 1024px 7. DESIGNer`s Problems 1024px 980px 8. DESIGNer`s Problems 1024px 980px 960px 9. DESIGNer`s Problems Fluid Grids statt fixer Grenangaben ContentMen Header 10. DESIGNer`s Problems Breaking Points ContentMen Header 11. DESIGNer`s Problems form follows function - Contentaufbau Content Men Header 12. DESIGNer`s Problems Bilder Handling Content Content 13. DESIGNer`s Problems Bilder Handling 14. Fluid Grid Gren-Angaben relativ in %, Schriftgren in em Zielgre : Context = Angabe in em default Context = 16px Runden dem Browser berlassen 15. Breakpoints Breakpoints sollten durch den Content vorgegeben werden und sich nicht an der Bildschrimgre festmachen. Es gibt keine allgemeingltigen Breakpoints! Angaben in den media-queries in em der Content gibt den Breakpoint vor. 16. Media Queries bersicht ber relevante Queries Name min- / max- Prefix width x heightx device-width x device-height x orientation- resolutionx Beispiel @media only screen tv and (min-resolution: 2dppx) { ... } 17. Resp. Images Technische Anstze - Basics

img { max-width: 100%; } 18. Resp. Images Technische Anstze - Basics Probleme alle User laden gleiche, groe Bilder Artdirector-Problem Austausch durch CSS fhrt ggf. zum Laden ALLER Bilder. 19. Resp. Images Technische Anstze kein unntiges Laden kann dem Artdirector-Problem begegnen einfaches Markup Aufwand bei der Implementierung 20. Demo Ein einfaches Beispiel oxid-kochbuch.de 21. Plan Build Run Optimize marmalade GmbH Leibnizstr. 25 39104 Magdeburg t: +49 (0) 391 559 22 104 f: +49 (0) 391 559 22 106 [email protected]

Search related