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

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:

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

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

Responsive Designchochev.eu › html › 6. Responsive-Design-and-animations.pdf4 RESPONSIVE DESIGN •Responsive design (adaptive design) is an approach to optimize the viewing experience

About ResponsiveAdsaddemos.responsiveads.com/responsive-web-design-and... · 2013-03-12 · Responsive Web Design and implement Responsive Advertising solutions now. In short, responsive

MODULE 2: CULTURALLY RESPONSIVE PEDAGOGY AND PRACTICE Academy 2: Culturally Responsive ... · · 2009-07-03Academy 2: Culturally Responsive Classrooms ... Culturally Responsive

Responsive & Critical WRITING. RESPONSIVE WRITING: CONNECTING LITERATURE AND COMPOSITION.

eproc.punjab.gov.pk · 20 Service Manual with soft copy. *Technical Eligibility of Product 22 Decision of TAC Eligible Respons ive Responsive Responsive Responsive Responsive Responsive

Being Responsive to Responsive Web Design

Aftermarket2012 draftfcb benjaminmesselink

REZBOOKER RESPONSIVE ONLINE BOOKING ENGINE · HotelREZ HOTELS & RESORTS What is REZbooker Responsive? REZbooker Responsive by HotelREZ Hotels & Resorts is a feature-rich device responsive,

DAS-1 DAS-2 DAS-3 · Outline • Introduction • DAS-1, DAS-2, DAS-3 systems • Impact of DAS • Collaborations with-VL-e-SURFnet - Grid’5000 • New users

WARFIGHTER-FOCUSED, GLOBALLY RESPONSIVE, FISCALLY ......WARFIGHTERWARFIGHTER--FOCUSED, GLOBALLY RESPONSIVE, FISCALLY RESPONSIBLE SUPPLY CHAIN LEADERSHIPFOCUSED, GLOBALLY RESPONSIVE,

MODULE 2: CULTURALLY RESPONSIVE PEDAGOGY AND PRACTICE Academy 3: Culturally Responsive ... · · 2009-07-03Academy 3: Culturally Responsive Curriculum ... Culturally Responsive

Really Responsive Regulation · Robert Baldwin and Julia Black Really Responsive Regulation Really Responsive Regulation Robert Baldwin and Julia Black* Abstract: Really responsive

Testimony of Jeff Tarakajian DraftFCB on The Census 2010 ...

SolTech - Responsive Design and Responsive Content

Responsive Content, Responsive Documents, Responsive PDF - Innovation durch Barrierefreiheit

GENDER-RESPONSIVE PEDAGOGY · Gender-responsive Lesson Planning 2. Gender-responsive Teaching and Learning Materials 3. Gender-responsive Language use in the Classroom 4. Gender-responsive

Techniques for Flexible Responsive Visualization Design · alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still

RESPONSIVE eLEARNING - iitd.ie Centre/responsive-elearning-design... · 2.4: Benefits of Responsive eLearning Design 21 ... The term 'responsive web design' (RWD) was coined by ,

Responsive Website Design | Responsive Design

Parthasakha Das , Pritha Das and Samhita Das