a responsive project process

65

Upload: phase2

Post on 28-Jan-2015

105 views

Category:

Technology


1 download

DESCRIPTION

We'll go beyond the ems, percentages and media queries by sharing how responsive design has affected how we approach and practice analysis, content, wireframes, design, testing and site delivery from a more holistic point of view. Presented by Dave Ruse.

TRANSCRIPT

Page 1: A Responsive Project Process
Page 2: A Responsive Project Process

Design & User Experience

A Responsive Process

Presented by Dave Ruse

Page 3: A Responsive Project Process

Dave RuseWeb DesignerPhase2 Technology

Page 4: A Responsive Project Process
Page 5: A Responsive Project Process

A Responsive Process

A Responsive Process A Responsive

Process

A Responsive Process

Page 6: A Responsive Project Process
Page 7: A Responsive Project Process

Nearly 7 percent of all online purchases were made using iPads, just 18 months after the

tablet computers were released by Apple Inc.http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-12

22-25% of US and UK mobile Internet browsers never or infrequently use the desktop Internet.

http://www.lukew.com/ff/entry.asp?1405

1.45M devices shipped per day - 317,124 birthshttp://www.lukew.com/ff/entry.asp?1506

Page 9: A Responsive Project Process

“The role of the designer, is that of a very good, thoughtful host, all of whose energy goes into trying to anticipate the needs of his guests.

Charles Eames ”

Page 10: A Responsive Project Process
Page 11: A Responsive Project Process
Page 12: A Responsive Project Process
Page 13: A Responsive Project Process
Page 14: A Responsive Project Process
Page 15: A Responsive Project Process
Page 16: A Responsive Project Process

This changes everythinga lot.

Page 17: A Responsive Project Process

Setting the Stage

Page 18: A Responsive Project Process

Within your project team.

http://www.flickr.com/photos/elstudio/3532534210/

Page 21: A Responsive Project Process

Copy

Page 22: A Responsive Project Process
Page 23: A Responsive Project Process
Page 24: A Responsive Project Process

Check out the links in the sidebar for more information.

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

Page 25: A Responsive Project Process

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

Check out the links in the sidebar for more information.

Page 26: A Responsive Project Process

Hiding ContentUse Caution When

Page 27: A Responsive Project Process
Page 28: A Responsive Project Process
Page 29: A Responsive Project Process
Page 30: A Responsive Project Process

Images

Page 31: A Responsive Project Process
Page 32: A Responsive Project Process

Video

Page 33: A Responsive Project Process
Page 34: A Responsive Project Process

Ads

Page 35: A Responsive Project Process
Page 36: A Responsive Project Process

Wireframes

Page 37: A Responsive Project Process

Prototype

Page 38: A Responsive Project Process

http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Page 39: A Responsive Project Process

http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Page 40: A Responsive Project Process

Design

Page 41: A Responsive Project Process

The tool doesn’t make the craftsman.

Oliver Reichenstein

“”

Page 42: A Responsive Project Process

Style Tiles

Page 43: A Responsive Project Process
Page 44: A Responsive Project Process

or

Page 45: A Responsive Project Process

and

Page 46: A Responsive Project Process

FIDELITY FLEXIBILITY

Page 47: A Responsive Project Process
Page 48: A Responsive Project Process
Page 49: A Responsive Project Process

Internal Reviews

Page 50: A Responsive Project Process

Development

Page 51: A Responsive Project Process

Drupal

Page 52: A Responsive Project Process

Testing

Page 53: A Responsive Project Process
Page 54: A Responsive Project Process
Page 55: A Responsive Project Process

Bandwidth

http://www.flickr.com/photos/magicdaddy/3679257428/

Page 56: A Responsive Project Process

Handoff

http://www.flickr.com/photos/denverjeffrey/3989287247/

Page 57: A Responsive Project Process
Page 58: A Responsive Project Process
Page 59: A Responsive Project Process
Page 61: A Responsive Project Process

Thanks!

@daveruse

Page 62: A Responsive Project Process

?

Page 64: A Responsive Project Process

BBC Style Guidehttp://www.bbc.co.uk/gel/

Death of a Cut Up Man - Josh Cooperhttp://www.agileapproach.com/blog-entry/death-of-a-cut-up-man

Test on Real Mobile Devices Without Breaking the Bank - Brad Frosthttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Strategies for Choosing Test Deviceshttp://stephanierieger.com/strategies-for-choosing-test-devices/

How Much Does A One-Second Page Load Delay Cost? http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-second_page_load_d.php

Limit Bandwidth to Your Mac/PChttp://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/http://www.netlimiter.com/

Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/

Page 65: A Responsive Project Process

What did you think?Locate this session on theDrupalCon Denver website

http://denver2012.drupal.org/program

Click the “Take the Survey” link.

Thank You!