1

Responsive DesignGilbane Boston

28 November 2012---------------------------------

Peter MarshSVP, Sales & Marketing

Atex Group Ltd.pmarsh@atex.com

@PGM

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

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

Google Research, September 2012The New Multi-screen World: Understanding Cross-Platform Consumer Behavior

Check out:CollegeWebEditor.comKarine Jolly, Sept. 11, 20122 more reasons why the responsive web design approach makes sense for #highered

5

Google Research, September 2012The 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

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

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

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

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.html

10

Does Responsive Design Make Sensefor your Business?

Benefits Costs

11

Does Responsive Design Make Sensefor your Business?

Benefits CostsCMS maintenance , updating and ongoing support expenses decrease.

Up-front web development, programming and testing costs increase.

12

Does Responsive Design Make Sensefor your Business?

Benefits CostsCMS 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

Does Responsive Design Make Sensefor your Business?

Benefits CostsCMS 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

Does Responsive Design Make Sensefor your Business?

Benefits CostsCMS 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

Thank you … @PGM