Using Responsive Design To Fit Your Website Layout On Any Display Size

Posted on October 31, 2012 by

Responsive design is an answer to numerous web problems and it isn’t just a fad that grew in the industry because of some cool CSS implementations. Professionals in the web development industry often rant on and on about how mobile web may eventually overtake the traditional one, but it appears the revolution may be more dramatic as the web is getting more ubiquitous. This “problem” may be a good thing for average Internet users, but a real headache for web development professionals. In recent decade, the World Wide Web has been transforming into something more interesting and it is no longer bound by old rules. At this point in time, users are accessing the Internet from a diverse platform. While many of us still don’t give up desktops and laptops in favor of tablets and phones as experts predicted; the Internet is simply everywhere. It is already in our iPod, TVs, fridge, cars, gaming systems and others.

Fortunately for web developers, responsive design brings them a unified solution. They no longer need to create separate mobile and full-size websites. With media queries, it is possible to present specific CSS implementation to separate display sizes and make sure users have the best experience possible. To measure the effectiveness of responsive design, it is important to understand goals that it is meant to achieve. The next question would be whether it meets these goals satisfactorily? Does responsive design provide answer to recent problems in web development industry? Responsive design is very straightforward, but how can it be wrong?

Unfortunately, complexity begins to arise when you need to consider, which media queries to use or which breakpoints should you target? The answer should start with the most popular mobile devices around, such as the iPhone 4S and Samsung Galaxy SIII, then move up to notebook and small desktops and finally desktops with wide screen display.

But mobile devices change rapidly and we shouldn’t place too much emphasis on common screen sizes. Instead, we need to build layout that simply works well everywhere. In theory, this idea is great, but once you encounter complex web designs, you’ll often find that it isn’t easily applicable. Things can get really messy, when the client asks the design to support display sizes that you didn’t account for.

Instead of preparing support for a set of devices, sometimes you need to let the design decide. Every web layout has a limit where a specific display size starts to lessen its integrity. In light of the ubiquity problem, your job as a web designer is to find a proper range of display size that your layout would allow. Stop forcing your design to fit on an iPhone, instead focus maintaining layout integrity by choosing a range of display sizes. However, if you insist on optimizing your website for iPhone and iPad, as well as desktops; you need to structure your layout accordingly very early in the web development project. It is perfectly acceptable to keep specific devices in mind during the planning phases and make them a guide for you design, for example make links bigger if you expect to get plenty of traffic from touch-based devices.

Obviously, if you want to create a proper content-focused responsive design, you need a good starting point of some kind. If you want to start from large screen and come down, that’s great. If you want to start from mobile devices and go up, that’s also great. Some designers may find it a little restrictive to start from mobile level, but your situation could be different.

Let’s say you start from a large design. Choose the largest computer screen available commercially for average consumers and make sure your design looks great in it. Now drag the windows to make it smaller until the whole design starts to look ugly. This should be your first breakpoint. Fix everything to make the design functional and look appealing again. After you’re finished, make it smaller again until you reach the next breakpoint. Repeat these steps until your design looks great in the smallest devices, such as the 3.5-inch smartphone display.

Something magic would happen after you follow this workflow: your design looks nice at just about any display size. When users pull it up on their smartphones or HD desktop monitor, it will look similarly great. However, you should remember that this article refers to layout ratios only. You still need to test functionality on different devices and browsers. Responsive design doesn’t take into account software and hardware configurations used in these devices, as they may interpret HTML, CSS, JavaScript and Flash differently. Because the workflow of responsive design offers you a very powerful tool for making sure the website looks nice on any screen, pegging to a narrow selection of devices may cause you to lose this advantage.

Author :

  • Adam Scott