Responsive Web Design
description
Transcript of Responsive Web Design
1
Responsive Responsive Web DesignWeb Designand other buzz wordsand other buzz words
you need to knowyou need to know
Twitter:Twitter:@rmonteroo #BADcamp #RWD@rmonteroo #BADcamp #RWD
Rob Montero - Rob Montero - Achieve InternetAchieve InternetRobRob is a senior is a senior engineer at Achieve engineer at Achieve Internet.Internet.
Over 10 years of Over 10 years of experience doing web experience doing web development and 4+ development and 4+ doing Drupal doing Drupal exclusively.exclusively.
Achieve InternetAchieve Internet is a is a leader in the leader in the Enterprise Enterprise DrupalDrupal market. We've market. We've built some of the most built some of the most dynamic and expansive dynamic and expansive Drupal websites on the Drupal websites on the market today for market today for organizations such as organizations such as Penton Media, Disney, Penton Media, Disney, NBC Universal, Viacom, NBC Universal, Viacom, FastCompany, Bella FastCompany, Bella Pictures, and LifetimeTV.Pictures, and LifetimeTV.
What is What is RWD?RWD?
Responsive Web Responsive Web DesignDesign
RWDRWD is the concept of is the concept of developing a website developing a website in a way that in a way that allows allows the layout to adjustthe layout to adjust according to the according to the user’s screen user’s screen resolutionresolution
((view portview port) using ) using media queriesmedia queries
What isRWD?What isRWD?
What isRWD?What isRWD?
http://mattkersley.com/responsive/?http://mattkersley.com/responsive/?http://http://sony.comsony.com
What is RWD?What is RWD?If you have a laptop, and a smart If you have a laptop, and a smart phone and a tablet you can see phone and a tablet you can see what I’m talking about, by going what I’m talking about, by going here:here:
http://achv.in/rwdrobhttp://mattkersley.com/responsive/?http://mattkersley.com/responsive/?{website_url}{website_url}
Simon CollisonSimon Collison
Food SenseFood Sense
Clean Air Commute ChallengeClean Air Commute Challenge
FlexSliderFlexSlider
What is RWD?What is RWD?More examples:More examples:
•http://foodsense.ishttp://foodsense.is•http://earthhour.frhttp://earthhour.fr•http://w3conf.orghttp://w3conf.org•http://mediaqueri.eshttp://mediaqueri.es•http://fourkitchens.comhttp://fourkitchens.com
OK!OK!You get the point!You get the point!
For more examples:For more examples:
http://designmodo.com/http://designmodo.com/
responsive-design-examplesresponsive-design-examples
Who needs Who needs RWD?RWD?
You need RWD if:You need RWD if:
•You’re starting from scratch.You’re starting from scratch.•You want to keep costs lowYou want to keep costs low•You want it to work even when new You want it to work even when new devices are releaseddevices are released
Why is it Why is it relevant?relevant?
•1.8 1.8 billion billion internet connectionsinternet connections in the world in the world
today.today.
•6.8 6.8 billion billion peoplepeople in the world today. in the world today.
•3.4 3.4 billion billion people with people with mobile devices mobile devices today.today.
( roughly ½ the population of the planet) ( roughly ½ the population of the planet)
Why is it Why is it relevant?relevant?
It’s about people, not It’s about people, not devicesdevices
•Yes your iPhone goes to great lengths Yes your iPhone goes to great lengths to facilitate browsing full sites, but to facilitate browsing full sites, but technology should be available to technology should be available to everyone, even those without smart everyone, even those without smart phones.phones.•The The most popularmost popular devices aren’t devices aren’t necessarily the necessarily the most usedmost used devices. devices.
Why is it Why is it relevant?relevant?
•1.3 1.3 billion billion mobile internet usersmobile internet users in the world in the world
today.today.
( Includes WAP and “real web” ) ( Includes WAP and “real web” )
•1/31/3 of the of the global internet usersglobal internet users
access the internet access the internet only via mobileonly via mobile
Why is it Why is it relevant?relevant?
The future is now:The future is now:
•Babies have an easier time interacting Babies have an easier time interacting with an iPad than with a magazine. To with an iPad than with a magazine. To them a print magazine is just like a them a print magazine is just like a broken iPad.broken iPad.
•Websites are not limited to laptops Websites are not limited to laptops only.only.
Why is it Why is it relevant?relevant?
It’s convenient:It’s convenient:
•You’re not at your desk, you are You’re not at your desk, you are hungry. In your email you have a coupon hungry. In your email you have a coupon to this cool new restaurant. You pull up to this cool new restaurant. You pull up your phone, click on the link and…your phone, click on the link and…•What would you expect to see?What would you expect to see?
Why is it Why is it relevant?relevant?
RWD allows us to tweak the layout and RWD allows us to tweak the layout and present the relevant information first: present the relevant information first: hours, phone number, directions and hours, phone number, directions and perhaps a link to the menu.perhaps a link to the menu.
Meanwhile back at your desk, the Meanwhile back at your desk, the restaurant’s page has all the bells and restaurant’s page has all the bells and whistles you didn’t care for while whistles you didn’t care for while browsing on your phone.browsing on your phone.
Why is it Why is it relevant?relevant?
• Avoids keyhole browsing.Avoids keyhole browsing.
• You shouldn’t need a You shouldn’t need a magnifying glass to access magnifying glass to access web content on your web content on your phone.phone.
Hello Media Hello Media Queries and Queries and
CSS3CSS3In its essence a media In its essence a media query consists of a query consists of a media type and an media type and an expression to check expression to check for certain conditions for certain conditions of a particular media of a particular media feature. The most feature. The most commonly used media commonly used media feature is width.feature is width.
CSS3 & Media CSS3 & Media QueriesQueries
The The absence ofabsence of support for @media support for @media queries is in fact queries is in fact the the first @media queryfirst @media query..
CSS3 & Media CSS3 & Media QueriesQueries
In your CSS:In your CSS:
@media screen and (min-width: @media screen and (min-width: 480px) { 480px) {
.content { float: left; }.content { float: left; }
.social_icons { display: none }.social_icons { display: none }
// and so on...// and so on...
}}
CSS3 & Media CSS3 & Media QueriesQueries
On the header of your website:On the header of your website:
<link rel="stylesheet" <link rel="stylesheet" href="this.css" media="(min-href="this.css" media="(min-width: 960px)">width: 960px)">
CSS3 & Media CSS3 & Media QueriesQueries
By By restricting CSS rulesrestricting CSS rules to a to a certain certain width of the devicewidth of the device displaying a web page, one can displaying a web page, one can tailor the page's representationtailor the page's representation to devices with varying screen to devices with varying screen resolution (view port).resolution (view port).
Popular Popular Viewport SizesViewport Sizes
How do we How do we design for RWDdesign for RWD
Simple:Simple:
Use the Use the Mobile First Mobile First ApproachApproach and favor and favor Progressive EnhancementProgressive Enhancement instead of the traditionalinstead of the traditional Graceful DegradationGraceful Degradation
Mobile First Mobile First ApproachApproach
Mobile First Mobile First ApproachApproach
Graceful Graceful DegradationDegradation
• Focuses on building the website for the Focuses on building the website for the most advanced/capable browsers.most advanced/capable browsers.
• Older browsers are expected to have a Older browsers are expected to have a poor, but passable experience.poor, but passable experience.
• Small fixes may be made to Small fixes may be made to accommodate a particular browser ( they accommodate a particular browser ( they are not the focus )are not the focus )
Progressive Progressive EnhancementEnhancement
• Focuses on the content. ( not browsers )Focuses on the content. ( not browsers )
• Think from the content out. ( Peanut M&M Think from the content out. ( Peanut M&M ))– Peanut: Content marked up in rich semantic Peanut: Content marked up in rich semantic
(x)html(x)html– Coated with rich creamy CSSCoated with rich creamy CSS– Added JS as the hard candy shellAdded JS as the hard candy shell
Progressive Progressive EnhancementEnhancement
Progressive Enhancement consists of the Progressive Enhancement consists of the following core principles:following core principles:•basic content and functionality should be accessible basic content and functionality should be accessible to all web browsersto all web browsers•sparse, semantic markup contains all contentsparse, semantic markup contains all content•enhanced layout enhanced layout external CSS external CSS•enhanced behavior enhanced behavior external JavaScript external JavaScript•end-user web browser preferences are respectedend-user web browser preferences are respected
Progressive Progressive EnhancementEnhancement
Benefits:Benefits:•Accessibility: PE pages are by Accessibility: PE pages are by nature more accessible.nature more accessible.•SEO: Since basic content is SEO: Since basic content is always accessiblealways accessible
New toys for New toys for your sandboxyour sandbox
1.1. HTML5 Boilerplate (HTML5 Boilerplate (http://h5bp.com))
2.2. Responsive Web Design Sketch Sheets Responsive Web Design Sketch Sheets >>
3.3. GoldenGridSystem.com GoldenGridSystem.com >>
4.4. Foldy960 Foldy960 >>
5.5. FitText (http://fittextjs.com/) FitText (http://fittextjs.com/) >>
New toys for New toys for your sandboxyour sandbox
1.1. 320 and up >>320 and up >>
2.2. Gridless >>Gridless >>
3.3. Skeleton (http://www.getskeleton.com/)Skeleton (http://www.getskeleton.com/)
4.4. ResizeMyBrowser.com >>ResizeMyBrowser.com >>
5.5. Responsive Design Testing >>Responsive Design Testing >>
Bonus:Bonus: Media Query Indicator >> Media Query Indicator >>
HomeworkHomework
• http://www.w3.org/TR/css3-mediaqueries.http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/https://developer.mozilla.org/en/CSS/Media_queriesMedia_queries
• https://github.com/fourkitchens/train-rwdhttps://github.com/fourkitchens/train-rwd
CreditsCreditsMy first approach to RWD My first approach to RWD was at a training given by was at a training given by the folks at Four Kitchensthe folks at Four Kitchens(here at BADcamp)(here at BADcamp)
Make sure you check out Make sure you check out their training programstheir training programs
http://fourkitchens.comhttp://fourkitchens.com
Thank Thank YouYouRob MonteroRob Montero
•
dgo.to/@rmonterodgo.to/@rmontero
• @rmonteroo@rmonteroo
• /in/rmontero/in/rmonteroQuestions? Comments?Questions? Comments?Email me at: Email me at: [email protected]@achieveinternet.com
Hands onHands onDemo time:Demo time:
We will be demoing a couple of examples, We will be demoing a couple of examples, one will be plain HTML5 + CSS using h5bp one will be plain HTML5 + CSS using h5bp and the other will be similar but using and the other will be similar but using Drupal.Drupal.
If you want to play with this at home, feel free to If you want to play with this at home, feel free to download the resources at: download the resources at: https://github.com/fourkitchens/train-rwdhttps://github.com/fourkitchens/train-rwd