×
Namespaces

Variants
Actions
Revision as of 09:21, 20 August 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to develop a simple website using Nokia Mobile Web Templates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: deepikagohil (26 Oct 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (20 Aug 2013)
Featured Article
07 Mar
2010

This article gives a brief overview about mobile web templates and shows how to create a simple mobile web-site and a mobile web-site using Nokia web templates (for high end devices).

This article is mainly aimed at beginners and helps them to find out how it makes difference on presentation of a website on your Nokia 5th edition device when you add Nokia mobile web templates to it.


Contents

Introduction

The rate of users using mobile Internet has increased drastically in last few years and so the there is a need for mobile friendly web sites.

As we all know that, a website can be viewed differently in a phone browser than a desktop browser because of the screen-size and other factors. And some websites which have made more use of Flash/java codes get harder to get downloaded or may even can't get loaded with some browsers. So care should be taken during designing a website i.e. some guidelines should be followed to create a mobile compatible website.

Web Templates :

Web Templates are already designed websites or web-components, which can be customized according to our needs. e.g. A website template can be used to create your own website by just adding your content/ data in it. The main advantage of them is reusability.

A Mobile Friendly Web site:

Some websites develop a separate website for mobile users e.g. Google, it has already created a separate mobile friendly site to aim more and more mobile users. Well, it is comparatively costly to have a separate site for mobile phone users. A better option is- to make your website compatible with a mobile phone browser as well as standard desktop browsers. Its up to you what to choose.

Mobile Web Templates:

Mobile Web Templates are extremely light weight Web Templates, which can be loaded very fast.

Guide lines

There are couple of things that should be kept in mind during developing a mobile web site. These guidelines makes the website to get downloaded faster on mobile and makes the user to visit your website regularly.

  • Use simple HTML codes.
  • Don’t use much flash code in your templates because a few mobile browsers support flash.
  • Don't use more than one column. Use only one column for representation of data.


Creating a Mobile Website (without using Nokia Web Templates)

Creating a mobile website is same as creating a simple website keeping in mind the above mentioned guidelines.

This sections mentions the primary steps to create a simple mobile-compatible website and the next section explains to create a mobile website using Nokia Mobile Web Templates. You can check both of the sites on your Nokia S60 5th Edition devices and check out the difference between the presentation of websites on Nokia device. Use of Nokia mobile web templates (for high end devices) make the presentation of your website more attractive on your 5th Edition devices.

We are creating here a simple mobile compatible website in this section. For that you should have the basic knowledge of HTML language and CSS to understand these sections. If you don't have it, don't worry- because they are easy to understand and many good books & online tutorials are there for you to learn. Here the steps are described with an example site to create a simple website without using Nokia Mobile Web Templates.


Quick Introduction to HTML and CSS

HTML: HTML is the abbreviation of "Hyper Text Mark-up language" , which is mainly used to create static web pages. It provides basic structure to create a website.

CSS: CSS is the abbreviation "Cascading Style Sheets" which can be used to customize your web site. It offers you to change the presentation of the HTML file. It reduces the code in your HTML file.

Primary steps for creating a website

You can refer to the Example site at http://constructions.99k.org to understand these steps.The example shows a simple website of a construction company.

You can also download this simple example (Example 1:File:Constructions.zip) for your reference.

Construction1.jpg

Steps:

1. Think about the structure of the website you want to create.

2. Calculate the number of web pages that should be included in your website. For e.g. the pages included in the mentioned example are:

  • index.html
  • about_us.html
  • projects.html
  • at_a_glance.html
  • contact_us.html

3. keep in mind that these are the pure text files. You can make them HTML file by just giving them .html extension.

4. Create every page as per your needs with HTML elements and attributes. Remember that index.html is the default page that will be seen when you open your website.

5. Add resources to your website. This is the very important folder of your project because it contains the images / scripts / style sheets(CSS) of your website. Create "resources" folder and put your resources.

6. You can change the presentation of your website with CSS file. if you need you use Nokia web templates, you are supposed mention them in this file only. All the customization is done in this file only.


The link to the example site is http://constructions.99k.org. This is a simple mobile compatible website without using Nokia Web Template. You can see in the next section that how we have customized this simple website using Nokia Mobile Web Templates. You can do this by adding Nokia web Templates in your CSS file. Example 1 is given for your reference. You can make your own changes in CSS and create your own website.


Creating a Website using Nokia Mobile Web Templates

Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive on Nokia mobiles. We have used Nokia Mobile Web Templates for High End devices in this example.

Con temp.jpg


In this Projects we have made use of the mentioned Nokia Mobile web components.

You can download these components at High-end Templates

  • Branding
  • Breadcrumbs
  • Buttons
  • various types of Boxes
  • lists
  • Tables
  • grid
  • nav-footer

You can refer to the example site on http://constructionstemplates.99k.org.

You can compare both the sites on your Nokia S60 high end devices and get a idea about how we have customized the website using Nokia Mobile Web Templates for high end devices.


Branding:

Branding.jpg


code:

  <div id="header">
<div class="branding">
<img src="resources/images/build.jpg" align="left" height=40 alt="Logo" />
<br><br>XYZ Constructions
</div>
</div>

Description:

Branding is used with the div tag and header id. It is used to display the company logo and name with background. We have used branding in each file in the given example.


Breadcrumbs

Breadcrums.jpg

code:

  <!Navigation>
<div id="content">
<ul class="breadcrumbs">
<li class="first"><a href="index.html">Home</a> &gt;</li>
<li>About Us</li>
</ul>
</div>
<!Navigation ends>

Description:

It is one type of navigation. Breadcrumbs class is used here for top level navigation.


Buttons:

Buttons.jpg

code:

  <ul class="button-rounded">
<li><a href="build3.html">view details</a></li>
</ul>

Description:

Buttons class can be "button-flat", "button-rounded" or "button-submit". We have used a rounded button for our application. As you can see, in our application we have used this rounded button in unordered list.


Boxes(containers):

Boxes.jpg

code:

  <div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer">
<p>Our expertise in Residential Projects, Construction of Housing Projects, Commercial Buildings, Commercial Projects and Industrial Projects, Farm Houses, Bungalows, 2,3,4 BHK Luxurious Apartments, Flats ensure the Quality Construction and their Timely Completion. The group believes in offering high quality at affordable price, by attaining high standard of engineering excellence and quality for workmanship, so as to maximize the customers satisfaction</p>
</div>
</div>
</div>

Description:

we have used rounded box in this example to display the content. You can check that we have also used "box-flat" in "Contact Us" file.

lists:

Lists.jpg

code:

  <div id="content">
<ul class="list">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="at_a_glance.html">At a Glance</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>

Description:

List component is used in "index.html" file which can be used to display unordered list with a different style as you can see.

tables:

Tables.jpg

code:

  <table>
<tr><th>Areas:</th>
<td>Multi Fuel Gas Stations</td></tr>
<tr><td></td><td>Real Estate Development and Constructions</td></tr>
<tr><th>Founded:</th><td> in 2009</td></tr>
<tr><th> Area Developed:</th><td> 1 million square ft.</td></tr>
</table>

Description:

Table is used to arrange data in orderly and styled manner.

grid:

Grid.jpg

code:

  <ul class="grid">
<li><a href="Build1.html"><img src="resources/images/Buildings1.jpg" height=100 alt="image" /></a></li>
<li><a href="Build2.html"><img src="resources/images/Buildings2.jpg" height=100 alt="image" /></a></li>
<li><a href="Build3.html"><img src="resources/images/Buildings3.jpg" height=100 alt="image" /></a></li>
<li><a href="Build4.jpg"><img src="resources/images/Buildings4.jpg" height=100 alt="image" /></a></li>
</ul>

Description:

This component creates four images wide grid.

Nav-footer:

NavigateFooter.jpg

code:

  <!footer>
<div id="footer">
<ul class="nav-footer vertical">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="at_a_glance.html">At a Glance</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
<div class="stack" />
</div>
</div>
<! footer ends>

Description:

This component provider footer navigation.


Testing

These sites are tested on S60 5th Edition emulator.

You can test them on your own Nokia high end devices and see what these web components makes the difference.


Downloads / Links

Example 1:

A simple mobile website without using Nokia Mobile Web Templates : File:Constructions.zip

website: http://constructions.99k.org

Example 2:

A mobile website with using Nokia Mobile Web Templates for High end devices

website: http://constructionstemplates.99k.org

References

To learn HTML and CSS or to solve primary errors regarding to them, you can refer various online tutorials. One of them is:

http://www.w3schools.com


Summary

You can create your own mobile website with the help of this article. This article will help you to find out the differences and advantages when using Nokia Mobile Web Components provided by Nokia Mobile Web Templates for high end devices.

This page was last modified on 20 August 2013, at 09:21.
728 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×