1. Responsive Design 101:Optimizing For Multiple ScreensWritten by Dan Israel, Strategy Lead, Mobile Center of Excellence, Atlanta& Mayur Gupta, Director, Technology and Marketing Services, Miami

2. TREND1REAL-TIME CONTROLFor most people in North America,important for content-heavy sites.Western Europe and vast portions Also, if no needs exist for certainof the Asia-Pacific, when they first mobile phone elements (such astried the Internet, they didnt know access to the camera), content canwhat to do with it. But just as previous easily be ported to a variety of mobiletechnologies before itfrom thedevices. Additionally, Responsivetelephone to the automobile Design lets a brand maximize SEO.the more it was used, the moreindispensable and intertwined it Mobile Web Willbecame in their lives. Surpass Desktop Web A third of all people on EarthThe benchmark experiencethe 2.3 billionaccess the Internetlarge-screened UNIX, Mac orand roughly 1.2 billion do so viaWindows workstation, PC or laptop a mobile device.defined the Internet since its inceptionfor most people in North America,Europe and, debatably, the Asia-Pacific. Responsive Design is an emerging designBut that is no longer the case. With therapid growth of mobile, touchscreen philosophy that will enable businessesinterfaces and the rise of the globalto design a fantastic, optimized Internetweb, brands see a proliferation ofscreen sizes, devices and user contexts. experience regardless of the size of theAs a result, massive new challengesscreen or the nature of the device.are being created for businesses.How do you develop the best possibleexperience for the widest possible setof customersparticularly if those As smartphones replace featurecustomers are as diverse as a middle-phones, Internet access throughclass Indian technology worker witha mobile device will dramaticallya smartphone, and a rural Eastern- increase. According to GO-Globe.com,European farmer with a tablet? of the 5 billion mobile phones in the world in 2012, about 1.08 billion areOne new tool is Responsive Design smartphones. Owners of a smartphonean emerging design philosophy that consume the Internet at a vastlywill enable businesses to design higher amount than feature phonea fantastic, optimized Internetconsumersaccording to Nielsen,experience regardless of the size of 82% of smartphone owners accessthe screen or the nature of the device.mobile browsers, compared to onlyWith this method, one platform can 19% of feature phone owners. Salesdeliver the design and content toof mobile devices already eclipsedsmartphones, TVs, tablets or laptops.sales of PCs in Q4 of 2010, andResponsive Design lets you stretch Morgan Stanley projects that bythe content effectively and easily 2014, mobile web surfing willacross platforms, which is especiallyeclipse that of desktop web surfing. 3. TREND1Marketers can now engage consumers sacrifice for the mobile web. Lastly,on their most intimate piece ofhow do you ensure that changes totechnology: their mobile device. But your regular Internet experience dowhat can be done to preserve the not negatively impact the mobile webreliability and consistency of the experience? What Is Responsive Design Ethan Marcotte first coined the termResponsive Design is a fundamentally Responsive Design in May 2010. Simply put, Responsive Design enablesdifferent way of envisioning user experience you to design your regular Internetand web designa mental shift from thinkingexperience to fit into practically any device with a full browser, be it apixels to proportions that requires connecting smartphone, a tablet or a TV.strategic, creative and technology disciplines.At its core, Responsive Design snaps the regular website into the shape of the browser on any device. Using a mix of flexible grids, layouts, images andInternet experience on devices that intelligence built into the CSS mediaarent the standard bearer? And then queries, the website presented willthere are other challenges companies change on the fly to accommodatehave to master. 320px768pxfor the resolution, image size and other factors on the detected device. Considered more a design philosophydesktopthan a hard-and-fast set of rules, the beauty of this system is that the creator does not need to create a different design for each medium. Thisphonetablet represents a fundamentally different way of envisioning user experience and web designa mental shift from 1024pxthinking pixels to proportions that requires connecting strategic, creativeHow do you avoid creating multiple and technology disciplines.versions of the same webpage fordifferent devices? Even if iPhone andLets take a closer look at whatAndroid devices are all a brand caresResponsive Design really looks like.about, how do you prepare for newIn the illustration on the left we see adevices that will sport Internet access, prototypical website on a smartphone,such as readers, TVs and a host of PC and tablet. The orange, yellow andemerging products? Also, since screenred boxes represent the same content,space is at a premium on a mobilebut are displayed or hidden dependingdevice, a company has to triage what on where the content is being accessedcapabilities and experiences they will and how it impacts the user experience. 4. REAL-TIME CONTROLWhen Responsive DesignThe WHYsMay Make Sense Scalable adaptation. In an ever-evolvingBrands must ensure that Responsivedigital device landscape, which isDesign truly fits business needs andhugely fragmented by varying screenprovides clear benefits. To help make sizes, view ports, resolutions andthis determination, we will examine the capabilities, it is almost impossible toWhens (business considerations) and build an isolated experience for eachWhys (benefits) for Responsive Design.combination. Responsive Design offersa scalable solution that can adapt toThe WHENs these variations to create a connectedTraffic distribution and targeted user experience; it is a design approachdevices. If you want customers to havebased on proportions as opposedconsistent web experiences no matterto pixels.where they come from, and more than10% of your web traffic comes fromSingle source of content and code.non-PC devices, then Responsive Responsive Design relies on a uniqueDesign may make sense.feature of HTML5 called mediaqueries, which can apply selectiveContent and marketing sites. If yourstyle-sheets to a page based on theweb experience and design objectivesscreen size and resolution. In essence,lean toward content and marketing only one set of code (e.g., HTMLand less on ecommerce or business templates, HTML5/CSS3) is requiredtransactions, Responsive Design may for all touchpoints, so theres no needmake sense. Content includes productto create and manage a separateinformation, news, blogs and marketingcodebase for different web experiences.materials. Good examples includeBoston Globe, Sony and even Starbucks.Device-agnostic URL. By having oneURL for mobile, tablet and desktop,Consistent behaviors. ConsiderResponsive Design provides simplifiedResponsive Design if your customersaccess and marketing strategies, withwhether they access your site on aefficiency gains in development, QAPC, a mobile device or some other and launch management processes. Intouchpointconsistently carry out the addition, it removes the risks associatedsame behavior and activities. In otherwith relying on a user agent to detectwords, they do not expect to do different the device and send the customer to thethings on different devices.right template on a server.Skill matrix. This refers to humanTraffic lift through improved SEO.resources. How easy is it for you toResponsive Design allows incomingfind people with the relevant strategy, traffic across all touchpoints tocreative and technology skills to execute be directed to a single URL. ThisResponsive Design solutions?consolidation enables higher linkequity that subsequently leads to betterranking than separate desktop, tabletand mobile webpages. 5. TREND1Reduced maintenance risks andmobile device to scan a 2D bar code, butrelease cycle times. The more devicesnot on a PC. A travel website for a desktopand templates you have to support, the and tablet may focus on search, pricing,higher the cost of regression testingcompetitive analysis and bookings, while a 10 Considerationswith each release. With Responsive mobile interface may cater to completely for Responsive Design, the code base is identical different user behaviors like check-ins Design Execution across all devices, making it easier for and status updates.developers to pinpoint what changes1. Identify all viewports and breakpoints, they made and where a problem mayHigher cost, effort, time and risk. and select a progressive (mobile be lurking.Responsive Design is still in its infancy. first) versus downward (desktopThe design philosophy lacks advanced first) approach.Experience optimization across frameworks, libraries, patterns andresolutions. Responsive Design alsostandards, which forces some teams2. Define the navigation approach, enhances experiences for desktop to go through a steep learning curve. and decide what the overall navigation users with large or high-resolutionAs an approach, it requires a far more structure should be for the different screens and eliminates the collaborative and cohesive effort breakpoints, which are typically driven conventional challenge of white spaceacross design, IA, strategy, content and by functional and content relevance.and manual resolution adjustments. technology teams.3. Define the approach for content Performance impact. choreographywhat content will be Responsive Design relies on hidden or displayed on mobile, tablets content manipulation using and PCs.media queries and selectivestyle-sheets on the client4. Set guidelines and standards for side. This is different from media queries.web proxy solutions used byother design approaches,5. Use fluid gridsthink proportions whereby the experience is instead of pixels.optimized on the server side.6. Come up with an image and video What this means is that the handling strategy.When Responsive Design same amount of content, images, HTMLMay Not Make Sense and CSS code delivered across desktops7. Account for display and banner ads. Unique mobile experiences are(higher memory and processing power)preferred. Consistency is at the must be sent to a mobile device (limited8. Optimize for touch versus cursor heart of the Responsive Design value bandwidth capacity), leading to potential effects; design should be optimized proposition, but this doesnt always performance bottlenecks. for both cursor-based (desktops) and work for all brands. The more functions touchscreen usage (mobile, tablets).and capabilities envisioned in a userNative or hybrid apps. Responsivejourney, the less adaptable and flexible Design is not meant to replace the need9. Define a creative and performance Responsive Design can be for the brand.or capability of a native or hybrid app testing strategy. For instance, a brand may want installed on a device. It is a mobilecustomers to access a camera on a10.Validate SEO. 6. REAL-TIME CONTROLweb methodology that relies on mobile Conclusionbrowsers, while a native app leveragesResponsive Design offers muchnative capabilities of a smartphone device. promise, and it is being used by severalbrands with great success. We end withBrowser compatibility. Older browsers two thoughts.sometimes do not support HTML5code. In turn, designers may have toWhen considering Responsive Design,spend development effort to createbrands should avoid the temptation toworkarounds for these situations. design to respond. In this scenario, ateam decides to adopt Responsive DesignApproach to Responsive Design even before the idea is conceptualized orAs mentioned, Responsive Design desired customer journeys are created.represents a relatively new designThe decision factor here tends to bephilosophy. No industry standardbased purely on the number of devices,blueprint exists. To help you in your ignoring the design and functional gulfassessment of Responsive Design, we that may exist between the desktophave developed a possible approachand mobile versions of a site. A better(See 10 Considerations for Responsive approach is to respond to a design. ThisDesign Execution).scenario considers Responsive Design asone option for consideration to create anKeep in mind that Responsive Design optimized and relevant user experience.represents a truly collaborative plan,and an agile methodology to design. AsOne thing is for certainResponsivesuch, establish a team composed of an Design is here to stay. And as moreinformation architect, creative designer, standards and more devices emerge,content strategist and site developer the need for Responsive Design willto define the overall approach andonly continue to grow.methodology. Separate ResponsiveWhich solution is better for your mobile site?Mobile Site DesignRESPONSIVE DESIGN CONSIDERATIONSLower cost, effort and complexity3 2Scalable and seamless adaptation across devices and screen sizes 2 4Consistent experience across digital touchpoints and devices 2 3Suited for ecommerce, transactional and highly interactive sites 4 2Optimized for content driven and marketing sites 2 4Higher search engine optimization2 3Low performance risks3 2Easier site maintenance and future release management2 4Availability of existing design patterns, frameworks and platforms 3 2Skill and knowledge level required 3 1KEY 1 POOR 2 FAIR 3 GOOD 4 BEST