draftfcb at das: responsive design: the art of a three-screen world

RETHINKTHE WEB

Digiday, Agency Summit March 21 @scubachris / @draftfcb

RESPONSIVE DESIGN


IT STARTED BECAUSE THIS


BECAME THIS…


THE IMPORTANT THREE THINGS

1. Devices

2. Resolution

3. OS


BUT THE LONGER TERM ISSUE IS…


THE SOLUTIONCreate a responsive website.Keep in mind, responsive web design will not make the site perfect in every device but it will scale elegantly across multiple devices to allow for the best customer experience, however your customer chooses to view your content.

http://www.craftedbydavid.com/


HTTP://DFCB.GITHUB.COM/RESPONSIVATOR/



BBC.co.uk


http://www.harvard.edu/


http://www.time.com/time/

NOW ASK YOURSELF

Is it a better way of working?

Can it mean better:- Creative- UX- Development

Building for today while planning for tomorow


STILL NOT CONVINCED?

1. Look at your site analytics

2. How often do you need to update your content

3. Review your taxonomy


GETTING STARTEDMobile FirstSites should be built considering the mobile version first since it is the smallest screen size and the content displayed needs to be structured to show the most important information first. Also the growth of mobile indicates those devices will be the more frequent ones to access the content.

Content AuditFor current site that are transitioning to responsive, a content audit will allow the team to understand what content is available on site and make determination as to what is most valuable and where the gaps are.

TaxonomyA taxonomy audit should be included in your content audit as it is your future planning. It allows you to create a tagging and data hierarchy and better future proof your data to display on any type of device.


GETTING STARTEDResearchReview the current site analytics to get a clear understanding of how site visitors are currently accessing the site. This will give the team a better understanding for the breakpoints within the responsive design. If the site is a new site with no previous history, reviewing the analytics of competitors will also give an indication of how the site should be created.

If the brand has a call center or receives customer feedback on the site, it is also beneficial to review the commentary to understand the current customer pain points to help make design decisions.

Finally, in tandem with analytic research, the UX team can also provide a Heuristic Analysis of the site which will help structure the new designs and content.


NOW YOU’RE PSYCHEDThe lighting round for:

1. UX

2. Creative

3. Development


WIREFRAMES WIREFRAMES ARE THE UGLIEST WEBSITES YOU HAVE EVER SEEN AND

ARE ALSOBLUEPRINTS OUTLINING:

Content

relative priority of that content (hierarchy)

interactivefeatures & functionality

how it works


“You can use an eraser on the drafting table or a sledgehammer

on the construction site”-Frank Lloyd Wright


ProgressiveEnhancement!

ResponsiveForces Focus

New Screen, Same Content

VALSPAR


USPS EVERYWHERE LOCATOR


THE TRADITIONAL WEB DESIGN PROCESS


FRANKENCOMP!Digiday, Agency Summit March 21 @scubachris / @draftfcb

With ego bruised, the designer tries to figure out how to make elements that were never designed to work together feel like one cohesive piece.

It sets our clients up for disappointment when the finished site doesn’t look like our beautiful Photoshop mockups


These problems are compounded when your project is responsive.


Allow designers to get backto what we’re all here to do…

CREATE


STYLE TILESA design deliverable containing fonts, color and interface elements

that convey the visual language and feeling of the website.


Style Tiles allow the designer to stop building pages and empowers them to think about UI systems


EXISTING BRAND STYLE TILE


STYLE TILE 1


STYLE TILE 2


STYLE TILE 3


ONE CODEBASETO RULE THEM ALL

MYTHIt costs too much to engage a developer early in the process.


TIME & MONEY

Spend a penny now. Save a dollar later.


HAVE YOU CONSIDERED?

Slow ConnectionsBrowser SupportTouchscreensPerformanceMultimediaSecurityRetinaSEO…


THINK BEYOND HOW A WEBSITE

LOOKSTHINK ABOUT HOW IT

WORKSDigiday, Agency Summit March 21 @scubachris / @draftfcb

THINK MODULAR

“Stop Thinking in Pages. Start Thinking in Systems.”

- Jeremy Keith


SHOTGUN MARRIAGE

CREATIVE & DEVELOPMENT


WATERFALL WORKFLOW


- Gotchas- Bottlenecks- Over-The-Fence- In-The-Dark Client- Production Crunch- Chaos

WATERFALL WORKFLOW


RESPONSIVE WORKFLOW


- Tight Collaboration

- Identify & Solve Problems Quickly

- Client Inclusion

RESPONSIVE WORKFLOW


EMBRACE THE FLEXIBILITY OF THE WEB


COLLABORATION WITHIN THE AGENCY IS

IMPROVED


“Responsive designis not about mobile.

It’s not about the desktop.It’s about the web.”

- Jeremy Keith


WHAT’S NEXT?

Start thinking about your content as an asset and developing API’s to connect to different “devices”


THANKS!


draftfcb at das: responsive design: the art of a three-screen world

Documents

agency summit

new site

site visitorsare

site analytics2

devices digiday

taxonomy digiday

tomorow digiday

valspar digiday