Responsive web design
Who‘s that guy?
Who‘s that guy?• Michael Grundkötter, 27
Who‘s that guy?• Michael Grundkötter, 27• @Grundi2
Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo
Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo • 63 people, based in Dresden, Germany
Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo • 63 people, based in Dresden, Germany• lov...
How did we get here?
How did we get here?• „optimized for YourFavouriteBrowser and  1024x768“
How did we get here?• „optimized for YourFavouriteBrowser and  1024x768“• holy barrier of 1024
How did we get here?• „optimized for YourFavouriteBrowser and  1024x768“• holy barrier of 1024• redirect to m.yoursite.com
How did we get here?• „optimized for YourFavouriteBrowser and  1024x768“• holy barrier of 1024• redirect to m.yoursite.com...
How did we get here?• „optimized for YourFavouriteBrowser and  1024x768“• holy barrier of 1024• redirect to m.yoursite.com...
My audience...
My audience...• uses iPhone3+4 and iPad,
My audience...• uses iPhone3+4 and iPad,• as well as android phones,
My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,
My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,• as well as netbooks,
My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,• as well as netbooks,• ...
GA: „top resolutions“
GA: „top resolutions“
GA: „top resolutions“• 60-80%: 1280+ px
GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px
GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px• <5%: mobile
So: „responsive“?
So: „responsive“?• good, clean frontend
So: „responsive“?• good, clean frontend• suitable for different screen sizes and  devices
So: „responsive“?• good, clean frontend• suitable for different screen sizes and  devices• without providing different web...
Why is this cool?
Why is this cool?• only one website
Why is this cool?• only one website• only a litte more effort
Why is this cool?• only one website• only a litte more effort• good user experience
Why is this cool?• only one website• only a litte more effort• good user experience• very flexible
Why is this cool?• only one website• only a litte more effort• good user experience• very flexible• open for future device ...
Support? Check!
Support? Check!
Support? Check!• IE9
Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)
Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox
Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox• Opera
Some hints...
Some hints...• elastic images and videos
Some hints...• elastic images and videos• use text columns for wide screens
Some hints...• elastic images and videos• use text columns for wide screens• not only move and resize, but remove,  reorde...
live demo• http://share.queo-media.com/uxce11/  responsive
Frameworks• http://www.getskeleton.com/• http://lessframework.com/
Skeleton CSS framework
Skeleton CSS framework• based on 960 grid system, 16 column layout
Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure
Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, for...
Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, for...
Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, for...
Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, for...
Examples• http://www.about.com• http://naomiatkinson.com/• http://www.alsacreations.fr/• http://adifferentdesign.be/• http...
Further reading•   http://www.alistapart.com/articles/responsive-web-design/•   http://designshack.co.uk/articles/css/20-a...
Upcoming SlideShare
Loading in …5
×

Responsive web-design

2,288 views
2,201 views

Published on

A brief overview on responsive web design and some example links and articles.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,288
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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
  • Responsive web-design

    1. 1. Responsive web design
    2. 2. Who‘s that guy?
    3. 3. Who‘s that guy?• Michael Grundkötter, 27
    4. 4. Who‘s that guy?• Michael Grundkötter, 27• @Grundi2
    5. 5. Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo
    6. 6. Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo • 63 people, based in Dresden, Germany
    7. 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. 8. How did we get here?
    9. 9. How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“
    10. 10. How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024
    11. 11. How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024• redirect to m.yoursite.com
    12. 12. How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024• redirect to m.yoursite.com• fluid layouts
    13. 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. 14. My audience...
    15. 15. My audience...• uses iPhone3+4 and iPad,
    16. 16. My audience...• uses iPhone3+4 and iPad,• as well as android phones,
    17. 17. My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,
    18. 18. My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,• as well as netbooks,
    19. 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!
    20. 20. GA: „top resolutions“
    21. 21. GA: „top resolutions“
    22. 22. GA: „top resolutions“• 60-80%: 1280+ px
    23. 23. GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px
    24. 24. GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px• <5%: mobile
    25. 25. So: „responsive“?
    26. 26. So: „responsive“?• good, clean frontend
    27. 27. So: „responsive“?• good, clean frontend• suitable for different screen sizes and devices
    28. 28. So: „responsive“?• good, clean frontend• suitable for different screen sizes and devices• without providing different websites
    29. 29. Why is this cool?
    30. 30. Why is this cool?• only one website
    31. 31. Why is this cool?• only one website• only a litte more effort
    32. 32. Why is this cool?• only one website• only a litte more effort• good user experience
    33. 33. Why is this cool?• only one website• only a litte more effort• good user experience• very flexible
    34. 34. Why is this cool?• only one website• only a litte more effort• good user experience• very flexible• open for future device development
    35. 35. Support? Check!
    36. 36. Support? Check!
    37. 37. Support? Check!• IE9
    38. 38. Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)
    39. 39. Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox
    40. 40. Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox• Opera
    41. 41. Some hints...
    42. 42. Some hints...• elastic images and videos
    43. 43. Some hints...• elastic images and videos• use text columns for wide screens
    44. 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. 45. live demo• http://share.queo-media.com/uxce11/ responsive
    46. 46. Frameworks• http://www.getskeleton.com/• http://lessframework.com/
    47. 47. Skeleton CSS framework
    48. 48. Skeleton CSS framework• based on 960 grid system, 16 column layout
    49. 49. Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure
    50. 50. Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, forms, buttons)
    51. 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. 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. 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. 54. Examples• http://www.about.com• http://naomiatkinson.com/• http://www.alsacreations.fr/• http://adifferentdesign.be/• http://mediaqueri.es/
    55. 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/

    ×