Responsive Web DesignAnd other buzz words you need to knowTwitter: @rmonteroo #SANDcamp #RWD
Rob Montero - Achieve InternetRob is a senior        Achieve Internet is a leader inengineer at Achieve    the Enterprise ...
What isRWD?
Responsive Web DesignRWD is the conceptof developing awebsite in a way thatallows the layout toadjust according tothe user...
What is RWD?
What is RWD?
http://mattkersley.com/responsive/?http://sony.com
What is RWD?If you have a laptop, and a smartphone and a tablet you can see whatI’m talking about, by going here:•http://a...
Simon Collison
Food Sense
Clean Air Commute Challenge
FlexSlider
What is RWD?            More Examples•http://foodsense.is•http://earthhour.fr•http://w3conf.org•http://mediaqueri.es•http:...
OK!You get the point!     For more examples:    http://designmodo.com/ responsive-design-examples
Who needs RWD?You need RWD if:•You’re starting from scratch.•You want to keep costs low•You want it to work even when new ...
Why is it relevant?• 1.8 billion      internet connections in the world today.• 6.8 billion      people in the world today...
Why is it relevant?It’s about people, not devices•Yes your iPhone goes to great lengths tofacilitate browsing full sites, ...
Why is it relevant?• 1.3 billion       mobile internet users in the world today.         ( Includes WAP and “real web” )• ...
Why is it relevant?The future is now:•Babies have an easier time interacting withan iPad than with a magazine. To them a p...
Why is it relevant?It’s convenient:•You’re not at your desk, you are hungry. Inyour email you have a coupon to this cool n...
Why is it relevant?RWD allows us to tweak the layout andpresent the relevant information first:hours, phone number, direct...
Why is it relevant?• Avoids keyhole browsing.• You shouldn’t need a magnifying  glass to access web content on  your phone.
Hello Media Queries and CSS3In its essence a mediaquery consists of a mediatype and an expression tocheck for certaincondi...
CSS3 & Media QueriesThe absence of support for@media queries is in factthe first @media query.
CSS3 & Media QueriesIn your CSS:@media screen and (min-width: 480px) {  .content { float: left; }  .social_icons { display...
CSS3 & Media QueriesOn the header of your website:<link rel="stylesheet" href="this.css"media="(min-width: 960px)">
CSS3 & Media QueriesBy restricting CSS rules to a certainwidth of the device displaying a webpage, one can tailor the page...
Popular Viewport Sizes•320 x480 px:           •1024 x 768 px: iPad inSmartphone              landscape•480 x 320 px:      ...
How do we design for RWDSimple:Use the Mobile First Approachand favor ProgressiveEnhancement instead of thetraditional Gra...
Mobile First Approach
Mobile First Approach
Graceful Degradation• Focuses on building the website for the most  advanced/capable browsers.• Older browsers are expecte...
Progressive Enhancement• Focuses on the content. ( not browsers )• Think from the content out. ( Peanut M&M )  – Peanut: C...
Progressive EnhancementProgressive Enhancement consists of thefollowing core principles:•basic content and functionality s...
Progressive EnhancementBenefits:•Accessibility: PE pages are bynature more accessible.•SEO: Since basic content isalways a...
New toys for your sandbox1.   HTML5 Boilerplate (http://h5bp.com)2.   Responsive Web Design Sketch Sheets >>3.   GoldenGri...
New toys for your sandbox1.   320 and up >>2.   Gridless >>3.   Skeleton (http://www.getskeleton.com/)4.   ResizeMyBrowser...
Homework• http://www.w3.org/TR/css3-mediaqueries.• https://developer.mozilla.org/en/CSS/Media_qu  eries• https://github.co...
Credits•My first approach to RWDwas at a training given by thefolks at Four Kitchens•Make sure you check outtheir training...
Questions? Comments?              Rob Montero              • dgo.to/@rmontero              • @rmonteroo              • /in...
Hands OnDemo time:We will be demoing a couple ofexamples, one will be plain HTML5 + CSSusing h5bp and the other will be si...
Responsive Web Design_2013
Upcoming SlideShare
Loading in …5
×

Responsive Web Design_2013

706 views
648 views

Published on

Rob Montero, Senior Engineer, of Achieve Internet. Presentation on Drupal Responsive Web Design.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
706
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design_2013

  1. 1. Responsive Web DesignAnd other buzz words you need to knowTwitter: @rmonteroo #SANDcamp #RWD
  2. 2. Rob Montero - Achieve InternetRob is a senior Achieve Internet is a leader inengineer at Achieve the Enterprise Drupal market. Weve built some of the mostInternet. dynamic and expansive Drupal websites on the market today forOver 10 years of organizations such asexperience doing web Advanstar, Penton Media,development and 4+ Disney, NBC Universal, Viacom, FastCompany, Belladoing Drupal Pictures, and LifetimeTV.exclusively.
  3. 3. What isRWD?
  4. 4. Responsive Web DesignRWD is the conceptof developing awebsite in a way thatallows the layout toadjust according tothe user’s screenresolution (view port)using media queries.
  5. 5. What is RWD?
  6. 6. What is RWD?
  7. 7. http://mattkersley.com/responsive/?http://sony.com
  8. 8. What is RWD?If you have a laptop, and a smartphone and a tablet you can see whatI’m talking about, by going here:•http://achv.in/rwdrob•http://mattkersley.com/responsive/?{website_url}
  9. 9. Simon Collison
  10. 10. Food Sense
  11. 11. Clean Air Commute Challenge
  12. 12. FlexSlider
  13. 13. What is RWD? More Examples•http://foodsense.is•http://earthhour.fr•http://w3conf.org•http://mediaqueri.es•http://fourkitchens.com
  14. 14. OK!You get the point! For more examples: http://designmodo.com/ responsive-design-examples
  15. 15. Who needs RWD?You need RWD if:•You’re starting from scratch.•You want to keep costs low•You want it to work even when new devicesare released
  16. 16. Why is it relevant?• 1.8 billion internet connections in the world today.• 6.8 billion people in the world today.• 3.4 billion people with mobile devices today. ( roughly ½ the population of the planet)
  17. 17. Why is it relevant?It’s about people, not devices•Yes your iPhone goes to great lengths tofacilitate browsing full sites, but technologyshould be available to everyone, even thosewithout smart phones.•The most popular devices aren’t necessarilythe most used devices.
  18. 18. Why is it relevant?• 1.3 billion mobile internet users in the world today. ( Includes WAP and “real web” )• 1/3 of the global internet users access the internet only via mobile
  19. 19. Why is it relevant?The future is now:•Babies have an easier time interacting withan iPad than with a magazine. To them a printmagazine is just like a broken iPad.•Websites are not limited to laptops only.
  20. 20. Why is it relevant?It’s convenient:•You’re not at your desk, you are hungry. Inyour email you have a coupon to this cool newrestaurant. You pull up your phone, click onthe link and…•What would you expect to see?
  21. 21. Why is it relevant?RWD allows us to tweak the layout andpresent the relevant information first:hours, phone number, directions and perhapsa link to the menu.Meanwhile back at your desk, the restaurant’spage has all the bells and whistles you didn’tcare for while browsing on your phone.
  22. 22. Why is it relevant?• Avoids keyhole browsing.• You shouldn’t need a magnifying glass to access web content on your phone.
  23. 23. Hello Media Queries and CSS3In its essence a mediaquery consists of a mediatype and an expression tocheck for certainconditions of a particularmedia feature. The mostcommonly used mediafeature is width.
  24. 24. CSS3 & Media QueriesThe absence of support for@media queries is in factthe first @media query.
  25. 25. CSS3 & Media QueriesIn your CSS:@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on...}
  26. 26. CSS3 & Media QueriesOn the header of your website:<link rel="stylesheet" href="this.css"media="(min-width: 960px)">
  27. 27. CSS3 & Media QueriesBy restricting CSS rules to a certainwidth of the device displaying a webpage, one can tailor the pagesrepresentation to devices with varyingscreen resolution (view port).
  28. 28. Popular Viewport Sizes•320 x480 px: •1024 x 768 px: iPad inSmartphone landscape•480 x 320 px: orientation/netbookSmartphone in •Anything larger:landscape orientation Desktop/laptop•768 x 1024 px: computeriPad/tablet
  29. 29. How do we design for RWDSimple:Use the Mobile First Approachand favor ProgressiveEnhancement instead of thetraditional Graceful Degradation
  30. 30. Mobile First Approach
  31. 31. Mobile First Approach
  32. 32. Graceful Degradation• Focuses on building the website for the most advanced/capable browsers.• Older browsers are expected to have a poor, but passable experience.• Small fixes may be made to accommodate a particular browser ( they are not the focus )
  33. 33. Progressive Enhancement• Focuses on the content. ( not browsers )• Think from the content out. ( Peanut M&M ) – Peanut: Content marked up in rich semantic (x)html – Coated with rich creamy CSS – Added JS as the hard candy shell
  34. 34. Progressive EnhancementProgressive Enhancement consists of thefollowing core principles:•basic content and functionality should be accessible to allweb browsers•sparse, semantic markup contains all content•enhanced layout external CSS•enhanced behavior external JavaScript•end-user web browser preferences are respected
  35. 35. Progressive EnhancementBenefits:•Accessibility: PE pages are bynature more accessible.•SEO: Since basic content isalways accessible
  36. 36. New toys for your sandbox1. HTML5 Boilerplate (http://h5bp.com)2. Responsive Web Design Sketch Sheets >>3. GoldenGridSystem.com >>4. Foldy960 >>5. FitText (http://fittextjs.com/) >>
  37. 37. New toys for your sandbox1. 320 and up >>2. Gridless >>3. Skeleton (http://www.getskeleton.com/)4. ResizeMyBrowser.com >>5. Responsive Design Testing >> 6. Bonus: Media Query Indicator >>
  38. 38. Homework• http://www.w3.org/TR/css3-mediaqueries.• https://developer.mozilla.org/en/CSS/Media_qu eries• https://github.com/fourkitchens/train-rwd
  39. 39. Credits•My first approach to RWDwas at a training given by thefolks at Four Kitchens•Make sure you check outtheir training programs•http://fourkitchens.com
  40. 40. Questions? Comments? Rob Montero • dgo.to/@rmontero • @rmonteroo • /in/rmonteroEmail: rob@achieveinternet.com
  41. 41. Hands OnDemo time:We will be demoing a couple ofexamples, one will be plain HTML5 + CSSusing h5bp and the other will be similar butusing Drupal.If you want to play with this at home, feelfree to download the resources at:https://github.com/fourkitchens/train-rwd

×