PREVIOUS بعدی

Changing the Design of a Page for Wireless Devices with the Handheld Media Type

f you haven't already started thinking about how your Web pages look on cell phones and other small devices, now, with the advent and popularity of the iPhone, Treo, and Blackberry, you may want to reconsider. It would be great if we didn't have to do anything to our Web pages to have them viable on cell phones, but until some science fiction device comes true allowing us to view 1024x768 sized images on 320x160 screens, we're going to need to cope. (And while you're at it, scifi guys, where is my flying car???)

Your Web Pages Should Have at Least Three Style Sheets

One for viewing the page on a computer screen, one for printing the page, and one for viewing on small form-factor devices or "handhelds". You reference them in the <head> of your document like this:

<link rel="stylesheet" type="text/css" media="screen" href="/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" />

You need to use the link method to attach your style sheets, as wireless devices don't have to download those style sheets they don't need (in other words, the screen and print ones). Plus, many built-in browsers on cell phones don't support the @media and @import methods of loading style sheets.

The user-agent knows what type of media it can display, and will download and use the style sheet for that appropriate media type. For example, computer screens use "screen", print uses "print", and wireless handheld devices use "handheld".

Note: some wireless devices refuse to use the "handheld" media type, and instead display Web pages using the "screen" media type. Others ignore both style media types, so you might want to include a very basic style sheet at the top for "all" media types. And finally, some cell phones strip out all style information completely, leaving a page that is very simple.

The browser wars continue, and the casualties are the Web designers (and the customers). My recommendation? Do what you can, and use the handheld media type to style for wireless devices. If you're feeling really ambitious, write to the manufacturers with cell phones that don't comply and complain.

What Your Wireless or Handheld CSS Should Include and Remove

When you're building CSS for handheld devices, the first thing you should do is remove all elements of the page that wireless devices can't use or don't support well. Do this by setting the display: none; style on those elements. For example, you might want to hide the larger ads and leave in only print ads. If you put a class of "scr_ad" on every large ad you can hide them from cell phones in your handheld CSS with this style property:

.scr_ad { display: none; }

These are the things you should consider omitting from the handheld version of your pages:

  • images that are not legible below 160x320 resolution
  • advertising - especially graphical and flash-based
  • JavaScript - most phones don't handle JavaScript well, so it's a good idea to not display those sections of your site
  • Large logos and navigation found at the top of the page

You should also include things on your handheld page (by setting the display: none; in your screen CSS document), such as:

  • Smaller versions of your images
  • Text advertising - this works great on a cell phone
  • Text navigation links near the top of your page to jump to other sections of the page.

Wireless web design Tips

  • Build your HTML using CSS style sheets so that the primary content comes first. Logos and navigation can be very slow to download on a phone.
  • Avoid frames, pop-ups, and Flash, or hide these elements where possible as described above.
  • Put alternative text on all images.
  • Assume that your fonts won't be used.
  • Don't rely on color for features (like "required" fields in forms) as some cell phones are still black and white.
  • Use access keys to make your links more usable without a mouse.

آخرین مقالات طراحی سایت

دانلود رایگان کتابهای طراحی سایت