responsive webdesign vortrag vor dem zki arbeitskreis web - uni magdeburg

´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