Fluid grid draft

Birth of Responsive web design

With the popularity of 3G and Wifi, more and more people start to using mobile phones, iPad or other mobile devices to surf on the Internet. Thus, web designers have to face a dilemma: how to show the same page on different screen sizes?

For example, phones have small screens, and the width is usually less than 600 pixels; PC has big screen, which is up to more than 1000 pixels generally, and some are 2000 pixel even. It is not easy to show same content on different screen sizes with a satisfied effect

The solution for many websites is that providing different pages for different devices. For instance, specializing in providing a mobile version, a iPhone version or iPad version. Although doing this way can guarantee the results, it leads to more trouble to maintain several versions, and even will greatly increase the complexity of the architecture design if a website has several portals. Also, in spite of working in one website version from one portal, the content cannot appear in a satisfied way when we change the window size.

Therefore, it has been envisaged since very early whether we can design once for universally application, which means one page can adapt to different screen sizes automatically, and automatically adjust the layout according to the width of the screen.

In 2010, Ethan Marocotte came up with the word “ Responsive web design”, which also named “ Adaptive web design”. It refers to the web design that can automatically identify the width of the screen and make the appropriate adjustments.

He produced an example for a hypothetical magazine, which contains the six roles’ headshots. (d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html) If the screen is larger than 1300 pixels wide, six pictures will lie side by side in a row. If the screen width ranges between 600 pixels and 1300 pixels, the layout of six pictures will change into two lines. If the screen width ranges from 400 pixels to 600 pixels, the navigation bar will move to the top of the page. If the screen width is smaller than 400 pixels, six images will move into three rows. (Use www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ to test)

Fluid Grid – One of the Three Major Elements in RWD

  • What is fluid grid?

Fluid grid is one of the three necessary elements in responsive web design (the other two are media queries and flexible image). Fluid grid requires that page elements use relative units (such as percentage or EM), rather than absolute units (such as pixels).

This idea came from Ethan Marcotte. When writing code, Ehtan Marcotte realized that, whenever a complex grid has been designed to meet customer demands, customers, as well as the client user, always required a fluid layout. However, at that time, almost all of the grid-based designs are fixed width strictly. So he thought to build fluid grid.  The idea is to use the relative size, combined with the percentages and EM, to get corresponding width by simple segmentation, which is same as the pixel width in fixed-width design.

  • Fluid grid VS fixed grid

Fluid grid is created through the intelligent usage of div, percentages and simple mathematical calculations. Fixed layout has a fixed-width container, and each inside module is also width fixed rather than percentage. Importantly, the container cannot be moved. No matter how the visitor screen resolution is, the pages display the same width as other visitors. Compared with the fixed grid layout, the main part of the fluid grid layout is set with a percentage width, so it can be automatically adaptive to the various screen resolutions of users.

However, many designers still prefer fixed grid layout, because it has a lot of advantages. In terms of design, fixed grid layout is easier to customize, and there will be no trouble of pictures, forms, videos, and other fixed width content, because it has the same width in all browsers. Moreover, it does not need min-width or max-width in fixed grid, so all the browsers can support it. Nevertheless, it will leave a big blank in fixed-width layout for users who use the high resolution screens; also, the vertical scroll bar and horizontal scroll bar will appear when the screen resolution is too small.

Fluid grid layout just can overcome this defect of the fixed grid layout. The blank area around the pages is same in all screen resolutions and browsers in fluid grid layout, leading to a more beautiful visual appearance. If the design is appropriate, it also can avoid horizontal scroll bar appears in a small screen resolution. In addition, for the users, fluid grid layout looks more friendly because it is automatically adaptive to users’ settings.

Of course, compared with the fixed grid, fluid grid also has some drawbacks. For instance, in the fixed grid layout, we can ensure what the designers see is that the users see; however, in the fluid grid layout, it is hard for designers to control the users seeing, and may ignore some errors, because the layout looks fine in designers screen resolution. Besides, in the particularly large resolution, the content will be stretched into a very long line, and becomes difficult to read.

How could Fluid Grid Work?

In order to overcome some problems in the fluid grid layout, we can use simpler design. The less fluid layout depends on pictures and difficult technology, the easier it is for the production and maintenance. Use simpler design and code, the compatibility issues can be better prevent, detect and resolved.

In addition, in order to allow the fluid layout has fixed-width when the screen resolution is very large or very small, to avoid the page being too large or small to read, we can use min-width and max-width.

Some Fluid Grid Layout Design Examples

Example design by Ethan Marcotte