Responsive Design

Transcription

1 Responsive Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013

2 Responsive Design There has been a lot of chatter in recent months in regards to Responsive Design. Yes, this is a big change in doing things and it s not simple, but don't be worried if you are a little intimidated by it. We've been testing responsive design for awhile in order to help you answer the four burning questions everyone seems to have: 1. What is it? 2. Is it worth the effort and cost? 3. Can you really see a difference? 4. How do you build a responsive design template? What is Responsive Design? Responsive Design addresses the need to design s that can adjust to a range of screen sizes and resolutions. In responsive design, a marketer would design an that would automatically display an optimized version of the depending on the device in which the is viewed, as opposed to developing (for example, one for desktops and a second mobile version for mobile devices). Responsive Design has more limitations than Responsive Web Design because of the inconsistency of rendering across clients (such as Outlook, Gmail and Yahoo), lack of CSS support across clients, and the inability to use scripts to aid with optimizing s. Is it worth the effort and cost? Consider the following statistics: 38% of is now opened on a mobile device, with 33% for desktop and 29% for webmail Litmus " Analytics" (September 2012) 78% Of U.S. Users Will Also Access Their s Via Mobile By 2017 Forrester Research Marketing Forecast (2012) 56% of U.S. consumers made at least one purchase using their smartphone in response to an 88% of smartphone owners check their on the mobile phone daily

3 The above two charts make it clear that mobile is very important. Mobile will dominate over other types of as more people purchase mobile devices. What does mobile mean? It can mean s opened on a smartphone (with the lion s share going to the iphone and Android phones) as well as tablets such as Apple s ipad and Google s Nexus 7 or Nexus 10. What does all of this mean? When designing an , marketers can no longer afford to ignore mobile . Marketers must now consider how their s will look on different sized screens across different media devices. Therefore, the effort and cost associated with responsive design is worth it. Consider this that does not utilize responsive design:

4 Non Responsive Design Responsive Design

5 What were the differences? 1. Text automatically converted to 22px for easier viewing 2. Header text does not appear to condense length 3. 2-column collapsed to one column 4. width is slimmer, no need to scroll horizontally to see entire 5. Social Media icons appear double size for easy screen clicking How Do You Build a Responsive Template? Using media queries is a great method to implement Responsive Design. Happily, in the hospitality industry, for now, most mobile s are read on ios devices, which use the Webkit rendering engine which has great support for CSS. This makes media queries a consistent method that will work across the majority of mobile devices. A media query is CSS code in your HTML that can check the following: Width and height of the browser window Device width/height Orientation (landscape vs. portrait) Resolution Then, depending on the query results, the HTML will render accordingly. Typically, when an is designed with encoding for media queries, the will become narrower, large images will become smaller, and text sizes become larger for easier viewing on a mobile device. Sometimes entire sections of an will disappear when viewed on a mobile device, so as to condense the length of the . The breakpoint for a media query is generally at 480px width, which is the landscape view of an iphone (iphone screens measure 320px by 480px). A media query takes this only screen and (max-width: 480px) { insert smartphone-specific style declarations for smartphone viewing here The code above tells the device that all code between the brackets applies to only devices where the screen is smaller than 480px. All desktop screens are wider than 480px; therefore, when the is viewed on a desktop, the code in between this section is ignored; while the code is applied when viewed on a mobile device. In between these brackets are instructions for HTML formatting when the is viewed on a mobile device. Instructions inside media queries can include: Increasing font size, so there is no need to zoom in to see the text Decreasing the width, so that the width fits flush with the smartphone Collapsing sections to make the shorter in length Converting multi-column s into a single-column Decreasing image sizes Increasing sizes of social media buttons, to make it easier to tap with a finger on a phone Changing the image resolution for retina displays

6 What we want to do Build a fully responsive HTML that displays properly in a desktop web browser as well as a mobile web browser and client.

7 HTML Container CSS Styles Smartphone Style Desktop Styles Golden Rules There are a few Golden Rules to follow when doing responsive HTML design: Design using a one column layout. Using more than one column is usually not a good layout choice for small screens as those present in mobile devices. Never write styles in pixels. Try to always use relative sizes (%). And if that's not possible, you will always have to use media queries to adapt your element between different viewports. Remember that 300px looks completely different in a desktop or notebook monitor than in a mobile display. Don't repeat styles for the font family and font size in each paragraph, just once in the table tag is sufficient. Creating a Responsive Design The Container The first element we need to develop a responsive is the main container. We will use a 600px width container for the desktop and a 100% width container for mobile devices. (See next page) The first thing we note in this code is the CSS Styles block in the top of the HTML. This block is composed of two segments. The first one (in red) is used for displaying the in a desktop or notebook computer, while the second segment is used only for mobile devices. Each of these segments has two CSS rules. The first one sets the width of the container and its margins, while the second sets the font family, size and line height of the text in the . The most important things to see at this point is that the container width is 600px for desktop while 100% for mobile and the font size differs from desktop to mobile, being almost twice as big in mobile than in desktop. This is one of keys when designing for mobile as we want to avoid the user constantly zooming in and out. <style type="text/css">.container { width: 600px!important; margin: 2em auto; * { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: only screen and (max-device-width: 480px) {.container,.container table { width: 100%!important; max-width: none!important; * { font-family: Helvetica, Arial, sans-serif; font-size: 18pt; line-height: 28pt; </style> The second block (in green) corresponds to the HTML container where the content will be placed. As we can see this container is a table inside a div tag. We should note that although designing layouts with tables is highly undesirable because of its rigidity, we have to do it this way because we want to maintain compatibility with Outlook. The width of the container div and table should match the width in the CSS styles. So in this case the div tag s max-width attribute should be 600px, and the table's width and max-width attributes should also be 600 in the first case (the width attribute for a table doesn't need the px suffix) and 600px in the second case. <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> <!-- Here goes the content of the --> <!-- End of the content -->

8 Changing 's Width for the Desktop The container we defined above is set to 600px for a desktop. Let's show how to change it to 700px (but still maintaining 100% width for mobile). We will display only those lines of code that have to be changed. <style type="text/css">.container { width: 700px!important; margin: 2em auto; </style> <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> <table width="700" style="width: 100%; max-width: 700px;" align="center" border="0" cellpadding="0" cellspacing="0" style="style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> </div> Changing the 's Font If we want to change the font by default you can do it easily by changing the font-family in the CSS styles block and in the container table tag. The default font we are using in our example is Helvetica, but let's suppose we prefer to use Comic Sans as our preferred font. <style type="text/css"> * { font-family: Comic Sans ms, only screen and (max-device-width: 480px) { </style> * { font-family: Comic Sans ms, cursive; <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Comic Sans ms, cursive; font-size: 10pt; line-height: 20pt;"> </table> </div> Changing the 's Border If we want to change the color border of the we only have to change one line of code. Let's first suppose we want to change the border color from the current grey color to a green border (hex color code: #249100) <div style="border: 1px solid #249100; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> </div> And now, as a second example, we will show how to remove the border. <div style="border: none; width: 100%; max-width: 700px; margin: 1em auto;" class="container"> </div>

9 Adding Content Now we ve defined a responsive container for different devices, we can start adding content to our . We will do that in the HTML container section of the HTML. As we can see the inner container is a table, so each block of the is going to be a row inside this table. It is important to note that we will use a single column table for the content, because this is the best and easiest way to create good looking designs for mobile devices. <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif;"> <!-- Here goes the content of the --> </table> </div> <!-- End of the content --> Adding a Header Image Let's build our following a top-bottom approach. The first element we are going to insert is a big header image with a nice picture and our logo. But we can't simply add an image tag, it has to be inside one row in the table, so we will wrap it with the row tags (<tr><td>image). <!-- Here goes the content of the --> <tr><td> <img style="width: 100%" src=" /> <!-- End of the content --> An important point when adding images to a responsive layout is that we never use width or height in absolute amounts (i.e. dimensions defined in pixels). We should always use relative dimensions (i.e. %). Here we are defining the image to fill all of the space (100%) that the container provides. Note that we don't have to specify the height of the image because the browser or client will display it according to the width we specified. It's a good practice not to define the height of any image, just the width in %. Adding a Text Block In the following content we want to add our header image as a text paragraph. The code for this would be: <img <tr><td style="padding: 5%"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p> <p>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> We ve highlighted a padding inline style that adds space around the text and helps make it a cleaner design. It's important to note again that the amount of padding is not in pixels or any other absolute amount, but as a percentage to make it a responsive design.

10 Adding a Text Block with a Divider It is very common to separate the different blocks of content with divider images or borders above or below the text blocks. In the following example we are going to illustrate how to add a divider image on the top of the text block and a border on the bottom of the same block. Again we start by wrapping our content inside a table row with padding of 5% and a bottom border of 1px, and then we put the content inside this row. The first element in the row is our divider image, we add a style width: 100% because we want this image to be adapted to all the width provided by the row. However, we have to note that, as opposed to the header image, this will have padding on the right and left side of the image because we defined a padding of 5% for the row which contains the image. <tr><td style="padding: 5%; border-bottom: 1px solid #DDD"> <img style="width: 100%; margin-bottom: 1em" src=" /> <img style="width: 35%; margin: 1em; float: right; box-shadow: 0 0 1em #333;" src=" /> Ut enim ad minim veniam, quis nostrud exercitation ullamco:<br /> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>ut enim ad minim veniam</li> <li><em>sed do eiusmod</em> tempor incididunt ut labore et dolore magna aliqua.</li> <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li> </ul> The second element we can see is a small image which is defined to float on the right side (ie float: right) of the text block. Using a float image instead of a two column table (one column for text and one for the image) offers a better result when displaying the in a mobile device than using a two column table. If instead of displaying the image on the right side of the text block we would prefer to display it in the left side, the style would be float: left. It's also important to note that we defined again the image width as a percentage of the container, instead of using pixels, this way is strongly preferred when doing a responsive design layout. We also added a margin of 1em around the image to avoid sticking the image with the text. The measure 1em is a relative measure to the default font size. So if we have set up the desktop default font size to be 10pt, 1em will be equal to 10pt, and at the same time, if the default font size for mobile devices is 18pt, 1em in a Smartphone will be 18pt. The image also has a small shadow around it to make it prettier. Adding a Text Block with an Image on the Left Side and Different Font Family This block is very similar to the previous one, but in this case we don't want the divider image, just text and a floating image, this time on the left side of the text. We will also change the font for the text in this block and highlight one of the sentences in red. <tr><td style="padding: 5%; border-bottom: 1px solid #DDD; font-family: 'Times New Roman';"> <img style="width: 35%; float: left; margin-right: 2em; box-shadow: 0px 0px 10px #333;" src=" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span style="color: #a00">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip As you can see the structure is very similar to the previous block, in this case, because we want the text to be displayed with a different font than the default, we added our new font style in the row. The image is defined in percentage terms and floating, this time in the left of the text. We ve also added a margin on the right side of 1em to avoid sticking the image to the text of the block.

11 Adding a Footer with a Smaller Font Size and Different Color The last block to finish building our responsive design is the footer. We want this footer to have a link centered with a blue color and a text paragraph with a smaller font than the default one <tr><td style="padding: 5%;"> <p style="text-align: center;"><a href=" style="color: #0ae; text-decoration: none; font-weight: bold;">terms and Conditions</a></p> <p style="font-size: 80%; line-height: 1.2em; text-align: justify; color: #BBB;">* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> Because we want the link to be centered horizontally, we have to wrap it in a p (paragraph) HTML tag and give this tag a text-align: center style. For the inner link we also define a set of inline CSS styles like the color, no underline (text-decoration: none) and a bold font weight. The second paragraph contains the footer text which we want to have a different font size than the layout default. It is important to note that we don't define the font-size in pixels or pt, but in percentage. In this case we wanted the font size to be slightly smaller than the default size in the (80% of the default font size). Appendix: Full HTML Code On next page

12 Appendix: Full HTML Code <html> <head> </head> <body> <style type="text/css">.container { width: 600px!important; margin: 2em auto; * { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: only screen and (max-device-width: 480px) {.container,.container table { width: 100%!important; max-width: none!important; * { font-family: Helvetica, Arial, sans-serif; font-size: 18pt; line-height: 28pt; </style> <div style="border: 1px solid #c1c1c1; width: 100%; max-width: 600px; margin: 1em auto;" class="container"> <table width="600" style="width: 100%; max-width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 20pt;"> <tr><td> <img width="100%" style="width: 100%" src=" /> <tr><td style="padding: 5%"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p> <p>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <tr><td style="padding: 5%; border-bottom: 1px solid #DDD"> <img width="100%" style="width: 100%; margin-bottom: 1em" src=" /> <img width="35%" style="width: 35%; margin: 1em; float: right; box-shadow: 0px 0px 10px #333;" src=" /> Ut enim ad minim veniam, quis nostrud exercitation ullamco:<br /> <ul> <li>lorem ipsum dolor sit amet</li>

13 </body> </html> <li>consectetur adipisicing elit</li> <li>ut enim ad minim veniam</li> <li><em>sed do eiusmod</em> tempor incididunt ut labore et dolore magna aliqua.</li> <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li> </ul> <tr><td style="padding: 5%; border-bottom: 1px solid #DDD; font-family: 'Times New Roman';"> <img style="width: 35%; float: left; margin-right: 2em; box-shadow: 0px 0px 10px #333;" src=" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span style="color: #a00">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <tr><td style="padding: 5%;"> <p style="text-align: center;"><a href=" style="color: #0ae; text-decoration: none; font-weight: bold;">terms and Conditions</a></p> <p style="font-size: 80%; line-height: 1.2em; text-align: justify; color: #BBB;">* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </table> </div>