Life Below 960px: An Intro to Responsive Design - WordCamp Birmingham 2013

Life Below 960pxAn Introduction to Responsive Design

Thursday, September 5, 13

Hi.


David HickoxWeb Designer


David HickoxWeb Designer

hickox.org

@roboticarm



Common Display Resolutionssource: Wikipedia


Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia







960px



1360px


960px200px 200px



980px190px 190px




The Mobile Context


The Mobile Context

iPhonenew class of device

brought the web into our personal space

introduced touch


The Mobile Context

User Assumptionsan exception case

on-the-go -“mobile”

distracted - “one eye, one thumb”



960px


Early Ways to Cope


Early Ways to Cope

Build an Appshowed forward-thinking

built credibility for your brand

addressed specific use cases


Early Ways to Cope

Develop a Mobile Sitekept traffic on the web

redirected search traffic to mobile site

targeted on-the-go use case


Early Ways to Cope

Do Nothingrelied on pinch and zoom




More Explosions


More Explosions

It Kept GoingAndroid devices

iPad & Tablet


Desktop 1366x768


Desktop 1366x768

iPhone 320x480


Desktop 1366x768

iPad768x1024

iPhone 320x480


Desktop 1366x768

iPad768x1024

Nexus One / Nexus S480x800

iPhone 320x480


Desktop 1366x768

iPad768x1024


iPhone 320x480

low-end Android240x320


Desktop 1366x768

iPad768x1024


iPhone 320x480

Galaxy Nexus768x1024



Desktop 1366x768

iPad768x1024


iPhone 320x480

Galaxy Nexus768x1024


1080p TV 1728x972


More Explosions

It Kept GoingAndroid devices

iPad & Tablet

Smart TVs & game consoles

your refrigerator


More Explosions

A Multi-Device Worldwe own multiple devices

we’re using what’s around

the spontaneous use case

sequential multiscreening


source: Google


66% of Gmail opens occur on a mobile device19% opened in browser15% opened in desktop mail client

source: Litmus


More Explosions

The Mobile-Mostly Userthe next generation will be primarily mobile

Facebook mobile-only users already exceed 20%(that’s 189 million people by last count)


By 2015, more Americans will access the internet through mobile devices than through desktop computers, according to a prediction by International Data Corporation. Some of these people may still have access to the desktop web, but, for reasons of context, ease, or sheer laziness, will choose their mobile first. For others, there will be no other way to view your content.

Karen McGraneContent Strategy for Mobile

“ “


http://www.idc.com/getdoc.jsp?c




More People Have Cell Phones Than Toilets, U.N. Study ShowsOut of the world’s estimated 7 billion people, 6 billion have access to mobile phones. Only 4.5 billion have access to working toilets.

source: Time


A Better System


A Better Systemfluid experience in a multi-device world

content parity with one CMS to maintain

future-proof


Responsive Web Design


Responsive web design offers an alternative. Marrying fluid, grid-based layouts and CSS3 media queries, we can create one design that responds to the shape of the display rendering it. It’s a more unified, more holistic approach to design, one that doesn’t see the web’s inherent flexibility as a constraint to be limited. Instead, we can finally design for the ebb and flow of things.

Ethan Marcottecreator of Responsive Design

“ “



How It Worksflexible framework


images courtesy of mediaqueri.es











How It Worksflexible framework

media queries

fluid content

collapsible navigation



New Ways of Thinkingcontent-focused

flexible expectations

think mobile first


Thinking Responsively



Test on Mobile



Mind Your Menus



Watch Your Widgets



Consider Your Images



Look Out For Video



Keep an Eye on the Ads


Thanks.

David Hickoxhickox.org@roboticarm
