16 March 2005

Priyadi’s Place In A Small Screen Device

Posted under: at 02:16

I’m an active mobile Internet user. I get on the Internet whenever I had a chance. My primary tool of hooking up to the net is my trusty SonyEricsson P900 and its Opera web browser. Opera is a versatile web browser, even so when on the road.

The single most important feature of Opera for Mobile is its Small Screen Rendering. It reformat any web page to fit inside the screen width to eliminate the annoying horizontal scrolling. It does the job very well on almost any web site. Of course, there are some exception to this. There are highly broken web sites which are incomprehensible in SSR mode. For these broken sites, Opera also provides normal rendering mode which render web sites the same way we see on computer screen.

SSR mode works great with this web site. In fact, some postings are published using Opera under SSR mode, just to show that the complex WordPress admin screen is easily handled by Opera SSR mode.

The problem with SSR is that any formatting done by CSS is lost. All blogs practically look the same to each other. Fortunately, it is not hard for developers to provide a customized CSS for use with handheld devices.

The Opera web site has a section which explains Authoring for Small-Screen Rendering (SSR) and how to test SSR without using the real Mobile Opera. There is also an excellent tutorial on ALA: Pocket-Sized Design: Taking Your Website to the Small Screen. Lets not forget that Opera website itself looks great in handhelds, its CSS is an excellent reference for those who want to implement styling in handhelds.

I’ve done some preliminary SSR styling to this blog. Here is how this blog looks in SSR mode without CSS.

Opera screenshot before using handheld mode CSS

Very plain, isn’t it? And this is after applying handheld mode CSS:

Opera screenshot after using handheld mode CSS

As you can see, this blog now retains its style characteristics, and yet (hopefully) still usable in SSR mode.

7 Responses

Trackback: Use this URI to trackback this entry. Use your web browser's function to copy it to your blog posting.

Comment RSS: You can track conversation in this page by using this page's Comments RSS (XML)

Gravatar: You can have a picture next to each of your comments by getting a Gravatar.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Warning: Comments carrying links to questionable sites will be removed!