Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World

RETHINK
THE WEB

Digiday, Agency Summit March 21 @scubachris / @draftfcb

RESPONSIVE DESIGN


IT STARTED BECAUSE THIS


BECAME THIS…


THE IMPORTANT
THREE THINGS

3. OS
2. Resolution

1. Devices

BUT THE LONGER
TERM ISSUE IS…


THE SOLUTION
Create 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 STARTED
Mobile First
Sites 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 Audit
For 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.
Taxonomy
A 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 STARTED
Research
Review 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 PSYCHED
The lighting round for:
1. UX
2. Creative
3. Development


WIREFRAMES WIREFRAMES
ARE THE UGLIEST
WEBSITES YOU HAVE EVER
SEEN AND ARE ALSO
BLUEPRINTS OUTLINING:
Content
relative priority of that content
(hierarchy)
interactive
features & functionality
how it works


“You can use an eraser on the
drafting table or a sledgehammer
on the construction site”
-Frank Lloyd Wright


New
Responsive Progressive
Screen, Same
Forces Focus Enhancement!
Content

VALSPAR

< LINKED PROMOTILE
LINKED PROMO TILE >

Explore Color
Browse Products
Paint Calculator
How-To Videos
Find a Retailer
FB T YT P
Full Site | About | Terms of Use | Privacy Policy | Contact
Copyright

VALSPAR


USPS EVERYWHERE
LOCATOR > 800 Pixels Wide
400 - 800 Pixels Wide

< 400px Wide
ON LANDING EVERYWHERE LOCATOR
USPS LOGO
USPS LOGO EVERYWHERE LOCATOR
Boise, Idaho NEAR ME
Boise, Idaho NEAR ME VIDEO CONTENT

Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM
USPS LOGO EVERYWHERE LOCATOR

Boise, Idaho NEAR ME

I'M LOOKING FOR THE FOLLOWING SERVICES:

I'M LOOKING FOR THE FOLLOWING SERVICES:
AT THE FOLLOWING LOCATIONS:
I'M LOOKING FORTHE FOLLOWING SERVICES: AT THE FOLLOWING LOCATIONS:

Post Office Approved Postal Provider WHAT'STHE DIFFERENCE?
Post Office

PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA | COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED. POSTAL INSPECTORS INSPECTOR GENERAL

THE EAGLE LOGO ISAMONG ONE OFTHE MANY TRADEMARKS OFTHE U.S. POSTAL SERVICE.
PRES
TRUS
ERVING THE
T
PROMOTING
INTEGRITY
Approved
Postal Provider

AT THE FOLLOWING LOCATIONS: WHAT'STHE DIFFERENCE?

Approved
Post Office
Postal Provider

WHAT'STHE DIFFERENCE? PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA POSTAL INSPECTORS
PRESERVING THETRUST
INSPECTOR GENERAL
PROMOTING INTEGRITY
COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED.
POSTAL INSPECTORS INSPECTOR GENERAL THE EAGLE LOGO IS AMONG ONE OFTHE MANY TRADEMARKS OFTHE U.S. POSTAL SERVICE.
PRESERVING THETRUST PROMOTING INTEGRITY

PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA
COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED.
THE EAGLE LOGO IS AMONG ONE OFTHE MANY TRADEMARKS
OFTHE U.S. POSTAL SERVICE.


USPS EVERYWHERE
LOCATOR


THE TRADITIONAL
WEB DESIGN
PROCESS


FRANKENCOMP!

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 back
to what we’re all here to do…

CREATE

STYLE TILES
A 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


MYTH
It 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 Connections
Browser Support
Touchscreens
Performance
Multimedia
Security
Retina
SEO
…

THINK BEYOND HOW A WEBSITE

LOOKS
THINK ABOUT HOW IT

WORKS

THINK MODULAR

“Stop Thinking in Pages.
Start Thinking in Systems.”
- Jeremy Keith


CREATIVE & DEVELOPMENT

SHOTGUN
MARRIAGEDigiday, Agency Summit March 21 @scubachris / @draftfcb

WATERFALL
WORKFLOW


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


RESPONSIVE
WORKFLOW


RESPONSIVE
WORKFLOW
- Tight Collaboration

- Identify & Solve Problems Quickly

- Client Inclusion


EMBRACE THE
FLEXIBILITY OF THE
WEB


COLLABORATION
WITHIN THE AGENCY
IS IMPROVED


“Responsive design
is 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

Recommandé

Recommandé

Contenu connexe

Plus de Digiday

Plus de Digiday (20)

Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World

Notes de l'éditeur