responsive design: out of the box and down the rabbit hole
DESCRIPTION
When building a responsive website in Drupal, you may hear about starter themes that are responsive "out of the box". What you learn is that responsive design is such a deep and complex field that "out of the box" doesn't really exist. Let's begin to explore the deep rabbit hole that is responsive web design. From a designer and front end developer perspective.TRANSCRIPT
Responsive designOut of the box and down the rabbit hole
Responsive web designout of the box : down the rabbit hole
Who am I?
Dan Moriarty
Electric Citizen
@minneapolisdan
Responsive web designABOUT MY APPROACH
I only currently use a normal and fluid grid, using Omega Theme. TO DO: wide grid
Few grid columns = better? 12 max, 6 is better
TO DO: Start with base CSS that covers mobile, and then add styles based on min-width, enhancing experience for those with bigger screens.
Don’t start from desktop and then scale down (something I’ve been guilty of)
The secret is out
Responsive Design is amazing awesome, fantastically wonderful, and super trendy
We all have seen these squishy, stretchy, fluid, flexible sites
2013, “Year of Responsive Design”*
http://mashable.com/2012/12/11/responsive-web-design/
Responsive web designout of the box : down the rabbit hole
“Do you do responsive design?”
No?? Then you are an idiot!
http://mediaqueri.es/
Ethan Marcotte
Responsive web designout of the box : down the rabbit hole
Responsive web designout of the box : down the rabbit hole
Adaptive vs Responsive?
Responsive web designout of the box : down the rabbit hole
It’s all about watching sites stretch and squish, right?
Starter themes
https://drupal.org/project/zen
https://drupal.org/project/adaptivetheme
https://drupal.org/project/omega
Starter themes
Disclaimer Time!
Responsive web designout of the box : down the rabbit hole
What do these Out of the Box solutions offer?
Out of the box
Media Queries
960 Grid, Narrow Grid, Fluid Grid, Wide Grid
Breakpoints for iPhones, iPads, etc
starter themes
Really great, but...
Responsive web designout of the box : down the rabbit hole
* AFAIK
There is no such thing as Out of the Box
Responsive Websites!!*
Responsive web designout of the box : down the rabbit hole
Why Not?
Responsive web designout of the box : down the rabbit hole
Custom grid anyone?
Grids within grids
More than default breakpoints
Custom designs don’t always fit neatly into the box
Handling tables, lists, forms, images, iframes, maps, video
Font sizing
responsive web design: grids
960.gs has been great. But not the answer for everything.
http://www.1080.gs/
1000px grid - 6 colshttp://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
responsive web design: custom grids
responsive web design: custom grids
responsive web design: grids
Out of the Box has you covered for a preset 12 or 16 col grid
But even if you don’t choose a custom grid, what happens when you put grids inside of grids?
Mo’ Grids, Mo’ Problems
You’re familiar with this kindof layout?
Grids within grids
24col, 960 grid:6col=230px
Switch to flexible grid and 6col = 23%
Grids within grids
When sidebars shift and containers widen, these are still 23%
Grids within grids
Now we want that grid-2 to be more like a grid-4 or grid-8
Grids within grids
How is this currently handled?
I write a lot of overrides at different breakpoints.
But wouldn’t it be nice if I didn’t have to do that (as much)?
Grids within grids
grids within grids
How to Resolve Grids within Grids?
Semantic Grids, Zen Grids, Susy
Take the grid-x out of the code
responsive web design: grids
But wait, does that mean...
responsive web design: grids
Now you need SASS or LESS
Not out of the box
at all
custom breakpoints
iPad = 768px-1024px
iPhone = 320-480px
But there are other breakpoints to consider!
trouble items: how to solve
Slideshows
Tables
iFrames with Videos and Maps
Image Maps
iOS Orientation
trouble items: slideshows
Always Use Flexslider, Forget Views Slideshow
Get away from inline widths and heights
www.woothemes.com/flexslider
drupal.org/project/flexslider
trouble items: tables
Avoid tables when possible, only for tabular data (semantic)
Several options to responsiveness
There’s a module for that!
drupal.org/project/responsive_tables
maxbronsema.com/blog/2013/02/26/zurb-responsive-tables-within-drupal/ with drupal.org/project/flexifilter
trouble items: tables
Avoid tables when possible, only for tabular data (semantic)
Several options to responsiveness
There’s a module for that
trouble items: iframes
Use one relative and one absolute DIV, following code discussed here:
http://alistapart.com/article/creating-intrinsic-ratios-for-video
trouble items: image maps
Image Maps Don’t Scale So Nice
github.com/stowball/jQuery-rwdImageMaps
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
trouble items: iOS Orientation
Previous to iOS6
Zoom when changing orientation
Use github.com/scottjehl/iOS-Orientationchange-Fix
Responsive “Views”
View and Grids (aka Tables)
Views and HTML Lists (better but...)
/*News Stories, list */.item-list ul.news-stories li { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; display: inline-block; float: left; margin: 5px 2% 10px 0; max-height: 280px; overflow: hidden; padding: 15px 10px 5px; width: 32%;}
Responsive “Views”
Views Responsive Grid Module
Uses Grid Settings - your views grid follows same responsive rules as grid
responsive type
Typography should change with the device being used
Change line-heights, font sizes
Hover declarations are worthless
REM and other ideas
Responsive nav
bradfrostweb.com/blog/web/responsive-nav-patterns/
box model:your new best friend
IE7 and earlier model VS
Everyone else: Padding+Border+Content=Width http://www.eclipsewebmedia.com/css-box-model-explained/
box model:your new best friend
With Fluid Grids, trying to track widths of content+padding+borders at a Percentage Value that’s changing = YUCK!
www.paulirish.com/2012/box-sizing-border-box-ftw
/* apply a natural box layout model to all elements */* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
responsive web design: out of the box?
Destroy the box!
responsive web design: down the rabbit hole
Shall we go on?
responsive web design: filesize+performance
performancemeasuring download speeds
Testing download speeds on mobile devices: mobitest.akamai.com/m/index.cgi
How to reduce filesize?
performancereduce filesize
Image Size
Scripts
Reduce markup
performance: images
Adaptive Images, adaptive-images.comhttps://drupal.org/project/aishttps://drupal.org/project/adaptive_image
performance: images
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
performance: images
SVG Format?
Font Icons
Data URIs
Content Delivery Network?
performance: scripts
jQuery is great, but it’s big! Over 200k
jQuery mobile is also fairly large
What’s the alternative?
http://jquerybyexample.blogspot.com/2013/05/jquery-library-file-size-over-years.html
performance: scripts
http://zeptojs.com (8kb)
developers.google.com/closure/compiler
https://drupal.org/project/closure_compiler http://jquerybyexample.blogspot.com/2013/05/jquery-library-file-size-over-y
ears.html
performance: reduce markup
Drupal Fences module
performance: content
Adjusting page content based on device being used? AKA “the Internet Fridge”
responsive web designstill evolving rapidly
“If Responsive Web Design is truly an answer to a mobile society, it has to do more than stretch and pull”
resources
mobilewebbestpractices.com
mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
bradfrostweb.com/blog/tag/rwd/
www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://zengrids.com/
http://susy.oddbird.net/
http://html.adobe.com/edge/inspect/http://browserstack.com
Dan Moriarty, Electric Citizen@minneapolisdan