If you hadn't heard, bigger monitors are in, small ones are out — at least for desktops. The 1366x768 has ousted 1024x768 as the supreme screen size. Now we hope you're not thinking that means we should stop designing for small screens, even if it is for desktops, despite what Jakob Nielsen might be saying. Because when it comes to designing for the web ' size shouldn't matter.
Nielsen makes it a point to carefully say that 'small screens are finally so rare for desktop computers that we don't have to design for them.' Then he goes on to cover his bases, saying we still have to consider small screens anyway. Nielsen seems stuck in a desktop world, a single-device myopia. When it comes to mobile devices, Nielsen seems to begrudgingly consider them and lays out these option:
- Build a separate mobile-optimized site: Only if you have the time to do so, then auto-direct them to the site and provide the appropriate links to toggle between the full-blown site or the mobile site.
- Mobile apps might be better: That's because studies show that users perform better on mobile apps, says Nielsen
- Design for smaller tablets separately: Full-blown sites look good on 10-inch tablets, such as the iPad. Ideally, says Nielsen, you'd want to design a third option optimized for mid-sized devices, like Amazon's Kindle Fire.
That last bit of advice seems really foolhardy. We can't ignore that more and more people are using mobile devices to access the web, be it for tablet or smartphones.
Nielsen does make some good points about larger screens (like optimizing for widescreen monitors around 1,440px wide), something we considered when it came to images for the new ZURB.com homepage. But like 960 grids, we can't get stuck in one screen size or device.
Four Corners, Not Devices
Don't get us wrong, we agree with Nielsen that the desktop is far from dead. Tablets and phones are very much consumption devices (for now). It's very easy to say that mobile will kill the desktop or the laptop as we use our mobile devices more and more everyday. When it comes to writing long pieces or editing/writing code or text, desktops are still where it's at.
For the time being, we're still going to use a variety of devices for different tasks. It's not devices, however, that we're designing for — it's four corners, no matter the size.
So it's a waste of time to develop sites specific to each device. What's needed is a modern grid system, which is why we developed Foundation and why we're on the road to Foundation 3.0. Once completed, it will be one of the most, if not the most, modern responsive grid system in the world.
The Road to Foundation 3.0
We've already released a taste of Foundation 3.0 and another taste is planned for later this week. But what does it take to build a modern grid system that meets the challenge of building a robust site and still look good on hundreds of different devices and browsers?
In other words, what is it that we need in a modern grid system. Let's take a look:- Flexibility: There needs to be enough columns that covers the majority of our layout requirements.
- Nesting: We have to have something that can nest down into a single column, right down to the N levels to give us the flexibility we need.
- Responsive: Since we're no longer designing for devices and designing for four-corners, no matter the size of the screen, our grid needs to be responsive, fluid (percentage-based) and configured to scale down to smaller devices. And a fluid design is something even Nielsen sees as a good thing.
- Modifiable: Modifying things such as gutter size are a pain in the butt. So we want something that's modifiable.
- Backwards compatibility: That's because not everyone in the world uses Chrome or iOS5 Mobile Safari. We'd need support for Android, iOS 4+, Webkit browsers, Firefox and IE8+.
Here's what such a grid would look under the hood (take a close look, it's a sneak peek under the Foundation 3.0 hood):
OK, this looks great for desktops, but for smaller devices, we've added additional styles wrapped in this media query:
But there's some overriding we have to do, to basically tell the browser on a small display to: don't float the columns, don't give them a min-width, don't give them margins:
There's more to building a modern grid system than just these two bits of coding. In fact, Jonathan goes completely under the hood to show us step by step on how to build such a grid system in a recently published .net Magazine article.
When it comes to being a responsive designer, remember what Yoda said, 'Size matters not.' What say you?
