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 requirement

specification and a functional specification done at the beginning

We estimate our work based on these documents But we want to be flexible. So if you want anything to be

changed (in difference to these documents), we will provide you with an seperate estimate

Contract - 8

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Copyright Customer guarantees that all assets of text, images or

other artwork he provides are either that the customer has permission to use them

The customer own the elements but the agency owns the unique combination (design, layout) of them.

The agency gives a license of this unique combination for the customer exclusive and in perpuity for this project only

Contract - 9

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Payment schedule We aggree on the the following payemen schedule:

50% in advance - agency starts work when cashed 40% at delivery (or define smaller milestones) 10% at acceptance

If customer uses the project in a live environment - this implies a acceptance and remaining 10% are due

10 day term

Contract - 10

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Legal No programming work is error-free. We try to fix bugs

(functions which are defined in the documents mentioned earlier but not working as described) as soon as possible but we cant be liable to you or any third-party for damages, including lost profits, lost savings or other incidental, consequential or special damages, even if youve advised us of them.

The agency will show off the work with other people, so the agency reserves the right, with your permission, to display and link to the project and to write about it.

We are not liable for any bugs in used Open Source Software

Contract - 11

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Links

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

http://www.creativebloq.com/responsive-web-design/top-responsive-web-design-problems-and-how-avoid-them-8122790

http://weblog.404creative.com/2007/02/14/website-mood-boards-a-successful-precursor-to-visual-prototyping/

http://styletil.es/ http://samanthatoy.com/washington-examiner/

Links

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

http://responsivedesignworkflow.com/ http://de.slideshare.net/stephenhay/

mobilism2012

http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/

http://dmduplessis.com/responsive-design-and-the-art-of-being-busy/

Links

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

http://stuffandnonsense.co.uk/projects/contract-killer/

Links

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Last words:

Responsive Web Designneeds Re-Thinking

Thank You!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Patrick Lobacher 43 years, happily married, residing in Munich Author of 9 books and > 40 articles on the subject of TYPO3

and web development Active in the web deveopment area since 1994 Certified TYPO3 Integrator since 2009 Until 2012 member of the teams Extbase (Leader),

Certification and Content editoral Until 2012 member of the EAB (Expert Advisory Board) Co-Organizer of the TYPO3camp Munich (2008-2013) and

TYPO3 Developer Days (T3DD12) Speaker at national and internation conferences Lecturer for leading training institutes and MVHS

Publications:

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Full service digital communications agency based in Munich & NRW >40 employees (+ 15 from freelancer pool) CEO: Sebastian Bttger (CTO), Patrick Lobacher (CMO) Highly specialized in TYPO3 since 10 years (Extbase/Fluid since 2009) Platinum TYPO3 Association Member since 3 Jahren Specialized in Enterprise Search (Solr, Elastic Search) since 3 years Focus: Premium Open Source Web Technlologies and CMS Agency profil (german): www.typovision.de/dieagentur

More than 600 projects of any size

Vision:We are the partner of our clients in all areas of its digital communication - from the initial vision to the successful implementation and far beyond.

typovision GmbH

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Customers

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Contact

Traditional:

typovision GmbH

Elsenheimerstr. 780687 Munich

Phone:

+49 89 45 20 59 3 - 0Fax:

+49 89 45 20 59 3 - 29

Email:

info@typovision.deWeb:

www.typovision.de

Twitter:

www.twitter.com/typovisionwww.twitter.com/PatrickLobacherwww.twitter.com/crosscontent

Facebook:

www.facebook.com/typovision

Blog:typoblog.de

Trainings:academy.typovision.de

XING:

www.xing.com/companies/typovisiongmbhwww.xing.com/profile/Patrick_Lobacherwww.xing.com/profile/Sebastian_Boettger2

LinkedInwww.linkedin.com/company/2038844

Slideshare:

www.slideshare.net/plobacherwww.slideshare.net/typovision

Amazon:

www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Thanks a lot!