Join Morten Rand-Hendriksen for an in-depth discussion in this video Deciding what screen sizes to design for, part of WordPress: Building Responsive Themes.
- View Offline
If you start looking at articles written about responsive design and development, you will notice that there are certain predefined screen sizes and scenarios everyone is targeting with their designs. As you start designing your own responsive themes, you have to ask yourself these questions: What screen sizes am I targeting, and what should the site look like on those screens? The answers to both these questions are, all screen sizes should be targeted and the site should look good on all of them. If you look at the standard screen sizes that we have to deal with right now, you have the classic PC monitor, which is roughly a 4 x 3 shape.
It's usually around 1024 pixels tall and 1280 pixels wide. And then you have modern monitors like the HD monitors, which are 1080 pixels tall and 1920 pixels wide. That's really large. And then you have typical laptop monitors, which are quite short. I've seen them around 768 pixels tall and 1360 pixels wide. So this isn't a 16 x 9. This is an even weirder kind of size, and both laptop monitors and a lot of notebooks have these very short and wide type of screens.
And then of course you have the mobile devices. A typical smartphone is 480 pixels on the long side and 320 pixels on the short side. Now, you may want to ask specifically about the iPhone with a Retina display. Well, the Retina iPhone will pretend to be 320 wide and 480 tall and then just provide you much better resolution, so you can still think of it as the same thing as a regular phone. When it comes to tablets, we have a lot more versions to deal with. We have the iPad 1 and iPad 2, which both were 1024x768, and now you also have the new iPad with a Retina display which is 2048 x 1536, and this operates the same way as the iPhone with a Retina display does.
It pretends to have the same resolution as the original iPad, but the resolution is actually much greater. So you can think of it as the same as the old one, but you have to have better graphics to support it. But the iPad isn't the only type of tablet out there. You also have standard android tablets, and on average, they are around 1280 x 800, which is almost 16 x 9. But you now also have new HD Android tablets coming out in the market and you will often find that they are around 1920 x 1200. And that's just the tip of the iceberg.
Consider this: let's say I am working on something like my blog and then I realize that I need to check some information on the lynda.com web site. I might do this and then put the two next to one another. This isn't a specific standard size, but it's a fairly common scenario, and I see it a lot where people will put a web site on one side and then a Word document on the other and move information back and forth. Or they may scale it down like this so they have one small web site on one side and a large web site on the other. And when Windows 8 comes out, Windows 8 has a feature that automatically makes a layout that looks very much like this, where you have a very narrow bar on one side and then a large bar on the other side.
What I am trying to get at here is that you don't know the size of the viewport, but the person accessing your web site has. That means that you need to design your site in such a way that no matter what size this viewport or window has, your site will fit properly within it. That way, you create a properly responsive site that responds to the scenario the user is in, not the scenario that you're guessing the user will be in. When I design responsive web sites, I only focus on two sizes: the smallest size, which is the 320 pixel wide, and the largest size which would be a gigantic 1080p desktop monitor.
Then I figure out how these two can be reconfigured so that no matter what screen size or window the site is displayed in, the content is right up front and easy to digest, and the font size and word count per line is within standard parameters. It's more work, but it pays off in space.
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry