How to get maximum compatibility with most of the devices for a Mobile Website?

StackOverflow https://stackoverflow.com/questions/5813138

Question

I made separate site for Smartphone and now Need to make separate site for other old mobiles. How to get maximum compatibility with most of the devices of a Mobile Website on old/small screen mobiles?

enter image description here

I'm thinking to use

This doctype for HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

AND only selectors and properties which are supported CSS Mobile Profile 2.0

  • Images should not be used much and No transparent images should be used
  • Javascript is not supported in old mobiles
  • Some CSS 2.1 selector are not compatible in old browsers
  • Layout should be without fixed width because Various screen sizes are there
  • It's good to not to use external CSS. CSS inside would be good
  • HTML 5 doctype will not be supported so I will use XHTML Basic 1.1
  • No width and float should be defined for any element
  • http requests should be very less
  • No font-family should be defined

I'm not sure on some things?

  • Should I use CSS sprites if possible?
  • Should I make the layout in instead
  • Is inline CSS better than external CSS?
  • Should I use any css reset code at the strating of the css?
  • Should i use utf-8 or ISO?
  • Is it possible to use form validation?
  • Should i not give any link which opens a new window?
  • Is it necessary good to use use em in place of px for font-size?

Are my points good enough?

Although I'm going to read http://www.w3.org/TR/mobile-bp/ in details and I also checked http://html5boilerplate.com/mobile/ but it's for all including Smartphones+ but some things are useful

Smartphone Front-end Matrices https://spreadsheets.google.com/spreadsheet/ccc?authkey=CJPSkfwO&pli=1&hl=en&key=tLen0XZBVTziVZBzwwQFxlw&hl=en&authkey=CJPSkfwO#gid=0

Cell Phone Screen Resolution, sorted by brand and model http://cartoonized.net/cellphone-screen-resolution.php

But What other thing you will suggest to consider on you personal experience, Are there any tips?

Was it helpful?

Solution

Why u using <?xml version="1.0" encoding="UTF-8"?> ?? This is a xml header,not html.

About the questions:

  • Images should not be used much and No transparent images should be used

You can use transparent GIF, they are somewhat supported. Transparent Png however, not.

  • Javascript is not supported in old mobiles

It's not that is not supported. The first thing is that JS is always disabled by default on old browsers. The second problem is the buggy implementations of JS. The third factor is that old mobiles had limited resources, and since JS is client-side, it might crash/slowdown the phone.

  • Layout should be without fixed width because Various screen sizes are there

On mobile, the tip is ALWAYS go with fluid layouts (% based)

  • It's good to not to use external CSS. CSS inside would be good

Inline css is the best on old devices, since most of them have problems with too many requests or when applying the styles to the dom. Remember they use EDGE or even worse, WAP connections, that are almost as bad as dial-up.

  • HTML 5 doctype will not be supported so I will use XHTML Basic 1.1

You can use XHTML basic or even better, <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

  • No width and float should be defined for any element

Width, always on %. Float, never. Up until S60 3rd FP1, floats were buggy on Symbians. (N73 runs on S60 3rd and float is buggy. On N95' S60 3rd FP1, the float was fixed on most of the uses but still bug one time or another, depending of use). The same applies to position absolute and fixed.

  • http requests should be very less

Reduce when possible. More requests, more times the crappy wap/edge needs to go get something, and more time loading.

  • No font-family should be defined

Family and size are two things that are annoying with old devices. Most of them got their own fonts and sizes. For example: Motorola V3R/ RAZR V3 got it's own font, with only one size (each letter is around 7~9px of screen if i remind correctly). But you can declare Arial since it's a common font and will be used when the browser have it.

  • Should I use CSS sprites if possible?

Avoid at all costs. While reduce the number of requests, you hit on other problem: Your layout will be fluid, and background-position normally messes up when using percentages. And old Blackberries loves to bug with background-image.

  • Is inline CSS better than external CSS?

In my oppinion, yes. Since connection and rendering are both slow, if your css file timeout for whatever reason, the (already bad) layout will be worse.

  • Should I use any css reset code at the strating of the css?

I used to use YUI's one but on really old browsers (again V3r and near) simply does not make so much difference. But it's good when you are showing to clients :P

  • Should i use utf-8 or ISO?

Really depends how your content is. If you encode all html entities (when using latin characters, for e.g.) go for UTF-8. If you don't encode, try ISO. But anyways, old browsers force it's own encoding. Check N95's browser for e.g., you can set your own encoding, thus messing with the html's one.

  • Is it possible to use form validation?

Avoid JS when possible, always go for server-side.

  • Should i not give any link which opens a new window?

Old browsers have no 'tab' support, so even if you specify as target="_blank", it will open on top of your current page. I don't remind when but S60's browsers do support tabs, but is kinda a hidden feature. For e.g., N95 S60 3rd FP1 webkit browser does not allow you to open link on new window, but will open a new tag if _blank is used. And to cicle through the 'tabs', you need to press '5' key.

  • Is it necessary good to use use em in place of px for font-size?

It's good for accecibility reasons, when you have a script to increase font-size (those A-/A+ icons). But as i said on the No font-family should be defined question.

Some tips:

= Most old blackberry browsers are crap, much worse than IE5-6. So, for e.g. if you want to have 5px left/right margin on your main container so it can be shown as 'centered', give up from margin:0 5px; and go for border-left:5px solid #same_bg_color;border-right:5px solid #same_bg_color; Sad but it's what RIM made :/

= Always try your layout be the most vertical as possible. Don't stack too many stuff in the same line.

= ALWAYS make navigation anchors in middle of text. Old devices navigates jumping from anchor to anchor (or a 'pseudo-mouse' in S60+), so if you get to the end of the page, you gotta press 'Up' tons of times. Avoid it by creating 'Go to Top' or even better, create the same top menu on the footer.

= Don't mess with fonts on mostly of time. color, size, family will not work on mostly of times.

= All those tips consider the 'low' and some early 'mid' devices, of the following my personal device rank:

High-end devices: Devices running the following OS'es: iOS, Android, WP7+, Bada, bbOS 6.0+

Mid-end devices: Devices previous to the High-end ones. some later Symbian S40 series and all S60, latest Sony/Ericsson's Walkman before started using Android.

Low-end devices: All others, considering WML, WAP1, BlackBerries, Windows Mobile (6.XX or older), most of Symbian S40's and older, everything else.

OTHER TIPS

If you have to make sure your site will work on all devices you might want to have a look at WALL http://wurfl.sourceforge.net/java/wall.php

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top