View
108
Download
0
Category
Tags:
Preview:
DESCRIPTION
The mobile explosion has turned designing for the web into much more than just designing for desktop. Responsive Web Design offers a flexible solution for delivering consistent content and experiences across a world of devices. In this talk, we’ll go over the incredible growth in mobile and tablet platforms, the basics of how responsive web design works, and get a peek at a web that many people don’t think about–a life below 960 pixels.
Citation preview
Life Below 960pxAn Introduction to Responsive Design
Thursday, September 5, 13
Hi.
Thursday, September 5, 13
David HickoxWeb Designer
Thursday, September 5, 13
David HickoxWeb Designer
hickox.org
@roboticarm
Thursday, September 5, 13
Thursday, September 5, 13
Common Display Resolutionssource: Wikipedia
Thursday, September 5, 13
Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia
Thursday, September 5, 13
Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia
Thursday, September 5, 13
Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia
Thursday, September 5, 13
Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia
960px
Thursday, September 5, 13
Thursday, September 5, 13
1360px
Thursday, September 5, 13
960px200px 200px
Thursday, September 5, 13
Thursday, September 5, 13
980px190px 190px
Thursday, September 5, 13
Thursday, September 5, 13
Thursday, September 5, 13
The Mobile Context
Thursday, September 5, 13
The Mobile Context
iPhonenew class of device
brought the web into our personal space
introduced touch
Thursday, September 5, 13
The Mobile Context
User Assumptionsan exception case
on-the-go -“mobile”
distracted - “one eye, one thumb”
Thursday, September 5, 13
Common Display Resolutionssource: WikipediaCommon Display Resolutionssource: Wikipedia
960px
Thursday, September 5, 13
Early Ways to Cope
Thursday, September 5, 13
Early Ways to Cope
Build an Appshowed forward-thinking
built credibility for your brand
addressed specific use cases
Thursday, September 5, 13
Early Ways to Cope
Develop a Mobile Sitekept traffic on the web
redirected search traffic to mobile site
targeted on-the-go use case
Thursday, September 5, 13
Early Ways to Cope
Do Nothingrelied on pinch and zoom
Thursday, September 5, 13
Thursday, September 5, 13
Thursday, September 5, 13
More Explosions
Thursday, September 5, 13
More Explosions
It Kept GoingAndroid devices
iPad & Tablet
Thursday, September 5, 13
Desktop 1366x768
Thursday, September 5, 13
Desktop 1366x768
iPhone 320x480
Thursday, September 5, 13
Desktop 1366x768
iPad768x1024
iPhone 320x480
Thursday, September 5, 13
Desktop 1366x768
iPad768x1024
Nexus One / Nexus S480x800
iPhone 320x480
Thursday, September 5, 13
Desktop 1366x768
iPad768x1024
Nexus One / Nexus S480x800
iPhone 320x480
low-end Android240x320
Thursday, September 5, 13
Desktop 1366x768
iPad768x1024
Nexus One / Nexus S480x800
iPhone 320x480
Galaxy Nexus768x1024
low-end Android240x320
Thursday, September 5, 13
Desktop 1366x768
iPad768x1024
Nexus One / Nexus S480x800
iPhone 320x480
Galaxy Nexus768x1024
low-end Android240x320
1080p TV 1728x972
Thursday, September 5, 13
More Explosions
It Kept GoingAndroid devices
iPad & Tablet
Smart TVs & game consoles
your refrigerator
Thursday, September 5, 13
More Explosions
A Multi-Device Worldwe own multiple devices
we’re using what’s around
the spontaneous use case
sequential multiscreening
Thursday, September 5, 13
source: Google
Thursday, September 5, 13
66% of Gmail opens occur on a mobile device19% opened in browser15% opened in desktop mail client
source: Litmus
Thursday, September 5, 13
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)
Thursday, September 5, 13
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
“ “
Thursday, September 5, 13
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
Thursday, September 5, 13
A Better System
Thursday, September 5, 13
A Better Systemfluid experience in a multi-device world
content parity with one CMS to maintain
future-proof
Thursday, September 5, 13
Responsive Web Design
Thursday, September 5, 13
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
“ “
Thursday, September 5, 13
Responsive Web Design
How It Worksflexible framework
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
Responsive Web Design
How It Worksflexible framework
media queries
fluid content
collapsible navigation
Thursday, September 5, 13
Responsive Web Design
New Ways of Thinkingcontent-focused
flexible expectations
think mobile first
Thursday, September 5, 13
Thinking Responsively
Thursday, September 5, 13
Thinking Responsively
Test on Mobile
Thursday, September 5, 13
Thinking Responsively
Mind Your Menus
Thursday, September 5, 13
Thinking Responsively
Watch Your Widgets
Thursday, September 5, 13
Thinking Responsively
Consider Your Images
Thursday, September 5, 13
Thinking Responsively
Look Out For Video
Thursday, September 5, 13
Thinking Responsively
Keep an Eye on the Ads
Thursday, September 5, 13
Thanks.
David Hickoxhickox.org@roboticarm
Thursday, September 5, 13
Recommended