The variety of devices from where we access the internet increases new web design and present challenges to them. It’s no longer just sufficient to have a mobile version and a browser version. Now, we have to believe whether the person visiting our site is visiting from a tablet, a Smartphone, a notebook, a desktop computer or full-size laptop, or some other device fully. And optimizing the understanding for all of those different possibilities is becoming more predictable among confidence internet users. In the past, a designer would have looked at the list of devices they had to design for and then set about creating individual website designs for each device. But as the number and variety of devices augments, that turns into an impractical, time-consuming proposition. Instead, designers should make designs that acclimatize to the needs of each browser, regardless of the device.
Several screen keeps getting better
The screen resolutions of desktop and laptop computers keep getting bigger. Only a couple of years ago, a 1280 x 800 pixel resolution seemed large. Now, that’s pretty much the bottom-end of common screen resolutions on laptops, and it’s not uncommon for new monitors to have full HD screen resolutions (1920 x 1080 pixels).
We’re reaching the upper limits of what’s practical for a monitor (with current interface technologies, though future developments may change that), but even designing for 1920 pixel widths is a lot different than designing for a screen that’s only 1024 pixels wide. Or at least it should be.
Adding to potential large-screen issues is that a lot of game systems and new TVs now come internet-ready. Some of these actually have very good built-in browsers, so it’s entirely possible that some of your website’s visitors will be viewing your site on their 55″ HD TV.
There are mobile devices
On the opposite end of the spectrum is the huge number of internet users who are now accessing the web primarily from their smartphone, tablet, or netbook. Screens on these devices can range from about 240 x 320 pixels .
Designing a mobile site used to be the favored solution to differing screen resolutions. But since now there’s a huge range of sizes, rather than just “normal” and “tiny”, that’s not the best idea anymore. Mobile sites designed for a 240 x 320 pixel screen aren’t going to look good on an iPad (or even a new iPhone with the Retina Display). And if you design for the Retina Display or similar higher-res device screens, you’re going to alienate a lot of visitors using other smartphones that don’t have such high resolution screens.
A stretchy groundwork
Starting with a flexible foundation is important. A fluid grid alone isn’t enough. You also need a grid or layout that can change based on screen resolutions and device types. For simple layouts, that’s not such a tall order. But if you’d like something that’s a bit more complex, with varying numbers of columns depending on the screen width, there are a few things you have to take into consideration.
Creating a fluid grid is a fantastic way to create a more responsive design. The best fluid grids will combine resizing and repositioning content as necessary, as the screen width changes. (Another great tool for creating fluid grids is the Tiny Fluid Grid, which lets you make grids with up to 1200px maximum widths, and is based on the 1kb Grid.)
For example, as long as your screen resolution stays above 800px wide, a 3-column layout would stay 3 columns, simple adjusting the width of each column to best serve the content. But when the screen width drops below 800px, your third column might drop under your second column, so that each column can stay an easily-readable width.
Using CSS3 media queries lets us target not only a specific class of devices (such as mobile devices), but also particular specifications within those devices. So we could have separate stylesheets for a number of different sizes of devices.
Creating images that adjust to the size of the column or div that they’re in is another important aspect of creating a more responsive design within a fluid layout. As columns resize, the images they contain can resize so that they still fit within the constraints of the column.
There are a couple of ways to go about this: you can have your image resize completely on the fly, or you can dynamically crop the image to only show the most important parts. In some cases, using a combination of these two techniques (so that above a certain size, the image just shrinks, but when it gets below that size it starts to crop) can provide the most desirable results.
Unstoppable Robot Ninja has a simple script that automatically resizes your images. If you want to selectively hide parts of your image dynamically (effectively cropping them), Zomigi.com has a great method for doing that. They also have a method for creating sliding composite images that can be useful for fluid designs.
Wider screen considerations
According to StatOwl, over 73% of non-mobile internet users during the past three months were using computers with a resolution higher than 1024 x 768. And if you look at the stats for 1024 x 768 specifically, you’ll see that it’s losing market share. It’s clear that there’s already a huge shift to higher screen resolutions—one that designers would be ill-advised to ignore.
Of course, just because there are some users out there who have moved on to wider screen resolutions doesn’t mean that every designer out there should jump on the wide-width bandwagon and start pushing redesigns to their clients. Mobile adoption is more important at the moment than wider widths. But since we’ve hopefully convinced you by now that responsive design is the way to approach new website designs and redesigns, it’s important to consider how to make websites work at wider widths.
Roadway your visitors
Everything mentioned above brings us to one of the most important steps to take if you’re considering designing for a wider screen resolution: track the visitors who come to your site and look at what screen resolution they’re using. Any good analytics program will give you this information, and it’s incredibly valuable in making decisions like this.
If you find that the vast majority of your users are coming from computers with higher screen resolutions, then you can probably design your site for those users without seeing too much impact. But if you find that a large number of your visitors are still using screen resolutions of 1024 or narrower, then you may want to reconsider.
Wider widths are imperative for modernization
I’m sure there are a lot of designers out there who don’t really see the point in wider widths. They’re happy designing at 960 pixels. They’ve got systems in place for designing at those widths. They have pre-made CSS files all set for 960 pixels. Why would they want to go wider? Especially when a big chunk of internet users are still working with screens that 1024 pixels wide.
The simple answer is that as long as we keep designing for 1024, there’s no incentive for most consumers to upgrade. And that means there’s little incentive for manufacturers to create products with higher resolutions.
For example, if 1280 was the standard, and if the majority of websites out there were 1140 pixels wide or wider, it’s likely the iPad would have been developed with a resolution of at least 1280. But because 1024 is the standard, the iPad doesn’t need to be higher res than that. The same principle applies to netbooks. Since the web is designed around screen widths of 1024 pixels, devices intended primarily for web use don’t need to be higher res than that.
By pushing website designs to wider widths, we’re encouraging upgrades and innovation. Plus, those extra 180 pixels (the difference between 960 and 1140) can open up new possibilities in the world of user interface design and user experience. Just like the 160 pixels gained when we switched from 800 to 960 made more things possible.
The downsides to wide widths
While there are definite advantages to creating wider designs, there are also definite downsides to the practice. Some of these are easily overcome, but it’s important to be aware of what they are if you expect to prevent them.
Wider content areas can easily contribute to making your pages look cluttered and like there’s too much going on. It also makes it easier to add extra columns, widgets, or other content that might not really add any value to the page. It’s important to keep principles of good content design in mind when creating your site. Ample white space is also helpful in making sure your site doesn’t look cluttered.
Wider widths give you more options when it comes to design, but it also multiplies the chances that you’ll make poor design decisions. Go too minimalist and it can look boring and empty. Too much going on and it just looks busy and cluttered. Pay attention to scale, white space, proportion, and hierarchy in your designs to ensure an excellent final product. And be careful that your wider designs don’t end up being “too much” in general.