Southern Africa 4×4 – Off-road Trips & Vehicle Mods

A great thing about style-sheets is that you can specify how a document should look for different media types i.e. on a screen or when printed. The reason for this is that certain font sizes and fonts will be more suitable to certain media types.

You specify the CSS media type in the head section in the link to the css file:

style type="text/css" media="screen">
@import url( http://www.flickaswitch.com/style.css );

The type of media specified above is for screen.

You can use anyone of the following media types:

all

Suitable for all devices.

aural

Intended for speech synthesizers.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small
screen, monochrome, limited bandwidth).

print

Intended for paged, opaque material and for documents viewed on
screen in print preview mode.

projection

Intended for projected presentations, for
example projectors or print to transparencies.

screen

Intended primarily for color computer screens.

tty

Intended for media using a fixed-pitch character grid, such as
teletypes, terminals, or portable devices with limited display
capabilities.

tv

Intended for television-type devices (low
resolution, color, limited-scrollability screens, sound available).

CSS2 defines the following media groups:

* continuous or paged. “Both” means that the property in question applies to both media groups.
* visual, aural, or tactile.
* grid (for character grid devices), or bitmap. “Both” means that the property in question applies to both media groups.
* interactive (for devices that allow user interaction), or static (for those that don’t). “Both” means that the property in question applies to both media groups.
* all (includes all media types)

Designing for mobile devices

As more Internet users go mobile, web designers have to start designing for a new standard of web devices. Luckily if your site has been designed with accessibility in mind it already might accessible to both screen readers as well as mobile devices.

The use of valid XHTML and CSS design will mean that when user have photos turned of and are just browsing text, the text will be logically presented and easy to read on a tiny screen

Here are some points to consider:

1. Screen size

   Mobile devices vary in screen size from very small to 640X480 such as a PSP. PDAs and cell phone screens are smaller than desktops and they also render the pages differently. A sampling of resolutions:

   PalmOS (Zire and Tungsten)
   160×160
   320×320
   320×480

   Blackberry 7100x series
   240×260

   Blackberry 7780
   240×240

   Dell Axim x30 and x50 Pocket PCs
   320×240

   Dell Axim x50v
   640×480

   HP iPaq
   240×320

   Smartphones (Motorola, Samsung, and i-mate)
   220×176

   So instead of just designing for 800X600 you may have to take into account over 10 screen sizes.

2. Design with CSS, XML, XHTML

   Most devices have the fewest issues viewing Web sites coded with XML/XHTML, the most common HTML standard. It’s not necessary to build a separate site when developing with CSS and XHTML. However, some large sites like Yahoo! and Google have separate sites for mobile users.

   Depending on your audience and Web site’s purpose, creating a separate Web page for mobile devices might be worth considering. If you don’t have the resources or design for a small business, CSS and HTML works fine.

3. Focus on the most important pages of a Web site

   Generally, mobile users view only a couple of pages per site, just enough to get the information they need and move on. It’s time consuming and tedious to surf with a small screen, so make sure your site is logically ordered with your main text near the top of the page.

4. Text entry is difficult

   Not all mobile devices come with a QWERTY or any kind of keyboard. Many cell phones rely on T9 Predictive Text Input for text entry. Though it speeds text entry, it’s still tiresome to repeatedly press buttons when entering more than a few words. Give the user choices that allow moving and selecting using the cell phone’s buttons much like the Web pages of the Internet’s early days when everything was text-based. Users just used the arrow buttons to move to an underlined link and then press “Enter” to go to that content.

5. Test with an emulator

   A few sites offer an on-line emulator or one for downloading. An emulator allows you to view a Web site just like it would appear on a cell phone or whatever device the emulator covers. Available emulators:

   • PalmOS

   • Windows Mobile 2003

   • PocketPC from Microsoft

   • Smartphone

   • PocketPC from YoSpace

   • PocketIE Emulator

Check out Mozilla.org ’s current project Minimo Project (Mini Mozilla), a browser for small devices and machines with limited resources. Opera’s browser comes with the ability to render its browser for small screen and handheld style sheet testing. It also has a section on how to design and write for small devices. Microsoft provides an SDKs (software development kit) for Windows Mobile as well as articles and emulators. Check out the style guides:

• AvantGo

• Microsoft

• Opera

• Palm Web Clipping Developer’s Guide

Statistics show a growing market for mobile devices, which leads to more interest in Web sites specially designed for such devices, or at least, use CSS and XHTML or XML. These tips and resources will help designers maximize the small screen surfing experience.

Image Size

Because of the high cost of bandwidth most mobile users will browse with images turned off. If they leave images on the slow connection speed of gprs means any images you include should be fully optimised and cropped to a size that will display on a screen with very limited real estate.

Googles much anticipated online calender went live today. Loaded with helpful features, you can now have all your appointments
and events stored in one place.

You can create multiple calenders, say one for work events, another for sports and another for your social life.

Some of the features are:

Calendar Sharing: Set up a calendar for your company softball team, and share it with the whole roster. (Your shortstop will never forget about practice again.) Or share with friends and family so you can view each other’s schedules side byside.

Invitations: Create event invitations, send them to friends, and keep track of people’s responses and comments, all in one place. Your friends can receive your invitation and post responses even if they don’t use Google Calendar themselves.

Quick Add: Click anywhere on your calendar where an event belongs (or use the Quick Add link), and start typing. Google Calendar understands whole phrases like “Brunch with mom at Java Cafe 11am on Saturday,” and will pop new events right into your agenda.

Gmail Integration: Add your friend’s Super Bowl party to your calendar without ever leaving your Gmail inbox. Gmail now recognizes events mentioned in emails.

Search: Find the date of the Baxter family BBQ (you knew it was sometime this summer). Or, search public calendars to discover new events you’re interested in and add them to your own calendar.

Mobile Access: Receive event reminders and notifications on your mobile phone.

Event Publishing: Share your organization’s events with the world.

Its free, looks good simple to use and all you need is you google account to login

If you come from the old school of web designers or learned web design from an older book you probably construct your webpages using html with a table based layout. However things have certainly moved on. Now the focus in creating seo friendly pages is to use valid xhtml and css to style the page so that there is the minimum amount of code for the spider to have to trawl through in its search for the text on your website.

A classic example of a table based page would probably have hundreds of lines of code with the actual text hidden in a mess of font and table tags.

The beauty of css is that you have complete control of the structure of the code i.e. you can place your main body text and h1 one tag straight after the head section.

And of course css allows you to export all formating to an external file so that the xhtml code in the page is kept to a bare minimum.

Here is an example of a well formatted xhtml page using css for styling:

Thanks to Adam for the code http://www.adamskalak.cz/