´em 100%? Wie das?Einführung in responsive Webdesign
Joscha Krug
Geschäftsführer
Steffen Jany
Design
App
oder
Mobile
template
oder
responsive
webdesign
Vorteilevon responsive Webdesign
nur eine URL
SEO - kein doppelter Content
Barrierearmut
keine extra Lösung für dieses und...
DESIGNer`s Problems
1024px
DESIGNer`s Problems
1024px
980px
DESIGNer`s Problems
1024px
980px
960px
DESIGNer`s Problems
Fluid Grids statt fixer Größenangaben
ContentMenü
Header
DESIGNer`s Problems
Breaking Points
ContentMenü
Header
DESIGNer`s Problems
form follows function - Contentaufbau
Content
Menü
Header
DESIGNer`s Problems
Bilder Handling
Content
Content
DESIGNer`s Problems
Bilder Handling
„Fluid Grid“
Größen-Angaben relativ in %,
Schriftgrößen in em
Zielgröße : Context = Angabe in em
default Context = 16px
Ru...
Breakpoints
Breakpoints sollten durch den Content
vorgegeben werden und sich nicht an der
Bildschrimgröße festmachen.
Es g...
Media Queries
Übersicht über relevante Queries
Name		 	 min- / max- Prefix
width 						 x
height						x
device-width				 x...
Resp. Images
Technische Ansätze - Basics
<div id=“logo“><img src=“logo.jpg“></div>
img {
	 max-width: 100%;
}
Resp. Images
Technische Ansätze - Basics
Probleme
alle User laden gleiche, große Bilder
Artdirector-Problem
Austausch durc...
Resp. Images
Technische Ansätze
<noscript data-large=“Image-large.jpg“
data-small=“Image-small.jpg“
data-alt=“Image“>
<img...
Demo
Ein einfaches Beispiel
oxid-kochbuch.de
Plan
Build
Run
Optimize
marmalade GmbH
Leibnizstr. 25
39104 Magdeburg
t: +49 (0) 391 559 22 104
f: +49 (0) 391 559 22 106
...
Upcoming SlideShare
Loading in …5
×

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

384
-1

Published on

Einführung in die Besoderheiten des Responsive Webdesigns.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

  1. 1. ´em 100%? Wie das?Einführung in responsive Webdesign
  2. 2. Joscha Krug Geschäftsführer
  3. 3. Steffen Jany Design
  4. 4. App oder Mobile template oder responsive webdesign
  5. 5. Vorteilevon responsive Webdesign nur eine URL SEO - kein doppelter Content Barrierearmut keine extra Lösung für dieses und jenes geringerer Pflegeaufwand
  6. 6. DESIGNer`s Problems 1024px
  7. 7. DESIGNer`s Problems 1024px 980px
  8. 8. DESIGNer`s Problems 1024px 980px 960px
  9. 9. DESIGNer`s Problems Fluid Grids statt fixer Größenangaben ContentMenü Header
  10. 10. DESIGNer`s Problems Breaking Points ContentMenü Header
  11. 11. DESIGNer`s Problems form follows function - Contentaufbau Content Menü Header
  12. 12. DESIGNer`s Problems Bilder Handling Content Content
  13. 13. DESIGNer`s Problems Bilder Handling
  14. 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. 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. 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. 17. Resp. Images Technische Ansätze - Basics <div id=“logo“><img src=“logo.jpg“></div> img { max-width: 100%; }
  18. 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. 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. 20. Demo Ein einfaches Beispiel oxid-kochbuch.de
  21. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×