Transcription
Implementing Responsive Web DesignAug 2013Implementing Responsive Web DesignImplementing Responsive Web Designwww.thesearchagency.com1
IntroductionAre you using Responsive Web Design (RWD) for your website? Responsive Web Design is the evolvingstandard for browsing on smartphones, tablets, and other devices. If you haven’t implemented it yet, youare behind the times! This paper will tell you what it is, why it’s so important, and how to implement it.What is Responsive Web Design?Responsive Web Design (RWD) is a form of web architecture that delivers a customized user experienceacross an array of devices. The key to this methodology is a flexible layout with elements that adapt to thesize and features of different screens, devices and browsers.In John Alsopp’s article, “A Dao of Web Design1,” he discussed how web design was heavily influencedby its predecessor, print design. However, web design has more flexibility than print, and can actuallyrespond to and adapt to the specifications of the user’s browser, instead of conforming to the staticconstraints of a physical page size. He recommended incorporating CSS to make elements, such as fontsize and layout, adaptive to the user instead of serving the same, static layout to all users. This was thefirst step toward RWD.Ethan Marcotte used Alsopp’s concept as a foundation and outlined the concept of RWD in his article,“Responsive Web Design2” as a solution to serve design considerations on a rising number of internetcapable, non-desktop devices. Creating different versions of websites for every new device wasunreasonable. Marcotte developed RWD as a solution to this problem and used it to create websites thatadjusted the individual user’s experience to the specifications of the user’s device, screen and browser.Why Implement Responsive Web Design?In 2012, Google released a study of smartphone users that revealed: 75% of people prefer a mobile-friendly site 61% will turn to another site if they don’t find what they’re looking for quickly 67% of mobile users say that when they visit a mobile-friendly site, they’re morelikely to buy a site’s product or service 48% said that if a site didn’t work well on their smartphones, it made them feel likethe company didn’t care about their business3Another study by the Walker Sands Communication found that “23 percent of total website visits inDecember 2012 derived from mobile devices, an 84 percent increase over December 2011, and a 283percent increase over January 20114.”1. Allsopp, John. (2000). A dao of web design. A List Apart. Retrieved from http://alistapart.com/article/dao on February 13, 2013.2. Marcotte, Ethan. (2010). Responsive web design. A List Apart. Retrieved from n on February 13, 20133. Google. (2012). Mobile friendly sites turn visitors. Retrieved from -friendly-sites-turn-visitors.html on February 13, 2013.4. Walker Sands Communication. (2013). Quarterly mobile traffic report. Retrieved from http://www.walkersands.com/quarterlymobiletraffic on February 13, 2013.Implementing Responsive Web Designwww.thesearchagency.com2
Providing accessibility and excellent user-experience to this growing market is essential. ImplementingRWD is the most effective way to leverage this opportunity. RWD ensures that your site delivers acustomized, engaging user-experience for all visitors. The RWD user-experience also builds trust withvisitors by rendering the site to their needs. As the data shows, visitors or more likely to use and revisitmobile-friendly sites.Google recommends following the “industry best practice5” of RWD to serve the same HTML for alldevices, and render it to each device through media queries. However, if RWD is not the best option forserving content to your users, you can dynamically serve mobile-optimized content from the same URL asyour desktop site, or use dedicated URLs for these users.SEO Benefits of Responsive Web DesignGoogle recommends RWD over dedicated, mobile sites because RWD “preserves a canonical URL,avoiding any complicated redirects, and simplifies the sharing of web addresses. 6”Having a single, dynamic site is a preferred best practice for SEO. Traffic, authority and link valueis consolidated to one site and can easily be sorted, tracked & measured through popular Analyticspackages. RWD also eliminates the need to maintain and monitor several versions of the site andconsolidates all traffic and link value to the canonical version of the site.RWD also ensures that all backlinks will lead to a properly rendered site, which improves user experienceand site engagement. If a mobile user shares a link from a website to a desktop user, the desktop userwill receive a desktop-optimized version of the page with the same content, and may even see additionalcontent that would be difficult to render on a mobile device. This provides a consistently optimal userexperience that renders correctly for both users.Fundamentals of Responsive Web DesignIn Marcotte’s book, Responsive Web Design, he explains the three core elements of RWD: Flexible, grid-based layout Flexible images and media Media queries, a module from the CSS3 specification7The key to creating flexible grids and elements is using relative measurements, instead of staticmeasurements. Elements are sized in relation to other objects, such as the browser size, instead of staticincrements, such as pixel sizes.5. Google. (2012). Building mobile-optimized websites. Retrieved from e-sites/ on February 25, 2013.6. Google. (2012). Responsive design – harnessing the power of media queries. Retrieved from /responsive-design-harnessing-power-of.htmlon February 25, 2013.7. Marcotte, Ethan. (2011). Responsive web design (p. 9). New York, NY: A Book Apart.Implementing Responsive Web Designwww.thesearchagency.com3
Relative measurements are simple to calculate. We recommend designing the initial site with staticmeasurements to get a baseline. Then, convert the static measurements to relative by following thissimple formula:[element size] [parent element size] %Here is an example of a calculation for a 500 pixel wide container, on a 1024 pixel page:500 1024 48.8%Flexible GridThe flexible grid is composed of one, main div container, with child containers that form the “columns”of the “grid.” The main container is scaled to the size of the browser, and the child containers are sizedthrough relative measurements. The child containers are spaced apart by setting the margin in CSS. The div containers and margin settings are sized to a percentage (%) of the overall browser size.Here is an example of a layout for a 1280px page with a three, static-width columns, in a container with awidth of 1000px:1280px1000pxGrid with static (pixel) measurementsThis layout will display properly on a high-resolution, desktop display. However, when viewed on a tablet,with a width of 768px, elements are cut off.768px1000pxFixed-width container in a tablet browserImplementing Responsive Web Designwww.thesearchagency.com4
If the static elements are re-calculated from static to relative sizes, the layout will adjust to displayproperly on any device.1000px (original container size) 1280px (original canvas size) 78%78% x 768px (tablet canvas size) 599px768px78%Relative-width container in a tablet browserIn addition to resizing containers, the number of columns can also be adjusted through the use of mediaqueries. For example, a single-column layout can be served to mobile users. This layout can be furtherexpanded to two columns for tablet users, and three columns for desktop users. For additional flexiblegrid attributes and techniques, visit http://www.responsivegridsystem.com 8. More information aboutadapting the layout to different devices will be covered in the Progressive Enhancement section of thispaper as well.ViewportEstablishing the viewport is a significant component of how the grid, and the entire layout, renders ondevices. The viewport tag is a piece of meta data that establishes the size of the display area. This tagensures the content is scaled to an appropriate size for the device. Viewport also supports the adjustmentof the display when it transitions between portrait and landscape orientations.Setting the viewport is done by entering the following tag into the head of your page: metaname ”viewport” content ”” . The content attribute can be used to specify a specific size (pixels),relative size (device), and the initial and maximum scales of the viewable area (1:1, 2:1, etc.). The bestpractice for RWD is setting the width of the display to equal the visible area of the device and locking thescale of the display to one. meta name ”viewport” content ”width device-width, initial-scale 1, maximum-scale 1” 8. Miller, Graham. (n.d.). Responsive grid system. Made in New Castle. Retrieved from http://www.responsivegridsystem.com/ on February 25, 2013.Implementing Responsive Web Designwww.thesearchagency.com5
Flexible ElementsImages and MediaFlexible images and other media files, such as videos, are implemented by using a CSS attribute and anHTML container. First, create a class in CSS for img, video, and any other object you are placing on yourpage. Next, add the following attribute to these classes: max-width 100%. Then, place the image, orobject, in its own div container on the page. If the container is larger than the object, the object willrender at its full size. If the container is smaller than the original object size, the additional area of theobject is cut off, unless the max-width 100% attribute is added.500px400pxImage fits within a larger container300px400pxImage bleeds out of container when the container size is reduced300px240pxImage reduces to fit the smaller container with “max-width 100%”Implementing Responsive Web Designwww.thesearchagency.com6
An alternate method for dealing with objects is using the overflow:hidden attribute, instead of maxwidth. This method will cause the object to retain the same size and proportion. When the size of thecontainer is reduced to less than the object size, the object is cropped and the excess is not displayed.300px240pxImage is 100% size, but cropped to the container size with “overflow:hidden”TypographyResponsive typography is essential for providing legible content across different devices. A typeface thatlooks good when rendered at a small size on a desktop might not be legible when rendered to the samescale on a smartphone. Some fonts may render better on different devices as well. In addition to relativemeasurements and changing fonts, typography is also adjusted with padding elements in CSS.Font sizes and padding elements are not calculated with percentages. Instead, they are calculated in emunits. The em is a relative measurement, based on the default font size of the browser, instead of theoverall browser size. The em is calculated as follows:[desired font size] [default font size] emHere is an example calculation for a font size of 36px, based on a default font size of 16px:36px 16px 2.25emTo ensure your text will display properly as containers are reduced in size, you should also set the wordwrap attribute in CSS. The default setting is normal, which will not break long strings, such as URLs,into additional lines. Setting word-wrap: break-word will ensure longer elements don’t stick out of theircontainers.You can apply this to the specific container, or set it as a CSS class, like this:.break-word {word-wrap: break-word;}Implementing Responsive Web Designwww.thesearchagency.com7
Then apply this class to your div container: div class ”break-word” Media QueriesMedia queries are the glue that ties everything else together and makes the layout render differentlyacross different devices and browser sizes. Media query is actually a compound term. “Media” definesthe type of media for display, such as screen or print. “Query” is a function that determines features,such as the size and orientation of the display, for rendering the content properly. Media queries can alsobe used to add or omit elements, based on the browser features.Media queries control how elements are rendered for specific platforms and display sizes. For example, arestaurant page, designed with RWD, can serve the full version to desktop users and an optimized versionto mobile users. The mobile version would feature only the most relevant content, such as the phonenumber, address, directions, menu, and reviews. Whereas, the desktop site would feature all the mobilecontent, plus the history of the restaurant, photos, a blog, and so on.The first step to defining a media query is setting up a CSS element with an @media element. Withinthis element, you can further define the criteria of the media type and additional features, such as size andorientation.The screen media type is the most effective for RWD. All devices that visually render web pages willrecognize this media type. Using screen eliminates the need to establish a media type for every differenttype of device. The media type should immediately follow the opening tag:@media screen { }Queries are composed of CSS features, such as width and height, with assigned values. Some commonfeatures are: width, height, device-width, device-height and orientation. Size-based queries canbe furthered defined with max- or min- prefixes. The orientation feature has a value of portrait orlandscape. All additional features should be contained in parenthesis ().Features should follow the opening tag and media type. Logical functions, such as and and not, are usedto combine the media type and features. Here is an example of all the elements tied together:@media screen and (min-device-width: 320px) not (orientation: landscape) { }For a complete list of functions and parameters, visit http://www.w3.org/TR/css3-mediaqueries/#media19.9. W3C. (2012). Media queries. Retrieved from http://www.w3.org/TR/css3-mediaqueries/#media1 on February 13, 2013.Implementing Responsive Web Designwww.thesearchagency.com8
BreakpointsRWD pages should have different media queries, based on browser size. The factors that trigger thesedifferent queries are called breakpoints. Breakpoints are created by applying different device-widthsettings to the media queries. When the breakpoint value is reached, the page responds by rendering tothe criteria of the new media query.On average, every responsive site will have a minimum of two break points: for tablets and mobiledevices10. However, you can implement as many, or as few, breakpoints on the site as you feel necessary.Using general breakpoints will ensure the site functions across several devices.Here are some general recommendations for breakpoints: Mobile min-device-width: 320px max-device-width: 480px Tablet min-device-width: 768px max-device-width: 1024pxBreakpoints can be further optimized by creating layouts specifically for the portrait and landscapedisplay orientations.Breakpoints can be tailored to specific devices. For example, if you have a large volume of visitors withiPhone5 smartphones, you may want to build custom breakpoints for this device. However, building pagesaround specific devices requires updating your page code every time a new device enters the market. Fora comprehensive list of device display sizes, visit .php11.Here is an example of a media query to create a breakpoint for a standard tablet with portrait orientation:@media screen and (min-device-width: 768px) and (orientation: portrait) { }Progressive EnhancementHaving flexible elements and breakpoints, is not enough to provide outstanding user-experience. Theneeds of users on different platforms, and the capabilities and restrictions of each device must beconsidered as well. The content of the site should be expanded to meet the size and capabilities of eachdevice. This process of improving the user-experience is known as progressive enhancement.10. Jamal. (2012). Overview of breakpoints in responsive web design. Retrieved from reakpoints-in-responsive-web-design/ on February 20,2013.11. Cartoonized. (2013). Cell phone screen resolution, sorted by brand and model. Retrieved from .php on February 20, 2013.Implementing Responsive Web Designwww.thesearchagency.com9
Ideally, the mobile version should be designed first, with a simple layout and the most essential elements.Then, the tablet version can add an enhanced layout and additional content. Finally, the desktop candeliver the full potential of the site, with content that is not accessible or relevant on the previousplatforms.The first step of progressive enhancement is prioritizing the content of the pages. Research whichelements and conversion points are most significant to mobile users. Then, repeat the process for tabletand desktop platforms. Numbering the elements of the site in order of importance will help you decidewhat will go on the each version of the site and in what order it will appear.After establishing the needs of the users, look at the capabilities and restrictions of each platform. Forexample, smartphones can use GPS info for navigation purposes, but cannot render Flash objects.Desktop computers can render Flash, but do not have the ability for gesture-based navigation like mobileand tablet devices.Regardless of the layout, it is a best practice to keep the most-significant content “above-the-fold.” Themost important content, including significant links and calls-to-action, should be prominently displayed onthe screen, without scrolling down to find them.MobileThe first step for designing mobile is anticipating the needs of the user and how the user will interact withthe site. Mobile users are typically on-the-go, so your mobile content should be relevant to this situation.For example, the mobile user is probably more concerned with the phone number, hours of operation andlocation of a store than a biography about its founder.In addition to serving relevant and accessible content, anticipate how the user will interact with the site.Most mobile users scroll and click with their thumbs. So objects like buttons and form fields should belarge enough to select with the thumb and spaced far enough apart so the wrong one isn’t clicked byaccident. Navigation elements can also be consolidated into drop-down menus to preserve space on thescreen.The mobile content should be easily accessible. This means laying it out in a single column that is easilyscrolled down with the thumb. Horizontal scrolling is not preferred, but horizontal “swipe” gestures canbe used to display different content within a container. For example, a picture gallery can display onephoto on the screen that changes to the next when swiped, horizontally, with the thumb.The content should also be delivered at a legible size. The user should not have to pinch or zoom to seethe content. The fonts should be enlarged. If appropriate, excess text can be omitted from the mobileversion as well.Implementing Responsive Web Designwww.thesearchagency.com10
Since mobile users are on-the-go, they should easily be able to contact and find businesses. Phonenumbers and addresses should be prominently displayed in mobile, with click-to-call and click-to-maplinks.Click-to-call links are anchor tags with a tel: reference in the target. Include the area code to compensatefor any users calling from different area codes. a href ”tel:8005551234” 800-555-1234 /a Click-to-navigate links can easily be setup through a link to Google Maps. This link tag consists of the URLfor Google Maps and two additional parameters: saddr for “starting address” and daddr for “destinationaddress.” Leaving the saddr blank will give it the default value of the user’s current location. Alternatecodes can be used to launch navigation in specific apps, but this is a streamline solution that will workacross most devices. a href ”http://maps.google.com/maps?saddr &daddr 123 Main Street,Los Angles,CA,90012” Get Directions /a Mobile layout sampleAny content that is irrelevant or incompatible with the mobile experience should not be delivered tomobile users. For example, the mobile site should not contain media elements that it cannot render, suchas Flash objects, or links to resources it cannot load, such as .exe files or applications that are optimizedfor desktops.Implementing Responsive Web Designwww.thesearchagency.com11
TabletTablets are similar to mobile devices and the same fundamentals should be applied to both. The tablethas the same gesture-based navigation as mobile. The tablet has one, distinct advantage over mobile: asuperior display size. This can be used to serve larger images and objects, and more sophisticated layouts.The tablet layout can be opened up to several columns. In the example below, we have expanded thelayout from a single column to two columns. Navigation elements can be expanded from dropdownmenus and even served across the top, or side, of the screen. Content can also be expanded. Tablet userscan consume more content because they do not have the same sense of urgency as most mobile users.Tablet layout sampleContent for tablet layouts should follow the same guidelines as mobile-optimized content.DesktopThe first difference between desktop and the other two platforms is how the user interacts with thepages. Mobile and tablet pages are navigated through gestures. Most desktop users use a mouse, ora track-pad. Any gesture-based navigation, from the other two platforms, must be delivered differently.Also, since the navigation device is more precise, elements can be smaller and brought closer together. Inaddition to the expanded capabilities, the desktop layout can be expanded in size as well. In the examplebelow, we have expanded the layout from two to three columns.Desktop layout sampleImplementing Responsive Web Designwww.thesearchagency.com12
Desktop browsers are also capable of displaying content that is not supported by mobile and tabletdevices. So desktop-specific elements, such as applications and media files that are not compatible withmobile devices, can be added to the desktop version.Paid Search AdsHow paid ads are served is a significant component of implementing RWD. In order to be effective,ads must be relevant to the user and customized to the respective viewing device. For example, a userviewing the desktop version of a page should not be served mobile-optimized ads and vice-versa.If possible, use bid management software to serve ads with responsive qualities to visitors. For example,Google AdSense developed an asynchronous ad code allows you to set the size of an ad throughCSS, and optionally media queries12. If responsive code is not an option, at least make sure your bidmanagement tools are targeting specific devices and browsers.Avoid using any of the following techniques when serving paid ads in your RWD pages: Hiding ad units at anytime (e.g., display:none) Implementing ad code in a way that covers content Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method Floating ads or units that slide to attract unwarranted attention12Responsive Design Server Side Components (RESS)RESS combines adaptive layouts with server side component (not full page) optimization13. RESS relies onuser agent checking to identify the user’s device and serves only the necessary, optimized components torender the page. This is a contrast to standard RWD, which includes all various components within a pageand uses media queries to display or hide certain components.For example, RESS can identify that a page is being viewed on a mobile device and dynamically servea page header that includes mobile-optimized navigation elements. RESS can also swap out higherresolution images for iOS devices with retina displays and serve lower resolution videos to savebandwidth on mobile devices.In addition to providing a more customized user experience, RESS only serves the elements that arenecessary to render the optimized page, which optimizes page size and how quickly pages are rendered.12. Google. (2013). Modification of AdSense code. Retrieved from hl en&topic 1271508 on August 2, 2013.13. Wroblewski, Luke. (2011). RESS: responsive design server side components. Retrieved from http://www.lukew.com/ff/entry.asp?1392 on August 2, 2013.Implementing Responsive Web Designwww.thesearchagency.com13
Next StepsThe fundamentals presented in this white paper provide a solid foundation of RWD. In addition to thesetechniques, additional CSS3 components, HTML5 and jQuery functions can be implemented to makethe design more responsive. The potential of these languages is beyond the scope of this article, butadditional research is highly encouraged.ConclusionIf your site functionality allows it, RWD is the “industry best practice5” for developing mobile sites inthe modern, device-driven web market. Properly applying these fundamentals and resources provides asuperior position in this market, which leads to increased user-experience, engagement, value, traffic andconversions for your business.About The Search AgencyThe Search Agency is a global online marketing firm that combines high-tech and high-touch strategiesto help clients engage their customers online and measure ROI beyond a reasonable doubt. With adeep-rooted history in paid search and SEO, The Search Agency understands how activity on the webintersects at search, and executes smart digital marketing strategies that drive measurable results acrossmultiple platforms. Services include Paid Search, SEO, Landing Page Optimization, Display Media,Social Media and Comparison Shopping Management, which are strategically leveraged to maximize theefficacy of clients’ integrated marketing campaigns. The company is one of the nation’s largest and fastestgrowing search marketing firms – named the largest independent U.S. search marketing agency byAdvertising Age and among Deloitte’s 2011 Technology Fast 500 . Founded in 2002, The Search Agencyhas grown to more than 180 employees worldwide with headquarters in Los Angeles, CA, and additionaloffices in San Francisco, East Greenwich, Baltimore, Tampa, London, Sydney, Toronto and Bangalore. Formore information, go to http://www.thesearchagency.com.Implementing Responsive Web Designwww.thesearchagency.com14
What is Responsive Web Design? Responsive Web Design (RWD) is a form of web architecture that delivers a customized user experience across an array of devices. The key to this methodology is a flexible layout with elements that adapt to the size and features of different screens, devices and browsers.
