Internet Must Change for Mobile Use - More on the Design Transition
(Page 3 of 4 )
Don't use too many images. Not only is there limited space on mobile screens, but multiple images can really slow down the load time of your pages. Nobody will browse a page that takes forever to load. Of course, a lot of the wireless networks have proxies that will resize your images to fit on the screen (or just rip them out, at the service's discression), but it may not shrink them to scale. Having more than a few images is still going to bring browsers to a crawl. A lot of users may be coming to your site with images off (or you could turn them off if in the mobile stylesheet if you didn’t want to bother with resizing them all), so make sure you declare ALT tags for all the images, especially image links. On the same note, try trimming down and optimizing your code. Removing extra tags and characters can shave a little time off of loading.
Keep text formatted to fit of the screen well. The important content and links should be at the top of the page, where less scrolling is needed to access it. Keep from using many fonts. The mobile device may resize your font to one of its few defaults, though it’s hard to predict what it will do. The best way to deal with font sizes is using a separate stylesheet for mobile users to declare two heading sizes, H1 and H2 for example, and use these two heading tags and a body font. Keeping the number of font sizes you use to a minimum could help as well, since most mobiles only have roughly 3 sizes to work with.
Also, if you get too fancy, your page may lose a lot of its glamour on mobiles. Don’t expect colored text to display the same, especially since some browsers are not in color. Keeping links and navigational tools text based will help them display easily. Don’t use underlines for anything but links. It can get really confusing. And make sure word wrapping is not deactivated so that users don’t have to keep scrolling way off to the right and back just to read something.
After you have optimized your site for mobile users, you’ll want to see what it looks like on one. This is where you can run into some trouble again. Perhaps one reason that there is such lack of support for mobile devices is that without actually using different devices on a website, it’s hard to predict exactly how they will look and respond. Opera was the first browser to allow users to easily test for the small screen.
Information from Opera on this testing is available at http://my.opera.com/community/dev/device/testing. Since both the desktop and handheld versions of Opera are based on very similar code, pages will display without too much variation after making a few adjustments. The site gives information on resizing the browser to the size of a small screen, viewing in small screen rendering, testing handheld stylesheets, turning off graphics and java, testing the page without a mouse, and validating the code. Viewing how other browsers may display a page can be more challenging, including installing extra software tools to emulate the tiny browsers.
Next: Things May Get Simpler >>
More Web Hosting News Articles
More By Developer Shed
