As new devices come online, the challenges web designers face today grows. Mobile devices, tablet computers, and desktop systems all have screens that vary in width, size, and resolution. Here's some tips on how to get a handle on this situation by using technologies available today.
There are two types of people who would be interested in this article. The first is the web designer who is given the task to create flexible layouts. The second is the project manager who has to decide which devices to support for the website.
Both seem to have the same set of goals. However, one may have more motivation over the other to take on a lesser or more general approach. You need to ask yourself:
No. That would crazy. Imagine the multitude of special purposed page layouts, special coding cases, let alone the amount of development, support and testing required to do so. Think thumbnail sizes. Video and embedded objects. Your logo. (hint: they look awful when rescaled bigger and midget size when scaling smaller). That is taking on too much and your business model may not even deem it necessary.
Yes certainly. If the hot device is the iPhone and iPad, you should support it. If its the 1999 Nokia 9200 series, forget it. Come up with a list of the significant most widely used mobile, tablet, and computer devices that have sold over the last 5 years and you will be on trend.
Look at it this way. Going backwards to support old hardware isn't going to help move you forward. Technology moves forward and so do your customers!
In 2008, Morten Hjerde wrote an interesting article on Mobile screen size trends.
In it, he shows screen sizes from 96x65 all the way to 800x480 being measured. Now of course, for web designers, that list can grow even larger as more LED screen sizes are being used as people search the Internet. So it boils down to that there are lots of different devices with lots of different screen sizes.
If 50% of mobile devices in existence have screens less than 240 pixels in width and drive 5% of your website traffic, do you really need to support it? That depends. If there is a trend for screens to say in that size, you will have to. It may just be that this becomes 10-15% of your traffic.
So at this point we know that there are lots of devices with different screen sizes that can come to your website. The decision of how much you wrap your hands around the problem is a business decision. For the web developer, the problem at hand can be framed in a question:
"How can I make my layouts and the objects within the regions scale according to the size of the viewport of the device?"
In his book entitled Responsive Web Design author Ethan Marcotte says that there are three things web designers can do to meet the ever changing future of the Internet:
Some of this may all be well too familiar - just wrapped up in a mantra.
Basically, the idea is to create a fluid, proportional layout that sizes according to the browser viewport. In particular, to handle the case of varying width.
You can accomplish by creating layouts/templates that adhere to the following rules:
If all this sounds exciting and you are dying to dig in to crank out some code, you'll have to wait for my next installment. In that segment, we will learn how to create a two column liquid layout in HTML 5. Stay tuned!
