Transcript
Page 1: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

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

Page 2: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

Joscha KrugGeschäftsführer

Page 3: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

Steffen JanyDesign

Page 4: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

appoder

mobiletemplateoder

responsiveWebdesign

Page 5: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

vorteilevon responsive Webdesign

nur eine URLSEO - kein doppelter ContentBarrierearmutkeine extra Lösung für dieses und jenesgeringerer Pflegeaufwand

Page 6: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s Problems

1024px

Page 7: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s Problems

1024px980px

Page 8: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s Problems

1024px980px

960px

Page 9: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s ProblemsFluid Grids statt fixer Größenangaben

ContentMenü

Header

Page 10: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s ProblemsBreaking Points

ContentMenü

Header

Page 11: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s Problemsform follows function - Contentaufbau

Content

Menü

Header

Page 12: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s ProblemsBilder Handling

Content

Content

Page 13: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

designer`s ProblemsBilder Handling

Page 14: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

„Fluid grid“Größen-Angaben relativ in %,

Schriftgrößen in em

Zielgröße : Context = Angabe in emdefault Context = 16px

Runden dem Browser überlassen

Page 15: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

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.

Page 16: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

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) {...}

Page 17: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

resp. imagesTechnische Ansätze - Basics

<div id=“logo“><img src=“logo.jpg“></div>

img { max-width: 100%;}

Page 18: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

resp. imagesTechnische Ansätze - Basics

Problemealle User laden gleiche, große BilderArtdirector-Problem

Austausch durch CSS führt ggf. zum Laden ALLER Bilder.

Page 19: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

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

Page 20: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

demoEin einfaches Beispiel

oxid-kochbuch.de

Page 21: Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

planbuildrunoptimize

marmalade GmbH

Leibnizstr. 25 39104 Magdeburg

t: +49 (0) 391 559 22 104 f: +49 (0) 391 559 22 106

[email protected]


Recommended