• Save
Responsive Web Design_2013
Upcoming SlideShare
Loading in...5

Responsive Web Design_2013



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

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 105

http://info.achieveinternet.com 80
http://info.slackermovies.com 25



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Responsive Web Design_2013 Responsive Web Design_2013 Presentation Transcript

    • 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 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.
    • What isRWD?
    • 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.
    • 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://achv.in/rwdrob•http://mattkersley.com/responsive/?{website_url}
    • 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://fourkitchens.com
    • 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 devicesare released
    • 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)
    • 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.
    • 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
    • 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.
    • 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?
    • 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.
    • 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 certainconditions of a particularmedia feature. The mostcommonly used mediafeature is width.
    • 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: none } // and so on...}
    • 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 pagesrepresentation to devices with varyingscreen resolution (view port).
    • 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
    • How do we design for RWDSimple:Use the Mobile First Approachand favor ProgressiveEnhancement instead of thetraditional Graceful Degradation
    • Mobile First Approach
    • Mobile First Approach
    • 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 )
    • 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
    • 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
    • Progressive EnhancementBenefits:•Accessibility: PE pages are bynature more accessible.•SEO: Since basic content isalways accessible
    • 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/) >>
    • 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 >>
    • Homework• http://www.w3.org/TR/css3-mediaqueries.• https://developer.mozilla.org/en/CSS/Media_qu eries• https://github.com/fourkitchens/train-rwd
    • 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
    • Questions? Comments? Rob Montero • dgo.to/@rmontero • @rmonteroo • /in/rmonteroEmail: rob@achieveinternet.com
    • 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