Responsive Web Design Workshop, Frankfurt Bookfair 2013

1,311 views

Published on

Presentation on Responsive Web Design at the 2013 Frankfurt bookfair CONTEC conference

Published in: Technology, Design
  • Be the first to comment

Responsive Web Design Workshop, Frankfurt Bookfair 2013

  1. 1. Michael Cairns Managing Partner Information Media Partners Responsive Web Design Frankfurt Bookfair 2013
  2. 2. Introduction Michael Cairns is a publishing and media executive with over 25 years experience in business strategy, operations and technology implementation. As a business executive, Mr. Cairns has successfully managed several troubled and under- performing businesses, creating new business opportunities, developing new funding sources and enhancing shareholder value for investors. His years spent as an operating executive have largely been with brand-name publishing companies such as Macmillan, Inc., Berlitz International, Wolters Kluwer Health, Reed Elsevier and R.R. Bowker. As a consultant, Mr. Cairns has worked with clients as diverse as AARP, Hewlett Packard, InterPublic Companies and Reed Elsevier with an emphasis on business strategy, market development and corporate development. His skills and experience include:  Business and corporate strategy development and implementation  Operations management and business transformation  Traditional and digital publishing and operations  Print-to-digital transformation and adoption of new business models  Software development and software services Mr. Cairns holds an MBA (Finance) from Georgetown University and a BA from Boston University. He has served on several boards and advisory groups including the Association of American Publishers, Book Industry Study Group and the International ISBN organization. Additionally, he has public and private company board experience. 2 Michael Cairns Information Media Partners Strategy Consulting New York, London, Melbourne Tel: 908 938 4889 Michael.cairns@infomediapartners.com Find me: LinkedIn Twitter Blog Flickr InstaGram
  3. 3. Information Media Partners Michael Cairns established Information Media Partners in 2006 as a boutique strategy consulting firm focused on the information and education publishing segment. The work conducted by the firm includes product development, corporate development, sales management and corporate reorganizations. We work with established businesses, private equity owners and potential acquirers. Examples of our work include:  Reorganized and re-focused a $25 million software publishing company by aligning business operations with client priorities; implementing internal collaboration tools and project management standards; re-building executive team to focus on effective and efficient management  Defined a new business strategy for a large non-profit association and advocacy group, expanding their business model into global markets to exploit their core knowledge and expertise across a broader market  Led an information technology capabilities review at a large international advertising holding company. Completed over 200 interviews in 15 international offices and multiple group focus sessions to define the operational ‘gaps’ between existing agency capabilities and those necessary and important for client delivery by region  Completed a sales management effectiveness review for a global software company and defined six key project initiatives to improve sales effectiveness, market development and account management We approach our client engagements in a standardized, logical manner which creates the best environment to identify key business drivers, administrative and logistical road blocks and/or product or market definition issues. Our investigative approach leads to better insights into your businesses and supports the development of workable solutions and recommendations for success. Visit the Information Media Partners website for more information. Sample Client List
  4. 4. What is responsive web design (RWD)?  This is a joint presentation with Michael Kowalski Founder of Contentment  michael@getcontentment.com  In 2010 Ethan Marcotte coined the term in a landmark article on A List Apart  Not a new idea, but made possible recent technologies, specifically:  HTML5  CSS3  Media Queries4
  5. 5. Serving an Online Audience with Responsive Design “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen Vice President, Products at Adobe 5
  6. 6. Traditional, Fixed-Width Design Traditional web design: fixed- width websites designed for the desktop. 6
  7. 7. Traditional, Fixed-Width Design Annoying! 7
  8. 8. Enter Responsive Design…. Responsive web design is about designing SYSTEMS, and not WEBSITES 8
  9. 9. Responsive Design: A Shift in Thinking Enter Responsive web design! 9
  10. 10. RWD is really already mainstream  Some responsive examples you can check these out on your smartphone or tablet:  http://www.ft.com  http://www.bostonglobe.com  http://qz.com/  http://mashable.com/  …or, look at them on your desktop and slowly change the browser window’s size to observe the breakpoints. 10
  11. 11. Why do we want to go down this route?  Google’s definition of responsive design:  “Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.”  Why is responsive design favored by Google?  Google has a preference for accessible websites that have one URL for one set of content. Responsive is the most ideal way to do this.  What is going on in the current device landscape that puts responsive on the forefront for mobile strategy versus other options?  Device explosion: “In the last 30 days, we saw activity on more than 2,000 unique device models.” – Flurry Analytics, April 2013 11
  12. 12. Guess what, mobile is important! 12
  13. 13. On the brink of a cross over Mobile users will outnumber desktop next year 13
  14. 14. 14
  15. 15. 15
  16. 16. Customers on Apples, Droids and Others Our Customers 16
  17. 17. Low hurdle: “At least as good” Source: IBM/Tealeaf 85% of users expect that a mobile website should be AT LEAST AS GOOD as the desktop View Full Site 17
  18. 18. Going RWD - Considerations  App approach  Do I want or need to be in the App store?  Do I rely on or make use of device specific functionality like the camera?  Do I have a specific functional focus?  Or I may have a content focused approach (Native)  So I need broad device support  I may have frequent content changes  I need better discoverability via a 3rd party like Google 18
  19. 19. Plan with several things in mind  Audience  Content & Functionality  Capabilities  Cost  Process 19
  20. 20. “Context” is very important  Device context  Location context  Time (or circumstance) context 20
  21. 21. Serving an Online Audience with Responsive Design  Apple’s iOS devices are now offered in 6 different size/resolution combinations 21
  22. 22. Serving an Online Audience with Responsive Design  HTC alone has 12 different screen size/resolution combinations on Android 22
  23. 23. Look Mom all hands. 23
  24. 24. Serving an Online Audience with Responsive Design 24
  25. 25. Serving an Online Audience with Responsive Design 25
  26. 26. How to do RWD right  Understand your users and how they access and use your content  Prioritize your content based on the above. Build a site architecture that answers to these priorities  Design a site that provides affordances for users across device-types and contexts: grids and typography and images that adapt; big buttons for touch-screens, forms that are easy to use, simplify interactions that are touch- friendly and uncomplicated  Test, test again and re-test! 26
  27. 27. RWD – In summary  What is Responsive Web Design?  Maintain one website that serves all devices and screen sizes  Provide complete support for (almost) all website pages and features, regardless of device or screen size.  Implement changes across all devices 27
  28. 28. “When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle.” - Bruce Lee Serving an Online Audience with Responsive Design 28
  29. 29. Please review my blog post associated with this presentation: http://personanondata.blogspot.com/2013 /11/responsive-web-design-session- contec.html Michael Cairns Managing Partner Michael.Cairns@InfoMediaPartners.com 908 938 4889 LinkedIn Twitter Blog Flickr InstaGram 29

×