1. 1 Responsive Design Gilbane Boston 28 November 2012 --------------------------------- Peter Marsh SVP, Sales & Marketing Atex Group Ltd. pmarsh@atex.com @PGM

2. 2 The Web Developer/Designer/Editor Dilemma  Many, many devices and more each day  Need to support them all, yet maintain your brand quality  No money to hire more developers, designers or editors  What are your options?  Design for the desktop  Create separate mobile site(s)  Build native mobile app(s)  Responsive Design

3. 3 What is Responsive Web Design?  A collection of techniques that allow your website to respond and adapt to the device it’s being viewed on  With responsive design, all users have an optimal web experience  You don’t have to create separate sites for different devices TV4.se in Stockholm, Sweden launched its responsive design initiative in 2012 with these prototypes created using the Atex Polopoly WCMS

4. 4 Google Research, September 2012 The New Multi-screen World: Understanding Cross-Platform Consumer Behavior Check out: CollegeWebEditor.com Karine Jolly, Sept. 11, 2012 2 more reasons why the responsive web design approach makes sense for #highered

5. 5 Google Research, September 2012 The New Multi-screen World: Understanding Cross-Platform Consumer Behavior “90% of us use multiple screens sequentially: Therefore, design Responsive Experiences for Mobile + PC or Mobile + Tablet Browsing” “When people watch TV they also use another device 77% of the time. If you do TV, design digital experiences that work on Mobile, PC & Tablet”

6. 6 Advantages of Responsive Design  Consistent user experience  Device agnostic  No need for zooming or stretching  Improved screen refresh times  Single version of your content  Write and edit once, publish everywhere  Single code base  Code once, deploy everywhere  Better link and URL management  Improved search engine optimization across all devices  No need for backlinks and redirects  Link popularity can be maintained in a single responsive site

7. 7 Disadvantages of Responsive Design  Speed / Bandwidth  To enable automatic image resizing, sometimes the full size images must always loaded  Responsive design relies on the browser (not the back-end servers) to do the heavy lifting  Not all CMS platforms support responsive design today  Make sure your CMS gives developers full control over HTML5, CSS3 and JavaScript tools  Make sure there are no limitations imposed on site markup  Make sure your CMS editing programs don’t add “extra elements” that aid the authoring process but can interfere with responsive design  Advertising  Responsive ads and ad sizes are just beginning to emerge

8. 8 Best Practices  Mobile first, if appropriate  Small screens first, with progressive enhancement  Consider user experience and business goals first  Communicate with your clients / users  Get the analytics right before you begin  Test on real devices  Keep on optimizing

9. 9 Planning/Budgeting a Responsive Design Project  Plan for a discovery and team education phase:  Get everyone – your folks, your clients, your sponsors – up to speed  Make sure everyone knows what responsive design is, and why it’s important  Look at the latest and emerging trends before deciding how to proceed  Build in time for process change:  Linear project management processes won’t work  Close collaboration is key to success  Encourage innovation and iteration  Add more time than anticipated for testing and quality assurance:  Aim for optimization on as many devices/browsers as possible  Purchase real devices for testing and QA:  Try to be as representative as possible, given your budget  Understand your channel strategy:  Your team should address all channels up front  One workstream influences the entire design Thank you Brad Frost: http://bradfrost.github.com/this-is-responsive/resources.htmlhttp://bradfrost.github.com/this-is-responsive/resources.html

10. 10 Does Responsive Design Make Sense for your Business? BenefitsCosts

11. 11 Does Responsive Design Make Sense for your Business? BenefitsCosts CMS maintenance, updating and ongoing support expenses decrease. Up-front web development, programming and testing costs increase.

12. 12 Does Responsive Design Make Sense for your Business? BenefitsCosts CMS maintenance, updating and ongoing support expenses decrease. Up-front web development, programming and testing costs increase. Editorial workflow and multi-channel publishing expenses decrease. The write-once, publish-everywhere model may not be appropriate for your brand(s).

13. 13 Does Responsive Design Make Sense for your Business? BenefitsCosts CMS maintenance, updating and ongoing support expenses decrease. Up-front web development, programming and testing costs increase. Editorial workflow and multi-channel publishing expenses decrease. The write-once, publish-everywhere model may not be appropriate for your brand(s). Improved SEO – more traffic to your sites and higher link popularity across devices without the need for backlinks or redirects. Content optimization (especially images and video content) can add extra time and workflow steps, which can increase costs.

14. 14 Does Responsive Design Make Sense for your Business? BenefitsCosts CMS maintenance, updating and ongoing support expenses decrease. Up-front web development, programming and testing costs increase. Editorial workflow and multi-channel publishing expenses decrease. The write-once, publish-everywhere model may not be appropriate for your brand(s). Improved SEO – more traffic to your sites and higher link popularity across devices without the need for backlinks or redirects. Content optimization (especially images and video content) can add extra time and workflow steps, which can increase costs. Responsive Design gives you the ability to innovate, to beat your competition, and to rethink your web and mobile strategies. Maybe your business does not requite a “mobile first” strategy. Maybe mobile traffic is low. Maybe mobile apps are more appropriate. Therefore, a move to Responsive Design may not yield significant benefits for your business.

15. 15 Thank you … @PGM