View
2.337
Download
1
Tags:
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
Citation preview
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 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://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
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
• 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
What‘s wrong with this workflow?
It worked for years!
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Responsive Web Designneeds 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 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 you‘ve commited (and in between)
• There are tools for this :-)
• Signature by customer
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 6
• Moodboard
• Illustrate visually the direction of the style
• Look & feel of website inkl. elements (like navigation, ...)
• Signature by customer
http://weblog.404creative.com
/
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 7
• Linear Design
• Enrich content dummy with basic design from Moodboard
• Just linear - not positioned
• To see how „real“ content will look like
• Signature by customer
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 8
• Prototype (Design in the browser)
• Produce a clickdummy with HTML5/CSS3/JavaScript/Whatever
• Should lead to final layout - so positioning is key
• Interaction with customer!
• Signature by customer
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 9
• Device testing
• Test on real devices! No simulators!
• Use Open Device Labs (ODL)
• There are tools to support you
• Signature by customer
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
RWD Workflow - Step 10
• Production
• Integrate in CMS (if any)
• Backend programming
• APIs
• ...
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Selling RWD
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Consulting (Basic RWD knowledge for customer)
• Workshops (Requirements, Decisions, Content, Clickdummy adjustments)
• Design (Moodboard, Linear Design, Element Design)
• Production (Content dummy, Clickdummy)
• Testing (Content testing, device testing)
Selling RWDConsulting
Workshop
Design
Programming
Testing
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• PSD Static documents are NOT part of the game!
• Full Layouts Design more elements and fewer layouts
• RWD AddOn It‘s NOT possible to „pimp“ an existing design/website with RWD. Period!
• RWD for Non-RWD Design Ensure that the designer has comprehensive understanding of RWD
• History Museum Let old browsers gracefully go (or degrade them)
What you (should) not sellPSD
Full Layouts
RWD for Non-RWD Design
RWD AddOn
History Museum
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• (Sorry) Stupid questions:
• How much is RWD?
• How much more is RWD?
• Correct answer:
• More than without
• Less than twice the effort for FE
Costs?
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• How Much Does a Responsive Web Design Cost?
• Answer: $13.47
• Read more at: http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
But wait...
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Customer: We do RWD later
• No - do it now or at the next Relaunch
• Customer: We have a design agency
• Ensure (really) that the design agency has a deep understanding of all the RWD processes - otherwise skip the job (or pay the bill)
• Customer: We do it the good old way - with PSD
• No, No and No. No PSD. Never. Or - have a good contract / laywer
FAQ
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Customer: We have no time to care about the project
• And we have no chance to implement RWD then
• But I really need a quote for RWD
• Double the amount for frontend and say: safety margin
• What was the price for RWD in your last project?
• What was the price of your last car/house/whirlpool?
FAQ
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Contracts
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Summary / Expectations
• Customer data
• Agency / Freelancer data
• Project Goal
• Deadlines
Contract - 1
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Agreements
• Customer has to review the work, provide feedback and appove in a timely manner
• Deadlines work two ways, customer and agency are bound to
• Customer agree to stick to the payment schedule
Contract - 2
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Design
• Creation of look-and-feel designs
• Creation of flexible layouts that adapt to the capabilities of many devices and screen sizes
• Design process is iteratively
• Mainly use of HTML5 and CSS3, instead of mocking up every template as a static visual
• Static visuals just to indicate a look-and-feel direction (typography, color, texture, elements)
Contract - 3
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Content & Pictures
• Agency is not responsible for writing or inputting any content
• Agency is not responsible for choosing, editing, converting or taking pictures
• If required, seperate quote could be provided
Contract - 4
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Browser testing in general
• Browser testing no longer means attempting to make a website look the same in browsers of different capabilities or on devices with different size screens.
• It does mean ensuring that a person’s experience of a design should be appropriate to the capabilities of a browser or device.
Contract - 5
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Desktop browser testing
• We test with the following browsers (including version)
• Apple / Safari / 6.0.5
• xxx / yyy / zzz
• We do not test with the following browsers
• Microsoft IE 8
Contract - 6
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Mobile browser testing
• We test with the following browsers (including version)
• Android 4.1 / Chrome / 6.0.5
• iOS 7.0.x / Safari
• xxx / yyy / zzz
• We do not test with the following browsers
• Blackberry OS /QNX, Symbian, ... (any Browser)
Contract - 7
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Changes / Feature Requests
• As this is a fixed price contract, we have a requirement specification and a functional specification done at the beginning
• We estimate our work based on these documents
• But we want to be flexible. So if you want anything to be changed (in difference to these documents), we will provide you with an seperate estimate
Contract - 8
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Copyright
• Customer guarantees that all assets of text, images or other artwork he provides are either that the customer has permission to use them
• The customer own the elements but the agency owns the unique combination (design, layout) of them.
• The agency gives a license of this unique combination for the customer exclusive and in perpuity for this project only
Contract - 9
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Payment schedule
• We aggree on the the following payemen schedule:
• 50% in advance - agency starts work when cashed
• 40% at delivery (or define smaller milestones)
• 10% at acceptance
• If customer uses the project in a live environment - this implies a acceptance and remaining 10% are due
• 10 day term
Contract - 10
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Legal
• No programming work is error-free. We try to fix bugs (functions which are defined in the documents mentioned earlier but not working as described) as soon as possible but we can’t be liable to you or any third-party for damages, including lost profits, lost savings or other incidental, consequential or special damages, even if you’ve advised us of them.
• The agency will show off the work with other people, so the agency reserves the right, with your permission, to display and link to the project and to write about it.
• We are not liable for any bugs in used Open Source Software
Contract - 11
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Links
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• http://www.creativebloq.com/responsive-web-design/top-responsive-web-design-problems-and-how-avoid-them-8122790
• http://weblog.404creative.com/2007/02/14/website-mood-boards-a-successful-precursor-to-visual-prototyping/
• http://styletil.es/
• http://samanthatoy.com/washington-examiner/
Links
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• http://responsivedesignworkflow.com/
• http://de.slideshare.net/stephenhay/mobilism2012
• http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/
• http://dmduplessis.com/responsive-design-and-the-art-of-being-busy/
Links
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• http://stuffandnonsense.co.uk/projects/contract-killer/
Links
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Last words:
Responsive Web Designneeds Re-Thinking
Thank You!
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Patrick Lobacher• 43 years, happily married, residing in Munich• Author of 9 books and > 40 articles on the subject of TYPO3
and web development• Active in the web deveopment area since 1994• Certified TYPO3 Integrator since 2009• Until 2012 member of the teams Extbase (Leader),
Certification and Content editoral• Until 2012 member of the EAB (Expert Advisory Board)• Co-Organizer of the TYPO3camp Munich (2008-2013) and
TYPO3 Developer Days (T3DD12)• Speaker at national and internation conferences• Lecturer for leading training institutes and MVHS
Publications:
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
• Full service digital communications agency based in Munich & NRW• >40 employees (+ 15 from freelancer pool)• CEO: Sebastian Böttger (CTO), Patrick Lobacher (CMO)• Highly specialized in TYPO3 since 10 years (Extbase/Fluid since 2009)• Platinum TYPO3 Association Member since 3 Jahren• Specialized in Enterprise Search (Solr, Elastic Search) since 3 years • Focus: Premium Open Source Web Technlologies and CMS• Agency profil (german): www.typovision.de/dieagentur
• More than 600 projects of any size
• Vision:We are the partner of our clients in all areas of its digital communication - from the initial vision to the successful implementation and far beyond.
typovision GmbH
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Customers
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Contact
Traditional:
typovision GmbH
Elsenheimerstr. 780687 Munich
Phone: +49 89 45 20 59 3 - 0Fax: +49 89 45 20 59 3 - 29
Email: [email protected]: www.typovision.de
Twitter: www.twitter.com/typovisionwww.twitter.com/PatrickLobacherwww.twitter.com/crosscontent
Facebook: www.facebook.com/typovision
Blog:typoblog.de
Trainings:academy.typovision.de
XING: www.xing.com/companies/typovisiongmbhwww.xing.com/profile/Patrick_Lobacherwww.xing.com/profile/Sebastian_Boettger2
LinkedInwww.linkedin.com/company/2038844
Slideshare: www.slideshare.net/plobacherwww.slideshare.net/typovision
Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA
Patrick Lobacher | typovision GmbH | 29.10.2013 | Selling Responsive Webdesign
Thanks a lot!