launch with confidence responsive web design what else is new? twitter: @rmonteroo #badcamp #rwd
TRANSCRIPT
![Page 1: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/1.jpg)
Launch with confidenceLaunch with confidence
Responsive Web DesignResponsive Web DesignWhat else is new?What else is new?
Twitter: @rmonterooTwitter: @rmonteroo#BADcamp #RWD#BADcamp #RWD
![Page 2: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/2.jpg)
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.
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.
![Page 3: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/3.jpg)
Agenda
• What is RWD?• Some
examples• From scratch or
theme?• Who needs
RWD?• Why is it
relevant?• The buzzwords.• New toys
• What else is new?• Themes• <picture>• FlexSlider• Bgstretch
• Things you can check out later.
• Questions
![Page 4: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/4.jpg)
What is What is RWD?RWD?
![Page 5: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/5.jpg)
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.
![Page 6: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/6.jpg)
What is RWD?
![Page 7: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/7.jpg)
What is RWD?
![Page 8: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/8.jpg)
http://mattkersley.com/responsive/?http://sony.com
![Page 9: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/9.jpg)
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}
![Page 10: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/10.jpg)
Simon Collison
![Page 11: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/11.jpg)
Food Sense
![Page 12: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/12.jpg)
Clean Air Commute Challenge
![Page 13: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/13.jpg)
FlexSlider
![Page 14: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/14.jpg)
What is RWD?
More Examples
•http://foodsense.is•http://earthhour.fr•http://w3conf.org•http://mediaqueri.es•http://fourkitchens.com•http://achieveinternet.com
![Page 15: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/15.jpg)
The big question
Do I build all my
HTML + CSS + JSfrom scratch
- OR - use a Drupal Theme?
![Page 16: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/16.jpg)
The big question
![Page 17: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/17.jpg)
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
![Page 18: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/18.jpg)
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
![Page 19: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/19.jpg)
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)
![Page 20: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/20.jpg)
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.
![Page 21: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/21.jpg)
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
![Page 22: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/22.jpg)
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.
![Page 23: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/23.jpg)
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? >>
![Page 24: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/24.jpg)
Why is it relevant?
RWD allows us to tweak the layout and present the relevant information first:
•Hours of operation•Phone number•Directions•Perhaps a link to the menu.
Everything else can wait / save bandwidth.
![Page 25: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/25.jpg)
Why is it relevant?
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.
•Beautiful rich imagery.•Mouth watering brain wash•All that super important messaging from the marketing agency.•The chef’s profile and his awards, etc.
![Page 26: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/26.jpg)
• Avoids keyhole browsing.
• You shouldn’t need a magnifying glass to access web content on your phone.
Why is it relevant?
![Page 27: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/27.jpg)
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.
![Page 28: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/28.jpg)
CSS3 & Media Queries
The absence of support for @media queries is in fact the first @media query.
![Page 29: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/29.jpg)
CSS3 & Media Queries
In your CSS:@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on...}
![Page 30: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/30.jpg)
CSS3 & Media Queries
On the header of your website:
<link rel="stylesheet" href="this.css" media="(min-width: 960px)">
![Page 31: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/31.jpg)
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).
![Page 32: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/32.jpg)
Popular Viewport Sizes
![Page 33: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/33.jpg)
How do we design for RWD?
Simple:Use the Mobile First Approach and favor Progressive Enhancement instead of the traditional Graceful Degradation
![Page 34: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/34.jpg)
Mobile First Approach
![Page 35: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/35.jpg)
Mobile First Approach
![Page 36: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/36.jpg)
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 )
![Page 37: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/37.jpg)
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
![Page 38: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/38.jpg)
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.
![Page 39: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/39.jpg)
Progressive Enhancement
Benefits:•Accessibility: PE pages are by nature more accessible.•SEO: Since basic content is always accessible.•Performance: Responsive means fast
![Page 40: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/40.jpg)
Really New toys for your sandbox
http://lab.maltewassermann.com/viewport-resizer/
![Page 41: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/41.jpg)
Really New toys for your sandbox
http://respondr.webhoard.net/
![Page 42: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/42.jpg)
Really New toys for your sandbox
http://designmodo.com/responsive-test/
![Page 43: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/43.jpg)
Media Query Debugger Media Query Debugger
http://johanbrook.com/design/http://johanbrook.com/design/css/debugging-css-media-css/debugging-css-media-queriesqueries
![Page 44: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/44.jpg)
So… what else is new?
RWD has been around for a while,
but it’s far from being passé.
![Page 45: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/45.jpg)
So… what else is new?
Here are some of my favorite new
developments in Responsive Web
Design
![Page 46: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/46.jpg)
So… what else is new?
Zen & ZenstrapBootstrap
Zurb-FoundationBoilerplate
Omega
![Page 47: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/47.jpg)
So… what else is new?
The <picture> tag and therefore the Picture
module.
Vs: adaptive-image, ais cs_adaptive_image, responsive_images and resp_img,
rwdimages
![Page 48: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/48.jpg)
So… what else is new?
The FlexSlider module
Like a views_slideshow but fully reponsive and touch
enabled.
It supports the picture module, too.
![Page 49: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/49.jpg)
So… what else is new?
• fit_text• fitvids• responsive_embeds• backstretch *
![Page 50: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/50.jpg)
Some you can check out later
1. HTML5 Boilerplate (http://h5bp.com)2. Design Sketch Sheets
(http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets)
3. GoldenGridSystem.com4. Foldy960
(http://github.com/davatron5000/Foldy960)
5. FitText (http://fittextjs.com/)
![Page 51: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/51.jpg)
Some you can check out later
6. 320 and up (http://stuffandnonsense.co.uk/projects/320andup)
7. Gridless (http://thatcoolguy.github.com/gridless-boilerplate)
8. Skeleton (http://www.getskeleton.com/)
9. ResizeMyBrowser.com10.Responsive Design Testing
(http://mattkersley.com/responsive)
![Page 52: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/52.jpg)
Homework
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_queries
• https://github.com/fourkitchens/train-rwd(via @FourKitchens’ @rupl)
• http://www.leveltendesign.com/blog/mark-carver/responsive-drupal-theming-done-right-way-least-now-anyway
![Page 53: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/53.jpg)
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
![Page 54: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/54.jpg)
Rob Montero
•
dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: [email protected]
Questions? Comments?
![Page 55: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/55.jpg)
launch with confidencelaunch with confidence
Thank you!
![Page 56: Launch with confidence Responsive Web Design What else is new? Twitter: @rmonteroo #BADcamp #RWD](https://reader034.vdocuments.mx/reader034/viewer/2022051619/56649e015503460f94aeb274/html5/thumbnails/56.jpg)
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