Archived:Getting started with a personalized Mobile Web Server theme
The 'Mobile web server' was discontinued in February 2010. See here for more information.
Article Metadata
The Mobile Web Server allows you to create unique and customized themes for your own site. A theme makes the site truly unique by adding a personal touch that reflects the site owner – making the site more recognizable to the visitors.
When you’re starting to work on your own theme, you will instantly feel your hands itching to get something tangible out as soon as possible. Yes, playing around and just trying out things is a good way to get you there: however, before that, take a second to think what you want to accomplish: what is the experience you want to provide to your users?
Mobile browsing experience meets technical possibilities
One of the major considerations in building a hit mobile site is switching your mindset to the mobile context. This may require re-thinking the desktop layouts and conventions from the mobile perspective – sometimes it can be a good exercise to start the design work from scratch, and work your way from bottom up.
In practise, technically this may mean cutting down the size and amount of graphics, re-thinking the site navigation and building the layout to intuitively promote vertical scrolling while minimizing the need for horizontal scrolling. In many cases, this means that the structure of a normal web page cannot be re-used as such in mobile. One example of difficult design is using tables for layout: it’s always better to use CSS from the beginning.
The key ingredient here is a careful separation of content and structure. The Mobile Web Server page templates have been designed to utilize semantic markup that allows you re-construct the layout of the page more efficiently with CSS definitions. The default page templates and CSS rules are easy to access and modify, and provide a good starting point for experimentation in creating a customized look and feel.
However, there’s no free lunch here. If you want to provide a fully optimized mobile user experience, you have to take a critical look at your entire site concept: including the site hierarchy and content. What content is most important to my mobile users? How do they look for it once they arrive at the site? Once you have the answers, make sure that
- the site structure (or information architecture) feels intuitive to the users; they should be able to quickly grasp the big picture and how to logically dig in deeper to the site content
- content-wise, do not burden the user with nice-to-have irrelevant content. If you are catering for a very varied audience and have difficulties in cutting down your content, at least divide it into smaller and recognizable chunks with descriptive headings.
In short, the mobile context requires a new mindset and a fresh look from a new perspective. The technology is not the limitation: for example, the Mobile Web Server templates provide you the framework to experiment and play around, getting solid results instantly.
Top 5 tips for Theme design
OK, so now you want to get started. Before you start, keep these in mind:
- Stick to CSS modifications. Don’t try to accomplish the impossible: the page recommended page structure is there for a reason.
- Keep it simple – keep it semantic. Separate structure and layout.
- Remember the mobile focus. See above; do not simply port a desktop site to mobile.
- Testing is your friend. Try it out, as soon as possible.
- Play, play and play. You’ll learn from experimentation. Try out new stuff – and have fun while doing it.
The next steps to ease the learning curve
Once you get going, you will have more questions: how can I do this more efficiently, is this possible at all? See below for recommended next steps of learning.
- Learn more about semantic HTML and CSS. Simply use your favourite search engine to find a wealth of tutorials and examples.
- Benefit from the community. This wiki and Nokia Developer allow you to hunt down detailed information and solve technical problems.
- Communicate with your peers. Log on to the Nokia support discussions (http://discussions.europe.nokia.com/t5/Phone-Applications/bd-p/apps) or to the Nokia Developer discussion board to post your questions, and discuss any problems you may have.
29 Sep
2009