MAKING A SITE ACESSABLE 4 SMARTPHONES |
![]() ![]() |
MAKING A SITE ACESSABLE 4 SMARTPHONES |
Mar 2 2003, 22:52
Post
#1
|
|||
![]() Diehard Group: Posters Posts: 453 Joined: 20th December 2002 From: london Member No.: 1,295 |
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
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 -------------------- FREE GMAIL EMAIL INVITES, PM OR EMAIL ME 15 AVAILABLE
FREE ORKUT INVITES AVAILABLE FREE WRITELY INVITES AVAILABLE Also visit WWW.BLOGSTUFF.CO.UK for your blogging needs 250,000 people a month cant be wrong visit and register now!! [img]http://qrcode.kaywa.com/img.php?s=8&d=http%3A%2F%2Fwww.blogstuff.co.uk[/img] |
||
|
|
|||
|
Mar 2 2003, 23:32
Post
#2
|
||
![]() Moderator - Boing! Group: Admin Team Posts: 8,557 Joined: 12th December 2002 From: Guildford, UK Member No.: 993 Device(s): HTC TyTN II |
Nice little guide there.
Moved to the new Articles forum as it seems to be more relevant there than Off Topic. -------------------- This months MoDaCo WinMo Week device: the MWg Zinc II! Ask your questions HERE and download the show here! 2.25GB of backup storage online for free with Mozy! - https://mozy.com/?ref=VQ664H |
||
|
|
|||
Apr 29 2003, 15:05
Post
#3
|
|||
![]() Addict Group: Posters Posts: 752 Joined: 5th December 2002 From: Bournemouth, UK Member No.: 738 |
One small thing...
QUOTE 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. -------------------- Andy
Now on spv number 3! "The good news is i've been promoted. The bad news is, some of you are going to lose your jobs. Still, every cloud..." (David Brent) |
||
|
|
|||
May 5 2003, 15:27
Post
#4
|
|||
|
Enthusiast Group: Posters Posts: 175 Joined: 26th April 2003 Member No.: 5,071 |
i have a question not answered here ...
QUOTE 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 ? -------------------- |
||
|
|
|||
|
May 5 2003, 16:45
Post
#5
|
||
![]() Moderator - Boing! Group: Admin Team Posts: 8,557 Joined: 12th December 2002 From: Guildford, UK Member No.: 993 Device(s): HTC TyTN II |
Only by getting your host to configure their webserver properly...
-------------------- This months MoDaCo WinMo Week device: the MWg Zinc II! Ask your questions HERE and download the show here! 2.25GB of backup storage online for free with Mozy! - https://mozy.com/?ref=VQ664H |
||
|
|
|||
May 8 2003, 12:56
Post
#6
|
|||
|
Enthusiast Group: Posters Posts: 175 Joined: 26th April 2003 Member No.: 5,071 |
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 ???) |
||
|
|
|||
|
May 8 2003, 13:00
Post
#7
|
||
![]() Moderator - Boing! Group: Admin Team Posts: 8,557 Joined: 12th December 2002 From: Guildford, UK Member No.: 993 Device(s): HTC TyTN II |
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...
-------------------- This months MoDaCo WinMo Week device: the MWg Zinc II! Ask your questions HERE and download the show here! 2.25GB of backup storage online for free with Mozy! - https://mozy.com/?ref=VQ664H |
||
|
|
|||
May 23 2003, 08:18
Post
#8
|
|||
|
Enthusiast Group: Posters Posts: 175 Joined: 26th April 2003 Member No.: 5,071 |
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) -------------------- |
||
|
|
|||
Nov 17 2003, 17:57
Post
#9
|
|||
![]() Diehard Group: Posters Posts: 453 Joined: 20th December 2002 From: london Member No.: 1,295 |
wow, didnt know this topic was stil running,lol
-------------------- FREE GMAIL EMAIL INVITES, PM OR EMAIL ME 15 AVAILABLE
FREE ORKUT INVITES AVAILABLE FREE WRITELY INVITES AVAILABLE Also visit WWW.BLOGSTUFF.CO.UK for your blogging needs 250,000 people a month cant be wrong visit and register now!! [img]http://qrcode.kaywa.com/img.php?s=8&d=http%3A%2F%2Fwww.blogstuff.co.uk[/img] |
||
|
|
|||
Nov 19 2003, 11:13
Post
#10
|
|||
|
Newbie Group: Posters Posts: 14 Joined: 14th October 2003 Member No.: 18,272 |
Do you have an example html code. especialy the pixel ruleDo you have an example html code. especialy the pixel rule
|
||
|
|
|||
Dec 7 2003, 22:53
Post
#11
|
|||
|
Newbie Group: Posters Posts: 22 Joined: 12th March 2003 From: uk Member No.: 3,417 |
right, so how is a page or site converted like this forum is on a smartphone from full pc style?
Posted from my SmartPhone! |
||
|
|
|||
Jan 23 2004, 16:11
Post
#12
|
|||
|
Addict Group: Posters Posts: 551 Joined: 21st July 2003 From: Nottingham Member No.: 10,516 Device(s): M3100 |
*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! Anyone? Nik |
||
|
|
|||
|
Jan 31 2004, 00:33
Post
#13
|
||
![]() Retired Group: Members Posts: 1,709 Joined: 7th December 2002 From: Milton Keynes, England. Member No.: 857 Device(s): c600 |
it's a custom phpbb i think, mapped to a subdomain and has redirects etc.
More info.. i'd speak to Paul Will -------------------- Phones:
SPV-C600 - MoDaCo Special Edition SPV-M5000 - Prize! SPV M-2000 - Ebook Reader 3g: Orange MOC |
||
|
|
|||
![]() ![]() |
Similar Topics
| Topic | Replies | Topic Starter | Views | Last Action | |
|---|---|---|---|---|---|
![]() |
Cannot find 6.1 on HTC Site - Even after registering. | 13 | Sonicr360 | 3,403 | 11th August 2008 - 15:47 Last post by: mrc3 |
![]() |
No sound via earpiece when making calls! | 2 | djleekee | 447 | 11th August 2008 - 15:33 Last post by: djleekee |
![]() |
making the scroll wheel more sensitive | 3 | pk_volt | 527 | 19th August 2008 - 13:29 Last post by: MI 99XPL |
![]() |
Vodafone Bus. site now says "Launch expected in September" it definately used to say "august" |
0 | WILBUR | 138 | 26th August 2008 - 15:41 Last post by: WILBUR |
![]() |
News and US Election site designed for HTC Diamond | 0 | -Guest_John_*- | 58 | 31st August 2008 - 00:36 Last post by: -Guest_John_*- |
![]() |
how do I stop it locking the screen when I'm making calls | 1 | Fizz_daz | 179 | 4th September 2008 - 11:06 Last post by: Davman |
|
Lo-Fi Version | Time is now: 7th September 2008 - 02:16 |
Please visit our 'Plus Partners' - these companies support MoDaCo through 'MoDaCo Plus' - Click Here for more details!
VITO Technology | Slipstream Solutions | Aiko Solutions | PDAMill | Inesoft | SBSH | LingvoSoft | Ruttensoft | Astraware | MadBeetle | Sprite Software
Opera | Westtek | TetraEdge | Z4Soft | KBM Systems | Conduits | Mini Lyrics Magic | Proporta | Semsons | SyncData | Active Kitten | Binaryfish | Textr
SPB Software House | Omega One | OmniSoft | Resco | eSoft Interactive | TenGo | ATEKsoft | imei-check | GpsGate | SplashData | DeveloperOne | monocube
WebIS, home of Pocket Informant, FlexMail and Note2Self
Would your company like to become a 'Plus Partner'? Click Here to contact us!