How to install Pocket PC emulator on your Windows PC

and make your web site viewable on mobile screen

Contents:
1. How to install Pocket PC emulator on your Windows PC

2. Three columns CSS styles for regular PC browsers

3. One column layout CSS styles for mobile device

1. How to install Pocket PC emulator on your Windows PC

Copyrighted 2010, By Sergey Skudaev Visit my web site www.configure-all.com

Many Internet visitors use mobile devices to access Internet. If you do not want to miss that huge part
of Internet visitors you have to adjust your web site layout for mobile screen. Just to start, install on
your Windows PC a pocket PC emulator and look at your web site.
If you have Windows XP use the following links:
1. Install Active Synch http://www.microsoft.com/windowsmobile/en-
us/help/synchronize/activesync-download.mspx
2. Install Virtual PC 2007, http://www.microsoft.com/downloadS/details.aspx?
FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=en
3. Install Standalone Device Emulator 1.0 with Windows Mobile OS Images,
http://www.microsoft.com/downloads/details.aspx?familyid=c62d54a5-183a-4a1e-a7e2-
cc500ed1f19a&displaylang=en
click the "Instructions" link.
For Windows Vista or Windows 7 install https://codes007.com/windowsmobile/en-
us/downloads/microsoft/device-center-download.mspx
I have Windows XP and will show you details of installation of a pocket PC emulator on Windows
XP. If you have different version of Windows, I hope, it will help you anyway
Active Synch Installation
On the page ActiveSync 4.5 Download, click the Accept and Download button.

The File Download dialog box appears.

1
Click the Run button.

Click the Next button.

2
Accept License Terms and click the Next button.

Enter a username, organization (optional) and click Next button.

3
Do not change default path, click the Next button.

Click the Finish button on the next Finish window.

Select start, All Program, display menu and find the Microsoft ActiveSync. Do not start it yet. Just
make sure that it is installed.

Virtual PC 2007 Installation

On the Virtual PC 2007 web page click the Instructions link or scroll down to the Files in This
Download. Select 32 bit/setup or 64bit/setup.

To know if your Windows are 32 or 64 bit version, right click My Computer, then select properties. If
you don't see "x64 Edition" listed, then you're running the 32-bit version of Windows XP.
Click Download button. When the File Download dialog appears, click Run button.
4
Then click Next button.

Accept License terms and Click the Next button.

5
Enter a username, organization and click the Next button.

Accept default installation path, click the Next and then click the Finish button.

6
Install Standalone Device Emulator 1.0 with Windows Mobile OS Images

On the Standalone Device Emulator 1.0 with Windows Mobile OS Images web page, click
Instructions link and the “Files in This Download” title will be displayed.

Download to your desktop the V1Emulator.zip file, unzip it and double click the
Standalone_emulator_V1.exe to start installation.

Click the Run button, accept terms, and finish installation. Then click Download button for efp.msi
file.

Click the Run button, the Next button, Then the Finish button. When you install all 4 components, you
will see them in the start menu:

7
Create a virtual Machine

Start Microsoft Virtual PC. The Virtual PC console is displayed.

Click New button. “Welcome to the New Virtual Machine Wizard” window is displayed.

8
Click the Next button. Create a virtual machine windows is displayed.
By default, Create a virtual machine option is selected.

Click the Next button. The “Virtual Machine Name and Location” window is displayed.

9
Enter a virtual machine name and click the Next. Select Virtual OS window is displayed.

Select Other and click the Next. Complete the New Virtual Machine Wizard window is displayed.

Click the Finish button.

Setting for window is displayed. Click OK. Virtual PC Console window is displayed.

10
Click X in the upper right corner to close the window. Virtual PC Console window is closed.

Click Start, Microsoft ActiveSync. Microsoft ActiveSync window is displayed.

Click Start, Microsoft Windows Mobile 5.0 MSFP Emulator Images, and Select Device Emulator
manager.

The Device Emulator manager window is displayed.

11
Click Start, Microsoft Windows Mobile 5.0 MSFP Emulator Images, Pocket PC ColdBoot. Pocket PC
is displayed.

On the Device Emulator manager window click Refresh button.

Select record in curly brackets { } and click right mouse button. Select Cradle from drop down menu.

On the ActiveSync window click File, Connection setting.

12
The Connection setting window is displayed

Mark all check boxes and Select DMA under check box "Allows connection to one of the following:".
Select "Internet" in the "This computer connected to" drop down list. Click Connect button.

Two messages will display about mail. Just click OK. Get connected window displayed.

13
Click the Next button. The Synchronization Setup Wizard window is displayed

Click The Next button. The Synchronization options window is displayed.

14
Unmark all check boxes and click the Next button. Finish synchronization and saving setting window
is displayed

The ActiveSync window displays connected and synchronized text.

15
Select Pocket PC and click Start from the main menu. Select Internet Explorer.

16
Internet Explorer is displayed. Type http://www.google.com and click a curved arrow on the right.

Google page is displayed!

Click File, Save and exit. Pocket PC is closed. Start it again. Google page still is displayed!

WE GOT IT!!!

Now you can type URL of your web site and see how it looks on the mobile screen!

Caution: If you need to reboot Pocket PC, select File, Reset, Soft. Your setting and software (if
any additional installed on your pocket PC will be saved. If you select hard reset, your setting
and additional software installed on your pocket PC will be erased

Install NET Framework 2.0 SP2 and NET COMPACT FRAMEWORK 2.0 SP2 on you PC and when
you will synchronize your pocket PC, NET COMPACT FRAMEWORK 2.0 will be installed on your
pocket PC.

17
2. Three columns layout CSS styles for PC browsers.

An example of the same page viewed in Firefox and Pocket PC Emulator IE browser.

18
First, let us create 3 columns layout for a regular browser in such a way that in HTML file the
middle column content would come first, and then would come right column or left column.
I use left column for Google ads and right column for navigation that is why I place right column
before the left column. It is hard to understand from the picture. Let me explain you how I achieved it.

First, I created a page div (yellow). Inside it, I placed a header div, a content (green) div and a footer
div. Inside the content (green) div, I put the middle-right (red) div float: right. Inside the red middle-
right div I put the middle div float: left. That way, content of the middle div is coming first.
Below the middle div, I put the right div float: right; and closed the red middle-right div.
Below the middle-right red div, I put the left div float: left and closed the content div.
In other words, inside the content div I put two divs: the middle-right div float: right and the left div
float: left. But in HTML file before putting content of the left div, I put two divs inside the middle-
right div: the middle div (float: left) and then the right div (float: right). Then I closed the middle-
right div. Then I put the left div floating left. Closed the content div. Put footer div and closed the
page div. The whole page architecture is shown below without any contents.

19
<div id=”page>
<div id=”header”>
</div>
<div id=”content”>
<div id=”middle-right”>
<div id=”middle”>
</div>
<div id=”right”>
</div>
</div>
<div id=”left”>
</div>
</div>
<div id=”footer”>
</div>
</div>

Here, I give you real page architecture. The page has content, Google ad on the left and navigation on
the right column. Usually, navigation is located on the left column. I placed it on the right because
visitors make much more clicks on the ad if it is placed on the left column. I performed experiments
with different ad location and for my site the left column for ads works much better than the right.

HTML PAGE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mobile CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="title" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="owner" content="Serge Skudaev"/>
<meta name="author" content="Sergey Skudaev"/>
<meta http-equiv="content-type" content="text/html; charset=windows-
1251"/>
<meta name="robots" content="noindex,nofollow"/>
<meta name="revisit after" content="2 weeks"/>
<link href="cstyle.css" rel="stylesheet" type="text/css" media="Screen"/>
<link href="mobile.css" rel="stylesheet" type="text/css"
media="handheld"/>
</head>
<body>
<div id="page">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="middle_right">
<div id="middle">
<h1>Introduction to Programming</h1>

20
 <p>Programming in PHP, as programming in any
computer languages or scripts is not as impossible as you may think. An
average person can master computer programming. You maybe think that to be
a good computer programmer you should be very good in math, but it is not
necessary true.</p><p>I, was a biologist in my country and when came to
US, computer programmers were in great demand. All immigrants, regarding
their previous background rushed to learn computer programming. I was
hesitated, because I thought biology and computer programming are to
different, but my wife convinced me that I could master computer
programming and I grateful to her, because I love programming much more
than biology. I became addictive to programming.</p>
<p>You do not have to be good in math to be good in computer programming.
It was noticed that among immigrants musicians appeared a good
programmers, probably, because they used to write music in notes and it is
coding.</p>
<p>Actually, programming is closer to packaging than to math. You are
surprise that I compare programming with packaging? Yes, it is similar and
I will show you how.</p>
<p>Any programming language deals with variables. Variables are used to
hold different pieces of data. What is a variable? You may think of a
variable as of a packaging box. Different type of data required different
type of boxes. In computer programming we have to deal with numbers and
text. So we have to use variables that hold numbers and pieces of text or
strings of text.</p>
<p>There may be whole numbers and numbers with fractions. Variable that
holds the whole number is called INTEGER. Variable that holds number with
decimal points is called float or double.</p>
<p>Variable that holds a piece of text is called string. Any program
usually starts with declaration variables and their data types. For
example, in C++ or Java you have to declare variable name and exact data
type:</p>

</div>
<div id="right">
<?
Include('menu.php');
?>
</div>

</div>
<div id="left">
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>

21
menu.php

<?
print('<ul>');
print('<li><a class="menu" href="http://www.configure-all.com/learn_sql.php">Learn SQL</a></li>');
print('<li><a class="menu" href="http://www.configure-all.com/visualc.php">Learn C++</a></li>');
print('<li><a class="menu" href="http://www.configure-all.com/start_java.php">Learn Java</a></li>');
print('<li><a class="menu" href="http://www.configure-all.com/start_vb.php">Learn Visual
Basic</a></li>');
print('<li><a class="menu" href="http://www.configure-all.com/starting_yourown_website.php">Web
Site Tips</a></li>');
print('<li><a class="menu" href="http://www.configure-
all.com/batch_files.php">Miscellaneous</a></li>');
print('</ul>');

?>

Regular CSS: style.css

html {
font-size:100%;
}

body {
border:0;
width:100%;
background:#fff;
text-align:center;
margin:0px;
padding:0px;
font-size:85%;
}

DIV#page {
top:0;
margin-top:0px;
margin-right:auto;
margin-left:auto;
text-align:left;
width:950px;
padding:0;
background:#ff0000;
margin-bottom:0px;
}

DIV#header
{
height:120px;
width:950px;
text-align:center;
background:#ffff00;
}

DIV#content {
position:relative;
top:0;
text-align:left;
width:950px;

22
height:900px;
background:#ff0000;
margin:0
}

DIV#middle_right {
float:right;
width:770px;
height:900px;
padding-left:0px;
padding-right:0px;
margin:0;
background:#00eeff;
}

DIV#middle {
float:left;
top:0;
width:555px;
height:900px;
padding-top:1px;
margin-left:0px;
margin-right:0px;
background:#cyan;
margin-bottom:0;
padding-left:25px;
padding-right:10px;
}

DIV#left {
float:left;
width:159px;
height:900px;
color:#ffffff;
background:#993366;
padding-left:10px;
padding-right:10px;
margin:0;
}

DIV#right {
float:right;
width:159px;
height:900px;
padding-left:10px;
padding-right:10px;
margin:0;
color:#ffffff;
background:#465D7C;
} I set the footer margin-top to – 20px because for some
unknown reason in Firefox the footer was displayed 20px
DIV#footer {
margin-top:-20px; lower than my 3 columns bottom edge. As a result, the
padding-top:20px; content of the footer was moved up. To fix it, I set
width:950px; padding-top to 20px. That way negative margin and
height:90px; positive padding cancel each other and footer content is
background:#9999ff; displayed as if it does not have margin and padding.
}

23
h1 {
font-size:150%;
color:#465D7C;
font-family:Arial, Helvetica, sans-serif;
}

h2 {
font-size:100%;
color:#465D7C;
}

li {
list-style-type:none;
line-height:120%;
font-size:83%;
color:#ff9966;
}

ul li a.menu {
color:#dddddd;
font-family:Verdana, sans-serif;
font-size:83%;
background:#465D7C;
text-decoration:underline;
}

li {
list-style-type:none;
line-height:120%;
font-size:82%;
color:#ff9966;
margin-left:-40px;
padding-left:5px;
}

It is important to set the same background color for left div, right div and middle_right div in
production version. That way you do not have to set height for any div except header and footer.

The length of the page div, content div, middle_right div and middle div will be determined by length
of your main contents. If the left and right columns contents are shorter than main contents, page div
will be seen under the left div and middle_right div will be seen under the right div, but if you set the
same background color for all of them, then they will not be seen. On my site www.poetry-
anthology.com I leave middle column white and for all the rest divs I set background color to
#465D7C;

3. One column layout CSS styles for mobile device

Mobile CSS

Since, mobile browsers do not support floating blocks, in mobile.css, I set all blocks to position:
absolute. The left properties for all blocks were set to 0px. The header height was set to 12px, and the
middle column top to 12px; as well, so that it would be displayed right away after the header. The left
block and the footer block are set to display: none. So, they are not displayed. The whole mobile.css
file is displayed below.

24
DIV#header
{
position:absolute;
left:0px;
top:0px;
height:12px;
text-align:center;
background:#ffff00;
}

#middle {
position:absolute;
left:0px;
top:12px;
padding-left:5px;
margin-left:10px;
padding-right:0px;
margin-right:0px;
}
#right {
position:absolute;
left:0px;
padding-left:0px;
margin-left:0px;
background:#993366;
}

#left {
display:none;
}

#footer {
display:none;
}

li {
list-style-type:none;
line-height:120%;
font-size:83%;
color:#ff9966;
}

ul li a.menu {
color:#dddddd;
font-family:Verdana, sans-serif;
font-size:77%;
background:#993366;
text-decoration:none;
}
table {
align:left;
width:200px;
}

li {
list-style-type:none;
line-height:100%;

25
font-size:120%;
color:#ff9966;
margin-left:-40px;
padding-left:5px;
}

a.menu2:visited {
font-family:Arial, Helvetica, sans-serif;
color:#336699;
font-size:85%;
text-decoration:underline;
background:#C898B2;
}

a.menu2:hover {
font-family:Arial, Helvetica, sans-serif;
color:#465DBB;
font-size:85%;
text-decoration:underline;
background:#C898B2;
}

a.menu2:link,a.menu2:active {
font-family:Arial, Helvetica, sans-serif;
background:#C898B2;
color:#336699;
font-size:85%;
text-decoration:underline
}

h1, h2, h3{font-size:77%; font-family:Arial, Helvetica, sans-serif;

color:#993366;}

You can change background colors and font colors for all blocks to what ever you like. I made them
different in color on purpose, so that you could better see each block (div). You can play with font
sizes as well and choose what is better for you. Be creative! Good Luck!

Visit my web site www.configure-all.com for similar articles

26
Copyrighted 2010, By Sergey Skudaev

27