+ All Categories
Transcript
Page 1: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013

Selling Responsive Webdesign

Page 2: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Agenda

• Bullshit Bingo

• RWD is easy!

• RWD Workflow

• Selling RWD

• Contracts

Page 3: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Bullshit Bingo

Page 4: Selling Responsive Webdesign - webtech Conference 2013

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

Page 5: Selling Responsive Webdesign - webtech Conference 2013

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

Page 6: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

To collect terms for your own game, just google for

„web design trends 2014“

Page 7: Selling Responsive Webdesign - webtech Conference 2013

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

Page 8: Selling Responsive Webdesign - webtech Conference 2013

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

Page 9: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Responsive Web Design - RWD

is a Trend?

Really?

Page 10: Selling Responsive Webdesign - webtech Conference 2013

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.

Page 11: Selling Responsive Webdesign - webtech Conference 2013

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 future“Patrick Lobacher, 29.10.2013

Page 12: Selling Responsive Webdesign - webtech Conference 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/

Page 13: Selling Responsive Webdesign - webtech Conference 2013

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/

Page 14: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD is easy!

Page 15: Selling Responsive Webdesign - webtech Conference 2013

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)

Page 16: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

That‘s it!

Isn‘t it???

Page 17: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Okay, okay - it‘s not that easy...But this is just developer magic!

Page 18: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Sure?

Responsive Design is not (just) a design or

development problem!

Page 19: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow

Page 20: Selling Responsive Webdesign - webtech Conference 2013

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

Page 21: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

What‘s wrong with this workflow?

It worked for years!

Page 22: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Responsive Web Designneeds a rethinking

It‘s an all-embracing mindset!

Page 23: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

And it approaches many roles:

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

Page 24: Selling Responsive Webdesign - webtech Conference 2013

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?

Page 25: Selling Responsive Webdesign - webtech Conference 2013

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

Page 26: Selling Responsive Webdesign - webtech Conference 2013

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

Page 27: Selling Responsive Webdesign - webtech Conference 2013

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)

Page 28: Selling Responsive Webdesign - webtech Conference 2013

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

Page 29: Selling Responsive Webdesign - webtech Conference 2013

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

Page 30: Selling Responsive Webdesign - webtech Conference 2013

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

Page 31: Selling Responsive Webdesign - webtech Conference 2013

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

Page 32: Selling Responsive Webdesign - webtech Conference 2013

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

Page 33: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 5

• Content Testing

• Test the content dummy

• in all screensizes you‘ve commited (and in between)

• There are tools for this :-)

• Signature by customer

Page 34: Selling Responsive Webdesign - webtech Conference 2013

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

/

Page 35: Selling Responsive Webdesign - webtech Conference 2013

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

Page 36: Selling Responsive Webdesign - webtech Conference 2013

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

Page 37: Selling Responsive Webdesign - webtech Conference 2013

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

Page 38: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

RWD Workflow - Step 10

• Production

• Integrate in CMS (if any)

• Backend programming

• APIs

• ...

Page 39: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Selling RWD

Page 40: Selling Responsive Webdesign - webtech Conference 2013

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

Page 41: Selling Responsive Webdesign - webtech Conference 2013

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 It‘s 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

Page 42: Selling Responsive Webdesign - webtech Conference 2013

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?

Page 44: Selling Responsive Webdesign - webtech Conference 2013

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

Page 45: Selling Responsive Webdesign - webtech Conference 2013

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

Page 46: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Contracts

Page 47: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

• Summary / Expectations

• Customer data

• Agency / Freelancer data

• Project Goal

• Deadlines

Contract - 1

Page 48: Selling Responsive Webdesign - webtech Conference 2013

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

Page 49: Selling Responsive Webdesign - webtech Conference 2013

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

Page 50: Selling Responsive Webdesign - webtech Conference 2013

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

Page 51: Selling Responsive Webdesign - webtech Conference 2013

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 person’s experience of a design should be appropriate to the capabilities of a browser or device.

Contract - 5

Page 52: Selling Responsive Webdesign - webtech Conference 2013

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

Page 53: Selling Responsive Webdesign - webtech Conference 2013

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

Page 54: Selling Responsive Webdesign - webtech Conference 2013

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

Page 55: Selling Responsive Webdesign - webtech Conference 2013

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

Page 56: Selling Responsive Webdesign - webtech Conference 2013

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

Page 57: Selling Responsive Webdesign - webtech Conference 2013

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 can’t be liable to you or any third-party for damages, including lost profits, lost savings or other incidental, consequential or special damages, even if you’ve 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

Page 58: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Links

Page 59: Selling Responsive Webdesign - webtech Conference 2013

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

Page 60: Selling Responsive Webdesign - webtech Conference 2013

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

Page 61: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

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

Links

Page 62: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Last words:

Responsive Web Designneeds Re-Thinking

Thank You!

Page 63: Selling Responsive Webdesign - webtech Conference 2013

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:

Page 64: Selling Responsive Webdesign - webtech Conference 2013

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 Böttger (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

Page 65: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Customers

Page 66: Selling Responsive Webdesign - webtech Conference 2013

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: [email protected]: 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

Page 67: Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Thanks a lot!


Top Related