Download as KEY, PPTX
Uploaded byMichael Grundkötter
Responsive web-design
- The document discusses responsive web design, which creates web pages that automatically adjust for viewing on different sized devices without needing separate mobile sites. - It provides tips for responsive design like using elastic images and videos, text columns on wide screens, and removing, reordering or redesigning parts for different screens. - Frameworks like Skeleton are recommended, which use fluid grids and media queries to adapt layouts responsively.
Responsive web-design
- 1.
- 2.
- 3. Who‘s that guy? •Michael Grundkötter, 27
- 4. Who‘s that guy? •Michael Grundkötter, 27 • @Grundi2
- 5. Who‘s that guy? •Michael Grundkötter, 27 • @Grundi2 • lead web developer at queo
- 6. Who‘s that guy? •Michael Grundkötter, 27 • @Grundi2 • lead web developer at queo • 63 people, based in Dresden, Germany
- 7. Who‘s that guy? •Michael Grundkötter, 27 • @Grundi2 • lead web developer at queo • 63 people, based in Dresden, Germany • loves html5 and css3
- 8. How did weget here?
- 9. How did weget here? • „optimized for YourFavouriteBrowser and 1024x768“
- 10. How did weget here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024
- 11. How did weget here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com
- 12. How did weget here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com • fluid layouts
- 13. How did weget here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com • fluid layouts • margin: 1.125%; (#dislike)
- 14.
- 15. My audience... • usesiPhone3+4 and iPad,
- 16. My audience... • usesiPhone3+4 and iPad, • as well as android phones,
- 17. My audience... • usesiPhone3+4 and iPad, • as well as android phones, • as well as non iPad tablets,
- 18. My audience... • usesiPhone3+4 and iPad, • as well as android phones, • as well as non iPad tablets, • as well as netbooks,
- 19. My audience... • usesiPhone3+4 and iPad, • as well as android phones, • as well as non iPad tablets, • as well as netbooks, • and of course „normal“ desktops (with both, 4:3 and 16:9 from 1024 up to 2000+ pixels!
- 20.
- 21.
- 22. GA: „top resolutions“ •60-80%: 1280+ px
- 23. GA: „top resolutions“ •60-80%: 1280+ px • 10-20%: 1024 px
- 24. GA: „top resolutions“ •60-80%: 1280+ px • 10-20%: 1024 px • <5%: mobile
- 25.
- 26. So: „responsive“? • good,clean frontend
- 27. So: „responsive“? • good,clean frontend • suitable for different screen sizes and devices
- 28. So: „responsive“? • good,clean frontend • suitable for different screen sizes and devices • without providing different websites
- 29. Why is thiscool?
- 30. Why is thiscool? • only one website
- 31. Why is thiscool? • only one website • only a litte more effort
- 32. Why is thiscool? • only one website • only a litte more effort • good user experience
- 33. Why is thiscool? • only one website • only a litte more effort • good user experience • very flexible
- 34. Why is thiscool? • only one website • only a litte more effort • good user experience • very flexible • open for future device development
- 35.
- 36.
- 37.
- 38. Support? Check! • IE9 •Webkit (Safari, Chrome, iOS, Android)
- 39. Support? Check! • IE9 •Webkit (Safari, Chrome, iOS, Android) • Firefox
- 40. Support? Check! • IE9 •Webkit (Safari, Chrome, iOS, Android) • Firefox • Opera
- 41.
- 42. Some hints... • elasticimages and videos
- 43. Some hints... • elasticimages and videos • use text columns for wide screens
- 44. Some hints... • elasticimages and videos • use text columns for wide screens • not only move and resize, but remove, reorder or redesign (parts)!
- 45.
- 46.
- 47.
- 48. Skeleton CSS framework •based on 960 grid system, 16 column layout
- 49. Skeleton CSS framework •based on 960 grid system, 16 column layout • good structure
- 50. Skeleton CSS framework •based on 960 grid system, 16 column layout • good structure • CSS reset and nice defaults (tabs, forms, buttons)
- 51. Skeleton CSS framework •based on 960 grid system, 16 column layout • good structure • CSS reset and nice defaults (tabs, forms, buttons) • very customizable
- 52. Skeleton CSS framework •based on 960 grid system, 16 column layout • good structure • CSS reset and nice defaults (tabs, forms, buttons) • very customizable • includes HTML5 stuff
- 53. Skeleton CSS framework •based on 960 grid system, 16 column layout • good structure • CSS reset and nice defaults (tabs, forms, buttons) • very customizable • includes HTML5 stuff • default media queries
- 54. Examples • http://www.about.com • http://naomiatkinson.com/ •http://www.alsacreations.fr/ • http://adifferentdesign.be/ • http://mediaqueri.es/
- 55. Further reading • http://www.alistapart.com/articles/responsive-web-design/ • http://designshack.co.uk/articles/css/20-amazing-examples-of- using-media-queries-for-responsive-web-design • http://designshack.co.uk/articles/css/build-a-responsive-mobile- friendly-web-page-with-skeleton/ • http://net.tutsplus.com/tutorials/html-css-techniques/ responsive-web-design-a-visual-guide/ • http://coding.smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design/