MAKING A SITE ACESSABLE 4 SMARTPHONES

[Guest kingdom master]

Pocket IE on the Smartphone

please take in mind, some of what if written in here is for newer smartphones like jvm build, however this is meant to cover all smartphones to some changes will be needed for certain phones.

If someone browsed your website on the Microsoft Smartphone, what do you think it would look like?

Suitable for Smartphones And this isn't!

The Microsoft Smartphone comes with Pocket Internet Explorer 2002 which in Microsoft's words allows access to rich internet content. Looking at the 176x220 pixel screen probably tells you that viewing 99.999% of the internet is going to be difficult / annoying / impossible. There are two reasons. Firstly, the screen is small. Scrolling over a page intended for a PC or even a Pocket PC is like looking at pictures in an art gallery through a toilet roll tube. Secondly, Pocket Internet Explorer 2002 (pIE) is cut-down to have the following specification -

An HTML engine conforming to W3C HTML 3.2, as found in IE3.02.

JScript 1.1 support as found in IE4.0.

An XML engine - MSXML 2.5 as found in IE5.0.

SSL 2.0 & 3.0 - 128bit, cookies, forms, ActiveX components (user-installed only and no Authenticode) support.

NO client side VBScript.

NO DHTML (except for InnerText & InnerHTML).

NO Java Virtual Machine - so no Java Applet support by Microsoft. Third Party JVM's are available.

NO Cascading Style Sheets (CSS) or Frames (TARGET will not function).

NO multiple windows. window.open() will open in existing window, if user initiated. Automatic pop-up windows will not function.

HTML tags need to be well-formed and paired, pIE performs less auto-correction.

This guide is to help you design pages for Smartphone users to browse. Perhaps you want to create online content or just want your existing pages to be accessible. This needn't be a long tiresome task, involving complete re-writes of pages and as you will see, simple HTML is actually favoured.

Images and Screen Widths

An image is worth a thousand words and also several thousand bytes. Careful consideration will have to be taken on the necessity of any images. The bandwidth available on Smartphones is reduced and large images would require a lot of scrolling. In fact pIE automatically reduces large images to try and fit them if you choose this option, look at the 'Sophonix.com' banner on the top right picture, it's been resized.

The message is to avoid unneccesary images. If you want images, then it's best to create small gif versions and at this point it's time to talk about screen widths. Microsoft talk about the Smartphone having a 176x220 screen throughout their SDK. In fact, in a table of specifications they also mention 160x240 and 208x240. You may want to ensure that any fixed width elements (images, tables...) are set to be less than 160. If it's too large, the dreaded 'horizontal scrollbar' will appear. Never design a page with horizontal scrolling above the minimum screen width, ever. And that goes for PC viewed websites too. The diagram below shows the dimensions of typical page elements. It's fair to say that these dimensions will apply to most MS Smartphones.

It's worth mentioning at this point that pIE has a 'Fit To Screen' option which is turned on by default. When it's off, it renders everything to a 640 pixel width virtual screen. This tends to mess up tables, by ignoring the width= attribute. Users will have the feature turned on permanently probably as it introduces a horizontal scrollbar and is only of use when items must be viewed full size like large images. The

tags are ignored when 'Fit To Screen' is on and Microsoft suggest using a transparent 1x1 gif and setting width and height attributes to get the spacing you want.

The important thing to note is the content area size and the scrollbar width - 5 pixels. The largest fixed width element visible without a horizontal scrollbar appearing would be 5 pixels less than the screen width, i.e. 155 or 171.

The Smartphone is designed to have 65,000 colours, but this doesn't mean you have to use all of them. For simple graphics a good saving can be made by converting to 256 colours and saving as a gif. Use an error diffused, optimised palette and you'll probably not notice much change. Small images in gif format are often smaller than jpgs, and tend not to lose anything to compression artifacts. Try both and see how much file size you save. By the way, animated gifs won't work, only the first image will be displayed. pIE does however allow a decent range of image formats: png, jpg, gif, wbmp, 2bp and bmp.

Design Considerations

The mid-nineties are back! If your designing web pages for the Smartphone that is. Frames are out (good thing too). If your page features a tag, then pIE will read this, otherwise forget them. Image maps won't work either - these like frames, would be difficult to navigate on the phone. The key thing to bear in mind is that users will be viewing your pages by vertically scrolling. Sophonix has the navigation links above each other. They could have been arranged horizontally, but a user will be able to navigate giving them focus whilst vertically scrolling. It's up to you if you arrange links horizontally, there's no big disadvantage. Links are probably best kept to words rather than images and tend to be easier to spot. pIE gives links focus as you can see below.

Vertical navigation

The title of your pages has a limited amount of room and will vary depending on the icons present. Perhaps just the name of your site or company. If this is present on every page, users will know when their on your site and when they've left.

Background images if used, should be simple and not affect the readability of the page. A dim watermark image that doesn't scroll can be effective.

The loss of cascading style sheets (CSS) is a blow, as they are rather useful and save a lot of coding. The Smartphone comes with one font installed - Nina, available in several sizes including bold.

The Nina font on the Smartphone, sizes 1 to 7, normal, bold & italic (avoid!).

The thing to bear in mind when producing a Smartphone version of your site is not to be tempted into trying to make a smaller version that includes everything, it isn't a technical challenge. Key colours and one or two graphics should be enough to give a familiar feel. Concentrate on the information that your trying to convey.

Client Side Script, Java, ActiveX, Forms

VBScript is absent, so all client-side scripting will be javascript(ECMA-262) or rather JScript 1.1. JScript on pIE is NOT case sensitive, be aware if you test it on a full scale browser. Scripting errors are turned off by default, if you want them on then it's a trip to the registry :

HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMainShowScriptErrors = dword:00000001

There is no Java Virtual Machine supplied by Microsoft, third party JVM's are available and some Smartphone manufacturers will include them (Sendo use Intent Tao Java on the Z100).

ActiveX is supported but controls will not be downloaded and installed by pIE. Instead, users will need to choose to download and install them. This could for instance be in the form of a CAB file linked on your web page. There is no Authenticode support for signed ActiveX controls. The only real reason for using ActiveX controls would probably be for a specific application to be used by specific users. They are not affected by 'Fit To Screen' and need to be designed to be the correct width.

Applications for the Smartphone are meant to be designed with vertically stacked controls, so a user can scroll and navigate to each. Forms should therefore be designed in the same manner. Controls such as text boxes are rendered to be no bigger than the width of the page and in the style of controls seen in applications. Note that buttons are only supported in pIE on the Smartphone. The example below shows how this Form appears on a Smartphone:

How a form is rendered on the Smartphone

XML

XML support on the Smartphone is similar to IE5 except for the following -

No backward compatibility with IE4 XML DOM.

No Data Binding support - due to HTML limitations on the Smartphone.

No Cascading Style Sheet (CSS) elements or attributes within Extensible Stylesheet Language (XSL).

Microsoft give examples in the Smartphone SDK, of how you can parse XML with applications written in embedded Visual C++ (eVC) and embedded Visual Basic eVB), despite the fact that the eVB apps aren't supported on the Smartphone (that's what happens when you copy and paste from the Pocket PC SDK!). They also give an example of parsing XML using JScript on a web page which isn't particularly appropriate for Smartphone use and doesn't work.

Invoking Smartphone Content

So how do you know when someone's browsing your site with pIE on a Smartphone? Everytime a browser requests a page from a server, it sends out HTTP header information. One of the items is User Agent, this is basically the identity and version of the browser your using. All browsers should have their own User Agent information to uniquely identify them. Here is the User Agent string for pIE on the Smartphone:

; Smartphone 2002 (code-name: Stinger)

Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; Smartphone; 176x220)

The key piece of information for us is 'Smartphone'. The resolution may also be handy if you need to tailor your content for the screen size.

There are two places where you can deal with the User Agent detection, the server and the client. Some Examples of script that you can use in your pages follows.

Server Side Script

Server-side scripting is the best solution as you can decide what HTML to send and therefore avoid sending unnecessary code to the Smartphone. Scripting using active server pages (asp) and PHP4 is shown below.

Client Side Script

Client-side scripting involves sending the entire page including the code for normal browsers, unless you use a redirect and send the browser to the page containing the appropriate content:

Testing your pages

So now you want to see your pages on a Smartphone browser. You could use IE on a PC, but pIE has been cut-down and you probably want some assurance that features are visible in a manner your expecting. The Microsoft Smartphone SDK is available from the Microsoft Mobile pages. If you do have the SDK you can set-up the emulator to browse the internet. Here is one method that has been found to work:

1. Go to 'Settings' and choose '7 Data Connections'.

2. Choose 'Edit Connections' from the menu.

3. Choose '3 Proxy Connection'.

4. Choose 'Add' from menu.

5. Give the connection a description.

6. Choose Connects from 'My Corporate Network'.

7. Choose Connects to 'The Internet'.

8. Leave the other options.

9. Click Done until your back at the Data Connections screen.

10. Choose Internet Connection - 'Ethernet'.

11. Click Done until you get back to the Programs list

12. Browse the internet, try www.sophonix.com.

This method works for many people, you may need to already be connected to your ISP if you use a dial-up connection.

download code here:

code

KINGDOM

[Guest Monolithix [MVP]]

Nice little guide there.

Moved to the new Articles forum as it seems to be more relevant there than Off Topic.

[Guest HelloDave]

One small thing...

Image maps won't work either

AFAIK they do work on the SPV - click on an image map and a crosshair cursor will appear over the image, allowing you to select which part you want to click on.

[Guest axe]

i have a question not answered here ...

Instead, users will need to choose to download and install them. This could for instance be in the form of a CAB file linked on your web page.

I tried linking to the tetris.cab on my webpage, but when i click it on my spv browser, I get gibberish on my screen .. i.e. the file is being opened as text !!! .... Is it possible to offer CABs for direct download ?

[Guest Monolithix [MVP]]

Only by getting your host to configure their webserver properly...

[Guest axe]

well ... i'm the admin of the webserver since its running on my own machine ....

so what do I have to change on the server ?

actually it could be that it will work fine on my home server... i just remembered that when i was testing this it was on my mates server running apache... so that could be the prob.

(I am now running w2k with IIS and all latest updates.. will that just work out of the box, or should i make adjustments ???)

[Guest Monolithix [MVP]]

Not sure about IIS, however with Apache you need to add .cab to the appropriate directive in the http.conf as a downloadable file format. I can't remember specifics though sorry...i'll have a play this afternoon if i get time...

[Guest axe]

ah .. i think there's something similar in IIS ... where I can configure how it handles certain filetypes ....

will also have a look and when my site is done I will post a link ! (will take me a while, I'm a lazy bastard)

[Guest kingdom master]

wow, didnt know this topic was stil running,lol

[Guest burnman]

Do you have an example html code. especialy the pixel ruleDo you have an example html code. especialy the pixel rule

[Guest darant]

right, so how is a page or site converted like this forum is on a smartphone from full pc style?

Posted from my SmartPhone!

[Guest NikLP]

*bump*

as a web developer, I'm very interested in the contents of this thread!

Doesn't anyone have any more info than this? - Not that I'm ungrateful, you understand! :lol: I would be especially interested to know more about how MoDaCo is running phpbb thru two different servers, one for smartphone...

Anyone?

Nik

[Guest Will]

it's a custom phpbb i think, mapped to a subdomain and has redirects etc.

More info.. i'd speak to Paul

Will