Your SlideShare is downloading. ×
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg

292
views

Published on

Einführung in die Besoderheiten des Responsive Webdesigns.

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
292
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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