Grid Based Layout

Introduction

As I mentioned the last post, grid and card based layouts have been web design trend for the last few years. Pinterest, Google Now and Digg are the examples. Grid layout is great for responsive websites for the following reasons.

1) It scales to any widths.

2) It does not have fixed numbers of columns.

3) It is defined easily with HTML5 and CSS3.

4) It makes easier to organize the content.

5) Users can find information faster.

(Miller, n.d.)

Grids Are Flexible

Grids are defined by percent but not numbers of pixels, so grid based page can accommodate any screen size, from desktop computers to cell phones. Unlike tables, the numbers of columns are not static: they can be increased or decreased based on screen size. We can arrange multiple screen layouts for different screen sizes in one web application by using Cascading Style Sheet. If a grid seems too narrow for one screen width, we can reduce the numbers of grids for the particular screen resolution without compromising other screen sizes.
(Miller, n.d.)

Grids Look Neat and Organized

I created a website for a fictional coffee bar, Coffee Lounge last spring. This site was developed for PR1100 – Website Project I and is not fully functional. I decided to use this website again for the first project of this course, CR2170 – Trends in Web Development to make the site fully working, including code-behind in ASP.NET and C#. One of the issues I found the last semester was that the text links were too small for mobile users to click, although the site was meant to be fluid enough to fit all devices. I think this is a good time to re-design the website in order to improve the user experience, especially for small screens.

I wanted to apply some of the web design trends to my websites, so I choose to use grid layout for the new version of the Coffee Lounge website. I had implemented the site in HTML5 for the structure and CSS3 for styling already, so it was painless to apply grids. It turns out to be faster and easier to find the information, it fits and looks better, especially with mobile devices and it looks more attractive. Figure 1 is the current design, and figure 2 is the new version of the site, which is under construction, and hopefully it will be uploaded in mid-February.

OldCoffeeLoungeHome

Figure 1: Current Coffee Lounge Home page

Source: Naomi Kobayashi (2014)

NewCoffeeLoungeHome

Figure 2: New Coffee Lounge Home page

Source: Naomi Kobayashi (2015)

With the current site, the user has to read from the top to find the information he or she is looking for. The user can find the information faster and can point at icons or text links easier with the new design because the targets become bigger. I also find re-arranging the information easier since everything is in individual containers, <div>.

Conclusion

Grid layout is gaining popularity due to its flexible structure and its well-formed format. The structure also makes easier to arrange and to search the information. The new layout will improve the user experience of my website as well.

OldCoffeeLoungeSiteMap

Figure 3: Current Site Map for Mobile Devices

Source: Naomi Kobayashi (2014)

NewCoffeeLoungeSiteMap

Figure 4: New Site Map for Mobile Devices

Source: Naomi Kobayashi (2015)

References

Miller, G. (n.d.). Responsive Grid System. Retrieved from Spectacularly Easy Responsive Design: http://www.responsivegridsystem.com/

Moveable Online. (2014, February 14). Web design trends that will be popular in 2014. Retrieved from MoveableOnline.com: http://moveableonline.com/blog/2014/02/14/web-design-trends-will-popular-2014/

Advertisements

One thought on “Grid Based Layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s