I have an assignment to develop a site for BlackBerry and Iphone. I have done many design works for a PC Browsers, but this is going to be the first time, I am going to do something for mobile users, and unfortunately, I do know much about it.
What i want is some support / tutorial / guide / suggestion / help / code for the above issue.
I want to know what are the considerations for the sites for these 2 devices, and some help in the CSS etc design code, may be any one of you (or move) can send me 2 HTML files 1 for Blackberry and 1 for Iphone, and I can start the work from there.
I can’t help you TOO much, except that if I were in your shoes I would learn about whatever browser the BlackBerry uses (we know iPhone uses Safari) and since you’re building specifically for these two, you’ll want to get your hands on a copy of each (even if just borrowing from someone).
If this also will be an online-for-everyone site, then you’ll want to look at media queries… this article doesn’t seem too out of date yet:
: )
If BB users can also switch to Opera mobile or mini then that may also be a browser you want to test in.
I recall Paul O’B once had a project for just the iPhone, which he said he enjoyed as he could focus on things Safari could do.
You can find some useful information on the iphone here.
If you have a mac then you can download the iphone development package which includes a perfect iphone emulator. It’s a hefty download but worth it for testing.
Sitepoint also has a small article about developing for the iphone.
The iphone will scale sites so you have to set the viewport meta tag if you want to restrict them to a certain width. See the first article I linked to for more info.
We also have a mobile sticky thread in the CSS forum here that may have some information - although you will have to read through it all to see if there’s anything useful
So a general idea is that if I use a simple layout and limited CSS, and set the width according to the device, then there is nothing left to be worried about, Right ?
Hey, do you people know, if IPHONE / BlackBerry supports, Javascript ? AJAX etc ?
You might want to reduce the scripting to whatever is necessary, as modern battery technology is still not awesome enough to give devices scripts to run without draining them. Even when they do support scripts, some regular surfers may have it turned off to increase battery charge time.
Another thing I’ve thought of, but dunno if it’s applicable to either, is whether a stylus (or fingers) can be used on the devices. If they can, be aware they don’t seem to trigger :hover events. Why dropdown menus are not recommended for mobiles.
The iphone uses 2 finger scrolling to scroll a div that has overflow:scroll set although it doesn’t show the scrollbars so you have no idea that you may have to scroll it.
Hover effects aren’t supported and you would need to script touch events.
You can’t and most iphone users don’t even know about 2 finger scrolling anyway so it’s best not to use any scrollboxes on your elements and sidestep the issue. (This seems to be a common problem with textareas as the user can’t scroll to see the content etc.)
There’s some info here about making scrolling easier but identifying that the user needs to scroll is another matter.
There’s some info here about making scrolling easier but identifying that the user needs to scroll is another matter.
I suppose if a scrolly box is necessary, you’re best off just having a bit of text telling people about it.
On the one hand, I’m constantly amazed at the number of forms that tell me to click the Submit button to send my form… on the other hand, it doesn’t hurt and catches all those not used to using online forms.
Firstly, Don’t rely on device detection… there’s over a million handsets all with their own user-agent strings, performing a redirect is simply out of the question (no matter what anyone else tells you) - I build mobile designs (BTW). Secondly don’t rely on XHTML Mobile (stick to HTML4 as all non WML devices will support it - the W3C meant well with XHTML Mobile but it’s just not supported by anyone). Thirdly, dont rely on the handheld CSS media type, as stommes link (Return of the mobile stylesheet) notes, some devices use screen (the same as the desktop), some use CSS3 (like the iPhone), some use handheld (very few) and some use a hybrid (Screen + CSS3 / Screen + handheld / Handheld + CSS3)… it’ll give you a migraine and A List Apart’s solution no longer does the task due to the evolution of the Smartphone market. Setup a subdomain on your site like m.yoursite.com (the M is for mobile - that or a .mobi domain) and host a separate mobile design there.
As Paul’s shown, there’s a iPhone emulator for Mac, but none of the Windows ones do the job properly so don’t even bother with those. As for Blackberry I can help you out big time in that respect, here’s the official emulator (so you can check your site works) and a decent tutorial on getting it to work.
On the separate design… what you need to-do is avoid multiple columns, avoid Flash (iPhone / iPad doesn’t support it), avoid fixed width designs (liquid and fluid is best), keep things simple and remember to offer smaller images and less text in mobile designs (bandwidth is a BIG issue in mobile design - think the days of 56k and you get the idea). Keeping the size of files as small as possible will reduce your customers moaning about a $500 roaming charge.
