Responsive web-design
•Download as KEY, PDF•
0 likes•851 views
A brief overview on responsive web design and some example links and articles.
Recommended
More Related Content
What's hot
Similar to Responsive web-design
Similar to Responsive web-design (20)
Recently uploaded
Recently uploaded (20)
Responsive web-design
- 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 we get here?
- 9. How did we get here? • „optimized for YourFavouriteBrowser and 1024x768“
- 10. How did we get here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024
- 11. How did we get here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com
- 12. How did we get here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com • fluid layouts
- 13. How did we get here? • „optimized for YourFavouriteBrowser and 1024x768“ • holy barrier of 1024 • redirect to m.yoursite.com • fluid layouts • margin: 1.125%; (#dislike)
- 14. My audience...
- 15. My audience... • uses iPhone3+4 and iPad,
- 16. My audience... • uses iPhone3+4 and iPad, • as well as android phones,
- 17. My audience... • uses iPhone3+4 and iPad, • as well as android phones, • as well as non iPad tablets,
- 18. My audience... • uses iPhone3+4 and iPad, • as well as android phones, • as well as non iPad tablets, • as well as netbooks,
- 19. My audience... • uses iPhone3+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!
- 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
- 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 this cool?
- 30. Why is this cool? • only one website
- 31. Why is this cool? • only one website • only a litte more effort
- 32. Why is this cool? • only one website • only a litte more effort • good user experience
- 33. Why is this cool? • only one website • only a litte more effort • good user experience • very flexible
- 34. Why is this cool? • only one website • only a litte more effort • good user experience • very flexible • open for future device development
- 35. Support? Check!
- 36. Support? Check!
- 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. Some hints...
- 42. Some hints... • elastic images and videos
- 43. Some hints... • elastic images and videos • use text columns for wide screens
- 44. Some hints... • elastic images and videos • use text columns for wide screens • not only move and resize, but remove, reorder or redesign (parts)!
- 45. live demo • http://share.queo-media.com/uxce11/ responsive
- 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/
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n