How to build a mobile website
Like the early days of the web, support for different functions on mobile devices
varies greatly. That means that there is a whole bunch of details that need to be
considered when designing & developing a mobile website. Knowing what works
and what doesn't will help you make your mobile site accessible to more devices.
We're going to take you through our learnings by way of example to make this less
of a black art. We'll be building a mobile site based on a ficticious hotel called
"The Elemental Hotel". They're looking to showcase their luxurious hotel features
across 3 different pages: a landing page, a features page, and a "book now" page,
which will integrate into their existing booking system.
Through this demo, we'll be referencing recommendations described in our
design considerations page.
Page Layout
To start out, we've got to decide on how our pages are laid out. We're going to
take single column approach.
This will look good on both portrait and landscape phones. So our 3 pages will look
like:
Images, Colors and Fonts
So judging on the design from above, we're going to need 2
images - the hotel logo, and a picture of the hotel. So we'll gather those
images:
We're also going to need to choose the
background color for the site. Typically we try to imitate the existing
web site... so we're going to choose a light blue color:
For our font choice, we're going to stick with good old Arial.
Building the landing page
Lets combine the design above with the images and copy, in simple xHTML.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Elemental Hotel</title>
</head>
<body>
<div class="center">
<img src="http://www.mobileelements.com/Content/img/demo_logo.png" />
</div>
<br />
<div class="center">
<img src="http://www.mobileelements.com/Content/img/demo_hotel.jpg" />
</div>
<br />
<div id="mainText">
Welcome to the Elemental Hotel, where we're proud to be more than a bed.
<ul>
<li><a href="Features.html">Hotel Features</a></li>
<li><a href="Book.html">Book a Room</a></li>
</ul>
</div>
<div id="footer" class="center">
(c) Elemental Hotel 2008
</div>
</body>
</html>
Now we style the page with css:
body
{
background-color: #94b7d5;
padding: 0px;
margin: 0px;
font-family: Arial;
font-size: 12px;
color: #1B0C54;
}
.center
{
text-align: center;
}
#mainText
{
padding-left: 5px;
padding-right: 5px;
}
#footer
{
border-top: 1px solid #1B0C54;
padding-top: 5px;
font-size: 10px;
color: #6d6d6d;
}
If we take a look at our page in a browser, we can see that it looks a little ugly:
So we run it through mobileelements Media Adapter and Css Adapter:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Elemental Hotel</title>
<link href="http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/elemental.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center">
<img src="http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/img/demo_logo.png" />
</div>
<br />
<div class="center">
<img src="http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/img/demo_hotel.jpg" />
</div>
<br />
<div id="mainText">
Welcome to the Elemental Hotel, where we're proud to be more than a bed.
<ul>
<li><a href="Features.html">Hotel Features</a></li>
<li><a href="Book.html">Book a Room</a></li>
</ul>
</div>
<div id="footer" class="center">
(c) Elemental Hotel 2008
</div>
</body>
</html>
And now it starts to feel like a mobile site:
Building the features page
We do the same with the features page:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Elemental Hotel</title>
<link href="http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/elemental.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center">
<img src="http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/img/demo_logo.png" />
</div>
<br />
<div id="mainText">
Our award winning hotel boasts:<br />
<br />
<b>Rooms:</b> For you to stay in!<br />
<b>Pools:</b> For you to swim in!<br />
<b>Bars:</b> For you to drink in!
<div class="center">and</div>
<b>Restaurants:</b> For you to eat in!<br /><br />
<a href="Book.html">Book a Room Now!</a>
</div>
<br />
<div id="footer" class="center">
(c) Elemental Hotel 2008
</div>
</body>
</html>
Which will look like:
Building the book now page
Our final page is a little trickier than the others since it has form elements. There are a number of other considerations we need to be aware of in a form since what we'd usually do in javascript, we have to do server side on a mobile. These considerations include:
So we're going to build a very basic form, that assumingly connects back to Elemental Hotel's booking system, once the form is posted.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Elemental Hotel</title>
<link href="http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/elemental.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center">
<img src="http://www.mobileelements.com/MediaAdapter?key=00000000000000000000000000000000&src=http://www.mobileelements.com/Content/img/demo_logo.png" />
</div>
<br />
<div id="mainText">
<b>Book a room</b><br />
<form action="">
<br />
Name:<br />
<input id="name" /><br />
Phone:<br />
<input id="phone" style="-wap-input-format: 'NNNNNNNNNN';" /><br />
Book Date:<br />
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="year">
<option value="2008">2008</option>
<option value="2009">2009</option>
</select><br />
<br />
<input type="submit" value="Book Now" />
</form>
</div>
<br />
<div id="footer" class="center">
(c) Elemental Hotel 2008
</div>
</body>
</html>
Which will look like:
Note that we followed all of the above mentioned design considerations, including using a standard form submit button, and only allowing 9 digits in the phone number field.
Conclusion
This example is really simple, but it demostrates how easy it is to go mobile.
and here's how it turned out on the iPhone!
All thats left for Elemental Hotels is to deploy this web site to http://m.elementalhotels.com and redirect mobile users using the Mobile Redirector. They could also add a "Click to call" button by using the Xhtml Provider.
Back to top
+