Responsive Web Design

2,009 views
2,004 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,009
On SlideShare
0
From Embeds
0
Number of Embeds
571
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. RESPONSIVE DESIGN <ul><li>Let’s talk user experience and content </li></ul>#bcnresponsive @ahsodesigns
  2. 2. TODAY WE WILL DISCUSS <ul><li>why responsive design </li></ul><ul><li>what is responsive design </li></ul><ul><li>when you use it </li></ul><ul><li>benefits to businesses and consumers </li></ul><ul><li>resources </li></ul>#bcnresponsive @ahsodesigns
  3. 3. <ul><li>questions at the end </li></ul><ul><li>our talk will be 20 minutes with 15 minutes for questions </li></ul>#bcnresponsive @ahsodesigns #bcnresponsive @ahsodesigns
  4. 4. Who we are John Housholder @ahsodesigns Joel Norris #bcnresponsive @ahsodesigns
  5. 5. WHO ARE YOU? <ul><li>Designer </li></ul><ul><li>Developer </li></ul><ul><li>Business owner </li></ul><ul><li>Marketer </li></ul><ul><li>Someone looking to kill an hour before the after party begins? </li></ul>@canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  6. 6. WHY RESPONSIVE WEB DESIGN? <ul><li>Our story </li></ul><ul><li>Local Taco mobile </li></ul><ul><li>WordPress Meetup: Plugins? are you serious? </li></ul><ul><li>WordPress Ecommerce sites </li></ul><ul><li>Mobile sites URLs </li></ul>@canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  7. 7. WHAT IS THE WEB TODAY?
  8. 8. <ul><li>Your site no longer sits on a desktop </li></ul>@canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  9. 9. WHAT IS RESPONSIVE? <ul><li>The approach that suggests that design and development should respond to the user ’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. </li></ul>@canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  10. 10. CONTENT DISTRIBUTION @canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  11. 11. QUESTIONS TO THINK ABOUT <ul><li>What is the purpose of the site? </li></ul><ul><li>Why are visitors coming to the site? </li></ul><ul><li>How easily can users access the information? </li></ul>#bcnresponsive @ahsodesigns
  12. 12. ARCHITECTURE: andersonwisde.com Notice: higher ranking content moves up!
  13. 13. ECOMMERCE: teegallery.com Notice: images are still large enough to touch
  14. 14. NEWS: bostonglobe.com Text Notice: easy to use pull down menus
  15. 15. PRODUCTS: ILLY ISSIMO Notice: content flows below, but is prioritized
  16. 16. NON PROFIT: dolectures.com Notice: personalization
  17. 17. RESTAURANT: foodsense.is Notice: content is redistributed
  18. 18. HOW DO USERS GET THEIR CONTENT?
  19. 19. OUR SITE: Essential Notice: content is redistributed and aligned
  20. 20. HOW do you make a site responsive? #bcnresponsive @ahsodesigns
  21. 21. 4 THINGS YOU MUST KNOW <ul><li>Media Queries </li></ul><ul><li>Flexible Images </li></ul><ul><li>Elastic Fonts </li></ul><ul><li>Fluid Interior </li></ul>#bcnresponsive @ahsodesigns
  22. 22. MEDIA QUERIES <ul><li>PROBLEM: many different screen resolutions </li></ul><ul><li>OLD SOLUTION: style sheets for mobile and other devices </li></ul><ul><li>SOLUTION: CSS3 </li></ul><ul><li>HOW?: </li></ul>#bcnresponsive @ahsodesigns
  23. 23. FLEXIBLE IMAGES <ul><li>PROBLEM: fixed sized images don ’t scale as the size of the screen changes </li></ul><ul><li>SOLUTION: max width and overflow hidden </li></ul><ul><li>HOW? </li></ul>#bcnresponsive @ahsodesigns
  24. 24. ELASTIC FONTS <ul><li>PROBLEM: users browsers font size are set differently </li></ul><ul><li>SOLUTION: code in ems based on percentage </li></ul><ul><li>HOW: show pixel to ems calculator </li></ul>#bcnresponsive @ahsodesigns
  25. 25. FLUID INTERIOR <ul><li>PROBLEM: many different screen sizes and resolutions. </li></ul><ul><li>SOLUTION: </li></ul><ul><li>HOW: </li></ul>#bcnresponsive @ahsodesigns
  26. 26. RESOURCES <ul><li>Article that started it all: http://www.alistapart.com/articles/responsive-web-design/ </li></ul><ul><li>Smashing Magazine Tools and Techniques: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ </li></ul><ul><li>21 tools for responsive design: http://www.netmagazine.com/features/21-top-tools-responsive-web-design </li></ul>#bcnresponsive @ahsodesigns
  27. 27. WHY NOT RESPONSIVE? <ul><li>http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu (responsive is not accessible) </li></ul>#bcnresponsive @ahsodesigns
  28. 28. INTERESTED IN LEARNING MORE? <ul><li>email me at [email_address] and I ’ll send you a code snippet reference document on responsive design and a link to today’s slides </li></ul><ul><li>CanThemes.com </li></ul><ul><li>Ahsodesigns.com </li></ul><ul><li>@ahsodesigns </li></ul><ul><li>@canthemes </li></ul>#bcnresponsive @ahsodesigns

×