Selling Responsive Webdesign - webtech Conference 2013

Download Selling Responsive Webdesign - webtech Conference 2013

Post on 17-Oct-2014

2.322 views

Category:

Technology

0 download

DESCRIPTION

Slides of the talk: "Selling Responsive Webdesign" / webtech Conference 2013 by Patrick Lobacher (CEO typovision GmbH) / http://webtechcon.de / 29.10.2013

TRANSCRIPT

Patrick Lobacher | typovision GmbH | 29.10.2013

Selling Responsive Webdesign

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Agenda

Bullshit Bingo RWD is easy! RWD Workflow Selling RWD Contracts

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Bullshit Bingo

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

You know this game which you can play while sitting in a

(boring) meeting?

Check every term which appears and shout BULLSHIT BINGO if a row or column is

complete

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Bullshit Bingo (Shout: BULLSHIT if row or column is complete)

Bullshit Bingo (Shout: BULLSHIT if row or column is complete)

Bullshit Bingo (Shout: BULLSHIT if row or column is complete)

Bullshit Bingo (Shout: BULLSHIT if row or column is complete)

Proactive Win-Win Best practice Mindset

Out of the box Synergy Out of the loop Client focused

Sales driven At the end ofthe Day

24 / 7 The truth is...

Paradigm Core competences

Value added Benchmark

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

To collect terms for your own game, just google for

web design trends 2014

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

2014 - Web Design - Bullshit Bingo (Shout: BULLSHIT if row or column is complete)2014 - Web Design - Bullshit Bingo

(Shout: BULLSHIT if row or column is complete)2014 - Web Design - Bullshit Bingo

(Shout: BULLSHIT if row or column is complete)2014 - Web Design - Bullshit Bingo

(Shout: BULLSHIT if row or column is complete)

ResponsiveWeb

DesignFlat Design Single Page

Web DesignNeon

ParallaxScrolling

Off-Canvas CSS3Animations

Full-width Background

Images

FullscreenTypography

QR Codes InfiniteScrolling

DecoupledCMS

InteractiveInfographics

Social MediaBadges

Black & WhiteDesign

Simplified Design

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

http://www.designpromotivate.comhttp://katieunderhill.co.uk/

http://www.smashingmagazine.com

HOT TOPIC 2014!!

WEB DESIGNTRENDS 2014

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Responsive Web Design - RWD

is a Trend?

Really?

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Wikipedia says:

A trend/fad/hype is any form of behavior that develops among a large population and is collectively followed with enthusiasm for some period, generally as a result of the

behavior's being perceived as novel in some way.

A trend/fad/hype is said to "catch on" when the number of people adopting it begins to increase rapidly. The behavior will normally fade quickly once the perception of

novelty is gone.

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

So RWD is not a trend but the fundamentally basis of serious

web design and a need to ensure access to the web - now

and in the futurePatrick Lobacher, 29.10.2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

But this is easy to cover:iPad, iPhone, Nexus, Galaxy

#not

http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

And what about these?

http://www.flickr.com/photos/taedc/10166827123/ http://www.flickr.com/photos/icebearger/8651979429/

http://www.flickr.com/photos/raneko/3045816114/ http://www.flickr.com/photos/samsungtomorrow/8335500219/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD is easy!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Ingredients

Rearranging of content boxes A fluid grid concept Flexible images Media queries Server-side components (RESS) a few processes

Customerknowledge

(sadly)

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Thats it!

Isnt it???

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Okay, okay - its not that easy...But this is just developer magic!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Sure?

Responsive Design is not (just) a design or

development problem!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Requirement specification Functional specification Design process => PSD PSD => Design approval PSD => Implementation Verification / Testing PSD => final acceptance Done :-)

Traditional Workflow

http://commons.wikimedia.org/wiki/File%3AWaterfall_model_(1).svg

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Whats wrong with this workflow?

It worked for years!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Responsive Web Designneeds a rethinking

Its an all-embracing mindset!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

And it approaches many roles:

CEO, Sales, UX/UI, Designer, Coder, Content, Customer, ...

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

CEO / Freelancer / Decision Maker

Do you have a vision for supporting every device now and in the future?

Want to invest in the further training of your (whole) team?

Are you ready for changing the rules of your game? For a makeover?

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Designer Forget about your main tools

(so Photoshop is not dead - but there are more)

Explore your medium radically Purely visual designers have the most to

learn

Be open minded

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Customer

We both create business value - not pixel-precise PSD

You need time - much time! As you are involved in the project - daily. Participation is key!

You need a basic understanding of RWD

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Sales

You need new contracts Sell RWD consulting - your customer

needs it - for sure

RWD projects are more expensive but worth every (for the customer)

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow

Decisions

Content Strategy

Content Wireframes

Creating Content

Content Testing Production

Moodboard

Linear Design

Prototyping

Device Testing

Clarified requirements (Storys/RD/FD)

More Programming & Finalizing project

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 1 Decisions

Stakeholder Matrix (Who decides what) Project goal Breakpoint decisions (Device classes) (Attention!) List of supported devices and browsers (Top 5/3) Document Analysis (CI-Manual, Guidelines, Legal, ...) Moodboard Briefing (Look & Feel) Contract

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 2

Content Strategy (Consulting) First step is collecting, evaluating, determining

content

Leads to a content inventory (Site navigation, secondary navigation, logo, links, headline, content box, ...)

Big Excel / Where / What / Who / When

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 3 Content Wireframes

Which content is where Just boxes No design! Mobile first! For every breakpoint For every page type And for every content type

Main nav

Logo Search & Links

Headline

Content

Footer

Fancy Plugin

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 4 Creating content

To identify different types of content (lists, tables, headlines, picture with text on the right, ...)

Use plaintext only Use markup via Markdown /

AsciiDoc / ReST

Convert it to HTML for a dummy

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 5

Content Testing Test the content dummy in all screensizes youve

commited (and in between)

There are tools for this :-) Signature by customer

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 6

Moodboard Illustrate visually the

direction of the style

Look & feel of website inkl. elements (like navigation, ...)

Signature by customer

http://weblog.404creative.com

/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 7

Linear Design Enrich content dummy with basic

design from Moodboard

Just linear - not positioned To see how real content will look like Signature by customer

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 8

Prototype (Design in the browser) Produce a clickdummy with

HTML5/CSS3/JavaScript/Whatever

Should lead to final layout - so positioning is key

Interaction with customer! Signature by customer

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 9

Device testing Test on real devices! No simulators! Use Open Device Labs (ODL) There are tools to support you Signature by customer

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 10

Production Integrate in CMS (if any) Backend programming APIs ...

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Selling RWD

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Consulting (Basic RWD knowledge for customer)

Workshops (Requirements, Decisions, Content, Clickdummy adjustments)

Design (Moodboard, Linear Design, Element Design)

Production (Content dummy, Clickdummy)

Testing (Content testing, device testing)

Selling RWDConsulting

Workshop

Design

Programming

Testing

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

PSD Static documents are NOT part of the game!

Full Layouts Design more elements and fewer layouts

RWD AddOn Its NOT possible to pimp an existing design/website with RWD. Period!

RWD for Non-RWD Design Ensure that the designer has comprehensive understanding of RWD

History Museum Let old browsers gracefully go (or degrade them)

What you (should) not sellPSD

Full Layouts

RWD for Non-RWD Design

RWD AddOn

History Museum

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

(Sorry) Stupid questions: How much is RWD? How much more is RWD?

Correct answer: More than without Less than twice the effort for FE

Costs?

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

How Much Does a Responsive Web Design Cost?

Answer: $13.47 Read more at:

http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/

But wait...

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Customer: We do RWD later No - do it now or at the next Relaunch

Customer: We have a design agency Ensure (really) that the design agency has a deep

understanding of all the RWD processes - otherwise skip the job (or pay the bill)

Customer: We do it the good old way - with PSD No, No and No. No PSD. Never.

Or - have a good contract / laywer

FAQ

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Customer: We have no time to care about the project

And we have no chance to implement RWD then But I really need a quote for RWD

Double the amount for frontend and say: safety margin What was the price for RWD in your last

project?

What was the price of your last car/house/whirlpool?

FAQ

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Contracts

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Summary / Expectations Customer data Agency / Freelancer data Project Goal Deadlines

Contract - 1

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Agreements Customer has to review the work, provide

feedback and appove in a timely manner

Deadlines work two ways, customer and agency are bound to

Customer agree to stick to the payment schedule

Contract - 2

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Design Creation of look-and-feel designs Creation of flexible layouts that adapt to the

capabilities of many devices and screen sizes

Design process is iteratively Mainly use of HTML5 and CSS3, instead of mocking up

every template as a static visual

Static visuals just to indicate a look-and-feel direction (typography, color, texture, elements)

Contract - 3

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Content & Pictures Agency is not responsible for writing or inputting

any content

Agency is not responsible for choosing, editing, converting or taking pictures

If required, seperate quote could be provided

Contract - 4

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Browser testing in general Browser testing no longer means attempting to

make a website look the same in browsers of different capabilities or on devices with different size screens.

It does mean ensuring that a persons experience of a design should be appropriate to the capabilities of a browser or device.

Contract - 5

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Desktop browser testing We test with the following browsers (including

version)

Apple / Safari / 6.0.5 xxx / yyy / zzz

We do not test with the following browsers Microsoft IE 8

Contract - 6

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Mobile browser testing We test with the following browsers (including

version)

Android 4.1 / Chrome / 6.0.5 iOS 7.0.x / Safari xxx / yyy / zzz

We do not test with the following browsers Blackberry OS /QNX, Symbian, ... (any Browser)

Contract - 7

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Changes / Feature Requests As this is a fixed price contract, we have a requirem...