Chapter 9: Page Layout 404 #footer { background-color:#cccccc; padding:10px; height:40px; clear:both; border-top:20px solid #ffffff;} Looking back at the table, we still need to add Gutters 1, 2, and 3 to columns 1, 2, and 3 using the margin - left property with a value that is 2% . We do not actually need to add Gutter 4 into the design because we have already allowed a little extra space to the right of the design. We will also create padding in the boxes by giving the padding property a value of 1% . Because the padding is added onto the width of the box, to create a box that takes up 30 percent of the screen, the width property for each column should have a value of 28% . /* 3 columns */ .column1of3, .column2of3, .column3of3 { float:left; width:28%; margin-left:2%; background-color:#cccccc; padding:1%; margin-top:20px; height:175px;} You can see the result in Figure 9 - 32. Figure 9-32 c09.indd 404c09.indd 404 11/20/09 5:00:25 PM11/20/09 5:00:25 PM Chapter 9: Page Layout 405 One of the issues with liquid layouts is that, because the user can shrink and increase the width of the boxes in the layout, the text may become too short or too long to read, and any fixed - width items (such as images) may end up poking out of boxes if they are too small. In such cases, you can make use of the min - width and max - width attributes, which you read about in Chapter 7. Unfortunately, IE7 was the first version of Internet Explorer to support these properties. Luckily, the number of IE6 users is constantly shrinking, and since other browsers have supported these properties for longer, you should use them to help users whose browsers understand them ( ch09_eg09.css ). .column1of3, .column2of3, .column3of3 { float:left; width:28%; margin-left:2%; background-color:#cccccc; padding:1%; margin-top:20px; height:175px; min-width:210px; max-width:400px;} Once you specify a min - width property, if a user shrinks the window down quite small, you may find that content flows out of the boxes. You can use the overflow property to control what happens to content in such circumstances. Alternatively, you could put the three columns in a containing element and set a minimum width for that container element — wide enough to hold the minimum width of all three columns ( ch09_eg09.html ). < div class=”columns123” > < div class=”column1of3” > < img src=”images/golden_section.gif” width=”200” height=”75” alt=”Golden Section” / > column 1 of 3 < /div > < div class=”column2of3” > column 2 of 3 < /div > < div class=”column3of3” > column 3 of 3 < /div > < /div > Here is the rule that attaches the style to the new container element: .columns123 {min-width:750px;} You should also add the same minimum width to the other elements that take up the full width of the page since their width is calculated as the width of the browser window when the page loads, which means that these elements might not otherwise be as wide as the new container element. Backgrounds That Reach the Bottom of the Page One of the issues when you use the CSS float property to create columns is that when you specify a visible background color or border for the columns, each can look a different height. Let ’ s add some content into the three - column layout you met earlier so you can see what happens: < div class=”column1of3” > Lorem ipsum dolor sit amet, consectetur adipiscing elit. c09.indd 405c09.indd 405 11/20/09 5:00:26 PM11/20/09 5:00:26 PM Chapter 9: Page Layout 406 < /div > < div class=”column2of3” > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. < /div > < div class=”column3of3” > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. Mauris viverra massa ac libero feugiat tempor. Cras scelerisque fermentum dui et feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. < /div > Figure 9 - 33 shows how the background for the box comes down only as far as the text (plus padding), which would not make for a very attractive design. Figure 9-33 You have actually already seen a way around this problem, when we used the grid as a background image on the < div > element that had a class attribute whose value is page . By using a background image on the containing element, you can ensure that it applies to all columns, no matter how tall they are ( ch09_eg10.css ). c09.indd 406c09.indd 406 11/20/09 5:00:26 PM11/20/09 5:00:26 PM Chapter 9: Page Layout 407 #frame { margin-left:auto; margin-right:auto; width:960px; background-color:#ffffff; background-image:url(“images/960px_3column_background.gif”); background-repeat:repeat-y;} You can see the result in Figure 9 - 34. Figure 9-34 You are now well equipped to be creating well-thought-out sites and page layouts. If you are interested in finding out more about page layout, here are some good resources: 960.gs: http://960.gs/ Blueprint: www.blueprintcss.org/ YUI Grids: http://developer.yahoo.com/yui/grids/ Before we finish looking at page layouts, we need to consider mobile phones that are used to access web pages. ❑ ❑ ❑ c09.indd 407c09.indd 407 11/20/09 5:00:26 PM11/20/09 5:00:26 PM Chapter 9: Page Layout 408 Developing for Mobile Devices Many people think that the use of the Web on mobile phones is not really relevant to them or their company, especially if they (or those in their peer group) do not use web services on their mobile phones. But two things are changing minds: The success of high - profile devices such as the Blackberry and iPhone Statistics that show how many people access web - based services on mobile phones In 2009, the British government released statistics showing that 11 percent of UK mobile phone users were using their mobile to browse the Internet, which (bearing in mind that more people have mobile phones than web access) equates to over a fifth of web users accessing the Web via mobile devices. Considering that the number of mobile phones sold in 2008 outstripped the entire user base of PCs, this is a trend that is only likely to increase. Despite the growing interest in the mobile Web, it is not uncommon for people to view the Web on mobile devices as being inferior or “ behind ” the experience they have on a desktop computer. Yet the comparison between the experience of the Web on mobile devices and desktop computers is not quite as straightforward as it might first seem. Understanding the Medium and How It Is Used When it comes to thinking about how people access the Web on mobile phones, there are some very important aspects to consider: Context: What the user is doing when using a mobile phone Relationship: How people treat their mobile phone Capabilities: The features and capabilities of mobile phones compared with desktop computers Context: What Is the Mobile User Doing? Mobile devices are being used on the move, often in a hurry, and sometimes one - handed. The result is that when mobile phones are used to access the Web, they are often used to achieve very different things than the same user might want to achieve in front of a desktop computer. While people sit for hours in front of a desktop computer surfing the Web, when users are out and about, they are far less likely to be just surfing — rather they are more likely to want to do something specific (whether this is checking the local weather forecast, latest news headlines and sports results, or finding out the opening hours of a nearby shop). It is important here to note that a laptop, even though it is portable, is often used in the same manner as a desktop, even if the user is in a coffee shop, a car park, or at an airport. ❑ ❑ ❑ ❑ ❑ c09.indd 408c09.indd 408 11/20/09 5:00:27 PM11/20/09 5:00:27 PM Chapter 9: Page Layout 409 When you start to think about your site appearing on a mobile device, it is wise to go back to the beginning of this chapter and create a new set of actors or personae that reflects the typical visitors to your site via a mobile phone. At the same time, you should be creating a new set of tasks that they might want to achieve, because the mobile user will often want to achieve different things than the desktop user would. For example, mobile users accessing a supermarket web site are more likely to look for the nearest store and its hours than they are to do their weekly grocery shopping on their phones. Even if users want the same information that they might request when at a desktop computer (for example to check the latest sports results or weather forecast in their area), you should always consider whether they may benefit from the information being displayed in a very different way. Relationship: How Do Users Treat Their Mobile Phones? It is also worth comparing the relationship that people have with their mobile phones compared with desktop computers. It is far more common for people to have their own mobile phones whereas desktop computers are often shared between members of a family, or used at work and schools. This means that people have a more personal relationship with their mobile phones. It also means that it is possible to more accurately uniquely identify users and personalize services to them. These devices are also usually carried around 24 hours a day, no matter where the owner is (they may be turned on silent, but rarely turned off). Capabilities: How Do Features of Mobiles Compare with Desktop PCs? Finally, we should compare capabilities of mobile phones and desktop computers. Here are some of the positive aspects of mobile phones that are not as apparent on desktop devices: Allow for location specific services: Because they can use triangulation or (where installed) GPS to identify location of users. Have a built - in payment system: Whether on contract or a pay - as - you - go scheme, the payment is integrated more than a desktop computer where a user must enter credit card information or set up an account with a service such as PayPal. The payment system is also available to those who are not old enough to have debit and credit cards. It has also been suggested that mobile phone owners are more used to (and willing to) pay for services accessed via their mobile than they are to pay for services accessed via a desktop computer. Have a built - in camera: Only a handful of desktop machines will have a camera built in, and those that do are still used in a desk - based setting (rather than being carried around all the time). Are integrated with voice data: Because they are phones as well, and although services such as Skype allow phone calls to be made through a computer, it is not inherent in the platform. Have other features: Such as SMS and MMS, which some users (particularly in Europe) use often. ❑ ❑ ❑ ❑ ❑ c09.indd 409c09.indd 409 11/20/09 5:00:27 PM11/20/09 5:00:27 PM Chapter 9: Page Layout 410 Having said that, there are some inherent limitations with mobile devices: Slower connection speeds: The connection speeds of mobile phones consistently trail behind those offered by broadband connections. Connection can be intermittent: As users move about, for example when traveling in more isolated rural areas, or when going through tunnels in cities, their connection can be cut. Screen are usually smaller: Because screens are small, it is not possible for users to scan as much information to find out what they are looking for. Input devices are harder to use: Although many mobile users are adept at using their mobile phones, they are unlikely to achieve the same speed and accuracy of data input that they would achieve with a keyboard and mouse. Less control over appearance: Several phones will remove your choice of font, size of text, and background images to show them in a manner they see fit for the device. Armed with this information, you can start to think about mobile development. How to Approach Mobile Development Often the key factors in deciding a mobile strategy will depend upon the resources a company has available for its web users and whether it has enough users to justify the expense of development. Broadly speaking, you can categorize the approaches in mobile development into one of three categories: Just have one main web site (no separate mobile site) Provide a different view of the content on your site to those with mobile phones Create an entirely new site for mobile users Let ’ s take a look at each of these options in turn. Do Not Develop a Mobile Site The cheapest and least time-intensive strategy for mobile development is simply to do nothing. Many mobile phones are adept at giving users access to the content on the site. Some larger touch-screen phones (such as the iPhone) are capable of cleverly resizing a web page to fit on the screen, then allow users to zoom into parts of the page. Other phones may change the way in which the page is presented in order to make it available on the size of screen they have (often overriding font sizes and image sizes). The obvious drawback with this approach is that your content is not addressing the aims that visitors to a mobile site might have. ❑ ❑ ❑ ❑ ❑ ❑ ❑ ❑ c09.indd 410c09.indd 410 11/20/09 5:00:27 PM11/20/09 5:00:27 PM Chapter 9: Page Layout 411 Provide an Alternative View of Your Site A middle ground is to re - use the content that you have, but to present it in a manner that is easier for mobile users. In this middle ground there are two common options. The first approach is to add a second style sheet to the same pages, so that mobile devices can use a separate set of CSS rules to control how the pages appear to them: < link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”handheld” / > This can help you use a different layout, change the dimensions of the page, and attempt to control colors and sizes of fonts. Unfortunately, not all phones know to take this version of the style sheet, and those that do still have to download a page that is the same file size as the pages created for desktop computers (which means that they may take a long time to download). I have seen style sheets for handheld devices that try to hide parts of the page (setting the CSS display property on those elements to none ), which has the advantage that it makes the interface simpler, although it does not make the file size smaller. The second approach is to use a different set of templates when someone arrives at your site via a mobile device. Rather than just using a new style sheet, some companies will use the same content, but design new pages to hold the information. This approach allows a lot more flexibility because you can change the order in which items appear. You can also entirely remove some parts of the page (such as advertisements and secondary navigation), and therefore reduce bandwidth needed to load the pages. Still, both of these methods still fail to address the context in which the phone is being used. Create a Separate Mobile - Optimized with Its Own Content If you have the resources available, users will often benefit from a site being specifically designed for use on a mobile phone. It allows you to address the requirements of users who are on the go (which are often different from those of a desktop PC user) and to understand the context in which visitors to your site use these devices. A couple of good examples are http://m.flickr.com/ (shown below in Figure 9 - 35) and http://m.ebay.com/ (shown below in Figure 9 - 36). Both of these sites have been developed especially for mobile users (you should be able to access them from a desktop browser as well to get an idea of how they work). You may also note how the mobile version of Flickr also has a location - based option in the main navigation. c09.indd 411c09.indd 411 11/20/09 5:00:28 PM11/20/09 5:00:28 PM Chapter 9: Page Layout 412 Figure 9-35 Figure 9-36 Should you have the opportunity to develop a site specifically for mobile users, it is very important to consider the function of these sites before addressing how they look. (Realistically the mobile offering is likely to look a lot more basic than the desktop site.) Also consider whether your users would benefit from features that are specific to mobile devices, such as location awareness (for example, a store might automatically show the closest locations), or the ability to send in pictures. The first step is to look at the tasks you have identified as the most common ones that users will want to achieve on a mobile device and make them the first and most prominent offerings. In doing this, it is very important to retain focus on the main tasks and not try to give the mobile user every feature that is available on sites accessed by desktop computers. Content or features that are unlikely to be used on the go should be removed (or adapted into a form that will help mobile users). Once you have worked out what it is that people want to achieve, and how you can meet their requirements, you can start to consider the practical aspects of your mobile site. c09.indd 412c09.indd 412 11/20/09 5:00:28 PM11/20/09 5:00:28 PM Chapter 9: Page Layout 413 Building a Mobile Site While there is not enough space in this book to go into this topic in great detail, and entire books have been written about building mobile web sites, I can give you some pointers regarding the key issues should you decide to create a site especially for mobile phones. Domain Name One of the most common questions regarding mobile development is whether to have a separate top - level domain name for the site because the .mobi top - level domain was created specifically for mobile devices. In practice, a lot of companies have opted for a variation on their current address instead — for example, m.domainname.com , mobile.domainname.com , and domainname.com/mobile . In my opinion, the fewer taps a user has to make in order to reach a domain name on a mobile device, the better, which is why I tend to opt for the first of these options. Device Detection Device detection is a means by which the site attempts to tell whether a user is on a desktop computer or mobile phone, and then guide this user to the appropriate site. Telling you how to do this is beyond the scope of this book, but the following two URLs should help you make a good start: http://wurfl.sourceforge.net or www.andymoore.info . If you are able to offer device protection and send visitors to the mobile version of your site, it is a good idea to offer them a link to your full web site on the homepage. If they opt to use the full web site, you should aim to direct them to the same site in the future (when accessed from that phone). Likewise, on your main web site, it is helpful to tell people that you have a mobile site, to make them more aware of its existence. You can also offer a link to the mobile version of the site. Languages for Creating Mobile Web Sites Most fairly recent phones that feature a web browser are capable of displaying XHTML and basic CSS. That doesn ’ t mean that they will display them as you would expect. Some phones will show all text at the same size, and some will strip out styles that are not necessary (such as background images or colors). Others will show the more complex design. c09.indd 413c09.indd 413 11/20/09 5:00:29 PM11/20/09 5:00:29 PM [...]... tend to support one of two subsets of XHTML known as XHTML- Mobile Profile and XHTML Basic A good rule of thumb, however, is just to stick to the most common XHTML features and then most phones will be able to handle it Here is the DOCTYPE declaration for XHTMLMobile Profile: While there is not... property in CSS to a number that divides evenly into the grid height (this was shown in Figure 10-8) p h1 h2 h3 {font-size:0.75em; line-height:1.5em;} {font-size:1.5em; line-height:1.5em;} {font-size:1.125em; line-height:2em;} {font-size:0.875em; line-height:2.6em;} /* /* /* /* /* /* /* /* 16 12 16 24 16 18 16 14 x * x x x x x * 0.75 1.5 1.5 1.5 1.125 2 0.875 2 .6 = = = = = = = = 12 18 24 36 18 36 14 36 */... in this book to cover all the differences between XHTML- MP and XHTML, there are several resources on the Web that can help you with this, such as the Openwave developer ’s reference: http://developer.openwave.com/documentation /xhtml_ mp _css_ reference/ Design Tips Most new sites being created for mobile devices are targeting browsers that are between 240 and 320 pixels wide The layout of these pages should... (rather than a navigation bar), and this is followed by another small search box before showing the results Figure 9-39 4 16 c09.indd 4 16 11/20/09 5:00:31 PM Chapter 9: Page Layout Links Although CSS allows you a lot of control over how links are presented, it is considered good practice on mobiles to keep links simple and obvious: ❑ Stick to black text and blue links, and avoid using other colors for... line-height:1.286em; margin-top:2.172em; margin-bottom:0.4em;} /* /* /* /* 16 12 16 24 x x x x 0.75 1.5 1.5 0.75 = = = = 12 18 24 18 */ */ */ */ /* 16 x 1.125 = 18 */ /* 18 x 1 = 18 */ /* 16 x 0.875 = 14 */ /* 14 x 1.2 86 = 18 */ When doing this, you need to be aware that browsers will round to the nearest pixel, so you will need to check the measurements against your background grid and adjust as necessary... web page is 16 pixels, to get a paragraph to render at 12px you use 0.75em: body p h1 h2 h3 {font-size: {font-size: {font-size: {font-size: {font-size: 100%;} 0.75em;} 1.5em;} 1.3em;} 0.875em;} /* /* /* /* /* ensure IE scales correctly */ 16 x 0.75 = 12 */ 16 x 1.5 = 24 */ 16 x 1.125 = 18 */ 16 x 0.875 = 14 */ You may have noticed in this example that there is a rule for the element and the ... one line, to the top of the ascender on the next (Figure 10 -6) Baseline King and queen Apple and pear Descender Leading Ascender Figure 10 -6 You can set the amount of leading in a document using the line-height property in CSS (when the line height is larger than the font size the gap created between each line of text acts as the leading, and the taller the line height the bigger the gap) Increasing... padding and margins of key elements to zero so that you are in complete control of them A popular set of rules for this is Eric Meyer ’s CSS Reset The full version is available on his site at http://meyerweb.com/eric/tools /css/ reset/ For the purposes of the examples in this chapter, you can make do with the following few lines which specify a long list of elements and set a handful of their properties: html, ... step was to understand the issues regarding designing for screens — in particular, the difference between fixed-width and liquid layouts, whether your page should always stay the same size or expand and contract to fit the browser window Eventually the design or layout begins, and you saw how the use of a layout grid helps create a far more professional-looking layout compared with randomly selecting... selecting the size of parts of pages Some popular layout grids were then transformed into XHTML and CSS code, using floats to position the content on the page This chapter demonstrated two-, three-, four-, and six-column layouts I hope the practical advice in this chapter makes it easier for you to design your web sites, and also helps you deal with those people or organizations you might be creating sites . subsets of XHTML known as XHTML - Mobile Profile and XHTML Basic. A good rule of thumb, however, is just to stick to the most common XHTML features and then most phones will be able to handle it Here is the DOCTYPE declaration for XHTML - Mobile Profile: < !DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD /xhtml- mobile10.dtd” > While. between XHTML - MP and XHTML, there are several resources on the Web that can help you with this, such as the Openwave developer ’ s reference: http://developer.openwave.com/documentation /xhtml_ mp _css_ reference/