SlideShare ist ein Scribd-Unternehmen logo
1 von 67
Downloaden Sie, um offline zu lesen
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)

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

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)

Responsive
Web
Design

Single Page
Web Design

Neon

Off-Canvas

CSS3
Animations

Full-width
Background
Images

Fullscreen
Typography

QR Codes

Infinite
Scrolling

Decoupled
CMS

Interactive
Infographics

Social Media
Badges

Black & White
Design

Simplified
Design

Parallax
Scrolling

Flat Design

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
HOT TOPIC 2014!!

http://katieunderhill.co.uk/

http://www.designpromotivate.com

WEB DESIGN
TRENDS 2014
http://www.smashingmagazine.com
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 future“
Patrick 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://www.timhordern.com/

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

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

Customer
knowledge
(sadly)

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
That‘s it!
Isn‘t it???

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Okay, okay - it‘s 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
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 :-)
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
What‘s wrong with
this workflow?
It worked for years!

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Responsive Web Design
needs a rethinking
It‘s 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 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
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
Clarified requirements (Storys/RD/FD)
➀ Decisions

➅ Moodboard

➁ Content Strategy

➆ Linear Design

➂ Content Wireframes

➇ Prototyping

➃ Creating Content

➈ Device Testing

➄ Content Testing

➉ Production

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

Main nav
Logo

Search & Links
Fancy Plugin
Headline
Content

For every page type
And for every content type

Footer

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

•

Convert it to HTML for a
dummy

Use markup via Markdown /
AsciiDoc / ReST

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 5
• Content Testing
•
•

Test the content dummy

•
•

There are tools for this :-)

in all screensizes you‘ve
commited (and in between)
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
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

http://weblog.404creative.com/

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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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?

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Contracts

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Contract - 1
• Summary / Expectations
•
•
•
•

Customer data
Agency / Freelancer data
Project Goal
Deadlines

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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 flexible 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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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.

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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)

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Contract - 10
• 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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Links

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
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/
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Links

• http://responsivedesignworkflow.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/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Links
• http://stuffandnonsense.co.uk/projects/
contract-killer/

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Last words:
Responsive Web Design
needs 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
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 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.

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. 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/profile/Patrick_Lobacher
www.xing.com/profile/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

Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Thanks a lot!
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign

Weitere ähnliche Inhalte

Was ist angesagt?

Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Developmenttcottrill
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileVicke Cheung
 
Advancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSAdvancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSChristian Heilmann
 
Truly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsTruly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsJohn Eckman
 
7 steps-to-migrate-your-seo-strategy robin-neyt
7 steps-to-migrate-your-seo-strategy robin-neyt7 steps-to-migrate-your-seo-strategy robin-neyt
7 steps-to-migrate-your-seo-strategy robin-neytmichael_wijs
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-TechiesMalcolm Jones
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Webinar: Next Generation, Data-Driven Plugin and Theme Development
Webinar: Next Generation, Data-Driven Plugin and Theme DevelopmentWebinar: Next Generation, Data-Driven Plugin and Theme Development
Webinar: Next Generation, Data-Driven Plugin and Theme DevelopmentWP Engine
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web designNate Walton
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupChristian Heilmann
 
Wireframes for the Wicked
Wireframes for the WickedWireframes for the Wicked
Wireframes for the WickedNick Finck
 
GFAR webinar "The future of online media" - webdesign trends
GFAR webinar "The future of online media" - webdesign trendsGFAR webinar "The future of online media" - webdesign trends
GFAR webinar "The future of online media" - webdesign trendsGCARD Conferences
 
Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatChristian Heilmann
 
Html5 presentation slides
Html5 presentation slidesHtml5 presentation slides
Html5 presentation slideswebwizart
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 

Was ist angesagt? (20)

Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Development
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
 
Advancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJSAdvancing JavaScript without breaking the web - MunichJS
Advancing JavaScript without breaking the web - MunichJS
 
Truly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsTruly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User Goals
 
7 steps-to-migrate-your-seo-strategy robin-neyt
7 steps-to-migrate-your-seo-strategy robin-neyt7 steps-to-migrate-your-seo-strategy robin-neyt
7 steps-to-migrate-your-seo-strategy robin-neyt
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynote
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Webinar: Next Generation, Data-Driven Plugin and Theme Development
Webinar: Next Generation, Data-Driven Plugin and Theme DevelopmentWebinar: Next Generation, Data-Driven Plugin and Theme Development
Webinar: Next Generation, Data-Driven Plugin and Theme Development
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Wireframes for the Wicked
Wireframes for the WickedWireframes for the Wicked
Wireframes for the Wicked
 
GFAR webinar "The future of online media" - webdesign trends
GFAR webinar "The future of online media" - webdesign trendsGFAR webinar "The future of online media" - webdesign trends
GFAR webinar "The future of online media" - webdesign trends
 
Moore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix thatMoore vs. May - everything is faster and better: we can fix that
Moore vs. May - everything is faster and better: we can fix that
 
Html5 presentation slides
Html5 presentation slidesHtml5 presentation slides
Html5 presentation slides
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 

Andere mochten auch

Blogs and Wikis in Science teaching
Blogs and Wikis in Science teachingBlogs and Wikis in Science teaching
Blogs and Wikis in Science teachingDanny Nicholson
 
WebGuru Builds Professional Websites For Small Businesses
WebGuru Builds Professional Websites For Small BusinessesWebGuru Builds Professional Websites For Small Businesses
WebGuru Builds Professional Websites For Small BusinessesWebGuru Infosystems Pvt. Ltd.
 
Top Magento Websites Beautifully Rendered by webguru-india.com
Top Magento Websites Beautifully Rendered by webguru-india.comTop Magento Websites Beautifully Rendered by webguru-india.com
Top Magento Websites Beautifully Rendered by webguru-india.comWebGuru Infosystems Pvt. Ltd.
 
GoDaddy Overview - August 2015
GoDaddy Overview - August 2015GoDaddy Overview - August 2015
GoDaddy Overview - August 2015godaddyir
 
Infocon Bangladesh 2016
Infocon Bangladesh 2016Infocon Bangladesh 2016
Infocon Bangladesh 2016Prime Infoserv
 
Run Your Business Like a Bike Shop
Run Your Business Like a Bike ShopRun Your Business Like a Bike Shop
Run Your Business Like a Bike ShopShawn Pfunder
 
Het nieuwe investeren (event op 14/4)
Het nieuwe investeren (event op 14/4)Het nieuwe investeren (event op 14/4)
Het nieuwe investeren (event op 14/4)Participium
 
Proyecto, luego existo: el enfoque ISO 21500
Proyecto, luego existo: el enfoque ISO 21500Proyecto, luego existo: el enfoque ISO 21500
Proyecto, luego existo: el enfoque ISO 21500Cristian Soto
 
Hospitality Market - Barcelona
Hospitality Market - BarcelonaHospitality Market - Barcelona
Hospitality Market - BarcelonaFlorie Thielin
 
1.plan de estudio 1 a 11
1.plan de estudio 1 a 111.plan de estudio 1 a 11
1.plan de estudio 1 a 11luciamosquera
 
Framework Llibreries Lliures
Framework Llibreries LliuresFramework Llibreries Lliures
Framework Llibreries LliuresJordi Catà
 
La Historia de PowerPoint de la paqueteria Office
La Historia de PowerPoint de la paqueteria OfficeLa Historia de PowerPoint de la paqueteria Office
La Historia de PowerPoint de la paqueteria OfficeRakkiRakki Martinez
 
Bg 1 Sara Miren Biologia
Bg 1 Sara Miren BiologiaBg 1 Sara Miren Biologia
Bg 1 Sara Miren Biologiapluisarrieta
 
Liquipel Skins
Liquipel SkinsLiquipel Skins
Liquipel SkinsSKINS SRL
 
Ensayo de herbicidas para el control de lolium
Ensayo de herbicidas para el control de loliumEnsayo de herbicidas para el control de lolium
Ensayo de herbicidas para el control de loliumCampo Global
 
Tabla comparativa de internet,intranet yextranet
Tabla comparativa de internet,intranet yextranetTabla comparativa de internet,intranet yextranet
Tabla comparativa de internet,intranet yextranetMonica Rmz M
 

Andere mochten auch (20)

Blogs and Wikis in Science teaching
Blogs and Wikis in Science teachingBlogs and Wikis in Science teaching
Blogs and Wikis in Science teaching
 
WebGuru Builds Professional Websites For Small Businesses
WebGuru Builds Professional Websites For Small BusinessesWebGuru Builds Professional Websites For Small Businesses
WebGuru Builds Professional Websites For Small Businesses
 
Top Magento Websites Beautifully Rendered by webguru-india.com
Top Magento Websites Beautifully Rendered by webguru-india.comTop Magento Websites Beautifully Rendered by webguru-india.com
Top Magento Websites Beautifully Rendered by webguru-india.com
 
Exclusive Christmas Treat from WebGuru
Exclusive Christmas Treat from WebGuruExclusive Christmas Treat from WebGuru
Exclusive Christmas Treat from WebGuru
 
GoDaddy Overview - August 2015
GoDaddy Overview - August 2015GoDaddy Overview - August 2015
GoDaddy Overview - August 2015
 
Logo design fundamentals with webguru india
Logo design fundamentals with webguru indiaLogo design fundamentals with webguru india
Logo design fundamentals with webguru india
 
Infocon Bangladesh 2016
Infocon Bangladesh 2016Infocon Bangladesh 2016
Infocon Bangladesh 2016
 
Run Your Business Like a Bike Shop
Run Your Business Like a Bike ShopRun Your Business Like a Bike Shop
Run Your Business Like a Bike Shop
 
Het nieuwe investeren (event op 14/4)
Het nieuwe investeren (event op 14/4)Het nieuwe investeren (event op 14/4)
Het nieuwe investeren (event op 14/4)
 
Proyecto, luego existo: el enfoque ISO 21500
Proyecto, luego existo: el enfoque ISO 21500Proyecto, luego existo: el enfoque ISO 21500
Proyecto, luego existo: el enfoque ISO 21500
 
Hospitality Market - Barcelona
Hospitality Market - BarcelonaHospitality Market - Barcelona
Hospitality Market - Barcelona
 
1.plan de estudio 1 a 11
1.plan de estudio 1 a 111.plan de estudio 1 a 11
1.plan de estudio 1 a 11
 
Framework Llibreries Lliures
Framework Llibreries LliuresFramework Llibreries Lliures
Framework Llibreries Lliures
 
contacto
contactocontacto
contacto
 
Clasif. infantil femenino 2013
Clasif. infantil femenino 2013Clasif. infantil femenino 2013
Clasif. infantil femenino 2013
 
La Historia de PowerPoint de la paqueteria Office
La Historia de PowerPoint de la paqueteria OfficeLa Historia de PowerPoint de la paqueteria Office
La Historia de PowerPoint de la paqueteria Office
 
Bg 1 Sara Miren Biologia
Bg 1 Sara Miren BiologiaBg 1 Sara Miren Biologia
Bg 1 Sara Miren Biologia
 
Liquipel Skins
Liquipel SkinsLiquipel Skins
Liquipel Skins
 
Ensayo de herbicidas para el control de lolium
Ensayo de herbicidas para el control de loliumEnsayo de herbicidas para el control de lolium
Ensayo de herbicidas para el control de lolium
 
Tabla comparativa de internet,intranet yextranet
Tabla comparativa de internet,intranet yextranetTabla comparativa de internet,intranet yextranet
Tabla comparativa de internet,intranet yextranet
 

Ähnlich wie Selling Responsive Webdesign - webtech Conference 2013

Design Sprint Overview
Design Sprint OverviewDesign Sprint Overview
Design Sprint OverviewOliver Morbach
 
Creating UI Marketers Won't F*Up
Creating UI Marketers Won't F*UpCreating UI Marketers Won't F*Up
Creating UI Marketers Won't F*UpLOIC BURDET
 
StartupDay 2010 - Design at a Startup
StartupDay 2010 - Design at a StartupStartupDay 2010 - Design at a Startup
StartupDay 2010 - Design at a StartupJanMiksovsky
 
Agile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleAgile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleManuel Spezzani
 
Agile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleAgile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleIlaria Mauric
 
UX Within Design Agencies - UX Cambridge 2017
UX Within Design Agencies - UX Cambridge 2017UX Within Design Agencies - UX Cambridge 2017
UX Within Design Agencies - UX Cambridge 2017⚡️ Aaron Humphreys
 
UX Camp 2017 – How UX survives in agile development
UX Camp 2017 – How UX survives in agile developmentUX Camp 2017 – How UX survives in agile development
UX Camp 2017 – How UX survives in agile developmentJanne_Bjorsted
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingYury Vetrov
 
Lean Startup Zurich- MVPS
Lean Startup Zurich- MVPSLean Startup Zurich- MVPS
Lean Startup Zurich- MVPSNeha Shah
 
Prototyping Approaches and Outcomes
Prototyping Approaches and OutcomesPrototyping Approaches and Outcomes
Prototyping Approaches and OutcomesDevbridge Group
 
IxDA October Event: Prototyping Approaches and Outcomes
IxDA October Event: Prototyping Approaches and OutcomesIxDA October Event: Prototyping Approaches and Outcomes
IxDA October Event: Prototyping Approaches and OutcomesIxDA Chicago
 
Prototyping for speed & scale
Prototyping for speed & scalePrototyping for speed & scale
Prototyping for speed & scaleCarl Sziebert
 
Usersnap B2B Marketing
Usersnap B2B MarketingUsersnap B2B Marketing
Usersnap B2B MarketingJosef Trauner
 
Power of Design (high-level introduction into Design for Project Managers)
Power of Design (high-level introduction into Design for Project Managers)Power of Design (high-level introduction into Design for Project Managers)
Power of Design (high-level introduction into Design for Project Managers)Mark König
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
How adding a further tool can be a good thing
How adding a further tool can be a good thingHow adding a further tool can be a good thing
How adding a further tool can be a good thingBelsoft
 
VMG marketing deck 12.2014
VMG marketing deck 12.2014VMG marketing deck 12.2014
VMG marketing deck 12.2014Kelly Sparks
 
Design Systems: Designing out Waste, Designing in Consistency
Design Systems: Designing out Waste, Designing in ConsistencyDesign Systems: Designing out Waste, Designing in Consistency
Design Systems: Designing out Waste, Designing in ConsistencyEqual Experts
 

Ähnlich wie Selling Responsive Webdesign - webtech Conference 2013 (20)

Design Sprint Overview
Design Sprint OverviewDesign Sprint Overview
Design Sprint Overview
 
Creating UI Marketers Won't F*Up
Creating UI Marketers Won't F*UpCreating UI Marketers Won't F*Up
Creating UI Marketers Won't F*Up
 
StartupDay 2010 - Design at a Startup
StartupDay 2010 - Design at a StartupStartupDay 2010 - Design at a Startup
StartupDay 2010 - Design at a Startup
 
Agile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleAgile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possible
 
Agile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possibleAgile and Design: creating and implementing products (in Italy) is possible
Agile and Design: creating and implementing products (in Italy) is possible
 
UX Within Design Agencies - UX Cambridge 2017
UX Within Design Agencies - UX Cambridge 2017UX Within Design Agencies - UX Cambridge 2017
UX Within Design Agencies - UX Cambridge 2017
 
UX Camp 2017 – How UX survives in agile development
UX Camp 2017 – How UX survives in agile developmentUX Camp 2017 – How UX survives in agile development
UX Camp 2017 – How UX survives in agile development
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
 
Lean Startup Zurich- MVPS
Lean Startup Zurich- MVPSLean Startup Zurich- MVPS
Lean Startup Zurich- MVPS
 
Prototyping Approaches and Outcomes
Prototyping Approaches and OutcomesPrototyping Approaches and Outcomes
Prototyping Approaches and Outcomes
 
IxDA October Event: Prototyping Approaches and Outcomes
IxDA October Event: Prototyping Approaches and OutcomesIxDA October Event: Prototyping Approaches and Outcomes
IxDA October Event: Prototyping Approaches and Outcomes
 
Prototyping As Mindset
Prototyping As MindsetPrototyping As Mindset
Prototyping As Mindset
 
Prototyping for speed & scale
Prototyping for speed & scalePrototyping for speed & scale
Prototyping for speed & scale
 
Usersnap B2B Marketing
Usersnap B2B MarketingUsersnap B2B Marketing
Usersnap B2B Marketing
 
Power of Design (high-level introduction into Design for Project Managers)
Power of Design (high-level introduction into Design for Project Managers)Power of Design (high-level introduction into Design for Project Managers)
Power of Design (high-level introduction into Design for Project Managers)
 
Mogul Studio Profile
Mogul Studio ProfileMogul Studio Profile
Mogul Studio Profile
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
How adding a further tool can be a good thing
How adding a further tool can be a good thingHow adding a further tool can be a good thing
How adding a further tool can be a good thing
 
VMG marketing deck 12.2014
VMG marketing deck 12.2014VMG marketing deck 12.2014
VMG marketing deck 12.2014
 
Design Systems: Designing out Waste, Designing in Consistency
Design Systems: Designing out Waste, Designing in ConsistencyDesign Systems: Designing out Waste, Designing in Consistency
Design Systems: Designing out Waste, Designing in Consistency
 

Mehr von die.agilen GmbH

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017die.agilen GmbH
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRdie.agilen GmbH
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlindie.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationdie.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...die.agilen GmbH
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 

Kürzlich hochgeladen

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 

Kürzlich hochgeladen (20)

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 

Selling Responsive Webdesign - webtech Conference 2013

  • 1. Patrick Lobacher | typovision GmbH | 29.10.2013 Selling Responsive Webdesign
  • 2. Agenda • Bullshit Bingo • RWD is easy! • RWD Workflow • Selling RWD • Contracts Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 3. Bullshit Bingo Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 4. 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
  • 5. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 6. To collect terms for your own game, just google for „web design trends 2014“ Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 7. 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 Infinite Scrolling Decoupled CMS Interactive Infographics Social Media Badges Black & White Design Simplified Design Parallax Scrolling Flat Design Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 8. HOT TOPIC 2014!! http://katieunderhill.co.uk/ http://www.designpromotivate.com WEB DESIGN TRENDS 2014 http://www.smashingmagazine.com Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 9. Responsive Web Design - RWD is a Trend? Really? Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 10. 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
  • 11. „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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 12. But this is easy to cover: iPad, iPhone, Nexus, Galaxy #not http://www.timhordern.com/ http://opensignal.com/reports/fragmentation.php Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 13. 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
  • 14. RWD is easy! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 15. Ingredients • Rearranging of content boxes • A fluid grid concept • Flexible images • Media queries • Server-side components (RESS) • „a few“ processes Customer knowledge (sadly) Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 16. That‘s it! Isn‘t it??? Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 17. Okay, okay - it‘s not that easy... But this is just developer magic! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 18. Sure? Responsive Design is not (just) a design or development problem! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 19. RWD Workflow Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 20. 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 :-) Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 21. What‘s wrong with this workflow? It worked for years! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 22. Responsive Web Design needs a rethinking It‘s an all-embracing mindset! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 23. And it approaches many roles: CEO, Sales, UX/UI, Designer, Coder, Content, Customer, ... Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 24. 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
  • 25. 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
  • 26. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 27. 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
  • 28. RWD Workflow Clarified requirements (Storys/RD/FD) ➀ Decisions ➅ Moodboard ➁ Content Strategy ➆ Linear Design ➂ Content Wireframes ➇ Prototyping ➃ Creating Content ➈ Device Testing ➄ Content Testing ➉ Production More Programming & Finalizing project Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 29. 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
  • 30. 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
  • 31. RWD Workflow - Step 3 • Content Wireframes • • • • • • • Which content is where Just boxes No design! Mobile first! For every breakpoint Main nav Logo Search & Links Fancy Plugin Headline Content For every page type And for every content type Footer Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 32. RWD Workflow - Step 4 • 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 33. RWD Workflow - Step 5 • Content Testing • • Test the content dummy • • There are tools for this :-) in all screensizes you‘ve commited (and in between) Signature by customer Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 34. RWD Workflow - Step 6 • Moodboard Illustrate visually the direction of the style • Look & feel of website inkl. elements (like navigation, ...) • Signature by customer Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign http://weblog.404creative.com/ •
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. RWD Workflow - Step 10 • Production • • • • Integrate in CMS (if any) Backend programming APIs ... Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 39. Selling RWD Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 40. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 41. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 42. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 43. 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/ Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 44. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 45. 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? Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 46. Contracts Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 47. Contract - 1 • Summary / Expectations • • • • Customer data Agency / Freelancer data Project Goal Deadlines Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 48. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 49. 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 flexible 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 50. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 51. 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. Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 52. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 53. 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) Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 54. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 55. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 56. Contract - 10 • 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 57. 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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 58. Links Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 60. Links • http://responsivedesignworkflow.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/ Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 61. Links • http://stuffandnonsense.co.uk/projects/ contract-killer/ Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 62. Last words: Responsive Web Design needs Re-Thinking Thank You! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 63. 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
  • 64. 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 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. Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 65. Customers Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 66. 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/profile/Patrick_Lobacher www.xing.com/profile/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 Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
  • 67. Thanks a lot! Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign