The beauty of media queries in CSS3, though, is that they can also be used right within the CSS. So we could have separate stylesheets for a number of different sizes of devices. 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. If the navigation was contained within one of those columns, it might migrate to the top of the page, so that it’s still easily accessible. If the screen gets even narrower, let’s say 480px (typical on a lot of smartphones), the whole design drops to a single column, with the second and third columns appearing below the main 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. (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.)įor 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. The best fluid grids will combine resizing and repositioning content as necessary, as the screen width changes. Flexible layoutsĬreating a fluid grid is a fantastic way to create a more responsive design. 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. For simple layouts, that’s not such a tall order. You also need a grid or layout that can change based on screen resolutions and device types. Starting with a flexible foundation is important.
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. 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). But since now there’s a huge range of sizes, rather than just “normal” and “tiny”, that’s not the best idea anymore. Horizontal scroll, especially on touchscreen devices, is annoying at best.ĭesigning a mobile site used to be the favored solution to differing screen resolutions. Or even one that’s 600 or 800 pixels wide. Obviously, a site designed for a monitor that’s 1280+ pixels wide isn’t going to look right on a screen that’s only 320 pixels wide. 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.
#Responsive site designer 1.5 update full#
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). Only a couple of years ago, a 1280 x 800 pixel resolution seemed large. The screen resolutions of desktop and laptop computers keeps getting bigger.
Instead, designers should create designs that adapt to the needs of each browser, regardless of the device. But as the number and variety of devices increases, that becomes an impractical, time-consuming proposition. Now, we have to consider whether the person visiting our site is visiting from a tablet, a smartphone (and whether that smartphone has a high-res screen or not), a netbook, a desktop computer or full-size laptop (and whether it’s one with a high-res or low-res screen), or some other device entirely.Īnd optimizing the experience for all of those different possibilities is becoming more expected among savvy internet users.Ī few years ago, 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. It’s no longer simply enough to have a mobile version and a browser version. As the number and variety of devices from which we access the internet increases, new web design challenges present themselves.