Mobile Website Design
Posted on Tuesday, 16th March 2010 - 4:27 pm by Refresh Creations Ltd
Slowly evolving from
WAP and WHTML monochrome, largely text-based readers to
fully-fledged versions of popular browsers supporting the latest
flavours of HTML, XHTML and in some instances Javascript and even
AJAX, mobile browsing seems to be becoming the way to go, or at
least cater for when designing a website.
In some cases it`s not
a great idea to simply duplicate everything across from your
current site and place it into another shell for a mobile site.
User behaviour will vary between a mobile website and a
traditional one, however much a phone is now emulating a desktop
PC now, the way we use it is different, mainly due to the
differences in interface.
Differences between
mobile site development and Traditional website
development.
One of the
difficulties faced when developing a website for mobile phones is
the large variance between each mobile phones capabilities. This
includes the following criteria:
The combination of
browsers and phones available on the market makes creating a
cross-compatible website a great deal trickier than with a
standard PC / MAC/ Linux / (Insert OS Here) Box.
Firstly, lets consider
resolutions:
Mobile phone
resolutions can be expected to anywhere between 240 x 240 pixels
to a wide 800 by 480 or a tall 320 x 640 resolution. Content
should therefore be broken down to the essentials without
over-zealous usage of larger images which could be a deal breaker
on your mobile site.
Image
Support.
In general it seems
that GIFs and JPGs have greater supportability than PNGs So, try
to only use those where necessary. Some handy tools for
compressing gifs, pngs, and jpegs are detailed
below:
Of course photoshop
and other professional image editing programs have some of this
functionality built in using save-for-web features.
Browsers Memory
per-page.
Keep your pages simple
to render, try to aim for below 20kb per page if possible to help
prevent lack of memory errors.
Levels of CSS
Support.
CSS Support may or may
not be available on your users phone, if it`s available a good
contrast between foreground text and backgrounds would probably
make sense, bearing in mind that mobile phones may not have as
great a bit-depth palette compared to your PC.
Levels of XHTML / HTML
Support.
Broken HTML is a big
no-no and, beyond WAP there aren`t many official standards for
Mobile Browsing. The W3C have a standard in development called
XHTML Basic 1.1, full details on this specification are available
here: http://www.w3.org/standards/techs/xhtmlmobile#w3c_all
Methods of
Input.
Not all phones are
touch screen, Not all phones have a handy qwerty keypad on there,
some of them will still have only a basic T9 Interface so keep
form input minimal where possible, if you have a site search, try
breaking it into a couple of drop-down selection boxes or another
simple mechanism to help keep navigation and searches
quick.
It all boils down to
the problem of Mobile Browser Detection which is going to be the
main problem facing mobile site developers, thankfully there are
web sites which offer services so you can determine which browser
/ phone your viewer is using, so you can serve up the correct
content to the right device. Some of them simply offer a list of
unique browser ID`s, others offer a more fully fledged
service.
Best of luck on your site conversions for mobile phones, if you
know of any more handy programs, please contact me at ryan@refreshcreations.co.uk
Email - Permalink
|
