10Lesson 10: Designing for Mobile Devices Objectives

Transcription

1 10Lesson 10: Designing for Mobile Devices Objectives By the end of this lesson, you will be able to: 10.1: Compare "apps" to mobile Web sites. 10.2: Describe general concerns for developing Web documents that will be delivered on mobile devices. 10.3: Develop appropriate page layouts for use on mobile devices. 10.4: Create appropriate navigation elements and hyperlinks for mobile Web pages. 10.5: Use images appropriately on mobile Web pages. 10.6: Validate and test mobile Web pages. 10.7: Determine cross-browser compatibility for traditional and mobile Web pages. 10.8: Describe essential Responsive Web Design (RWD) techniques and principles.

2 10-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. Which statement is true regarding mobile apps? a. They are always open-source programs. b. They are designed for mobile device browsers. c. They run on specific mobile operating systems. d. They are always developed with HTML5. 2. Which technique keeps images from exceeding the width of the screen? a. Fluid image b. Flexible frame c. MobileOK d. Screen resolution 3. What are at least two challenges you must consider when designing Web sites for use on mobile devices?

3 Lesson 10: Designing for Mobile Devices 10-3 Introduction to Mobile Design The array of devices and browsers that access the Internet continues to increase. This proliferation brings challenges to Web designers and developers alike. You must design your Web sites to accommodate this growing diversity of devices. Although the basic language and procedures for creating Web pages remains much the same, the design of a mobile Web page requires some differences from a page designed for desktop computers. As a Web developer, you must be able to go beyond the desktop. Good Web developers always anticipate their users needs and respond to them in their Web design. Your goal should be for each user to have a quality experience when they visit your site, regardless of the size of their display. Focusing your design efforts on usability makes your sites easier for your users to browse. This lesson will teach you techniques to design mobile Web sites, such as simplifying pages, focusing on the most important user tasks, and responsive design techniques. CIW Online Resources Movie Clips Visit CIW Online at to watch a movie clip about this topic. Lesson 10: Designing for Mobile Devices Mobile Web Sites vs. Mobile Apps OBJECTIVE 10.1: Mobile apps vs. mobile Web sites mobile Web site A Web site designed for viewing on mobile device browsers. mobile app An application designed for a specific mobile operating system. When you create a site for mobile devices, you must contemplate whether to create a mobile Web site or a mobile app. There are many opinions on this matter. A mobile Web site is created for mobile device browsers. These browsers function similarly to desktop browsers, except they are designed for a much smaller screen size. By contrast, a mobile app is an application, not a site. It runs on a specific mobile operating system, such as Android, Windows Phone or ios. Each mobile app must be downloaded and installed. The Yellow Pages (YP) mobile Web site and mobile app are shown in Figure Many companies offer a mobile Web site and a mobile app that look and perform exactly the same. NOTE: Consider the differences between mobile Web sites and mobile apps. What are the pros and cons of each? Which one do you prefer?

4 10-4 Advanced HTML5 and CSS3 Specialist Figure 10-1: Yellow Pages mobile Web site (left) vs. mobile app (right) Mobile Web sites have several advantages over mobile apps: Mobile Web sites are easier to develop because they are written with HTML, with many HTML5 additions contributing directly to improved mobile usability. Easier development can save costs because HTML skills are more common than programming skills in languages such as Objective-C (used to create ios apps) and Ruby (used to create Android apps), for example. Although mobile apps can also be created with HTML5, CSS and JavaScript, many mobile apps use the capabilities of the mobile device to extend their functionality. But programmers with Objective-C and Ruby skills can be expensive and difficult to find. Mobile Web sites work on any device with a browser. You can create your Web site once and have it run everywhere, instead of creating different versions for ios, Android and Windows Phone. Mobile Web sites can also increase your potential market because people can find your site using search engines. Mobile apps make sense when a large audience exists for the service, such as Facebook and Wells Fargo. They also make sense with gaming, which often uses special features of the phone itself. Table 10-1 provides a side-by-side comparison of mobile apps and mobile Web sites.

5 Lesson 10: Designing for Mobile Devices 10-5 Table 10-1: Mobile Web sites vs. mobile apps Portability Device capabilities Support and upgrading User experience Performance Offline browsing Hyperlinks Discoverability Distribution and market size Mobile App Usually developed separately for each platform (iphone, BlackBerry, Android, Windows Phone, etc.) Frameworks such as PhoneGap allow you to create once and port your app to multiple platforms Able to use all device capabilities (GPS, camera, voice, RFID, address book, calendar, etc.) Difficult to support and maintain after app is downloaded by users Every new release with bug fixes requires the developer to go through the entire approval process of the app store After a new version of the app is placed in the store, existing users must upgrade in order to get it Full control of user interface (UI) User experience depends on the app design High performance through app code that runs locally on the device Internet connectivity is usually required. Apps can link to different areas within the app Apps can link externally to Web sites Most apps do not achieve critical success You need a well-defined strategy to break into the top list for your category in order to for your app to survive App stores will determine your app's availability and will require approvals to get it in Apps require users to download, which is a barrier to entry Market size is limited to the number of users on the released platform Mobile Web Site Common platform some solutions enable you to develop once and run on all Web-enabled mobile devices It is possible to use features such as GPS, offline data storage and video from within mobile Web sites using the latest mobile browsers that support HTML5 Access from the Web to some native capabilities of mobile devices is still limited due to security and privacy concerns (e.g. access to address book or calendar) Easier to support and maintain because developer has complete access to the site No need to upgrade because all users see the latest version Limited to the capabilities of the programming language used to create the site, such as HTML/CSS, JavaScript and server-side languages User experience depends on the mobile site design Performance will depend on the mobile site design and available bandwidth speeds HTML5 enables it to some extent, but it is supported only on selected devices It is easy to provide links to different pages on your mobile site, and to link from your mobile site to other Web sites People can find your site by using any search engine and via links from other Web sites, blogs, Twitter and e- mail messages A good marketing strategy can increase visitors, especially if viral Your mobile site can be accessed by anyone on the Web

6 10-6 Advanced HTML5 and CSS3 Specialist Table 10-1: Mobile Web sites vs. mobile apps (cont'd) Costs Revenue Mobile App Some app stores charge extra fees for publishing, hosting or certifying your app Must share sales revenue with the app stores after you pay any development costs, hosting costs or advertisers Mobile Web Site None other than development and hosting costs Revenue is yours after you pay any development costs, hosting costs or advertisers CIW Online Resources Online Exercise Visit CIW Online at to complete an interactive exercise that will reinforce what you have learned about this topic. Exercise 10-1: Mobile apps vs. mobile Web sites Designing Web Sites for Mobile Devices OBJECTIVE 10.2: Developing for mobile devices Probably the most important rule for designing any Web site is: "Give the users what they want, when they want it." The content must be usable and compelling enough to keep users coming back. NOTE: Are you inspired by any mobile Web sites you have used? Which ones do you like? Which ones do you dislike? Why? They should not have to dig deeper and deeper into your Web site to find what they need. The content that each user wants must be available immediately. When you are designing Web sites for use on mobile devices, you must also consider some additional challenges: Smaller screen sizes Touchscreen use Demand for quicker action "on the go" Any task a user might perform on a mobile device needs to be easy and quick to perform. Mobile Web design can be tricky, so you must be creative and keep it simple. The more content you have, the more shortcuts you need to provide, such as the search options shown in Figure 10-2.

7 Lesson 10: Designing for Mobile Devices 10-7 Considering screen resolution Figure 10-2: AccuWeather.com mobile Web site Be aware of the size and resolution of current smartphone screens. You must balance your site so it works on all resolutions. The more flexibility you build into your Web site, the fewer resolution problems your users will have. Fixed width and height are probably the biggest culprit of pushing your content off screen. Create flexible-sized elements using percentages instead of pixels. You will learn more about this technique later in this lesson. NOTE: Do you know the screen resolution of your smartphone? If not, research it quickly on the Web to find out. You must test your site on various screen resolutions. Use your own judgment to determine the best solution for your site. Use as many different smartphones as possible for your testing (see Figure 10-3). Figure 10-3: Test various smartphone screen resolutions NOTE: Screen resolutions will continue to change with technology. As a developer, you must be aware of these changes and constantly retest your mobile Web sites. Some common screen resolutions include: 768 x 1280 (Nokia Lumia 1020) 1136 x 640 (Apple iphone 5) 2048 x 1536 (Apple ipad Air) 1920 x 1080 (Samsung Galaxy S5)

8 10-8 Advanced HTML5 and CSS3 Specialist To learn more about the effect of screen resolution on mobile design, read David Leggett s Considerations for Mobile Web Design (Part 2): Dimensions article at: Key aspects of mobile site design To achieve success in your mobile site design, you should implement a variety of design techniques that maximize usability. The following sections will discuss each of these key aspects of mobile site design: Page layout for mobile devices Hyperlinks and navigation on mobile devices Images for mobile devices Mobile Web page validation and testing The following sections will discuss each of these aspects in detail. An additional approach for providing mobile content is Responsive Web Design (RWD), which we will introduce later in this lesson. Page Layout for Mobile Devices OBJECTIVE 10.3: Page layout for mobile devices Because mobile devices have smaller screens, you must lay out your pages differently than you would for a page that will be viewed primarily on larger screens. Users looking at larger monitors can see more and navigate more easily. Mobile device users need special consideration for viewing basically the same content. The following page layout techniques will make your content easier to view and use on mobile devices: Simplify the design Divide pages into smaller portions Require less text entry Avoid pop-ups Simplify the design Complex page designs with lots of formatting and links can be quite interesting when used on a large monitor. On a mobile site, however, complex designs hamper usability and increase wait time. Do not use tables or frames in the page layout (which is now considered poor layout practice for full-size sites as well). Minimize the number of links that users must click to navigate the site. Strive to balance site navigation with content so that you display appropriate amounts of each. Neither should drastically outweigh the other. Minimize unnecessary formatting such as multiple fonts and colors or superfluous images. The ebay mobile Web site provides a simplified site hierarchy for users to browse, as shown in Figure 10-4.

9 Lesson 10: Designing for Mobile Devices 10-9 Figure 10-4: ebay mobile Web site with simple design Divide pages into smaller portions It can be difficult to read long portions of text on a small screen, and users may not bother to read it at all if they have to scroll horizontally. Minimize text to include only high-priority content. Divide the page into small sections of text, images and other content. Place all page content in a single, wrapping column to prevent horizontal scrolling. Provide quick access to more detailed content for those who want it. The Disney mobile Web site (shown in Figure 10-5) provides a good example of mobile page layout. Content is brief and sectioned so it can be quickly viewed, and a menu in the upper-left corner provides quick access to specific content. Figure 10-5: Disney mobile Web page layout divided into sections

10 10-10 Advanced HTML5 and CSS3 Specialist Require less text entry Remember that in order to enter text into your site, mobile device users must type on a small touchscreen with their fingers or a stylus. Make it as simple as possible for users to enter data on your mobile site. Wherever possible, use radio buttons, check boxes and drop-down lists that allow users to easily make selections instead of typing words. Provide HTML5 autocomplete features when text entry is needed. Use as short a URL as possible for your site, for times when users must enter it. The Geico mobile site (shown in Figure 10-6) uses a drop-down menu to provide content choices and requires only a minimum amount of manual data entry. Figure 10-6: Geico mobile site with minimal text entry requirements NOTE: What is your opinion about pop-up windows? Do you find them annoying? Do you find them effective? It is recommended that you do not use them in mobile sites to help avoid unpredictable results. OBJECTIVE 10.4: Navigation and links for mobile devices Avoid pop-ups Small mobile device screens have very little space available for pop-up windows. Also, many users block pop-ups because they find them annoying. So follow these guidelines: Avoid including pop-ups in your page design. If you must include a pop-up, do not use it for important content, because some users may never see it. Navigation and Hyperlinks for Mobile Devices Good navigation is the key to usability for any Web site. Navigation can be more challenging for users on mobile sites because of small screen size, touchscreen functionality, and the need for quicker yet easier access to content. The following navigation techniques can make your content easier to find quickly on mobile devices: Placement of navigation elements Text-based hyperlinks

11 Lesson 10: Designing for Mobile Devices Access to the full version of the site Limited links Placement of navigation elements Navigation elements should be easy for your mobile visitors to find and use. They should also be somewhat tailored to your audience. Consider who your main audience is and what they seek when they visit your site. If your main audience visits your mobile site to quickly see new or dynamic content (such as news headlines or video footage) then you should create a small, collapsible navigation bar at the top of the page, or position the navigation menu beneath the content so users do not have to scroll to see the content. If your target audience tends to perform searches on your mobile site (such as shopping or music sites), then you should position navigation elements at the top of the page for quicker access. Which navigation strategy do you see demonstrated in Figure 10-7? Figure 10-7: Nike mobile site, navigation at top of page to quickly navigate categories Text-based hyperlinks Although your full-version site may use many dynamic page elements and graphical links, these elements consume memory and should be minimized on a simplified mobile site. Use easy-to-understand text labels as hyperlinks. Make links stand out with a different font, thickness or color, and give mobile users confirmation that they clicked their target by changing activated links. Pad the clickable area around your links to make them a little larger, and thus easier to spot and to click with a fingertip. The Graduate Management Admission Council mobile site (shown in Figure 10-8) has links that are easy to identify and select.

12 10-12 Advanced HTML5 and CSS3 Specialist Figure 10-8: Distinguishing mobile Web site links Access to the full version of the site To simplify a mobile site, you must minimize content to only the highest priority items. However, your mobile users will sometimes want or need more. Providing a quick link to the full desktop version of your Web site gives mobile users the option to easily access additional content and features if they choose. Provide an easy-to-find link to the full site on the mobile site. Consider that mobile users may also use your full site, and provide internal Web page links to help reduce vertical scrolling for them. The Wells Fargo mobile site (shown in Figure 10-9) provides a Full Site link with the main navigation links. Limited links Figure 10-9: Wells Fargo mobile site link to full site A simplified mobile site should have less content and also fewer pages than a full site. Each new page that a user must download takes time and resources, so you should try to limit the number of pages your users will need to access in order to find what they seek.

13 Lesson 10: Designing for Mobile Devices Consider the depth of your site and how many clicks it will take to reach the deepest content. Limit the number of links on each page accordingly. Limit the number of pages in the site. Remember that users can visit your full site if they need access to more detail. Images and Mobile Design OBJECTIVE 10.5: Images for mobile devices Images are essential and expected on any Web site, either desktop or mobile. They are content elements that provide visual interest as well as information. However, images can be tricky on mobile sites due to the size constraints of device screens and memory. Proportional image resizing Mobile Web browsers are good at resizing Web site content proportionally. You can witness this by visiting full Web sites with a mobile browser. In many cases, the entire Web page appears in the mobile Web browser, as shown in Figure Figure 10-10: Traditional Web site viewed in mobile browser The text is unreadable on the mobile screen because it is so small, but this shows how mobile Web browsers try to resize all page elements proportionally. Avoid Flash animation and large images that may slow download times. Functionality is more important than style when developing a mobile Web site. Fluid images Another technique to make images mobile-friendly is fluid images. The fluid image technique keeps images and any element, for that matter from exceeding the width of the screen. You can implement fluid images in your site by specifying a percentage for each image's height and width, instead of specifying a pixel size. Fluid images is a Responsive Web Design (RWD) technique. You will learn more about RWD and creating fluid images later in this lesson

14 10-14 Advanced HTML5 and CSS3 Specialist WebGL and mobile browsers Earlier in the course you learned about WebGL, which is an API for rendering interactive 2D and 3D graphics on Web pages without the use of browser plug-ins. WebGL is supported by most major browsers, including all the major mobile browsers. However, individual support still depends on some other factors for any specific device. To determine whether your device supports WebGL, use the device's browser to visit the following page: If you can see the spinning cube graphic on this page, then your device supports WebGL. If not, then you can click the link to visit the Mozilla support site. If your mobile site design will depend on WebGL for any important functionality, you may want to include a link to this testing site for your users so they can check their own devices and obtain a supporting browser if necessary. Validating and Testing Mobile Web Pages OBJECTIVE 10.6: Mobile Web page validation and testing 10.7: Cross-browser compatibility Like any other Web pages, you should validate and test your mobile pages. Validation ensures that your code complies with standards. Compliance helps your site perform better over more platforms, and prepares your pages for compatibility with evolving and future technologies. Testing shows you how your pages will render and perform on various platforms doing various tasks. Well-tested sites are more likely to perform as intended for your users, which helps you win and keep customers. The W3C provides a mobile Web site validator called the W3C mobileok Checker. It is available at This validator checks the site using basic tests defined in the mobileok Basic Test 1.0 specification at These tests determine the mobile friendliness of your Web site. Figure shows the W3C mobileok Checker. Figure 10-11: W3C mobileok validator Once you have made the suggested changes to your page code and passed validation, your site is "mobileok." To learn more about the W3C mobileok validator, view the About page at

15 Lesson 10: Designing for Mobile Devices NOTE: The simulators and emulators listed here are from the software developer s kit. There are other simulators on the Web that allow you to simply enter a Web address into the device s Web browser, then see what the site looks like in the browser. However, note that these sites can be unpredictable. One such site is located at: ator.com/ Cross-browser compatibility Your mobile Web site should look good and work well on all browsers and devices. If you do not design your Web site carefully, it will look different on various devices, for better or worse. As a designer, you need to control these variations. You must test your Web site to ensure cross-browser and device compatibility. To ensure that your mobile site works on various device browsers and devices, you can use client emulators, which are freely available on the Web. There are many emulators, so choose one that is up to date and works best for you. Following are some examples: Android emulator ( Windows Phone emulator ( Microsoft Web iphone simulator ( In the following lab, you will modify a Web page to make it more mobile-friendly. Suppose your team has been assigned to develop a mobile version of your company's Web site. Your supervisor directs you to try to keep as much of the content and the look-and-feel of the full site as possible in the more simplified form of the mobile site. She leaves it to you and your teammates to decide exactly which HTML5 techniques to employ. OBJECTIVE 10.2: Developing for mobile devices 10.3: Page layout for mobile devices 10.4: Navigation and links for mobile devices 10.5: Images for mobile devices 10.6: Mobile Web page validation and testing NOTE: This lab is meant to challenge you and serve as a capstone lab for the course. Lab 10-1: Modifying a site for mobile users In this lab, you will implement various techniques on the Habitat For Humanity site to make it more mobile-friendly. 1. Windows Explorer: Copy the Lesson10 folder from your student lab files to your Desktop. Open the Lab_10-1 folder from your student files. 2. Browser: Open index.htm. Analyze the site to determine what changes would make it function better on a smartphone. Consider the various techniques taught in this lesson. Which ones would improve the site for smaller screens? 3. View the suggested changes in Figure These changes will simplify the site and make it easier for mobile users to navigate and read it. Identify other changes that you could also make.

16 10-16 Advanced HTML5 and CSS3 Specialist Figure 10-12: Modifying traditional Web page for mobile users 4. Editor: Open index.htm and habitat.css. Use the techniques taught in the course to edit the Web page so it is more effective for mobile users. Note: There are many ways to convert the site for mobile users. Solutions will vary. If you need an example, access the Finished folder in the Lesson10 lab files. 5. Browser: Open index.htm. Your site may look similar to Figure Figure 10-13: Modified Web page for mobile users 6. Browser: Go to and validate your Web site using the W3C mobileok Checker. This W3C validator site will offer suggestions. The file-

17 Lesson 10: Designing for Mobile Devices upload method does not check CSS files, but you can get a good idea whether your site is on the right track or not, as seen in Figure Figure 10-14: W3C mobileok Checker results 7. Editor: Edit your Web page until it passes the mobileok Checker. 8. Close your browser and text editor. In this lab, you modified the Habitat For Humanity Web site for mobile users. These changes greatly simplified the Web page to make it more usable on a small screen. CIW Online Resources Online Exercise Visit CIW Online at to complete an interactive exercise that will reinforce what you have learned about this topic. Exercise 10-2: Designing Web sites for mobile devices Responsive Web Design OBJECTIVE 10.8: Responsive Web Design (RWD) Responsive Web Design (RWD) A Web design approach to create sites that adapt to many different devices. Another approach to providing mobile content is called Responsive Web Design (RWD), which is a term coined by Ethan Marcotte on his site, A List Apart ( Marcotte defines RWD as: a Web design approach aimed at crafting sites to provide an optimal viewing experience easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from mobile phones to desktop computer monitors). Web sites that incorporate RWD adapt their layouts to various viewing environments, such as different devices, browsers and screen sizes. For example, page elements should use relative units such as percentages, instead of fixed units such as pixels. This technique allows Web pages to adapt to the user s screen size, instead of displaying content outside the screen in some displays. In short, a site developed with Responsive Web Design adjusts itself gracefully to fit on desktop, tablet and smartphone browsers by using:

18 10-18 Advanced HTML5 and CSS3 Specialist Grid-based layouts. Resizable images. Media queries. Responsive design vs. mobile design Both a responsive design and a mobile design will: Optimize your site for viewing on smaller screens. Provide simpler navigation. Enable faster load times. However, there are some differences between these approaches. Responsive design aims to make Web page elements adjust on-the-fly to accommodate any device, rather than simply making a smaller, simpler version of a standard site. Table 10-2 describes some of the specific differences between responsive site design and mobile site design. Table 10-2: Responsive design vs. mobile design Rendering Coding Searches / SEO User experience Maintenance Forward compatibility Responsive Design Client device does most of the work of optimizing the page for smaller devices, including adjusting for screen size and portrait-vs.-landscape orientation One set of HTML and one URL will work on all devices Programming on the back end can accomplish this Because a responsive site uses the same domain, links to it count toward link equity for the main site, which boosts the main site's search rankings Online marketers need not manage a separate SEO campaign for a responsive mobile site Content that lives on one site with one URL is easier to interact with, share and link to Better for SEO as well Content that lives on one site with one URL is easier to update and maintain More forward-compatibility Programming may require few or no changes to adapt to future devices and browsers Mobile Design A smaller, easier-to-navigate version of the full site Server still does most of the work of optimizing the page for smaller devices Requires a separate domain (and thus separate URL) and different HTML from the main site (e.g., Mobile site may need to be coded to specific screen sizes, which limits the client devices that can use it Because a mobile site uses a different domain, links to it do not count toward link equity for the main site, which dilutes search rankings Online marketers must manage a separate SEO campaign for the mobile site Content is on a separate mobile site, which may diminish or duplicate some aspects of use Content is on a separate mobile site, which requires separate processes to update and maintain Next-generation mobile devices and browsers may require a mobile site to be reworked in the future

19 Lesson 10: Designing for Mobile Devices CIW Online Resources Online Exercise Visit CIW Online at to complete an interactive exercise that will reinforce what you have learned about this topic. Exercise 10-3: Responsive design vs. mobile design Considering content Regardless of the differences between mobile and responsive design, you should keep in mind that each user visits your site for his or her own reasons, and these reasons vary depending on whether they are using a smartphone, tablet or a desktop computer. So your site's content must take this into account. For example, a user who accesses your site from his smartphone may only want your business's address and phone number, whereas a user who accesses it from her tablet or desktop computer may be looking for details about particular products you offer, such as descriptions and pricing information. So you might consider providing a click-to-call feature for smartphone users, and a more advanced catalog service for tablet and desktop devices. OBJECTIVE 10.4: Navigation and links for mobile devices Click-to-call: The tel protocol You can create a simple click-to-call feature on any mobile site. Many mobile browsers will automatically create a link from phone numbers on Web pages. However, you can use the tel protocol to ensure that phone links are created. The tel protocol is similar to the mailto protocol that can be used to create an link in a Web page. Such links provide convenience to your users. For smartphone users, a click-to-call link can greatly improve usability. To create a click-to-call link, you add the tel protocol as the value for the href attribute in your link anchor tag (<a>), as follows: <a href="tel: "> Call Us Now!</a> Using similar syntax, you can also create a link to send a text message using the SMS (Short Message Service) protocol, as follows: <a href="sms: "> Text Us Now!</a> Phone and text links do not work on desktop browsers, so it is a good idea to use JavaScript to locate and replace any <span> tags with a CSS class that adds phone/text links to your mobile style sheets. OBJECTIVE 10.3: Page layout for mobile devices Grid-based layout in responsive design Responsive design generally uses grid-based layouts because they are easiest to handle in a variety of devices. You may be thinking in terms of how to shrink page content for smaller devices, but keep in mind that as mobile devices get smaller, desktop monitors are getting bigger and wider. The grid in responsive design helps you to accommodate screen sizes that will vary widely from the screen you are using for development.

20 10-20 Advanced HTML5 and CSS3 Specialist NOTE: Figure illustrates the functionality of gridbased design in a live page on multiple devices. To see examples of actual grids, perform an image search on any search engine for "responsive design grids" to see the large variety of grids that can be used in responsive page design. The grid is an invisible (to the user) set of vertical guidelines that help the developer place the page elements. Grids vary widely in their dimensions, but all grids consist of vertical columns and gutters (the spaces between columns). Figure (from boatboatool.com) provides an excellent illustration of the result of using a grid-based design in a page layout. Figure 10-15: Responsive design fluid grid adapts to screen size and orientation A fluid grid is an adaptive grid that uses percentage-based dimensions, which allows your page design to stretch as far as a screen can. By contrast, a fixed grid uses pixel-based dimensions that can limit your page in some displays. Grid-based design enables you to determine which elements on your page can shrink or expand as the grid shrinks or expands, and which elements will disappear if they get too small (or large). OBJECTIVE 10.5: Images for mobile devices Images in responsive design Images are a challenge to responsive design: Thus far, there is no particular community-backed specification, so a variety of approaches and scripts are available, amounting to many options that are subject more to personal choice than standard success. Designers must also consider that the current and future generations of mobile devices are equipped with high-definition image capabilities. However, there are guidelines that you can follow to make your images as responsive as possible. In general, images (including icons) should be as flexible as possible so that graphics do not appear blurry on devices with high-pixel density due to poor scaling. To this end, you can use the mobile design technique of proportional image resizing, which was discussed earlier in this lesson. You can also use the responsive design technique of fluid images. fluid image A responsive design technique that adapts an image s size to the device s screen size. Fluid images The fluid image technique keeps images and any element, for that matter from exceeding the width of the screen. You can implement fluid images in your site by specifying a percentage for each image instead of a pixel size. For example: img { max-width: 100%; }

21 Lesson 10: Designing for Mobile Devices NOTE: Have you used the fluid images technique before? Think about the Habitat For Humanity site you worked on earlier in the course. Did it use fluid images and elements? Are there elements that should have used this technique but did not? In most cases, each image will resize itself to the specified percentage of the user s screen size. However, you should still avoid large images that may slow download times. If the image is placed within a container that has a fixed pixel size, the image will match the width of that container instead. If possible, try to avoid fixed widths altogether when designing a mobile site. Figure shows an example of a fluid image from the A List Apart site. Figure 10-16: Fluid image resizes depending on screen size and device You can make all Web site elements flexible by combining them with the CSS image selector. For example, you can also add video to the rule as follows: img, video { max-width: 100%; } OBJECTIVE 10.3: Page layout for mobile devices media query A CSS3 technique for checking a client device, or media type, then limiting the scope of the page design to a specific range in order to target styles based on the device's properties, such as screen size. CSS3 media queries in responsive design A media query is a CSS3 technique by which you check the type of media, or device, that is using a page, and then limit the scope of your page design to a specific range, without changing the page's content. Essentially, media queries allow Web designers to target styles based on device properties, such as screen width. Media queries are an example of Responsive Web Design because the Web page design changes depending on the user s device. The same page can be viewed on a tablet, smartphone or desktop computer. Each device can use its own style sheet, depending on your CSS3 media query. Figure (from illustrates how media queries can adjust styles based on the screen size of the device used to display the page. The different colored areas indicate style blocks.

22 10-22 Advanced HTML5 and CSS3 Specialist Figure 10-17: Media queries adjusting style blocks to screen sizes and orientation NOTE: You can read more of the W3C's Recommendation for media queries by visiting -mediaqueries. The concept is not new, but more functionality is introduced with CSS3. According to the W3C: HTML4 and CSS2 support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. Screen and print are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are width, height and color. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. Media queries are included with the CSS3 specification. The media feature is expanded to control how styles are applied. CSS3 media query example To add a media query, you must write a Boolean operation to set a condition. The conditions use the CSS3 features described in Table Table 10-3: CSS3 media query features Feature Value Description width Pixels Specifies display area width height Pixels Specifies display area height device-width Pixels Specifies device width device-height Pixels Specifies device height orientation Portrait or landscape Specifies device orientation You can add the prefix min- and max- to these attributes to indicate minimum and maximum values.

23 Lesson 10: Designing for Mobile Devices Media queries are Boolean operations, which means they return either true or false. If the statement is true, then the style sheet is applied. If the query returns false, then the style sheet is ignored. Following is an example of a media query: media="screen and (min-width: 320px) and (max-width: 768px)" In this example, the style sheet is only applied to screen widths between 320 and 768 pixels. Once you select a feature, you define the value after a colon (similar to a CSS property) and you enclose the condition within parentheses. You include each condition using the keyword and. You place the media query with the style sheet definition in the HTML document s <head> tag. For example: <head> <meta charset="utf-8"/> <link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" > <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px)" > <title>media Query Example</title> </head> NOTE: You can review terms that were taught in this lesson in Activity 10-1: Reviewing mobile design terms. In this example, the mobile.css style sheet will be used when the client has a screen size of 320 pixels or less. The desktop.css style sheet will be used for any client screen size larger than 321 pixels. The file names mobile.css and desktop.css indicate each style sheet's intentions. Responsive design frameworks Frameworks are tools, templates or boilerplates that provide the basic foundation the framework for responsive design in a Web page, and then let you fill it with your content appropriately. Many are open-source, free to download and easy to customize. There is some debate about whether developers who know how to code should use frameworks for front-end Web development. However, frameworks can make it quick and easy for you to develop pages that use responsive design techniques, including: Grid-based layouts. Resizable images. Media queries. Bootstrap and other popular frameworks One of the most popular responsive design frameworks is Bootstrap, a collection of HTML- and CSS-based design templates for typography, buttons, navigation, forms and other interface components, plus optional JavaScript extensions. It has been used by major organizations such as Twitter, MSNBC and NASA. Bootstrap is open-source and free to download. You can research to learn more about Bootstrap and other popular responsive design frameworks:

24 10-24 Advanced HTML5 and CSS3 Specialist Bootstrap ( Skeleton ( Montage HTML5 Framework ( Foundation ( HTML Kickstart ( Conclusion Choosing the design approach that is best for your mobile site may ultimately depend on your resources. You can connect and interact with your customers effectively using a mobile site design. A responsive site design decreases maintenance, adjusts to accommodate the maximum possible number of mobile users, and has better forward-compatibility prospects. So a responsive site design may be more beneficial in the long run, but it requires additional technical and financial resources now in order to develop. Remember that content is still king. Content is what users are ultimately seeking when they visit any Web site. However, presentation still separates the good from the great. By employing strong coding knowledge, well-tested standards, good practices and objective evaluation of your work, you can develop well-designed sites that use the latest technology standards and help prepare your Web content for whatever new technologies the future holds. CIW Online Resources Online Exercise Visit CIW Online at to complete an interactive exercise that will reinforce what you have learned about this topic. Exercise 10-4: Responsive Web Design CIW Online Resources Course Mastery Visit CIW Online at to take the Course Mastery review of this lesson or lesson segment. Course Mastery Lesson 10

25 Lesson 10: Designing for Mobile Devices Case Study Going Mobile Craig developed a traditional Web site for his bicycle shop many years ago. Now that he has a smartphone, he decides to view the site with it. When he views his Web site with his iphone, he sees only the upper-left corner of the home page. He has to swipe across the page to see the content or access the links. When he does locate content, he has to scroll across to read each sentence. He can barely find the links to the individual bicycle product pages, and then he has trouble clicking the one he wants. One image on another page takes up the whole screen. His form for registering site visitors is difficult to complete because of all the fingertip typing required. Craig is embarrassed because his site's mobile performance makes his business look outdated and incompetent. Craig decides to create a mobile version of his Web site immediately. * * * Consider this scenario and answer the following questions: What are five techniques that Craig can implement to modify his site for mobile users? Should Craig test his mobile site pages after developing them? Why? How can he do this? Should Craig validate his mobile site pages after developing them? Why? How can he do this?

26 10-26 Advanced HTML5 and CSS3 Specialist Lesson Summary Application project Using a smartphone or a simulator/emulator, visit the following Web sites. Consider the techniques taught in this lesson, and critique the design and usability of these sites. List the pros and cons of each site. Compare and contrast them. Which site do you think provides the best user experience? CBS News ( Best Buy ( Ritz Carlton ( Macy s ( FedEx ( Skills review In this lesson, you focused on mobile Web site usability to create a better experience for your Web site visitors. You studied various techniques for designing mobile Web sites, such as implementing fluid images, dividing Web content into small portions, simplifying the design, reducing user text entry, and focusing on navigation placement. You reviewed the importance of validating and testing your sites. Finally, you learned about Responsive Web Design (RWD), how it differs from mobile site design, and how it can enable the same site to be viewed on smartphones, tablets and desktop monitors. Now that you have completed this lesson, you should be able to: 10.1: Compare "apps" to mobile Web sites 10.2: Describe general concerns for developing Web documents that will be delivered on mobile devices. 10.3: Develop appropriate page layouts for use on mobile devices. 10.4: Create appropriate navigation elements and hyperlinks for mobile Web pages. 10.5: Use images appropriately on mobile Web pages. 10.6: Validate and test mobile Web pages. 10.7: Determine cross-browser compatibility for traditional and mobile Web pages. 10.8: Describe essential Responsive Web Design (RWD) techniques and principles.

27 Lesson 10: Designing for Mobile Devices CIW Practice Exams Visit CIW Online at to take the Practice Exams assessment covering the objectives in this lesson. Objective Review Objective Review Objective Review Objective Review Objective Review Objective Review Objective Review Objective Review Note that some objectives may be only partially covered in this lesson.

28 10-28 Advanced HTML5 and CSS3 Specialist Lesson 10 Review 1. When does it make sense to develop a mobile Web site instead of a mobile app? 2. How can you reduce user text entry on your mobile Web site? 3. How can you draw attention to links in a mobile Web page? 4. How can you validate your mobile Web site? 5. How does responsive design differ from regular mobile site design? 6. What is a CSS3 media query?