RESPONSIVE DESIGN & DEVELOPMENT THE WHAT, WHY & HOW

Transcription

1 RESPONSIVE DESIGN & DEVELOPMENT THE WHAT, WHY & HOW December 2014 SUSANNA OLIVER Web Developer Denver Fargo Minneapolis sundog FAX:

2 Overview Mobile devices permeate every aspect of our lives. They are our telephones, our connection to friends, our fitness coaches, our on-the-go entertainment system, and in some ways, even our health experts. They are in airports, in waiting rooms, in the workplace, and in our homes. And everywhere, people are checking their . So why not deliver s meant for people on the go? Why not deliver content that engages them in their unique situations? Mobile devices account for over 50% of traffic 1, no surprise given that users refer to their smartphones 150 times a day on average. This is a marketer s paradise, rich with opportunity. Forget the billboards. Forget impersonal blanket advertising that everyone ignores anyway. It s the age where we can forge unique user experiences designed to meet the needs of the customer with relevant, useful information and display it in a way that makes it easy for them to use regardless of whether they access it on their smartphone, tablet, or desktop. delivers content directly into a potential customer s pocket, so make the most of this opportunity by optimizing your s for mobile. Technical Level To get the most out of this white paper, you should be familiar with standard development practices. If you don t have prior development experience, start by reading the white paper, Developing High-Performance HTML s, available on the Sundog website: whitepaper/developing-high-performance-html- s Why Go Responsive? Responsive design has a proven track record of improving customer engagement. When responsive design was just starting to catch on in 2012, Deckers, a shoe manufacturer, decided to try it out to see if it would improve the experience of their 35%-65% mobile user base. As Litmus reports, their mobile opens increased by 9% and their click-throughs rose 10%. 2 More recently as mobile usage continues to rise, A/B tests have shown that responsive designs continue to outperform non-responsive s with up to 130% higher click-through rates than non-responsive s. 3 By making it easier for mobile users to access the content, users are following through in greater numbers than ever before. Responsive Design: Talking Points Sometimes, in talking to a client, you just need to present the big picture without getting bogged down in the details. Here are some things you can cover to show how responsive design can benefit them and their customers. 1. THE BOTTOM LINE in responsive design is to cultivate customer engagement by making s easier to consume. Responsive design is specially crafted to give the recipient the best possible experience no matter how they access their . If they open it on their mobile device, the content is legible, clean, and large enough to read easily. In short, the content is easier to use, so it s more likely to be used. Most people, especially in the marketing and technology world, are familiar with how responsive web design works so it s not a foreign concept and may need very little explanation. 2. SHOW EXAMPLES of responsive design to illustrate the advantages over non-responsive design. Most people respond more enthusiastically when visual illustrations are combined with theoretical concepts. Seeing is believing. 3. TELL REAL-LIFE STORIES that prove the effectiveness of responsive design in stimulating customers mobile engagement such as the example of Deckers. The proof is in the pudding and responsive design is a tried and true method that gets results. 4. BUDGETS are also an important consideration. Because the responsive version has to be developed and tested in addition to the initial desktop version, responsive s take longer to build and cost more. The key here is to recognize the potential return on investment. Increased

3 customer engagement more than compensates for the additional expense if a large portion of the recipients regularly open s on a mobile device. From my experience, responsive s take approximately 25% more time than a non-responsive one (depending on design complexity and the extent of the changes) so budgets are a consideration. 5. THE AUDIENCE and their habits vary from business to business, so having a thorough knowledge of how your users are currently reading s is important before going down the responsive path. If only 10% are opening the s on mobile, then maybe responsive design may not be right for this particular business at this time. The return on investment would be inadequate to compensate for the additional cost of development. Types of Mobile-Friendly s When it comes to creating a usable experience on mobile, every needs a different approach. Some s are simple text announcements while others are complex product catalogs with multiple columns. These call for different development approaches, a few of which are explained here. Scalable s: A narrow of 500 pixels or less, making it suitable for either desktop or phone with no adjustment. The narrow width limits the design to a single column, but all other design elements are free for the taking. Scalable or skinny s are best with a simple design, touch-friendly buttons, and limited body text that s styled a bit on the large side. While not technically responsive because nothing changes between mobile and desktop views, it achieves its purpose by being equally friendly on both platforms. Fluid s: An with its width set to 100 percent to fill the screen regardless of the device. Best suited for simple layouts or text-dominant s with optional tweaks to mobile display through a media query. While great for free-flowing designs, this method offers little control over how elements wrap and can prove unwieldy and inconsistent when viewed on larger devices. Adaptive s: A fixed-width (e.g. 600 pixels wide) for desktop with a fixed-width mobile breakpoint (e.g. 320 pixels wide) for mobile. This method is similar to fluid s, but offers more control over precise designs than does fluid development because of its defined pixel widths. Responsive s: This is what we will be covering in the rest of this white paper. A responsive does more than tweak the layout or make the buttons larger. Unlike the other methods of adaptive development, responsive s use media queries to fluidly fit content to each device, adding flexibility and increasing user experience. Key Concepts Responsive design is the art and science of balancing the old desktop standards against the powerful capacity of today s mobile applications. A responsive empowered by mobile still has to be compatible with older desktop clients, but fortunately we don t have to sacrifice the abilities of mobile in the name of compatibility. Responsive design starts with a base desktop version. Standard development practices apply at this stage including inline styles and tables (if this is unfamiliar to you, be sure to study up on the white paper mentioned previously). Responsive functionality is part of this framework by adding classes to the elements that will change on mobile. Through the use of a CSS style block and media query in the head of the , we can manipulate the design for mobile. Unlike responsive web design which allows us to start with mobile, responsive design must always start with a desktop version as a base since it uses inline styles that we must explicitly override on mobile. The reason we can t start with the mobile design and then override with desktop media queries is because several of the most popular desktop and web-based clients, Outlook, Gmail, and Yahoo! Mail, don t support media queries. In contrast, modern mobile clients have good support for media queries. In short, inline styles control the desktop layer and classes dictate the mobile display through a media query. While all this sounds fine and dandy, those familiar with the priority rules of CSS will see an immediate problem: inline styles are innately more powerful than general style blocks, rendering the mobile styles ineffective. Inline styles win every conflict. 3

4 Fortunately, this is not the death knell for responsive design; CSS is smarter than that and provides an additional level of monarchy to trump even an inline style: the all-powerful!important rule. As much as we try to avoid this rule in web development, there s no way around it in development, nor is there any reason to avoid it since s are a one-off page and not an entire website where!important could cause disastrous cascade issues. Another challenge facing responsive design stems from tables. As every developer knows, standards are stuck somewhere in the 1990 s with clients like Outlook (and yes - even some of the recent versions) that have limited CSS support for layout properties like float, margin, and padding. With limitations like these, the only way to achieve complex, cross-client layouts is through tables. However, it comes at a price because table cells are innately limited in their ability to collapse, realign, and shuffle in the way we have come to expect in responsive layouts. Despite these limitations, with a few tricks a two-column table desktop layout can be realigned into a seamless, single-column flow for mobile. Concept Tutorial For this tutorial, we ll be using a two-column, responsive as an example. While this is not an exhaustive explanation, it will provide a foundation from which you can expand your knowledge with experience. Our goal is to turn the non-responsive, two-column on the left (Figure 1) into a fully responsive, single-column as shown on the right (Figure 2). As discussed above, desktop styles should be developed before you start adding responsive styles to ensure they are properly overridden. See Key Concepts on page 3 if this needs more explanation. The Media Query The breakpoint you choose depends on the width of your and your target devices. For this , a 600 pixel max-width will target most phones while leaving tablets to use the desktop version. Additional media queries may also be included to target other devices such as tablets. /*styles here*/ CSS Idiosyncrasies CSS for responsive has two idiosyncrasies: 1.!important and attribute selectors. The!important rule is our best friend because responsive styles have to override the inline desktop styles. Figure 1 2. Use the attribute selector method (i.e. table[class= container ]) within media queries. Due to a bug in Yahoo! Mail which causes the client to ignore media query requirements, attribute selectors are necessary to ensure that this client displays the desktop version as intended. Figure 2 4

5 Display resets Before we start adding mobile classes, it s a good idea to address common client display issues through a CSS reset. Here are a couple pertaining to mobile: Remove blue link color on ios.applelinks a { color: #222; text-decoration: none; Remove body margin & padding body { margin:0; padding:0; font-size: 100%!important; Setting the margin and padding to zero on the body removes any unintended spacing around the edges of the . Framing valuable mobile real estate in an ugly white margin would be a shame. Removing the margin is as simple as doing it for a webpage. Assigning classes Next, assign a class to each element that will need to change on mobile. To start with, create a class that changes the pixel-based widths of tables to 100%. In the example below, the desktop version has an outer table width of 600 pixels and the media query CSS trumps that to 100% for mobile. HTML: <table cellpadding= 0 cellspacing= 0 width= 600 border= 0 align= center bgcolor= #eeeeee class= r_containertable > CSS: table[class= r_containertable ] { width: 100%!important; NOTE: I ve used the prefix r_ to differentiate the responsive design classes from other classes that may be required by management systems. Note that the!important rule comes into play here as discussed above to override the more powerful inline width attribute. Without the!important rule, the mobile CSS would be powerless. Additional considerations for mobile styles Increase text size Use large, touch-friendly buttons Swap out links that reference click or click here Two-Column to Single-Column Now it s time to realign the columns for mobile. The two-column, side-by-side articles are built from adjacent td tags as follows: HTML: <tr> <td class= r_columncell >column 1</td> <td class= r_columncell >column 2</td> </tr> CSS: td[class= r_columncell ] { display: block!important; width: 100%!important; The two td tags have a single class called r_columncell to which the CSS is imparting block-level status, forcing the second column to wrap beneath the first. While other methods are available to wrap articles into a single column, this is considered the most reliable, cross-client method. Hiding Images on Mobile Sometimes mobile devices call for a different image than what was used on the desktop display. Without the use 5

6 of Javascript to swap out images, we have to place both the desktop and mobile versions of the image in the HTML and hide one of them with CSS based on the platform. HTML: <img src= clouds_desktop.jpg height= 75 width= 75 style= display:block class= desktopimg /> <img src= clouds_mobile.jpg height= 1 width= 1 style= display:none class= mobileimg /> CSS: img[class= mobileimg ] { display: block!important; width: 100%!important; height: auto!important; img[class= desktopimg ] { display: none!important; By setting the display to none and the width and height to 1 pixel within the HTML, the mobile image will effectively be hidden from all desktop clients, including Gmail and several versions of Outlook which do not support display. In the CSS, the display property swaps out the two images on mobile devices and resizes the mobile image from one pixel to the proper size. ignored in Gmail s app. The device itself has little to do with whether the displays correctly; rather, it is the application in which the is opened that determines compatibility. For example, a user could have two different experiences on their iphone depending on whether they opened the in their Gmail app or the default mail app. As of the time of this writing, Gmail does not support CSS style blocks and thus, the user would see the desktop version of the . Apple s mail app, on the other hand, responds beautifully to responsive design so in this case, the recipient would see exactly what you want them to see on a mobile device. Responsive design compatibility is dependent on an app having two factors: media queries and style blocks. Media queries is a no-brainer because it s the core of responsive design, but surprisingly enough, some clients like Gmail strip out CSS style blocks which is why responsive designs won t render in Gmail. Fortunately for developers, it doesn t do anything more dangerous than to simply display the desktop version. The main culprits of unsupported media queries or style blocks are: 4 Gmail app Android s Yahoo! Mail app Windows phone 7 & 8 apps Summary Now it s your turn. Take this new knowledge and show your customers you care about them by delivering content that matters to them, displayed in a way that s easy for them to engage with, and showcases your company in a polished, customer-oriented way. Believe me, they ll thank you. Where It Works and Where It Doesn t It s important to understand where responsive design works and where it doesn t work so you don t drive yourself crazy wondering why your responsive design works fine in Apple s default mail app but gets