Web Authoring Topic 25 –Mobile Optimized Websites
ObjectivesStudents should able to: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.
Mobile-optimized websitesUntil recently, the way a website displayed ona mobile phone’s browser was only aperipheral concern for most web designers.Browsing on mobile devices still represents asmall percentage of all browsing.However, mobile browsing is growing at anastonishing rate.
Mobile-optimized websitesHow is the mobile experience of the webdifferent than the desktop?The most obvious answer to this question isscreen 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 webdifferent than the desktop?The two most common screen resolutionsin use today for desktop browsing are1024 x 768 pixels and 1280 x 800 pixels.Mobile phone resolutions can range from240 x 320 (for a non-smartphone) to 640 x960 (for a smartphone).
Mobile-optimized websitesYou also need to take into account screenorientation:For computer monitors, the defaultorientation is horizontal.For mobile phones, it is vertical.In addition, older mobile phones can onlydisplay web pages vertically, while newersmartphones can rotate the screen fromportrait to landscape format.
Limitations for Mobile users- Most websites are designed to be usedwith a mouse and keyboard. Modernsmartphones address this with touchscreens and QWERTY keyboards, but formany users, navigation on a cell phone islimited to arrow keys and numericalkeypads.
Limitations for Mobile users- The speed of the mobile phone’s internetconnection is a major factor in the user’sexperience. In addition to multimedia files,large images can slow down theperformance of a page.
Limitations for Mobile users- Many mobile devices have limitedprocessing power and memory, which mayresult in incomplete or delayed pagerendering. Features such as copy and pastemay either be completely missing orlimited.
Mobile-optimized websitesHow do websites know what browser youare using?There are hidden communications takingplace between your browser and theserver where the website is hosted.All web browsers identify themselveswith a user agent string.
Style SheetsDifferent browsers render the exact samepage differently depending on variousfactors. This is especially the case withmobile web browsers.A solution to this problem was proposedin 1999 when the original specificationsfor 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 separatestyle sheet and attach it to your pages sothat certain handheld devices will usethis style sheet accordingly.An issue today is that some of the mostpopular and high-profile mobile webbrowsers do not announce themselvesas handheld devices at all.
CSS3 Media QueriesUse media queries in CSS3 to recognizedevices that are visiting your website.Instead of looking for a device thatannounces itself as handheld, a mediaquery looks at the capability of thedevice.
CSS3 Media QueriesFor example, the media query mightlook for the width and height of thebrowser window, the device width andheight, the device orientation(landscape or portrait), and theresolution, among other things.
Test Design on Mobile DevicesThe best way to test your page designs is tohave access to the mobile device in question.There is a category of software programscalled emulators that allow you to test yourdesigns in software versions of differentmobile devices.
Mobile Navigation TipsNavigation that is easy to use is key to thesuccess of your website.There are certain navigation guidelines youshould remember for mobile devices,particularly touchscreen mobile devices.
Mobile Navigation Tips- Navigation should be at or near top of thescreen so the user can easily access it.Consider repeating your navigation at thebottom of all your pages so the user does nothave to scroll back up when she is donereading a page.
Mobile Navigation Tips- For touchscreen devices, use a large targetsize for navigation links. This will preventaccidental clicking by your users.- Touchscreen devices do not have a hovercapability, which is triggered on the desktopby the cursor, so plan your styles accordingly.- Refrain from using image-based navigationand use list-based navigation that is styledwith CSS.