Launch with
confidence
Responsive Web Design
What else is new?
Twitter: @rmonteroo
#DrupalCampCR #RWD
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.
Nefty Loría – Quazar Web Design
Award winner
Web UI/UX designer.
10+ years of web
design experience.
Loves design.
• quazarwebdesign.com
• kinetikweb.com
• intergraphicdesigns.com
Agenda
• What else is new?
• What is RWD?
• Themes
• Some
examples
• <picture>
• From scratch or
• FlexSlider
theme?
• Bgstretch
• Who needs RWD? • Things you can
• Why is it relevant?
check out later.
• The buzzwords.
• Questions
• New toys
What is
RWD?
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.
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
I’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
OK!
You get the point!
For more examples:
http://designmodo.com/
responsive-design-examples
What is RWD?
More Examples
•http://foodsense.is
•http://earthhour.fr
•http://w3conf.org
•http://mediaqueri.es
•http://fourkitchens.com
•http://achieveinternet.com
The big question
Do I build all my
HTML + CSS + JS
from scratch
- OR use a Drupal
Theme?
The big question
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
Why is it relevant?
• 1.8 billion
• 6.8 billion
• 3.4 billion
internet connections in the world today.
people in the world today.
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 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.
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?
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? >>
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.
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.
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 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.
CSS3 & Media Queries
The absence of support for
@media queries is in fact
the first @media query.
CSS3 & Media Queries
In your CSS:
@media screen and (min-width: 480px) {
.content { float: left; }
.social_icons { display: none }
// and so on...
}
CSS3 & Media Queries
On the header of your website:
<link rel="stylesheet" href="this.css"
media="(min-width: 960px)">
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).
Popular Viewport Sizes
•320 x480 px:
Smartphone
•480 x 320 px:
Smartphone in
landscape orientation
•768 x 1024 px:
iPad/tablet
•1024 x 768 px: iPad in
landscape
orientation/netbook
•Anything larger:
Desktop/laptop
computer
•Anything smaller: a
feature phone
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 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 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.
Progressive Enhancement
Benefits:
•Accessibility: PE pages are by nature
more accessible.
•SEO: Since basic content is always
accessible.
•Performance: Responsive means fast
Really New toys for your sandbox
http://lab.maltewassermann.com/viewportresizer/
Really New toys for your sandbox
http://respondr.webhoard.net/
Really New toys for your sandbox
http://designmodo.com/responsive-test/
Media Query Debugger
http://johanbrook.com/design/cs
s/debugging-css-media-queries
So… what else is new?
RWD has been
around for a while,
but it’s 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 & Zenstrap
Bootstrap
Zurb-Foundation
Boilerplate
Omega
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
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_text
fitvids
responsive_embeds
backstretch *
Some you can check out later
1. HTML5 Boilerplate (http://h5bp.com)
2. Design Sketch Sheets
(http://jeremypalford.com/archjournal/responsive-web-design-sketch-sheets)
3. GoldenGridSystem.com
4. Foldy960
(http://github.com/davatron5000/Foldy960)
5. FitText (http://fittextjs.com/)
Some you can check out later
6. 320 and up
(http://stuffandnonsense.co.uk/projects/32
0andup)
7. Gridless
(http://thatcoolguy.github.com/gridlessboilerplate)
8. Skeleton (http://www.getskeleton.com/)
9. ResizeMyBrowser.com
10.Responsive Design Testing
(http://mattkersley.com/responsive)
Homework
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_qu
eries
• https://github.com/fourkitchens/train-rwd
(via @FourKitchens’ @rupl)
• http://www.leveltendesign.com/blog/markcarver/responsive-drupal-theming-done-rightway-least-now-anyway
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
Questions? Comments?
Rob Montero
• dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: rob@achieveinternet.com
launch with confidence
Thank 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