Web Authoring

Topic 25 – Mobile Optimized Websites

Objectives

1. Explain the need for mobile-optimized websites. 2. Explain the difference between desktop

and mobile experience of the web. 3. List the limitations for mobile users.

Students should able to:

Mobile-optimized websitesUntil recently, the way a website displayed on a mobile phone’s browser was only a peripheral concern for most web designers.

Browsing on mobile devices still represents a small percentage of all browsing. However, mobile browsing is growing at an astonishing rate.

Mobile-optimized websitesHow is the mobile experience of the web different than the desktop?The most obvious answer to this question is screen size.

Comparing the screen resolution of a typical desktop screen (left) to a mobile screen (right) (This diagram is not to actual size)

Mobile-optimized websitesHow is the mobile experience of the web different than the desktop?

The two most common screen resolutions in use today for desktop browsing are 1024 x 768 pixels and 1280 x 800 pixels. Mobile phone resolutions can range from 240 x 320 (for a non-smartphone) to 640 x 960 (for a smartphone).

Mobile-optimized websitesYou also need to take into account screen orientation: For computer monitors, the default orientation is horizontal. For mobile phones, it is vertical. In addition, older mobile phones can only display web pages vertically, while newer smartphones can rotate the screen from portrait to landscape format.

Limitations for Mobile users- Most websites are designed to be used with a mouse and keyboard. Modern smartphones address this with touch screens and QWERTY keyboards, but for many users, navigation on a cell phone is limited to arrow keys and numerical keypads.

Limitations for Mobile users- Older mobile web browsers have limited ability to render CSS. For example, they might ignore CSS layout such as floated divs, but maintain the text styles.

- Multimedia such as audio, video and Flash have limited or no support on many mobile devices. Javascript might also not be supported.

Limitations for Mobile users- The speed of the mobile phone’s internet connection is a major factor in the user’s experience. In addition to multimedia files, large images can slow down the performance of a page.

Limitations for Mobile users- Many mobile devices have limited processing power and memory, which may result in incomplete or delayed page rendering. Features such as copy and paste may either be completely missing or limited.

Mobile-optimized websitesHow do websites know what browser you are using?

There are hidden communications taking place between your browser and the server where the website is hosted.

All web browsers identify themselves with a user agent string.

Mobile-optimized websitesA user agent string identifies the visiting browser as Internet Explorer 8, iPhone OS 3.0, and so on. You can add user agent detectors to your web pages. A detector can be a small piece of JavaScript code that identifies the user agent (in this case, a visiting browser), and then changes the default behavior of the website in some way.

Style SheetsDifferent browsers render the exact same page differently depending on various factors. This is especially the case with mobile web browsers.

A solution to this problem was proposed in 1999 when the original specifications for CSS were developed.

Style SheetsThis code:<link rel=”stylesheet” href=”base.css” type=”text/css” />

is the same as this code:<link rel=”stylesheet” media=”all” href=”base.css” type=”text/css” />

Style SheetsIn some cases, you can create a separate style sheet and attach it to your pages so that certain handheld devices will use this style sheet accordingly.

An issue today is that some of the most popular and high-profile mobile web browsers do not announce themselves as handheld devices at all.

CSS3 Media QueriesUse media queries in CSS3 to recognize devices that are visiting your website. Instead of looking for a device that announces itself as handheld, a media query looks at the capability of the device.

CSS3 Media QueriesFor example, the media query might look for the width and height of the browser window, the device width and height, the device orientation (landscape or portrait), and the resolution, among other things.

Test Design on Mobile DevicesThe best way to test your page designs is to have access to the mobile device in question.

There is a category of software programs called emulators that allow you to test your designs in software versions of different mobile devices.

Mobile Navigation Tips

There are certain navigation guidelines you should remember for mobile devices, particularly touchscreen mobile devices.

Navigation that is easy to use is key to the success of your website.

Mobile Navigation Tips- Navigation should be at or near top of the screen so the user can easily access it. Consider repeating your navigation at the bottom of all your pages so the user does not have to scroll back up when she is done reading a page.

Mobile Navigation Tips- For touchscreen devices, use a large target size for navigation links. This will prevent accidental clicking by your users.- Touchscreen devices do not have a hover capability, which is triggered on the desktop by the cursor, so plan your styles accordingly.- Refrain from using image-based navigation and use list-based navigation that is styled with CSS.