selling responsive webdesign - webtech conference 2013

Download Selling Responsive Webdesign - webtech Conference 2013

Post on 17-Oct-2014

2.325 views

Category:

Technology

1 download

Embed Size (px)

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 Desi