1 / 42

Responsive Web Design

1. Responsive Web Design. and other buzz words you need to know Twitter: @rmonteroo #drupalcampLA #RWD.

austin-york
Télécharger la présentation

Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1

  2. Responsive Web Design and other buzz wordsyou need to know Twitter:@rmonteroo #drupalcampLA #RWD

  3. Achieve Internet is a leader in the Enterprise Drupal market. We've built some of the most dynamic and expansive Drupal websites on the market today for organizations such as Penton Media, Disney, NBC Universal, VIacom, FastCompany, Bella Pictures, and LifetimeTV. Rob Montero - Achieve Internet Rob is a senior engineer at Achieve Internet. Over 10 years of experience doing web development and 4+ doing Drupal exclusively.

  4. What is RWD?

  5. Responsive Web Design RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port) using media queries

  6. What isRWD?

  7. What is RWD?

  8. http://mattkersley.com/responsive/?http://sony.com

  9. What is RWD? If you have a laptop, and a smart phone and a tablet you can see what I’m talking about, by going here: http://achv.in/rwdrob http://mattkersley.com/responsive/?{website_url}

  10. Simon Collison

  11. Food Sense

  12. Clean Air Commute Challenge

  13. FlexSlider

  14. What is RWD? More examples: • http://foodsense.is • http://earthhour.fr • http://w3conf.org • http://mediaqueri.es • http://fourkitchens.com

  15. OK! You get the point! For more examples: http://designmodo.com/ responsive-design-examples

  16. 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 devices are released

  17. 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)

  18. Why is it relevant? It’s about people, not devices • Yes your iPhone goes to great lengths to facilitate browsing full sites, but technology should be available to everyone, even those without smart phones. • The most popular devices aren’t necessarily the most used devices.

  19. 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 usersaccess the internet only via mobile

  20. Why is it relevant? The future is now: • Babies have an easier time interacting with an iPad than with a magazine. To them a print magazine is just like a broken iPad. • Websites are not limited to laptops only.

  21. Why is it relevant? It’s convenient: • You’re not at your desk, you are hungry. In your email you have a coupon to this cool new restaurant. You pull up your phone, click on the link and… • What would you expect to see?

  22. Why is it relevant? RWD allows us to tweak the layout and present the relevant information first: hours, phone number, directions and perhaps a link to the menu. Meanwhile back at your desk, the restaurant’s page has all the bells and whistles you didn’t care for while browsing on your phone.

  23. Why is it relevant? • Avoids keyhole browsing. • You shouldn’t need a magnifying glass to access web content on your phone.

  24. Hello Media Queries and CSS3 In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.

  25. CSS3 & Media Queries The absence of support for @media queries is in fact the first @media query.

  26. CSS3 & Media Queries In your CSS: @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... }

  27. CSS3 & Media Queries On the header of your website: <link rel="stylesheet" href="this.css" media="(min-width: 960px)">

  28. CSS3 & Media Queries By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices with varying screen resolution (view port).

  29. Popular Viewport Sizes

  30. How do we design for RWD Simple: Use the Mobile First Approach and favor Progressive Enhancement instead of the traditionalGraceful Degradation

  31. Mobile First Approach

  32. Mobile First Approach

  33. 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 )

  34. 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

  35. Progressive Enhancement Progressive Enhancement consists of the following core principles: • basic content and functionality should be accessible to all web browsers • sparse, semantic markup contains all content • enhanced layout  external CSS • enhanced behavior  external JavaScript • end-user web browser preferences are respected

  36. Progressive Enhancement Benefits: • Accessibility: PE pages are by nature more accessible. • SEO: Since basic content is always accessible

  37. New toys for your sandbox HTML5 Boilerplate (http://h5bp.com) Responsive Web Design Sketch Sheets >> GoldenGridSystem.com >> Foldy960 >> FitText (http://fittextjs.com/) >>

  38. New toys for your sandbox • 320 and up >> • Gridless >> • Skeleton (http://www.getskeleton.com/) • ResizeMyBrowser.com >> • Responsive Design Testing >> Bonus: Media Query Indicator >>

  39. Homework • http://www.w3.org/TR/css3-mediaqueries. • https://developer.mozilla.org/en/CSS/Media_queries • https://github.com/fourkitchens/train-rwd

  40. Credits My first approach to RWD was at a training given by the folks at Four Kitchens Make sure you check out their training programs http://fourkitchens.com

  41. Thank You Rob Montero • dgo.to/@rmontero • @rmonteroo • /in/rmontero Questions? Comments? Email me at: rmontero@achieveinternet.com

  42. Hands on Demo time: We will be demoing a couple of examples, one will be plain HTML5 + CSS using h5bp and the other will be similar but using Drupal. If you want to play with this at home, feel free to download the resources at: https://github.com/fourkitchens/train-rwd

More Related