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?
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
widthandfloatshould be
defined for any element - http requests should be very less
- No
font-familyshould 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?
Why u using
<?xml version="1.0" encoding="UTF-8"?>?? This is a xml header,not html.About the questions:
You can use transparent GIF, they are somewhat supported. Transparent Png however, not.
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.
On mobile, the tip is ALWAYS go with fluid layouts (% based)
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.
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">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.
Reduce when possible. More requests, more times the crappy wap/edge needs to go get something, and more time loading.
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.
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.
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.
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 😛
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.
Avoid JS when possible, always go for server-side.
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.
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.