Einführung in die Besoderheiten des Responsive Webdesigns.

1. ´em 100%? Wie das?Einführung in responsive Webdesign

2. Joscha Krug
Geschäftsführer

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 Lösung für 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 Größenangaben
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“
Größen-Angaben relativ in %,
Schriftgrößen in em
Zielgröße : 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
Bildschrimgröße festmachen.
Es gibt keine allgemeingültigen 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
height x
device-width x
device-height x
orientation -
resolution x
Beispiel
@media only screen tv and (min-resolution: 2dppx) {
...
}

17. Resp. Images
Technische Ansätze - Basics
<div id=“logo“><img src=“logo.jpg“></div>
img {
max-width: 100%;
}

18. Resp. Images
Technische Ansätze - Basics
Probleme
alle User laden gleiche, große Bilder
Artdirector-Problem
Austausch durch CSS führt ggf.
zum Laden ALLER Bilder.

19. Resp. Images
Technische Ansätze
<noscript data-large=“Image-large.jpg“
data-small=“Image-small.jpg“
data-alt=“Image“>
<img src=“Image-small.jpg“ alt=“Image“ />
</noscript>
kein unnötiges 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
krug@marmalade.de