Launch with confidence

Responsive Web DesignWhat else is new?

Twitter: @rmonteroo #BADcamp #RWD

Rob Montero - Achieve InternetRobis a senior engineer at Achieve Internet.

Over 10 years of experience doing web development and 4+ doing Drupal exclusively.Achieve Internet is a leader in advanced web and mobile platform development.We build rock-solid digital architecture and we do it right so you can launch with confidence.We build high-traffic websites, platforms and apps for the most demanding environments.

AgendaWhat is RWD?Some examplesFrom scratch or theme?Who needs RWD?Why is it relevant?The buzzwords.New toysWhat else is new?Themes

FlexSliderBgstretchThings you can check out later.Questions

What is RWD?

Responsive Web DesignRWDis the concept of developing a website in a way that allows the layout to adjust according to the usersscreen resolution (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 smart phone and a tablet you can see what Im talking about, by going here:

http://achv.in/rwdrobhttp://mattkersley.com/responsive/?{website_url}

Simon Collison

Food Sense

Clean Air Commute Challenge

FlexSlider

What is RWD?More Exampleshttp://foodsense.ishttp://earthhour.frhttp://w3conf.orghttp://mediaqueri.eshttp://fourkitchens.comhttp://achieveinternet.com

The big questionDo I build all my HTML + CSS + JSfrom scratch - OR - use a Drupal Theme?

The big question

OK!You get the point!

For more examples:http://designmodo.com/responsive-design-examples

Who needs RWD?You need RWD if: Youre starting from scratch.You want to keep costs lowYou want it to work even when new devices are 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?Its 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 arent necessarily the 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 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.

Why is it relevant?Its convenient: Youre 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? >>

Why is it relevant?RWD allows us to tweak the layout and present the relevant information first:

Hours of operationPhone numberDirectionsPerhaps a link to the menu.

Everything else can wait / save bandwidth.

Why is it relevant?Meanwhile back at your desk, the restaurants page has all the bells and whistles you didnt care for while browsing on your phone.

Beautiful rich imagery.Mouth watering brain washAll that super important messaging from the marketing agency.The chefs profile and his awards, etc.

Avoids keyhole browsing.

You shouldnt need a magnifying glass to access web content on your phone.Why is it relevant?

Hello Media Queries and CSS3In 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.

CSS3 & Media QueriesThe absence of support for @media queries is in fact the 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:

CSS3 & Media QueriesBy 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).

Popular Viewport Sizes

How do we design for RWD?Simple:Use the Mobile First Approach and favor Progressive Enhancement instead of the traditional Graceful Degradation

Mobile First Approach

Mobile First Approach

Graceful DegradationFocuses 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 EnhancementFocuses on the content. ( not browsers ) Think from the content out. ( Peanut M&M ) Peanut: Content marked up in rich semantic (x)htmlCoated with rich creamy CSSAdded JS as the hard candy shell

Progressive EnhancementProgressive 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.

Progressive EnhancementBenefits:Accessibility: PE pages are by nature more accessible.SEO: Since basic content is always accessible.Performance: Responsive means fast

Really New toys for your sandboxhttp://lab.maltewassermann.com/viewport-resizer/

Really New toys for your sandboxhttp://respondr.webhoard.net/

Really New toys for your sandboxhttp://designmodo.com/responsive-test/

Media Query Debugger

http://johanbrook.com/design/css/debugging-css-media-queries

So what else is new?RWD has been around for a while, but its far from being pass.

So what else is new?Here are some of my favorite new developments in Responsive Web Design

So what else is new?Zen & ZenstrapBootstrapZurb-FoundationBoilerplateOmega

So what else is new?The tag and therefore the Picture module.

Vs: adaptive-image, ais cs_adaptive_image, responsive_images and resp_img, rwdimages

So what else is new?The FlexSlider module

Like a views_slideshow but fully reponsive and touch enabled.

It supports the picture module, too.

So what else is new?fit_textfitvidsresponsive_embedsbackstretch *

Some you can check out laterHTML5 Boilerplate (http://h5bp.com)Design Sketch Sheets (http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets)GoldenGridSystem.comFoldy960 (http://github.com/davatron5000/Foldy960)FitText (http://fittextjs.com/)

Some you can check out later320 and up (http://stuffandnonsense.co.uk/projects/320andup)Gridless (http://thatcoolguy.github.com/gridless-boilerplate)Skeleton (http://www.getskeleton.com/)ResizeMyBrowser.comResponsive Design Testing (http://mattkersley.com/responsive)

Homeworkhttp://www.w3.org/TR/css3-mediaqueries.https://developer.mozilla.org/en/CSS/Media_querieshttps://github.com/fourkitchens/train-rwd (via @FourKitchens @rupl) http://www.leveltendesign.com/blog/mark-carver/responsive-drupal-theming-done-right-way-least-now-anyway

CreditsMy 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

Rob Montero dgo.to/@rmontero @rmonteroo /in/rmonteroEmail: rob@achieveinternet.comQuestions? Comments?

launch with confidenceThank you!

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

*Take SONY.com. Wouldn't it be wonderful if that beautiful site would render correctly no matter what screen size it's being viewed on?**It does:http://mattkersley.com/responsive/?http://sony.com**It does:http://mattkersley.com/responsive/?http://sony.com********************YOURE STARTING FROM SCRATCHDeveloping a whole new website or web application is a challenging process. You wont know if the site will be successful until its live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. Its more efficient to get your new site performing well before you create an additional mobile site or application.

YOU WANT TO KEEP COSTS LOWSolid responsive solutions require additional design and front-end development time, but doesnt too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but its still faster than creating an additional mobile site or app. Developing a site this way also means thatyou only need to develop, manage, and maintain the one site, so it can reduce these costs too.

YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASEDA mobile site needs to be able to recognize the users device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browsers width, no new updates would need to be made. This means its much more future-proof and scalable.************RWD allows us to rearrange or tweak the layout in ways that are meaningful for the current viewport.

A small smart phone screen should have just enough room to show the fundamentals: hours, phone number, directions and perhaps a link to the menu.**Meanwhile back at your desk, the restaurants page has all the bells and whistles you didnt care for while browsing on your phone.**RWD allows us to rearrange or tweak the layout in ways that are meaningful for the current viewport.

A small smart phone screen should have just enough room to show the fundamentals: hours, phone number, directions and perhaps a link to the menu.

Meanwhile back at your desk, the restaurants page has all the bells and whistles you didnt care for while browsing on your phone.******Using a series of media queries like this, we can work our way up towards larger resolutions.

http://MediaQueri.es**Using a series of media queries like this, we can work our way up towards larger resolutions.

http://MediaQueri.es****Recommended pixel sets:320px, 480px, 600px, 768px, 900px, 1200px********THE GRACEFUL DEGRADATION PERSPECTIVEGraceful degradation focuses on building the website for the most advanced/capable browsers. Testing in browsers deemed older or less capable usually takes place during the last quarter of the development cycle and is often restricted to the previous release of the major browsers (IE, Mozilla, etc.).Under this paradigm, older browsers are expected to have a poor, but passable experience. Small fixes may be made to accommodate a particular browser. Because they are not the focus, little attention is paid beyond fixing the most egregious errors.**THE PROGRESSIVE ENHANCEMENT PERSPECTIVEProgressive enhancement focuses on the content. Note the difference: I didnt even mention browsers.

So how does it work?Getting into the progressive enhancement mindset is quite simple: just think from the content out. The content forms the solid base on which you layer your style and interactivity. If youre a candy fan, think of it as a Peanut M&M:Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).**"Progressive Enhancement" was coined by Steven Champeon of hesketh.com in a series of articles and presentations for Webmonkey and the SXSW Interactive conference between March and June 2003.

Progressive Enhancement consists of the following core principles:basic content should be accessible to all web browsersbasic functionality should be accessible to all web browserssparse, semantic markup contains all content enhanced layout is provided by externally linked CSSenhanced behavior is provided by unobtrusive, externally linked JavaScriptend-user web browser preferences are respected**Benefits for accessibilityWeb pages created according to the principles of PE are by their nature more accessible, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or easily disabled scripting. Additionally, the sparse markup principle makes it easier for tools that read content aloud to find that content

Benefits for search engine optimization (SEO)Improved results with respect to search engine optimization is another side effect of a PE-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with PE methods avoid problems that may hinder search engine indexing**Great for working with you**Great for showing to clients.**Great for showing to clients.**************HTML5 Boilerplate

Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought. [http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets]

Joni Korpi, who also developed Less Framework, has recently released this new version of a reliable grid system for responsive design. Deemed "folding" as it easily adapts from 16, to eight, to four columns, the Golden Grid System also features a small browser overlay that exposes the grid on your pages for testing. [http://goldengridsystem.com/]

Foldy960: The talented gents at Paravel, Inc. have released the modified 960.gs grid that they use as the basis for their responsive projects. [http://github.com/davatron5000/Foldy960] FitText: Yet another gem from Paravel, Inc is FitText.js, a jQuery plug-in to make headline web type responsive to the design and the device. [http://fittextjs.com/]**6. 320 and up Andy Clarke developed 320 and up to work as an extension to the HTML Boilerplate or a standalone kit. The default stylesheet targets smaller screens while styles for larger device widths are added through media queries.[http://stuffandnonsense.co.uk/projects/320andup/]

7. Gridless is an HTML5 and CSS3 boilerplate that can serve as the basis for your responsive designs, with focus on typography and baked-in cross-browser compatibility.[http://thatcoolguy.github.com/gridless-boilerplate/]

8. Unlike the previous two boilerplates, whose starting point is with the smallest resolution, the Skeleton development kit, created by Dave Gamache, is based on the 960.gs grid system and scales down to mobile. Skeleton also boasts a great style framework for developers to build styles on top of.[http://www.getskeleton.com/]

9. resizeMyBrowser, by front-end developer Chen Luo, has several preset dimensions for your browser window to test responsively designed pages or create a new preset if you can't find the one that fits your needs.[http://resizemybrowser.com/]

10. An incredibly useful tool by designer and developer Matt Kersley: simply enter the URL of your responsive site in Responsive Design Testing to see how it renders at various browser sizes.[http://mattkersley.com/responsive/]

Bonus: http://johanbrook.com/design/css/debugging-css-media-queries/

****ToddRossNienkerk****Demo Time

Here we make a pause and switch to demo the pre/made html and Drupal examples. *