Designing the interface
Before starting to create the interface, all the options were analyzed as to provide the user with a service that would work fine in the majority of devices and would not pose any big usability problems. Combining the user experience and use of computer websites together with their experience when using a mobile device was extremely important in order to generate an interface that is easy to use and “instinctive” (the user does not has to learn how to use it).
Application
When designing a website for a mobile device, normal HTML is not valid anymore. Mobile browsers read XHTML, which is more concise and simpler than the previous one.
In this case, the application Adobe GoLive CS2 was used. It not only allows the creation of either XHTML Basic 1.0 or XHTML MP but it also allows the creation of specific CSS for mobile devices. It also includes a preview for small screen rendering and other facilities for the creation of websites for mobile devices.
When using the application to create EnviroNet’s mobile website, the easy to use interface of the software was used together with XHTML editing to result in a simple and efficient code.
CSS
External CSS works better for mobile devices. Taking this into consideration, a style sheet, “mobile.css”, created to work with mobile browsers (as the software offers this as an option) was applied to every page, with the media type specified as “handheld”.
As Karen Stevenson, who has extensive experience in the use of CSS for handhelds explains, “The future for handhelds will be XHTML and CSS, using a style sheet designated with the media type "handheld". WAP sites are dwindling (or at least not growing) and the newest handhelds are moving to XHTML/CSS. Phones that are labeled "WAP2" can use regular web sites, not just WAP sites. I know XHTML/CSS sites work great on at least some WAP2 phones”.
But because some devices do not read the “handheld” media type for CSS, another CSS, exactly the same as the “mobile.css” was created, but instead of “handheld” as media type, it has “screen” (screen.css). This was done because some current phones apply “screen’ styles. “…In some cases the phone carrier runs pages through a proxy that strips styles out even if the phone could recognize them, so it's a crapshoot figuring out what will get applied. The best bet is to just keep it simple.” (Stevenson, 2005, Style Sheets for Handheld Devices, Available here)
Although the Style Sheets used were kept very simple, they were not used to make the website look nicer, but to help the user navigate through the website efficiently and consider usability issues involved.
Both CSS used (mobile and screen), proved to work really fine in all mobile devices the interface was tested on, not cluttering the website with unnecessary visuals or styles.
Although some mobile devices do not read the font property (some display the website with the default font of the device), Verdana was used for all classes of styles as is an easy to read font (proved by the usability tests).
Forms
Two main forms were used on EnviroNet’s mobile website (“Search” and “Post”). Although the use of forms is not recommended, the whole concept depends on that. The forms were not separated in different pages, to avoid extra costs of data transferring for the user, and for usability issues.
Usability tests conducted at the Nokia Research Center, proved that users do not find typing in a mobile device website such a hassle, since they are used to the mobile keyboard to type SMS messages. This was also proven in our usability tests.
Testing the Interface
While designing the interface, tests were done using the Small Screen Rendering option on the GoLive software as well as on the Opera Browser on the computer, through the selection of the option “view in small screen”. The process was useful as it checked if the CSS for handheld was working fine.
Later on, once the interface was ready and working fine, with all the links and pages, (without the backend code), it was uploaded to the server and tested in a few mobile phones (Samsung E330, Nokia 2650, Motorola V3 RAZR, Nokia 6230). After these tests, a few changes were made, regarding the size of the logo, blue background and blue texts. The Logo was scaled to fit in the smallest screen tested (Nokia 2630), and the blue was changed into a higher contrast and lighter tone for the fonts, and into an even lighter tone for the background of the text. Once another test was done to make sure everything was working fine, the integration with the backend code was done.
