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: rmontero@achieveinternet.comrmontero@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