It’s clear that smartphones and tablet devices are here to stay.
The number of devices on the market multiples exponentially every
year and will likely cross a billion devices in the not too distant
future. If your site isn’t mobile compatible yet, you’re probably
leaving money on the table.
The Main Problem With Designing for Mobile
The main problem with trying to design a site for portable devices
is that there are simply so many devices to choose from. The iPhone
is clearly the 900 pound gorilla. But then you’ve also got the
iPad. Not to mention the Windows tablet, which is slated to be a
winner. Then you have the many various Android devices.
If you had to design a different site for each and every one of
these devices, you’d never finish coding. It’s probably impossible
to code a different version of your website for every mobile device.
Yet just creating “a mobile version” isn’t good enough either. This
used to be how people designed mobile sites. Yet for larger devices
like the iPad, it gets quite annoying. You have a lot of screen
real estate, but the mobile site is designed to accommodate small
devices. As a result, you have an unpleasant browsing experience
that doesn’t let you use all the screen space you have.
The Answer: Responsive Web Design
Responsive web design is a creative and very practical solution to
You use a combination of media queries and user agent queries to
figure out exactly how your user is browsing your site. Then, your
code knows what to do with that device based on the data it
receives from the query.
For example, you might design a website specifically for devices
with less than 200 pixels in width, then do another design for
pages between 200 and 400 pixels and a different design for all
devices above 400 pixels.
All you’d need to do is create a different CSS stylesheet for each
of those designs. Use the media query to determine which stylesheet
More on Mobile & Flexible Design
The whole idea is to design a website system that allows you to
create a website that works for all devices, rather than have to
design different sites for different devices. This allows you to
design for devices you’ve never heard of, as well as devices that
haven’t been released yet.
For small versions of websites, make sure you have very large
clickable buttons and text that’s broken up into small chunks.
For medium sized sites, consider scaling down the images from your
main site. That way it doesn’t take up too much screen space and
doesn’t take up too much bandwidth to download. Keep in mind that
if you just shrink an image in HTML, the full image still has to be
loaded by the browser. For bandwidth, which is still a concern for
phones, it’s best to have a smaller version of the image on your
For large devices like the iPad, it’s best to have a page that’s as
close to fully functional as possible.
Don’t neglect the mobile world. It’s a significant part of today’s
browsing experience and will only get more and more important in