Poll: Do you use grid systems?

a gridA grid system is a system for web design based on a grid. It is a way of organizing your content on the page with a grid as the primary element.

Using a grid system is a great way to organize your pages. You can make the grid as large or as small as you want it and have as many columns or rows as you need.

Grids are a very formal way of designing web pages because they control the number of columns, rows, gutters between the columns and even the lines and spacing of the area around the grid.

Many people find grids very rigid for design because everything starts looking very square and boring. But when you get better at the use of grids you will learn how to break the grid to make your design more dynamic and effective.

[poll id=”5″]

There are lots of frameworks that use grids, some of the more popular ones include:

  • Responsive Grid System – this is a scalable grid system that is more responsive and includes breakpoints to create different grids at different device sizes.
  • Responsive GS – this is much more of a framework to help you build your site, and it uses more HTML5 by example. It comes with some polyfills to help ensure your grids work correctly
  • Zen Grids – This is a system to let you use Sass to figure out all the sizes and position the elements appropriately. It means you have to install and understand Sass to use it. But Sass isn’t that hard. CSS is harder in many ways.
  • 960 Grid System – this assumes a width of 960 pixels which can be divided into many columns with variations of 12 columns and 16 columns.

Not all design testing tools are created equal

I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.

A bad way to test responsive designs
Do you notice anything interesting about these four renderings?

If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.

When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.

Testing on the Device Gives Better Results
Here’s what the page looks like on a real iPhone

As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the navigation icon example icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.

Be Wary of Online Emulators

There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.

I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:

How it renders on an iPhone
The Responsive Design Testing Tool on an iPhone

The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240×320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.

All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.

What Can You Use?

While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.

Another option you have for testing is to use an emulator. You can get an iPhone emulator from Apple and an Android emulator from Android.

Want to Learn more about Responsive Web Design?

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours
Available Oct 2014

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.