FAQ
Wondering what we're talking about? Hopefully your answers are here.
About this site
What is a grid system?
A grid is an underlying structure in which a design is built upon. It consists of rows and columns that are used to align text and images. It allows you, as a designer, to make placement decisions easier and more consistently. Typically, a design based on a grid will have excellent readability and a more professional, organized appearance.
Grid-use has been standard practice in print design for at least a half-century or more. This practice is now being applied to web design. In print design, horizontal rows are emphasized as much as vertical columns. In web design, however, the difficulty in controlling vertical space has led to more emphasis on columns.
For more reading on grid systems, see Designing With Grid-Based Approach.
What is 978.gs?
978.gs is a website promoting modern grid system use in web design. Our most popular grid system is 978, but we offer others as well.
The 978 grid system uses 12 columns at 54px, with extra roomy 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024x768 monitor. Almost every computer and tablet in the world today is capable of displaying designs built on this grid.
Nick La originally crafted the dimensions of the 978 grid. This site, the other grid systems offered here, writing, downloads, research and design are by Brothers Roloff. Nick La and Brothers Roloff are not affiliated.
What about 960.gs?
If 960 or another grid system is working for you, that's great. However, we've found it can feel difficult to design within at times. The default gutters are pretty narrow, causing text and content to appear cramped. 978 alleviates this by opening up gutter space and taking advantage of more screen real-estate.
Don't take us the wrong way; 960 and other variations serve their purpose and are still valuable. However, as trends continue towards larger type and more whitespace, we feel 978 is the direction to be heading in.
How did you make that awesome demo?
If you want to know how we made our Demo, see the question: "How do I deliver different CSS for mobile users." Feel free to take a look at the source code of our site as well.
Can I use your badge overlay with my 960 design?
Yes. Just choose "Custom" in the configurator and specify the dimensions. See example:
jQuery('div#gs-overlay').gsoverlay({
trigger: jQuery('a#gs-overlay-badge'),
columns: 16,
columnWidth: 40,
gutterWidth: 20,
color: '#7f7f7f',
opacity: 0.15
});
Note that the overlay will report your design as "940." This is because it does not include side margins in the measurements.
Where can I download the CSS for your grid systems?
To be honest, we are not huge fans of CSS frameworks. HTML, when written correctly, should semantically describe your content (as much that is realistically feasible). Mucking up your markup with <div class="grid_5"> and <div class="grid_6 pull_6"> is not considered best practice. With that being said, CSS frameworks can make rapid prototyping a breeze. They can let someone of any skill-set quickly mock up a basic look and feel of a website. In some ways, it may even be faster than doing it in Photoshop.
We'll likely add a CSS framework for prototyping sometime in the future. For now, there are plenty of existing CSS frameworks out there that should be easily adapted to work with the grid systems on this site.
Where can I download more templates for your grid systems?
We will be adding content to the site as we get free time.
Design and Technology Questions
What do you mean by "max width?"
If a user sees a horizontal scrollbar along the bottom of your website, many will consider your website a failure. Scrolling to the left or right is usually unnatural and doesn't belong in a website. Therefore, let's make sure your website will fit within your user's browser window!
On our Browser Specs page we document the maximum width a site can be before a horizontal scrollbar is shown. The maximum width is never as wide as the monitor's resolution. A number of factors affect why this is so:
- The web browser a visitor is using may take up horizontal space itself by having a border around the window.
- A vertical scrollbar is most likely shown inside the browser.
- The user may arbitrarily change the size of their browser window.
It's important to understand that our measurements were taken with browsers maximized to use up as much screen real-estate as possible. This topic itself can be quite controversial as many users do not browse with their window maximized. If you have any uncertainty about your design being too wide, you can always fall back to the next smaller grid system offered on our Downloads page.
How wide can my design be?
Every grid system comes with a "total width" suggestion that you should not exceed. This total width is calculated by adding side margins to the grid which essentially use up all/most available space for the target monitor size. Refer to the Downloads page for the maximum size of each grid.
If you feel confined with the maximum horizontal space of a grid, see the next question.
Tip
Try giving the 748 grid system a try. Designs based on 748 are fairly readable on mobile devices and are very accessible for all desktop users. For all the bells and whistles, offer a second website in the 1218 grid system.
There's not enough width for my rounded corners, shadows, etc.
If you are attempting to design some sort of "frame" around your website and need to exceed the total width recommendation, we suggest you fall back to the next smaller grid system. For example, if the 978 grid (which has a total width of 1002px) doesn't give you enough horizontal room, try using 748 or even 960.gs.
How tall can my design be?
The answer to this question can be very subjective. Many will recommend you make your page as tall as it needs to be, while ensuring the content is readable and flows nicely. Users will scroll to read your content if you have their interest.
We do, on the other hand, advise keeping your navigation at least partially above the fold. Read the next question for more information.
What is the "fold?"
The fold is the visible height of a web page that a user can see without scrolling. The fold is different on almost every computer and for every user as a number of factors come in to play:
- The size of their monitor.
- The particular web browser they're using.
- Whether or not they've customized the interface of that browser.
- The size of their window.
What's more important to understand, however, is the fold is almost completely meaningless—yet often wildly over-emphasized in the web design industry. Somewhere over a decade ago, it became popular belief that users would not scroll vertically when visiting a site. Clients often demand that you cram nearly all of your design above this "magic" number. Almost as long ago, interestingly enough, plenty of studies debunked this notion. In today's world, companies like Apple assume scrolling is so second nature to users that they are no longer placing visible scrollbars in their interfaces. Read Blasting the Myth of the Fold for more about the history of the fold.
With that said, it's still advisable to keep some things—navigation in particular—above the fold. Any feature that is critical to the success of your website should be easily accessible at the top of your page. After all, the top is where users start looking.
On our Browser Specs page we provide fold measurements for browsers that have been maximized to use up all screen real estate. We then summarize the highest and lowest numbers to give you a sense of where the fold generally falls within.
Stay Well-Informed
- It's impossible to determine exactly where the fold may be.
- Do not negatively affect usability by putting too much above the fold.
Users will scroll.
How do I deliver different CSS for mobile users?
There are many methods to provide a mobile (or small-screen) version of your website. The path you choose will be based on your own infrastructure and the unique goal of each version. A couple methods can be found below.
Unique Websites
Different HTML using browser detection
One option is to use JavaScript or a server-side technology such as PHP to detect the visitor's browser. If he/she is on a mobile device, they can be redirected to an entirely different website. This separation can be nice as it allows you to have different HTML and CSS between them and not have to worry about conflicting code or design. We won't go further into this topic as it is much too large for the context of this website.
One Website
Multiple CSS files using Media Queries
Our famous Demo uses Media Queries to deliver entirely different CSS based on how large your window is. This works regardless if you're on a desktop computer or mobile device. The HTML always stays exactly the same.
Media Queries are new with CSS3 and are supported on all modern web browsers except IE8* and below. If you read about Media Queries elsewhere on the internet, you'll see many different ways of applying them. Our favorite method is outlined below as it applies to both mobile and desktop users.
The following code should be placed in your HTML's <head> tag. The first statement embeds the CSS file for our largest grid system. Each subsequent statement only embeds a CSS file if it is within the range supported by that particular grid system. Doing it this way will always load up to two style sheets at a time. You can place all your default styling in the first CSS file and override/replace styles in the subsequent CSS files for the smaller grid systems.
<link rel="stylesheet" media="all" href="grid-1378.css"> <link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="grid-1218.css"> <link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="grid-978.css"> <link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="grid-748.css"> <link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="grid-300.css">
* Our demo functions on Internet Explorer via a quick jQuery plugin we wrote to simulate Media Query support
My website looks too big/small on a mobile device
What is the "viewport?"
The viewport is a virtual "window" in which your website is rendered. It has become increasingly important to understand this as smart-phones and other small screen devices are regularly used to browse the web these days.
For example, if we look at the iPhone, its screen is 320px wide. However, if you visit a desktop-sized website on the phone, it will be scaled down to fit within the phone's small screen. The original size that the website was rendered within (before being scaled down) is called the viewport. By default, the iPhone has a viewport of 980px.
We strongly recommend setting the viewport on every site you build to a dimension that will work well with your design. Usually, this should be a few pixels larger than the grid system you used to provide ample breathing room on the sides of your website. If you don't specify a viewport, there is a good chance your website will look large and cramped within the device's screen or tiny—with too much open space on the sides. Our Downloads page offers recommended viewport settings for each grid system.
For the 978 grid system, we recommend a viewport of 1024px. This is because it provides some margins on the sides of the layout and also because it's the native resolution of the iPad. To specify a custom viewport, add this meta tag to the <head> of your HTML:
<meta name="viewport" content="width=1024" />
If you are dynamically changing the CSS with media queries, you probably want to prevent the viewport from being scaled:
<meta name="viewport" content="initial-scale=1" />
How can I ensure the developer followed my grid?
We offer a jQuery plugin that can overlay a grid on top of your website. This makes it extremely easy to see that things did or didn't stay within the lines! It can be configured to use any of our grids we offer or a custom one of your own. Try it out then get the badge code and put it on your site.
Badge Your Site!
Show the world you know what you're doing, or use it to proof your own work. Click the badge below to see it in action.
