×
Namespaces

Variants
Actions

How to develop an efficent website in mobiles using nokia webtemplates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: visit.nbpatel (29 Oct 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (20 Aug 2013)


Contents

Introduction

Mobile Web Templates are a set of HTML resources that allow to easily build Web pages especially suited for mobile devices.

Mobile Web Templates for High-End devices contain some JavaScript components that allow to create and use interactive elements within a mobile web page.


Purpose of the Document

We can professionally customize our template by adding Templates.

Like,

  • Html Website Templates
  • Flash Website Templates
  • PSD website templates

To handle this template you need to use any editor (like Nokia Web Tools, Dreamweaver) and any graphics editor (like Photoshop, Flash).

The HTML based website templates can be edited in Dreamweaver, Nokia Web Tools, Frontpage, Expression Web or Go Live. Graphics can be edited in Photoshop and Flash can be customized in Adobe Flash. Rollover the thumbnail images to view the enlarged images of the templates and click on the view button to see the live preview of the sites.

Audience

Readers of this document are expected to be familiar with the creation of Web sites, and to have a general familiarity with the technologies involved, such as Web servers and HTTP. Readers are not expected to have a background in mobile-specific technologies.

Our intention is to make it clear to all involved what the Best Practices are, and hence establish a common basis of understanding. As a result of wishing to be clear to those not already involved in the development of mobile friendly content, some of our statements may appear to be obvious or trivial to those with experience in this area.

The document is not targeted solely at developers; others, such as interaction and graphic designers are encouraged to read it.

Scope

In summary, this document refers primarily to the extension of Web browsing onto mobile devices.

As the goal of the document is to specify, that web content accessibility guidelines are general to all forms of Web Templates and are not repeated here unless they have a specific mobile interpretation.

For simple sites that present an interface which is similar across a broad range of contexts the need for such information is diminished when compared with a sophisticated site that has an optimized navigation structure, presents different size images or carries out other adaptations to suit the particular delivery context.

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 Re-usability.

Guide Lines

I feel that it is very important to take the base of these best practices and make it more accessible. With this in mind, our developer starts by describing the mobile landscape in detail, and the importance of the mobile context.

There are code samples and a lot of useful information. We then go on to describe actual techniques for putting together a mobile-friendly site and how to publish it.

This guide is designed for developers who are already familiar with web development in general, but now want to try their hand at mobile.

I'd love to hear your feedback. The more useful comments we get, the better the guide will be. You can leave comments directly on the page linked above or post something in our Forum.

In this article, you will see the various basic views such as the TextView, EditText, Button, and how you can use them in your applications.

Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive. Web Templates make sense speedy development in web design.

Here, we have used Mobile Web Templates for high-range devices in this example.

HTML Document Link (Quick reference)

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like and
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

  • HTML documents describe web pages
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

Forms

A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, Checkboxes, etc.) in a form. A form is defined with the <form> tag.

  <form>
  .
  input elements
  .
  </form>
Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

First name:

  <input type="text" name="firstname" />
Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

  <input type="radio" name="cat" value="Nokia" /> Nokia
Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

  I am agree:
  <input type="checkbox" name="vehicle" value="Bike" />
Button (Submit)

When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

  <form name="input" action="html_form_submit.asp" method="get">
  <input type="submit" value="Submit" />
  </form> 

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

  • Nokia
  • Samsung
Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

  1. Nokia
  2. Samsung

CSS Document Link (Quick reference)

What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

How to Use Styles

There are three ways of inserting a style sheet: External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head> 

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.

  <head>
  <style type="text/css">
  body {background-color: red}
  p {margin-left: 20px}
  </style>
  </head> 

Inline Styles

An inline style should be used when a unique style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

  <tr><td>

This is a paragraph

  </td></tr>


Creating Website With Website Layout

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.

Customized functions

Along using the the default web template components, we have kept some of our very own functionalities in the article which gives an example of upto which extent we can customize the web templates to make an effective website. The following are the couple of functionalities we have added to our website :

  • Advertisment, to the upcoming product for visitors visited this website.

Click this link for viewing this page.

  • Inquiry Form, to directly contact the Query Department, for some query about the product.

Click this link for viewing this page.

In this application I have made use of the mentioned Nokia Mobile Web components(High-Range device):

  • Branding
  • Navigation (Horizontal)
  • Breadcrumbs
  • Boxes (Flat, Rounded)
  • Content (Text formatting)
  • Lists (Unordered, Ordered)
  • Advertisement
  • Tables
  • Grid
  • Form
  • Top/Home
  • Header/Footer
  • Phone/ Fax/ Email Link

Index Page

To visit this page click here.

index.html

Index1p.jpg Index2p.jpg


MARQUEE

   <ul class="breadcrumbs">
<li><marquee><h4>Connecting to the world</h2></marquee></li>
</ul>

LIST

   <ul class="list">
<li class="first"><a href="../library/company_profile_f.html">Company Profile</a></li>
<li><a href="../library/mobile_f.html">Mobile</a></li>
<li><a href="../library/inquiry_form_f.html">Inquiry</a></li>
<li class="last"><a href="../library/contact_us_f.html">Contact Us</a></li>
</ul>

ADVERTISEMENT

   <div class="advertisement">
<span><h4><a href="../library/ipod_f.html">advertisement</a></h4></span>
<div>

Company Profile Page

To visit this page click here.

company_profile_f.html

5company1p.jpg 6company2p.jpg

BRANDING

<div id="header">
<div class="branding">
<a href="http://mobapps.org/scity">
<img src="../resources/images/img-logo.png" alt="Logo" width="150" height="35"/>
</a>
</div>
</div>

BLOCKQUOTE

<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</blockquote>

FLAT BOX

<div class="box-flat">
<form id="form1" method="post" action="">
<fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</fieldset>
</form>
</div>

FOOTER

<div id="footer">
<ul class="nav-footer vertical">
<li class="first"><a href="../library/index.html">Home</a></li>
<li><a href="../library/mobile_f.html">Mobile</a></li>
<li><a href="../library/inquiry_form_f.html">Inquiry</a></li>
<li class="last"><a href="../library/contact_us_f.html">Contact Us</a></li>
</ul>
<p>Copyright &copy; 2009 mobile</p>
<div class="stack" />
 
</div>

Mobile Page

To visit this page click here.

mobile_f.html

7mob1p.jpg 8mob2p.jpg

SLIDESHOW

<div id="slideshow" class="slideshow">
<a class="preview">
<img src="../resources/images/photos/large/loading.png" alt="loading" />
<span></span>
</a>
<ul class="controls nav-horizontal-rounded stack">
<li class="first two-piece"><a class="previous">previous</a></li>
<li class="last two-piece"><a class="next">next</a></li>
</ul>
<ol class="data">
<li>
<a href="../resources/images/photos/large/nokian97mini.png">
<img src="../resources/images/photos/large/nokian97mini.png" alt="nokian97mini" height="120" width="200"/>
</a>
</li>
</ol>
</div>

SIMPLE TABLE

<table>
<caption>
Choose your device.
</caption>
<tr>
<th scope="col">Nokia</th>
<th scope="col">Samsung</th>
<th scope="col">LG</th>
</tr>
 
<tr class="odd">
<td><a href="../library/mobile_specification_f.html">Nokia6233</a></td>
<td><a href="../library/mobile_specification_f.html">SamsungV</a></td>
<td><a href="../library/mobile_specification_f.html">LG200</a></td>
</tr>
 
<tr class="nav-footer">
<td><a href="../library/mobile_specification_f.html">Nokia6100</a></td>
<td><a href="../library/mobile_specification_f.html">Samsung10</a></td>
<td><a href="../library/mobile_specification_f.html">LG300</a></td>
</tr>
</table>

Mobile Specification Page

To visit this page click here.


mobile_specification_f.html

9mobspe1p.jpg 10mobspe2p.jpg 11mobspe3p.jpg

BREADCRUMBS

	<ul class="breadcrumbs">
<li class="first"><a href="../library/index.html">Home</a> &gt;</li>
<li>Profile</li>
</ul>

ROUNDED BOX

<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer" height="5px" align="middle">
<h2></h2><a href="../resources/images/nokian97mini.jpg">
&nbsp;&nbsp;<img src="../resources/images/nokian97mini.jpg" width="250" height="250" />&nbsp;&nbsp;</a><h2></h2>
<div class="rating stars-3"><span>3/5</span></div>
<h3>5-star rating</h3>
</div>
</div>
</div>

TOP & HEADER TABLE

<table>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
</tr>
<tr>
<th scope="row">Dimensions:</th>
<td>113 x 52.5 x 14.2 mm </td>
</tr>
</table>

TOP NAVIGATION

<div class="top">
<a href="#header">Back to top</a>
</div>

Mobile Specification Detail Page

To visit this page click here.


mobile_specification_more_f.html

12mobmore1p.jpg 13mobmore2p.jpg

CONTENT

HTML uses tags for formatting output, like bold or italic text, color.

These HTML tags are called formatting tags.

Here, you can also use any type of .css for the text formatting.

iPod Page

To visit this page click here.


ipod_f.html

3ipod1p.jpg 4ipod2p.jpg


HORIZONTAL BUTTON BAR

<UL class="nav-horizontal-rounded stack">
<LI class="first four-piece"><A
href="../library/index.html">Home</A> </LI>
<LI class=four-piece><A
href="../library/mobile_f.html">Mobile</A> </LI>
<LI class=four-piece><A
href="../library/inquiry_form_f.html">Inquiry</A> </LI>
<LI class="last four-piece"><A
href="../library/contact_us_f.html">Contact Us</A> </LI>
</UL>


ROUNDED BOX

<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer" height="5px" align="middle">
<h2></h2><a href="../resources/images/nokian97mini.jpg">
&nbsp;&nbsp;<img src="../resources/images/nokian97mini.jpg" width="250" height="250" />&nbsp;&nbsp;</a><h2></h2>
<div class="rating stars-3"><span>3/5</span></div>
<h3>5-star rating</h3>
</div>
</div>
</div>

5-STAR RATING

<TR><TD>
<div class="rating stars-3" >
<span>3/5</span>
</div>
</TD></TR>

HOME NAVIGATION

<div class="home">
<a href="../library/index.html">Home</a>
</div>

GRID

<UL class=grid>
<LI><IMG alt=image
src="../resources/images/image1.jpg" width="80" height="80">
<LI><IMG alt=image
src="../resources/images/image5.jpg" width="80" height="80">
</LI></UL>

Inquiry Form Page

To visit this page click here.

inquiry_form_f.html

14inquiry1p.jpg 15inquiry2p.jpg

FORM & BUTTON

For form and button code I mantioned that in the above topic so there were not repeated here.

Contact Us Page

To visit this page click here.


contact_us_f.html

16contactus1p.jpg 17contactus2p.jpg


TELEPHONE & EMAIL

        <p>Tel: <a href="tel:(020) 8563 3000">(020) 8563 3000</a></p>
<p>Email: <a href="info@mobile.org.uk">info@mobile.org.uk</a></p>

Testing

These sites are tested on S60 5th Edition emulators.

You can test them in your own Nokia high end devices and see what the web templates makes the difference.

Website Link

The readers can see the actual website which is built using Nokia Mobile Web Templates by following this link.

For Best view the author recommends to see the mobile website in S60 5th edition devices.

References

Wikipedia.jpg
Website Design Process Steps
List of HTML editors

This page was last modified on 20 August 2013, at 09:12.
148 page views in the last 30 days.
×