Selling Responsive Webdesign - webtech Conference 2013

Patrick Lobacher | typovision GmbH | 29.10.2013

Selling Responsive Webdesign

Agenda
• Bullshit Bingo
• RWD is easy!
• RWD Workﬂow
• Selling RWD
• Contracts
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Bullshit Bingo


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

Bullshit Bingo

(Shout: „BULLSHIT“ if row or column is complete)

Proactive

Win-Win

Best practice

Mindset

Out of the box

Synergy

Sales driven

At the end of
the Day

24 / 7

The truth is...

Paradigm

Core
competences

Value added

Benchmark

Out of the loop Client focused


To collect terms for your own
game, just google for
„web design trends 2014“


2014 - Web Design - Bullshit Bingo

(Shout: „BULLSHIT“ if row or column is complete)

Responsive
Web
Design

Single Page
Web Design

Neon

Off-Canvas

CSS3
Animations

Full-width
Background
Images

Fullscreen
Typography

QR Codes

Inﬁnite
Scrolling

Decoupled
CMS

Interactive
Infographics

Social Media
Badges

Black & White
Design

Simpliﬁed
Design

Parallax
Scrolling

Flat Design


HOT TOPIC 2014!!

http://katieunderhill.co.uk/

http://www.designpromotivate.com

WEB DESIGN
TRENDS 2014
http://www.smashingmagazine.com

Responsive Web Design - RWD
is a Trend?
Really?

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.


„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


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

http://www.timhordern.com/

http://opensignal.com/reports/fragmentation.php


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/


RWD is easy!


Ingredients
• Rearranging of content boxes
• A ﬂuid grid concept
• Flexible images
• Media queries
• Server-side components (RESS)
• „a few“ processes

Customer
knowledge
(sadly)


That‘s it!
Isn‘t it???


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


Sure?
Responsive Design is not
(just) a design or
development problem!

RWD Workﬂow


Traditional Workflow
•
•
•
•
•
•
•
•

Requirement specification
Functional specification
Design process => PSD
PSD => Design approval
PSD => Implementation
Verification / Testing
PSD => final acceptance

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

Done :-)

What‘s wrong with
this workﬂow?
It worked for years!


Responsive Web Design
needs a rethinking
It‘s an
all-embracing mindset!

And it approaches many roles:
CEO, Sales, UX/UI, Designer,
Coder, Content, Customer, ...

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?


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

Customer
• We both create business value - not pixelprecise PSD

• You need time - much time! As you are

involved in the project - daily. Participation
is key!

• You need a basic understanding of RWD

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)


RWD Workﬂow
Clariﬁed requirements (Storys/RD/FD)
➀ Decisions

➅ Moodboard

➁ Content Strategy

➆ Linear Design

➂ Content Wireframes

➇ Prototyping

➃ Creating Content

➈ Device Testing

➄ Content Testing

➉ Production

More Programming & Finalizing project

RWD Workﬂow - 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 Brieﬁng (Look & Feel)
Contract


• 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


•

Content Wireframes

•
•
•
•
•
•
•

Which content is where
Just boxes
No design!
Mobile ﬁrst!
For every breakpoint

Main nav
Logo

Search & Links
Fancy Plugin
Headline
Content

For every page type
And for every content type

Footer


•

Creating content

•

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

•
•

Use plaintext only

•

Convert it to HTML for a
dummy

Use markup via Markdown /
AsciiDoc / ReST


• Content Testing
•
•

Test the content dummy

•
•

There are tools for this :-)

in all screensizes you‘ve
commited (and in between)
Signature by customer

• Moodboard
Illustrate visually the
direction of the style

•

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

•


http://weblog.404creative.com/

•

• Linear Design
•

Enrich content dummy with basic
design from Moodboard

•
•
•

Just linear - not positioned
To see how „real“ content will look like

• Prototype (Design in the browser)
•

Produce a clickdummy with
HTML5/CSS3/JavaScript/Whatever

•

Should lead to ﬁnal layout - so
positioning is key

•
•

Interaction with customer!

• Device testing
•
•
•
•

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


• Production
•
•
•
•

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


Selling RWD


Selling RWD
•

Consulting
(Basic RWD knowledge for customer)

•

Workshops
(Requirements, Decisions, Content,
Clickdummy adjustments)

Workshop

•

Design
(Moodboard, Linear Design, Element
Design)

Programming

•

Production
(Content dummy, Clickdummy)

•

Testing
(Content testing, device testing)

Consulting

Design

Testing


What you (should) not sell
•

PSD
Static documents are NOT part of the
game!

•

Full Layouts
Design more elements and fewer layouts

Full Layouts

•

RWD AddOn
It‘s NOT possible to „pimp“ an existing
design/website with RWD. Period!

RWD AddOn

•

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

•

PSD

RWD for Non-RWD Design

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

History Museum


Costs?
• (Sorry) Stupid questions:
•
•

How much is RWD?

•
•

More than without

How much more is RWD?

• Correct answer:
Less than twice the effort for FE


But wait...
• How Much Does a Responsive
Web Design Cost?

•
•

Answer: $13.47
Read more at:
http://bradfrostweb.com/blog/web/
how-much-does-a-responsive-webdesign-cost/


FAQ
•
•
•

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
•
•
•

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?


Contracts


Contract - 1
• Summary / Expectations
•
•
•
•

Customer data
Agency / Freelancer data
Project Goal
Deadlines


Contract - 2
• 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 - 3
•

Design

•
•

Creation of look-and-feel designs

•
•

Design process is iteratively

•

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

Creation of ﬂexible layouts that adapt to the
capabilities of many devices and screen sizes
Mainly use of HTML5 and CSS3, instead of mocking up
every template as a static visual


Contract - 4
• 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 - 5
• 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 - 6
• 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 - 7

• 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 - 8
• 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 - 9
• 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 - 10
• Payment schedule
•

We aggree on the the following payemen schedule:

•
•
•

50% in advance - agency starts work when cashed
40% at delivery (or deﬁne 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 - 11
•

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


Links


Links
• http://www.creativebloq.com/responsive-webdesign/top-responsive-web-design-problemsand-how-avoid-them-8122790

• http://weblog.404creative.com/2007/02/14/

website-mood-boards-a-successful-precursorto-visual-prototyping/

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

Links

• http://responsivedesignworkﬂow.com/
• http://de.slideshare.net/stephenhay/
mobilism2012

• http://www.smashingmagazine.com/

2012/09/28/better-client-participation-inresponsive-design-projects/

• http://dmduplessis.com/responsive-designand-the-art-of-being-busy/


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


Last words:
Responsive Web Design
needs Re-Thinking
Thank You!

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
Certiﬁed TYPO3 Integrator since 2009
Until 2012 member of the teams Extbase (Leader),
Certiﬁcation 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:


typovision GmbH
• 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 proﬁl (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.


Customers


Contact
Traditional:
typovision GmbH
Elsenheimerstr. 7
80687 Munich
Phone:

+49 89 45 20 59 3 - 0
Fax:

+49 89 45 20 59 3 - 29
Email:

Web:

info@typovision.de
www.typovision.de

Twitter:

www.twitter.com/typovision
www.twitter.com/PatrickLobacher
www.twitter.com/crosscontent

XING:

www.xing.com/companies/typovisiongmbh
www.xing.com/proﬁle/Patrick_Lobacher
www.xing.com/proﬁle/Sebastian_Boettger2

Facebook:

www.facebook.com/typovision

LinkedIn
www.linkedin.com/company/2038844

Blog:
typoblog.de

Slideshare:

www.slideshare.net/plobacher
www.slideshare.net/typovision

Trainings:
academy.typovision.de

Amazon:

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


Thanks a lot!

Selling Responsive Webdesign - webtech Conference 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Selling Responsive Webdesign - webtech Conference 2013

Similar to Selling Responsive Webdesign - webtech Conference 2013 (20)

More from die.agilen GmbH

More from die.agilen GmbH (20)

Recently uploaded

Recently uploaded (20)

Selling Responsive Webdesign - webtech Conference 2013