HTML and CSS Reference
In-Depth Information
display of just a few inches across. And then there are tablet devices that fall in between
the two, such as Apple's iPad or the Samsung Galaxy Tab. However, designing for more
than desktop displays is about more than taking differences in screen size and process-
ing power into account. Mobile devices won't have a mouse, and clicking will likely be
done with a finger (or stylus if the device is older), so small buttons are best avoided.
Then there is the issue of connectivity. Mobile devices may drop their connection as the
user is moving about.
__________
1
To appreciate the explosive growth in the worldwide use of cellular devices, take a look at the
data collected by the World Bank on mobile cellular subscriptions:
http://data.worldbank.org/in-
Responsive design
Let's consider screen size to begin with, because it is the most obvious difference
between desktop computers and handheld devices. There are two broad approaches to
mobile design. The first is to essentially develop two different sites, one for a desktop
environment and another one for a mobile device. The user is directed to one or the other
depending on what browser they view the site in. This may be a viable approach for
complex sites that may need lots of effort to accommodate a mobile viewing experience
and are better off presenting a simpler version of the site for mobile users. A problem
with this approach is the potentially high maintenance involved. If a different site is cre-
ated for desktops, tablet devices, and mobile phones, what happens if another device
with a different form factor becomes popular? For example, Opera has a web browser
for the Nintendo Wii game console, and Internet-enabled wristwatches running Android
OS have even been developed! The other option is to change the style sheet in use based
on the screen size of the viewing device.
Media queries
(discussed a little later) can be
used to change the CSS depending on the physical qualities of the viewing device, such
as changes based on the display size and resolution. Combine this approach with a fluid
broad range of screen sizes.
A fixed 960-pixel-wide grid has long been a web design standard that uses CSS to
create rows and columns. Developed from this has been responsive grid design, which
increases or decreases the amount of columns on the page based on the width and ex-
pands the columns visible to the width of the browser viewable area. Development kits
layouts of this sort.
Search WWH ::
Custom Search