Featured
|
| Handheld
Devices Design Challenges Design Issues Getting Started Mobile for the Future |
| Multiple
Audiences Style Sheets Science News 
Submit an Article |
With the divergence of browsing possibilities, Nielsen believes that designers should not design for a specific screen size, but rather they should aim for flexible scalabilty by employing device-specific style sheets.
He calls for a return to what he calls the initial intent of HTML, which was to separate meaning from presentation. This technique, that Nielsen refers to as semantic encoding, takes advantage of the structure built into HTML’s standard tags. Not only does it make the HTML code a lot easier to read, but it also tends to be smaller in size and therefore is faster to load.
Take the following example of HTML that does not separate meaning from presentation. The attributes, such as font size or color, are defined within the code each time it is used.
| <p><font face="Arial"
size="6" color=”0000FF”> Chameleon Web
</font></p>
<p><font size="4" face="Times"> Welcome to <i>the</i> premier home for customized software solutions on the Web </font></p> <p><font size="3" face="Verdana"> For more information see our <a href="product.htm">product list</a>. </font></p> |
This code would display the following:
|
Chameleon Web Welcome to the premier home for customized software solutions on the Web For more information see our product list.
|
By
using style sheets and employing HTML tags that emphasize hierarchy, you
reduce the amount of code, but more importantly the information could have
several style sheets to customize the display depending the on browser used to
view the page.
Here is the same example that removes the presentation elements of code and stores it in style sheet.
| <H1> Chameleon Web </H1>
<H2> Welcome to <i>the</i> premier home for customized software solutions on the Web </H2> <p>For more information see our <a href="product.htm">product list </a> </p> |
Note how the code is cleaner, the additional formatting attributes have been remove making it easier to read. This example also has considerably less code. Now, let’s take a look at a sample style sheet where the attributes of the html tags are defined.
h1
{ color: #0000FF; font-family: Arial font-size: 30px; }
h2
{ font-family: Times; font-size: 20px; }
p
{ font-family: Verdana; font-size: 15px; }
The combination of the cleaner code and the style sheet bring about the same result as the first chunk of code pictured above.
This could be just one of many style
sheets however each device – Palm, cellular phone, Web TV, standard Web
browser, etc. – could have their own.
So, let’s take into account some design considerations of Web design and see how they fit with other devices. Many of the good design principles common to the Web are common to design principles for other devices also.
The following guidelines are a combination of recommendations from Nielsen and some of my own.
A lot of content on the Web, especially on news sites, tends to be in a column format, which help users scan multiple categories. This just isn’t going to work on the small screens of handheld devices. So, when designing for both, omit the columns. You may end up with a longer page, but it’s more adaptable for the other devices.
As the old saying goes, less is more. When writing information for handhelds, employ Nielsen’s guidelines: the writing should be succinct, scannable and linked. I’d also like to take the last guideline further and recommend anchor tags in content for small screen devices. An anchor tag is an internal page link, but for long pages it can let a user jump around content chunks to find information.
As mentioned earlier, if you have lots of different devices, your content should be flexible. Another recommendation is to avoid fixed width values in your layout. Use percentages instead. So whether someone has a high-end 21” monitor or a cell phone, 80% of the screen is still 80%.
For more design considerations, check out some of the fine resources listed at the end of this guide.
home | about us | articles | resources | search