Selling Responsive Webdesign - webtech Conference 2013
Upcoming SlideShare
Loading in...5
×
 

Selling Responsive Webdesign - webtech Conference 2013

on

  • 2,386 views

Slides of the talk: "Selling Responsive Webdesign" / webtech Conference 2013 by Patrick Lobacher (CEO typovision GmbH) / http://webtechcon.de / 29.10.2013

Slides of the talk: "Selling Responsive Webdesign" / webtech Conference 2013 by Patrick Lobacher (CEO typovision GmbH) / http://webtechcon.de / 29.10.2013

Statistics

Views

Total Views
2,386
Views on SlideShare
2,384
Embed Views
2

Actions

Likes
4
Downloads
13
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Selling Responsive Webdesign - webtech Conference 2013 Selling Responsive Webdesign - webtech Conference 2013 Presentation Transcript

  • 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