Responsive Design. Our guide to helping you get started. August 2012 Version 0.2

Transcription

1 Responsive Design Our guide to helping you get started August 2012 Version 0.2

2 Contents Introduction... 3 What is Responsive Design?... 4 What about ?... 5 So what are the pros and cons?... 6 How can I build a responsive template?... 7 Designing for mobile first... 7 Coding a mobile template... 9 How can I build a responsive ? Summary

3 Introduction Before getting started, this guide has been created as a starting point for our clients to optimise their s for mobile devices while using the Communicator platform. As we're sure you are aware, mobile devices and their capabilities are forever changing and likewise so are the techniques used to make sure that s render correctly on the range of available clients. if you have any suggestions as to how we can improve this guide, or you notice any changes in functionality which requires the guide updating, please get in touch. Stephen Hill Senior Designer design@communicatorcorp.com 3

4 What is Responsive Design? It's said by 2014 mobile internet usage is likely to overtake desktop internet usage and even now it's believed that currently 1 in 5 s are now being read on a mobile device. With this in mind, can we really ignore designing for mobile devices any longer? The answer is of course a resounding, no. For a while now web designers have dealt with designing for mobile by having effectively 2 different sites i.e. a maximum resolution one () and a minimum resolution one (mobile.communicatorcorp.com). Depending upon which device the site was viewed on, it would automatically chose which version of the site you ended up on. However, for Marketing departments this then becomes a logistical challenge; 2 different layouts, 2 different ways of working, and possibly even 2 different types of content i.e. one long, one short. Not only that but sharing content between devices proves difficult. For example, say a customer was viewing an interesting blog post on their mobile (or even viceversa) and wanted to share it with the rest of their office - it's highly likely that the rest of their office would then be locked into viewing it on that context. A pretty poor user experience. Responsive Design is a current trend which aims to react to user s actions and detect the device which the site is currently being viewed on, in order to provide the best user experience possible in terms of navigability and readability. In short - depending on what type of device (and resolution) the user views the initial website on, means what type of experience they receive. Example belo 4

5 What about ? With the variety of clients on the market, support of various techniques is a challenge on mobile devices. This is something we stress to all who wish to adopt a responsive design. iphone, ipad and Android devices all use the WebKit rendering engine therefore it comes as no surprise that the support queries between the two on their in-built mail clients is pretty good. There are some anomalies between the two however; and one comes in the shape of Gmail's own app that you can download on both iphone and Android. Since the Gmail Web Client doesn't support embedded CSS queries is a variant of that), it's no surprise that media queries are not supported in any of the Gmail mobile apps either. The other anomaly we ve found during testing is mixing the default Android client, and addresses which use a Microsoft Exchange Server to deliver those s (usually Exchange 2010). For some unknown reason, the required code to enable a responsive design is stripped out by the server and users are faced with the standard instead. Blackberry are slowly but surely moving towards using the WebKit rendering engine, but aren't quite there just yet, therefore support should improve as newer devices appear on the market. As it stands, only operating system and greater have partial support queries. Windows 7 handsets are different in the fact that the browser's base functionality is built upon a hybrid of Internet Explorer 6 & 7, which do not queries at all. This means that users of Windows 7 handsets will have to cope with the basic . 5

6 So what are the pros and cons? Firstly, the most important plus point is that responsive design provides a massively better user experience for the end user. Anything that's styled for the device its being read on is always likely to vastly improve the user experience and therefore hopefully improve sales, subscriptions etc. It also means there is no need for a 'separate' mobile template. Having a separate' mobile template is something we would always class as a poor man s' responsive design. By all means capture user preferences as to whether they want to receive s on their mobile device, but sending a mobile only' means that there is always going to be that one time when the user does end up viewing an on their computer and although viewing a 300 pixel wide on your computer isn't the end of the world, responsive design would solve all of that. On the flip side, there needs to be an understanding that template/ layouts need to be much simpler. Single / two column layouts render best on mobile devices. They're easier to read, and if they do somehow not fully render as expected on the mobile devices which don t fully support various techniques, they degrade so much more gracefully. It should be understood that if there is the thought that current templates/ s can just be switched to be made 'mobile-friendly' then I'm afraid that this isn t the case. Responsive design means a change of approach; from design to dispatch. Finally, adding mobile-specific styles shouldn't be confused with providing a slimmer or faster-loading version of your content. Mobile-specific styles just make the content easier to read on the device. In effect, the user will still effectively be downloading all of the content. 6

7 How can I build a responsive template? It is important to re-iterate something before we begin. The techniques used and discussed within the following guide aren t universally supported by all mobile clients. Not unlike web / desktop based clients, there are no mobile standards within the industry. Although we always try to ensure the advice we provide caters for the masses, there will unfortunately always be the odd occasion where the code will not render as expected. Designing for mobile first More often than not, the mobile experience for a website / application is often designed after the desktop version an afterthought if you will. To build a true responsive it s imperative that this approach is reversed and the mobile version is designed first. Designing for the mobile environment comes with a natural set of constraints the most obvious one is screen space. Losing in the region of 80% of the screen space you are used to when designing for web / desktop clients forces you to focus on making sure that what stays on the screen is the most important set of features/information for your customers and your business. Never has it been more important to understand the main goal of an e.g. SquareSpace 7

8 Not only have SquareSpace utilised a single column approach which lends itself nicely to a responsive , it has also forced them to think hard about what their main call to action is, which in this case is obviously trying to get customers to purchase a bespoke domain name. Research has shown that during a typical day: 84 per cent of people will use their smartphone at home, 80 per cent during miscellaneous times during the day, 74 per cent waiting in queues, and 64 per cent at work. This comes mostly in short bursts so not only will designing for mobile first mean a better user experience overall, but it will also give you the chance of slimming down the file size of your enabling people to access and read your s quickly on the go using a mobile connection e.g. 3G. A good example of using the mobile first mentality is below. The on the left (90% images and even longer than the screenshot suggests) wouldn t work as a responsive . Not only because of the slow loading nature of the large images when viewed on a mobile, but structure wise it isn t built using a single / two column layout. The layout on the right however has been generally built with mobile in mind. It uses a mixture of 1 and 2 column layouts, is short and punctual, has a nice blend of text and images and more importantly will load relatively quickly using a mobile connection. 8

9 Coding a mobile template In general a lot of the best practice guidelines we recommend in our regular template guidelines, run true when building a responsive template. For example, where possible we always recommend using Inline Style Sheets (ISS) over its External and Embedded CSS brothers and sisters. The reason for this is that most web-based client s strip out any External and Embedded style sheets from the header resulting in the final being displayed incorrectly using the default browser fonts. ISS, however, performs much better. One key difference is that building a responsive template/ for mobile devices requires the use of CSS3 media queries (a variation of Embedded CSS which we normally recommend avoiding). For only screen and (max-device-width: 480px) { table[class="hide"] { display: none!important; } img[id="logo"] { width: 50px!important; heigh 25px!important; } } Breaking the above down, all the code is saying is that when a device with a maximum resolution of 480 pixels or below views this page (for example an iphone), then apply the following styles. Then within the itself all we have to do is reference the relevant style at the right time e.g. <img src="logo.jpg" width="100" height="50" id="logo" style="display: block;" /> When the is viewed on a mobile device, the (in this case the logo image (logo.jpg)) adapts based on these rules but it leaves any device using a bigger resolution e.g. PC s, untouched. Using the above as a guide, the media query can then be adapted based on a number of potential mobile resolutions should the need be there, but as a guide; 480px is a good enough starting point to cover most mobile devices. One thing you may have noticed which is different from your standard Embedded CSS, is the introduction of square brackets around class names. These are called Attribute Selectors and the main point of these are to fix a well-known problem in Yahoo! Mail. For some unknown reason, Yahoo! Mail gives precedence to query, which means that even if you view the on a PC, you will still be faced with the mobile optimised version of the (Fig 1 below). Using the Attribute Selectors ensures the correct version is not only served up to Yahoo! Mail recipients but it leaves s viewed in other clients untouched. 9

10 (Fig 1) Building a single column template Single column templates are by far the easier option when it comes to designing a responsive template i.e. they re easier to code, and if things don t render as you d expect, they degrade much more gracefully. Using the above media query as a guide we can do the only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 325px!important; } } Then, similarly to the logo example detailed above, we can then reference that class on the relevant tabl <table width="650" border="0" align="center" cellspacing="0" cellpadding="0" class="table-shrink"> <tr> <td bgcolor="#ffffff" valign="top">{{mainbody_650_325}}</td> </tr> </table> 10

11 When the is viewed on a mobile device which matches the above requirements, the body of the shrinks down to 325px wide. Building a two column template Building a two column template, although slightly harder, can still be done without having to resort to adding too much code to the query or the template itself. In theory, the idea is that the second column will wrap underneath the first column when viewed on a mobile devic To achieve the desired result when building a website, CSS properties such as floa left; would naturally be used but as we re building an older HTML attributes such as align= left are an adequate replacement. In the following example we will take a 650 pixel wide table with one table cell, and inside that table cell we insert 2 nested tables; one with the width of 325 pixels which is aligned left, and another similar table which is also 325 pixels wide but this time with no align property. The outcome when viewed on mobile will cause the table with no align property to wrap underneath its partner. The code to achieve this looks as follows; firstly only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 325px!important; } } 11

12 Secondly, the HTML itself: <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" class="table-shrink"> <tr> <td bgcolor="#ffffff"> <table width="325" border="0" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top">{{column1_325}}</td> </tr> </table> </td> </tr> </table> <table width="325" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top">{{column2_325}}</td> </tr> </table> 12

13 Building a fluid template Unlike the two examples above which are fixed at 325px wide, it is also possible to create a fluid template. The fluid template, which no matter what resolution device a user views the on, shrinks and stretches accordingly. To do this, instead of using specified widths, we instead use percentages only screen and (max-device-width: 480px) { table[class=table-shrink] { width: 100%!important; } } This slightly query will mean that when a device with a maximum resolution of 480 pixels or below views this , no matter what resolution the device has, the table will change to 100%. For single column templates this is a relatively small change; however for two columns it becomes slightly harder and requires some small amends to the template s HTML: <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" class="table-shrink"> <tr> <td bgcolor="#ffffff"> <table width="50%" border="0" cellspacing="0" cellpadding="0" align="left"> <tr> <td valign="top">{{column1_325}}</td> </tr> </table> </td> </tr> </table> <table width="50%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top">{{column2_325}}</td> </tr> </table> As you can tell from the above HTML, we have amended the two side-by-side tables to percentages (50%) rather than fixed widths. Very little changes when viewed on either desktop or webmail client, but by changing it to a percentage means a fluid layout on mobile devices. N.B. Because of the fluid nature of these templates the chances of something not rendering as expected is much greater, so please test thoroughly on multiple devices before dispatching. 13

14 Our final bit of advice is that although fluid templates may seem the way forward, it s important that a wider view of your target audience is taken. For example, when using our upcoming improved Communicator reports, you may see as an example that 90% of your recipients view your s on one type of mobile device e.g. Apple iphone. If so, it s probably not worth spending too much time in designing a fluid template for the other 10% of recipients who view their s on an uncommon device. 14

15 How can I build a responsive ? From the above sections, you have seen how to design and build a responsive template. The following section shows how to build an from that new responsive template within the Communicator platform. Importing your template into the platform is exactly the same as importing any other template. Simply store all of your template images in the same location as your HTML file (i.e. don t put the images into their own sub-folder), then create a ZIP file containing all of your images as well as your template HTML, then upload it into Communicator. N.B. Communicator is designed to be a feature rich platform with no restrictions to our clients when it comes to building s. Such features include intuitive WYSIWG editor, data driven content, image map editor, advanced personalisation etc. However, when it comes to building a responsive such features may or may not work as expected across wider mobile devices, so the key when building a responsive is to keep it simple and test thoroughly. The simpler the template / , the more chance there is of it rendering perfectly across desktop, web and mobile clients alike. Creating fluid images in a responsive Mobile devices can come in all shapes and sizes so it s important that no matter what resolution mobile the user has, that images and text make use of the screen size as much as possible. One solution is to create fluid images; which similar to a fluid template, shrink and stretch depending on device. To do so, an query can be used in the main template which then can be referenced when building the . The query looks like only screen and (max-device-width: 480px) { img[class=responsive-image] { width: 100%!important; max-width: 100%!important; heigh auto!important; } } To reference this class when building your within Communicator, follow the steps belo 1. In the Template Manager, select your template; press the Actions button next to it, then press Create . 15

16 2. Select your required mailing list and give your a name. 3. Double-Click on the required placeholder to enter the WYSIWG editor. 4. Insert an image via the Image Manager (Fig 2). 5. Swap to the HTML view using the button at the bottom of the editor and then include the class appropriately on the image e.g. <img class="responsive-image"> (Fig 2). (Fig 2) N.B. Because of the max-width: 100% property on query, it s important that any image you insert into the relevant placeholder has been saved at the appropriate fixed dimensions. For example, if the width of the placeholder is 600 pixels when viewed on desktop and webmail clients, it s important that the image you use is saved out at exactly 600 pixels. Inserting an image which is too big for the placeholder to begin with and scaling it down using the platform rarely produces good results. Hiding / Showing content Although very much a contentious issue amongst Web / Designers, some may find it necessary to pick and choose which content to display to recipients when viewing the on mobile devices. The argument is that most mobile users do everything desktop users will do so all content should remain the same only presented in a usable way. This is very much a judgement call, however should you choose to remove certain content on mobile devices e.g. limiting the amount of stories; this is how you do only screen and (max-device-width: 480px) { td[class=table-cell-hide] { display: none!important; } } 16

17 The query is saying when a device with a maximum resolution of 480 pixels or below views this page, then set the content (in this case a table cell) not to display. To reference this class in the Communicator platform, we follow a similar process to that of when we want to insert a fluid imag 1. Presuming, you have already created an from your responsive template, double-click on the required placeholder to enter the WYSIWG editor. 2. Insert a table via the Table Wizard (Fig 3). 3. Swap to the HTML view using the button at the bottom of the editor and then include the class appropriately on the table cell e.g. <td class="table-cell-hide"> (Fig 3). (Fig 3) 17

18 Summary The techniques used and discussed within this guide are to be used as a starting point to your responsive design adventures. By altering and enhancing the above code, as well as using the core functionality found within the Communicator platform, you can achieve your desired outcome on mobile devices with relatively little effort. If you d like to know more about Responsive Design, or would like the Communicator Corp Design team to design and build a bespoke responsive template using the above best practice knowhow and expertise, please contact your Account Manager for more information. Alternatively, if you have any suggestions as to how we can improve this guide, or you notice any changes in functionality which requires the guide updating, please get in touch. Stephen Hill Senior Designer design@communicatorcorp.com 18