Using Grid-Based, Responsive Design to Optimize Your Website for Tablet

What Is Grid-Based Design?
Grid-based design, also called responsive design, is a method for designing websites that allows for optimal viewing from all devices and screen resolutions. It is one of three main ways to sell to your customers on smartphone and tablet. The other two options are a mobile first website with progressive enhancement or a mobile app.

Why Use Grid-Based Design?
One of the biggest advantages of grid- based design is that it is flexible to many devices. It allows for the creation of only one set of code that will be used for all devices. This is why it is the easiest way to design a website for web developers.

One set of code isn’t just easier in terms of design, but also for managing the site. One set of code means only one site to maintain and update. It’s also the only way to create a smartphone or tablet optimized site at the same time as a redesign or re-launch of a traditional, desktop-based website  (because of the single set of code).

How Does Grid-Based Design Work?
Grid-based design is based on the concept of, you guessed it, a grid.

Picture each piece of content on a page to be a certain sized grid block. For example, some blocks are 6-wide, some 4-wide, some 2-wide, etc. Each screen resolution and device can handle a different width of blocks. A large screen monitor may be 12-wide, whereas an iPad in landscape may be 10-wide, in portrait 8-wide, and a smartphone 4-wide. Each device/screen resolution can only handle that many blocks across. You with me?

Let’s look at an example.

Responsive Design - Tablet Landscape

Landscape Tablet – 10 Blocks Wide

Tablet (Landscape View) – Take a tablet in landscape with the width of 10 blocks wide. When the website is brought up on the device, it will render the content blocks up to 10 across. Once the next block is too large to fit on a line, it will shift down to the next line and continue on down the page.

Look at the example to the left, the first blocks (4, 4, 2) all fit on the first line. The next block won’t fit because we have already reached 10 blocks wide. The next block shifts down to the next row and continues until it also reaches 10 blocks wide, or when the next block is too large to fit, as is the case in this example. This shifting down of blocks is called scaffolding.

Responsive Design - Tablet Portrait

Portrait Tablet – 8 Blocks Wide





Tablet (Portrait View) – Now look at the portrait tablet. Notice that once we reach the third row of the grid, the next 4-wide block won’t fit because it would bring the row to 10 blocks wide and the screen can only handle eight.




Responsive Design - Smartphone

Smartphone – 4 Blocks Wide



Smartphone – If we look at the smartphone example, you see that the blocks keep shifting down and the scroll length of the page will increase to fit all of the blocks. The device is detected during the rendering of the page and the site responds accordingly, hence the name responsive design.


Responsive Design - Desktop

Desktop – 12 Blocks Wide

The Downfalls of Using Grid-Based Design
As is often the case, there is no one best solution to designing a website for mobile and tablet use.

  • Grid-based design is limited to about 90% of the functionality of a website designed specifically for tablet or smartphone.
  • Grid-based design requires a large amount of pre-planning. Since the same line of code will be used for all devices, the developer has to consider how the pages will render on each device.
  • Load speed can also be a downfall of grid-based design. Large eye-grabbing images are an important part of great website user experience. In grid-based design, images will be shrunk to fit the screen, however, the actual size of the images do not change. Larger image sizes mean slower rendering on smartphones and tablets because they are generally running on 3G mobile network speeds.

The Impact on Designers
No longer can designers have free reign on website designs. Designers are used to building pixel perfect mockups that are then sent to coders to convert to HTML. Usually only one mockup per page is done.  A width of, say, 980px is chosen for the site and every mockup is made to fit that width perfectly.

With responsive design, it is a more collaborative effort between designers and coders.  There is no longer a 980px width. Designers and coders must first decide on their view ports and the designers will then have to sketch a quick mockup for each one.  How the site sections flow on a desktop vs. a tablet vs. a smartphone and how dynamic content affects those sections (longer content can affect the stacking) are all questions designers have to consider with responsive design.

The Importance of Optimizing Your Website for Tablet
Compared to smartphones, tablets are more apt to be used with a Wi-Fi connection, but the user experience decreases significantly for those who have to wait longer than a few seconds for a page to load. Poor user experience can mean more abandoned carts and decreased conversion rates, which is any online retailer’s nightmare, especially with the holiday shopping season right around the corner.

Consider what practice is best for your website. It is too late to implement most solutions before the holiday rush takes off, but start thinking about next year. According to Adobe, tablet visits will surpass smartphone visits by early 2013 and generate over 10% of website traffic.

Is your website ready for tablet?

Tablet eBook

Tagged with: , ,


Handcrafting technology and marketing solutions since 2001.
Subscribe to Our Blog

Get valuable tips and ideas via email.
Sign Up Now