Responsive Design: Out of the Box and Down the Rabbit Hole

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

responsivenavigation.net

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