Post on 20-Jun-2015
description
´em 100%? Wie das?Einführung in responsive Webdesign
Joscha KrugGeschäftsführer
Steffen JanyDesign
appoder
mobiletemplateoder
responsiveWebdesign
vorteilevon responsive Webdesign
nur eine URLSEO - kein doppelter ContentBarrierearmutkeine extra Lösung für dieses und jenesgeringerer Pflegeaufwand
designer`s Problems
1024px
designer`s Problems
1024px980px
designer`s Problems
1024px980px
960px
designer`s ProblemsFluid Grids statt fixer Größenangaben
ContentMenü
Header
designer`s ProblemsBreaking Points
ContentMenü
Header
designer`s Problemsform follows function - Contentaufbau
Content
Menü
Header
designer`s ProblemsBilder Handling
Content
Content
designer`s ProblemsBilder Handling
„Fluid grid“Größen-Angaben relativ in %,
Schriftgrößen in em
Zielgröße : Context = Angabe in emdefault Context = 16px
Runden dem Browser überlassen
breakpointsBreakpoints 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.
media QueriesÜbersicht über relevante Queries
Name min-/max-Prefixwidth xheight xdevice-width xdevice-height xorientation -resolution x
Beispiel@media only screen tv and (min-resolution: 2dppx) {...}
resp. imagesTechnische Ansätze - Basics
<div id=“logo“><img src=“logo.jpg“></div>
img { max-width: 100%;}
resp. imagesTechnische Ansätze - Basics
Problemealle User laden gleiche, große BilderArtdirector-Problem
Austausch durch CSS führt ggf. zum Laden ALLER Bilder.
resp. imagesTechnische 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 Ladenkann dem Artdirector-Problem begegneneinfaches Markup
Aufwand bei der Implementierung
demoEin einfaches Beispiel
oxid-kochbuch.de
planbuildrunoptimize
marmalade GmbH
Leibnizstr. 25 39104 Magdeburg
t: +49 (0) 391 559 22 104 f: +49 (0) 391 559 22 106
krug@marmalade.de