SSR is the methodology to show the web sites designed for computers (i.e. 800 X 600 resolution or more) to rather very small screens. Each micro browser has their own HTML rendering engine. Small-Screen Rendering (SSR) feature automatically makes a more device-friendly version of those pages by rearranging the content to fit the screen. The primary concern is to avoid horizontal scrolling; the content will always be as wide as the device.

Small-Screen Rendering overrides several aspects of page display:

• Page layout
• Images
• Colors
• Tables
• Frames
• Font size
• Alignment

The web page will be shown as a single column of text. If the original layout uses multiple columns, the columns are merged into one in document order. If one makse sure that the content which belongs together is grouped together in the code, this merging is more likely to have a successful outcome.

If the page has a style sheet for media handheld, Opera assumes the page is optimized for devices and will not apply SSR to it.

Document order

Document order is the order HTML source code is formatted. Content early in the source will be displayed above content that comes later and elements close to each other in the source will be displayed close to each other.

Table with any number of rows and columns will be displayed one column many rows i.e. all the cells in a table will be stacked one below another.

Dos and Don’ts

If one wants to create a web site which can be accessed from PCs and small handheld devices one needs to consider many things in all the stages of application development.

Dos

• Create well formed HTML.
• CSS for formatting text.
• Normal size for common text, large for main heading and size between for subheadings.
• CSS layouts instead of Table layout.
• Use external style sheets and JavaScript.
• Use small images.
• Specify height and width of images.
• Alt attribute for all image tags.
• Use different style sheets for normal screen and handheld etc.
• For smaller images with clickable "hotspots", better to use image map instead of slicing
• Relative units for formatting margin-left: 20%;

Don’ts

• Embed CSS and JavaScript in HTML.
• Use images for heading.
• Use dynamic menus.
• Popup windows.
• Use Frames.
• Use background images.
• Create horizontal scroll.
• Use float property to align content.
• Absolute positioning.
• Absolute units for formatting like margin-left:200px;
• Use of UI events like onmouseover, onmouseout etc.

Contributed by Sandeep P @ Software Associates