Responsive Strategy

Right now around 11 or 12% of the top 100,000 sites are responsive, and nodoubt that number is slated to rise over the next few years.

As the people in the depraved cat-skinning business say, “there’s more thanone way to skin a cat.” The sick bastards. As more organizations roll up theirsleeves to tackle the realities of our multi-device Web, it’s worth taking a lookat the various strategies employed to reach that squishy nirvana:

Responsive Retrofitting

Responsive Mobile Sites

Mobile-First Responsive Design

Piecemeal

web blog speaking about contact

ResponsiveStrategy

brad frost web

Responsive Strategy | Brad Frost Web http://bradfrostweb.com/blog/post/responsive-strategy/

1 of 29 3/19/14, 10:15 PM

Responsive Retrofitting

Responsive retrofitting is the process of taking an existing desktop-onlywebsite, and “making it responsive” after the fact.

For existing sites (particularly ones that are alsobusinesses) teams don’t always have the luxury of tossingeverything aside and building anew. Dan Cederholm

For many organizations, large-scale, from-the-ground-up redesigns are simplyout of the question. That’s why responsive retrofitting is a popular approach tocreate a better user experience for non-desktop devices.

pros

Relatively quick – There’s really a whole spectrum of responsiveretrofitting, but taken at its most basic definition, this strategy can literallyconsist of injecting a small-screens.css file into your website. While that’s acrude example, responsive retrofitting is attractive for many organizationsbecause it doesn’t require rebuilding everything from the ground up.

Familiar – Users don’t get knocked down the escalator of acquiredknowledge. People get used to an interface over the years. By retrofitting an


2 of 29 3/19/14, 10:15 PM

existing interface, organizations retain that level of familiarity while stillproviding a better user experience for smaller screens.

Organizationally quicker – Politically speaking, retrofitting a lot safer thanstarting from scratch. There’s less bickering about what color green to use,what banal stock photos to use, and management doesn’t really need theirarms twisted as hard. This allows teams to launch responsive sites sooner.

cons

Only scratches the surface – Again, there’s a whole spectrum ofresponsive retrofitting out there, but the goal for a great many of theseprojects is “make it squishy”. By focusing primarily or solely on reflowinglayout, retrofitted responsive experiences often miss out on the whole worldof other considerations that go into making a successful multi-device Webexperience.

10 gallons of water in a 3 gallon bucket – Because desktop-only siteswere made for desktops (and have often existed for a long while), they havea tendency to contain a lot of crap. And because most retrofitting exercisesfocus on reflowing layout, a lot of these content-related issues aren’t fullyaddressed.

Performance – There’s something weird about writing more code to bettersupport smaller devices. Subtraction can go a long way, but retrofittingdoesn’t inherently encourage performance as design.

Worse support – mobile-first media queries provide better support for themany Web-enabled mobile devices that don’t support media queries.

Band-Aid fix – I die a little whenever I hear people say “make it responsive”like it’s some checkbox on a project plan (which sometimes is actually thecase). This type of myopic thinking misses the true opportunity responsivedesign provides.


3 of 29 3/19/14, 10:15 PM

Responsive Mobile SitesResponsive mobile sites, or what I call planting the seed to a responsivefuture, is the practice of making a separate m-dot site that employsresponsive design techniques. Organizations like The BBC, The Guardian,and (a site I worked on) Entertainment Weekly are all utilizing this strategy.

Mobile provides an opportunity to plant the seed to grow out of your legacy desktopsite.


4 of 29 3/19/14, 10:15 PM

With time and effort, the legacy site can be removed and a mobile-first, adaptive,future friendly experience

pros

Lower risk – Most organizations still see a minority of Web traffic comingfrom mobile devices. So launching a responsive mobile site allowsorganizations to test the responsive waters without betting the farm onresponsive design.

Learning to be flexible – Designers can learn how to think more fluidly.Developers learn about the myriad quirks of old Android devices.Management can learn to let go of pixel-perfection. A responsive m-dot canserve as an important sandbox for learning.

Infrastructure – Teams can learn to tackle tough content managementissues, like art directing images and more.

Trim the fat – This approach offers a better chance for teams to ask “do wereally need that”, as well as focus on performance. Why? Because they’refocused on making a mobile experience first and foremost.

A mobile-first future – While initially deficient in content or features, givenenough time and effort these mobile sites can ultimately replace their formerdesktop counterparts.


5 of 29 3/19/14, 10:15 PM

cons

It’s still an m-dot site. – Responsive or not, this approach still inherits themany woes of m-dot sites: URL redirect issues, contentmanagement/governance issues, content parity issues, continuity, SEO, andmore.

Band-Aid fix – A lot of mobile sites are created to stop the bleeding. Manym-dot sites are created to address the growing amount of traffic coming frommobile devices. While these solutions can certainly solve present needs, thisdoesn’t necessarily translate into a long-term, future-friendly strategy.

Die on the vine – Some organizations will start these projects, get halfwaythrough the transformation, then throw it all away once next year’s budgetgets approved.

Small screens design – Because of the initial focus on small screens, itcan be challenging to scale up an interface to look great on larger screensafter the fact.

Mobile-first ResponsiveDesign

Mobile-first responsive design creating an interface that addresses theconstraints of mobile (small screen, low bandwidth, etc), then


6 of 29 3/19/14, 10:15 PM

progressively enhances the experience to take advantage of availablescreen space, features, and more.

pros

A fresh start – A mobile-first responsive project is a clean start. Designersare excited to focus on core user and business goals. Developers arefocused on lean, mean markup. By casting aside (or totally reworking) anexisting codebase, teams can address our multi-device reality withouthaving to worry about legacy overhead.

Better support – By developing mobile-first, developers are able to supportmore mobile devices, especially older devices that don’t support mediaqueries.

Performance – While the performance of any site really depends on theimplementation, a mobile-first responsive project gives teams theopportunity to address performance out of the gate.

Concurrent Consideration – More broadly speaking, a mobile-firstredesign (despite its name) tends to factor in the entire resolution spectrumrather than placing emphasis on any one device class.

Future friendly – A mobile-first experience addresses creates more anopportunity to create a sound foundation that’s build to stand the test of time,and to serve as a platform for future growth and iteration.

cons

Time consuming – let’s face it, a mobile-first redesign isn’t a shortcut. Ittakes a lot of time and effort to build things from the ground up. The trick isto make the effort worth it.

A mental shift – It’s challenging to get teams and organizations to thinkabout things differently. The mobile-first mentality flips everything on itshead, which challenges the conventions people have gotten used to over the


7 of 29 3/19/14, 10:15 PM

years. This requires selling things through (thankfully there’s a book for that),and ongoing reminders to keep people from falling back into their old ways.

Organizationally difficult – A big redesign is usually encumbered with allsorts of organizational red tape. The CEO wants to weigh in on the designs,despite not being in all the preliminary meetings on what all this responsivedesign hoobityboop is all about. Ambition and politics can get in the way ofcreating a user experience that looks and functions great on any device.

Unfamiliar – Any redesign is going to be unfamiliar to users at first. Butgreat care needs to be taken to maintain users’ level of familiarity with theinterface, especially after going through a major overhaul.

PiecemealA piecemeal responsive strategy breaks a large-scale redesign down intobite sized chunks. Like retrofitting (although in this case these strategiesaren’t mutually exclusive), it might not be possible to undergo a massiveredesign. That’s why some organizations take it a step at a time. There are fewdifferent flavors of piecemeal responsive redesigns:

page by page

Page-by-page responsive redesigns take a subset of pages . Companies likeMicrosoft have rolled out responsive homepages, while leaving the majority ofinterior pages desktop-only.

pros

Highly visible – rolling out a responsive version of most viewed pages (likea homepage) puts the effort where most users are likely to see the refreshedredesign.


8 of 29 3/19/14, 10:15 PM

Learning to be flexible – Organizations often use these projects as pilotsfor broader initiatives. By focusing on a few core pages, they’re able to learnall that goes into making a responsive interface and then use that knowledgeto apply to the rest of the site.

Better chance of launching – Focusing on one page or one feature is agreat way to make sure things actually get done. Redesigning the whole kitand caboodle at once could be a monstrous undertaking, which means itmight never see the light of day.

cons

Continuity – User goes from shiny, new responsive experience to crappylegacy content a few quick clicks. This is bad from a consistency standpoint,as users view a company as a single brand, not as a hodgepodge ofdifferent departments and priorities.

Short-sighted – a lot of page-based redesigns are so focused on “launchingby Q3″, there often isn’t a game plan for rolling out the project to the largersite.

Die on the vine – You have to plant a flag in the sand first and foremost witha strategy like this, or else risk permanently living in Frankenstein land.

component by component

I’ve worked with several organizations that are undertaking a rather interestingapproach to responsive design. Instead of tackling the homepage first thenmoving onto interior pages, some organizations are making key components(like the header and footer) responsive, then slowly moving onto othercomponents. When the whole interface is made responsive, they switch on theviewport meta tag and be left with a responsive experience.

pros


9 of 29 3/19/14, 10:15 PM

Gradually introduce users to a new interface– Instead of knocking usersover their heads with an All-New, 100% Amazing Responsive Experience(!),this piecemeal approach introduces the new interface over a period of time.The changes aren’t so extreme that users will be angry, but move the designin the right direction.

Break things down – Teams learn to solve problems at the modular, atomiclevel rather than focusing on the page.

Gauge level of effort – Breaking things down into modules gives a betteridea of the scope of the project.

cons

50 Shades of Incomplete – This approach can be awkward as users areexposed to a Frankensteined interface that is both old and new, fresh andstale.

Die on the vine – these types of projects need to have clear end goals orthey could end up in purgatory forever.

Technical co-existence – What happens when one module using the latesttechnology and techniques butts heads with an old crusty legacy module?There are lots of technical architecture challenges with this approach.

“I’m Chevy Chase…andyou’re not.”Of course, every organization is different, so which path to choose depends ona number of factors. Time, budget, scope, organizational structure,skillset, and more all influence which responsive strategy to employ. Butas time goes on, it’s becoming increasingly apparent that organizations needto address the ever-growing multitude of devices that access the Web.


10 of 29 3/19/14, 10:15 PM

Responsive Strategy

Documents