Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a fluid grid layout since it’s easier to handle grid based layouts in different kind of devices.

It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial we are going to focus on fluid grids and their importance in responsive design.

Table of Contents:

  1. What is a Fluid Grid Layout?
  2. Web Design Using Grids: Tools and Inspiration
  3. DiscountHotels – Design a Modern Business Website
  4. Trendy Web Designs From Deviantart

What is a Fluid Grid Layout?

It’s important to know the meaning of fluid grids before we start thinking about the designs. There is no better explanation than the definition given by Wikipedia on fluid.

A fluid is a substance that continually deforms (flows) under an applied shear stress – Wikipedia

So I’ll make things clear by explaining the above definition in simple practical terms. In web design, fluid will be our design or layout and shear stress will be the screen size or user device. Regardless of what the device or screen size is, components in fluid designs are going to flow and adapt to the user environment.

Importance of Fluid Grids

In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.

Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.

How Fluid Grids Work

We used to design inside fixed grids with the 960px system. Then the layout became adaptive by using different pixel sizes at different screen sizes. It was all about pixel based layout design. Now the time has come to create percentage based designs which are known as fluid designs.

In fluid grids we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.

Before we dig deeper into fluid grids, let’s take a look at some cool fluid designs to get an idea about how fluid layouts work.

Dusty Cartridge

Palantir.net

Dress Responsively

Fluid Grid Systems and Generators

Creating a fluid grid from scratch is not an easy task and will require time and effort. Hence it’s wise to choose an existing CSS Grid Framework or Grid Generator as the base for your layout design. The following are some free CSS grid systems and generators.

Most of the CSS grid frameworks will come with advanced built in features and have been tested across many browsers. The purpose of this tutorial is to understand fluid grids from top to bottom. Hence it’s wise to generate a fluid grid which will enable you to learn the basics of fluid grids.

I will be using the  Variable Grid System to generate a fluid grid according to our preference. Follow this link and adjust the variable values. I’ll be using the following values.

Column width – 60
Number of columns – 12
Gutter width – 20

Demo

Then download the fluid version of the CSS file. Now open it in your favorite text editor and search for Grid >> 12 Columns. The code below shows the content of Grid >> 12 Columns section.

.container_12 .grid_1 {
    width:6.333%;
}

.container_12 .grid_2 {
    width:14.667%;
}

.container_12 .grid_3 {
    width:23.0%;
}

.container_12 .grid_4 {
    width:31.333%;
}

.container_12 .grid_5 {
    width:39.667%;
}

.container_12 .grid_6 {
    width:48.0%;
}

.container_12 .grid_7 {
    width:56.333%;
}

.container_12 .grid_8 {
    width:64.667%;
}

.container_12 .grid_9 {
    width:73.0%;
}

.container_12 .grid_10 {
    width:81.333%;
}

.container_12 .grid_11 {
    width:89.667%;
}

.container_12 .grid_12 {
    width:98.0%;
}

As you can see container_12 is the main container. Each and every element in our design should be inside a container with the class container_12 . Then percentage based widths are assigned to classes with .grid_1 , .grid_2 … .grid_n. Fluid grids are built using columns that are considered fluid columns. When the screen size is changed, the widths of these columns will adjust proportionally to its parent container.

We have 12 fluid columns in our grid. So let’s take a look at how the columns are stacked up in our layout.

The code for the above section is given below. You can check the downloaded files for more information.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid with Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12" id="single-columns">
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
</div>
<div class="container_12" id="double-columns">
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
</div>
<pre>

Each set of components is contained within an element with the class container_12. Inside the container we can use the grid_n class to create fluid columns with specific widths. Using grid_1 will give 1/12 width of the original grid and grid_2 will give you 2/12.

You can load the demo and resize your browser to view the fluid nature of grid columns.

Nested Fluid Columns

When you have a CSS framework, creating a grid with fluid columns is straightforward. But not all designs are going to be straightforward like the layout shown previously. We might need to create columns and rows inside other columns and rows. Columns contained within a parent column are called nested columns. Let’s see how we can create nested fluid columns using the CSS file we generated earlier.

Demo

The layout given above contains 2 rows. The first row is divided into 2 sections of 6 columns and each of the 2 sections are divided again into 4 sections of 3 columns.

Likewise the second row is divided into 3 sections of 4 columns and each of the 3 sections is divided again into 3 sections of 4 columns. This is how you create nested columns in grids. Let’s see how to code the above layout.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Nested Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12">
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
</div>
<div class="container_12">
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
</div>
<pre>

First we create the main containers and columns as we did in the previous section. Inside the column we need to create another container with container_12 class for nested columns. Now we get another 12 columns inside the main 6 columns. Then 12 sub columns can be divided as necessary. Now you should have a clear knowledge of creating fluid grids and working with nested columns. Let’s move further in fluid grids.

Design Beyond Fluid Grid

Most designers that are just starting out think that using a responsive CSS framework will make your design responsive. Unfortunately responsive design is not that simple. Fluid grids will adapt to the change in browser window or device. Unless you plan the design carefully , users will have problems browsing your content on smaller devices when you use fluid grids.

Consider the screen below.

This is how the fluid grid discussed in earlier sections will display on small screens. These are just grid columns without proper data. Even in this case the number 1 is not displayed properly. When it comes to real content it’s going to be a total mess. In this scenario we need to adjust the widths of the columns in order to provide better user experience.

You can use CSS media queries to adjust the widths of columns for different screen sizes. In the above scenario you can double the column width and keep 6 columns instead of 12 to provide better readability of your content. So make sure not to depend only on fluid grids in responsive designs.

Testing Fluid Grids

Now that we have completed the basics of fluid grids, we can move onto creating a simple demo with jQuery to test the fluid grid for different screen sizes. First we are going to create the page layout and navigation as shown below.

Demo


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid Tester

</pre>
<div id="device_navigation">
<div id="device_panel"><a onclick="changeGrid('desktop');" href="javascript:void(0);">Desktop</a>
 <a onclick="changeGrid('tab_lan');" href="javascript:void(0);">Tablet Landscape</a>
 <a onclick="changeGrid('tab_pot');" href="javascript:void(0);">Tablet Portrait</a>
 <a onclick="changeGrid('mob_lan');" href="javascript:void(0);">Mobile Landscape</a>
 <a onclick="changeGrid('mob_pot');" href="javascript:void(0);">Mobile Portrait</a></div>
<div style="clear: both;"></div>
</div>
<div class="main_wrapper"><iframe src="media_query.html" height="240" width="320"></iframe></div>
<pre>

Our testing page has basic HTML layout with jQuery. Element with the ID device_panel will contain the navigation for standard devices like desktops,mobiles and tablets. Once the link is clicked changeGrid function will be called with the type device as parameter.

On the bottom section we have an IFRAME which will be used to load our fluid grid. Fluid grid is contained in the media_query.html file. Now let’s take a look at the changeGrid function.


function changeGrid(device){
               if(device == "desktop"){
                   $(".wrapper").css("width","960px");
               }
               if(device == "tab_lan"){
                   $(".wrapper").css("width","768px");
               }
               if(device == "tab_pot"){
                   $(".wrapper").css("width","600px");
               }
               if(device == "mob_lan"){
                   $(".wrapper").css("width","480px");
               }
               if(device == "mob_pot"){
                   $(".wrapper").css("width","320px");
               }
           }

Once the function is called, it will check for the device using the passed parameter. Then it will change the width of the .wrapper (IFRAME) to the standard width for the device. Then we will be able to see how a fluid grid works on smaller screens.

Fluid grid used inside media_query.html file will be similar to the examples we discussed in earlier section. You can use the demo files to customize the codes. You should have something like the following screen as the testing screen.

Download

Wrap Up

Fluid grids allow you to create responsive designs which suit dynamic screen sizes. The complexity of developing a fluid grid can be minimized by using an existing CSS framework. You cannot depend only on fluid grids to provide the perfect responsive design for you. Adjust the fluid grid when necessary according to your design and try to provide the best browsing experience for the user. Hope you learned something from this tutorial and I’d like to hear your suggestions.

If you want to learn more about how to:

  • Create presentations inside the infinite canvas of modern web browsers
  • Build presentations that work anywhere, any time, and on any device
  • Build dynamic presentations with rotation, scaling, transforms, and 3D effects

You should consider reading Rakhitha Nimesh book “Building Impressive Presentations with impress.js”

This was the tutorial, but we have more for you. The next section will present tools and awesome examples of using grid systems.

Web Design Using Grids: Tools and Inspiration

When I started this web designing thing all my work just didn’t look “professional”. It was pretty, nice colors, nice fonts, nice bevel/emboss effects…but something was annoying and I didn’t know what. Then I found out. Grids are one of the smallest differences between good and great design. It is quite easy to find a way to realign aspects of the design that give it a completely different look. Of course we have also other spacing adjustments but when you put things inside grids everything tends to look much better.

Today we’ll find out together why they make such a difference, who is doing it right, and which tools you can use to have a better grid.

So, grid systems?

There are a few ways to group elements on page. Color, size, alignment. But surely alignment is the least utilized of them. Maybe because there isn’t a “group tool” like we have color tools or size tools (in Photoshop, for example, is quite hard to align things in a rational way).

Then they come to save us.

Grid systems give an easy and safe way to better organize your content, so you don’t need to worry too much about it. Things will be like playing with Lego bricks from now on :)

They have a few preset sizes of blocks and preset number of maximum blocks per line. So what you have to do is to say “hey I want three small blocks and one medium on first line, but one big and one small on the second.” Pretty easy, huh?

Let’s see who has done their homework

Portfolio-like grid: Sylvan-Olliver.com

It isn’t that hard to see that this website is based on a grid, right? Since there’s not a lot of text, the images act like blocks and we have an isolated block as menu.

Mixed blocks: Rivers&Robots

Here you may notice that on the first line the blocks are one size and on the second they change. Because of their good grid system everything looks symmetrical and right (otherwise something would just look strange).

Clean and responsive: Upperdog.se

They have a quite simple structure, but the best part is that their grid system adjusts to screen size and when it detects mobile resolutions it resizes contents blocks so users will get a way better interface.

Lot of content: Drupal.org

Drupal is one of the best CMS’ in the world. But it has to show a lot of content on its homepage. Without a nice grid system all this content would look a mess. And here is the magic, you can see which content is related to which even on this small screenshot (where you just can’t read the content).

Tools

I’m sure you want to use a grid system as soon as possible. So I’ll show you some cool tools to make your life easier.

960.gs

Easy and one of the most used grid systems. A great starting point.

1140px – cssGrid.net

Responsive and easy to use also. If you just want to get started with responsive grid systems, take a look at this one.

Golden Grid

One of the most powerful grid systems. If you want a complete solution go with this one.

BootStrap

Project from Twitter that is also a complete CSS toolkit. Pretty cool :)

Yet Another Multicolumn Layout – YAML.de

Slim framework with accessibility concerns

BlueTrip.org

Collection with some cool tools, this project  is much more than an ordinary grid system. Worth checking out!

ElasticCSS.com

As name says, it focus in easier implementation of fluid, elastic and multicolumn interfaces.

YUI 2 – Grids CSS

4kb file that allows you to do A LOT.

1 Line CSS Grid Framwork (Experiment)

It’s not a framework per se, but has a nice logic and worth checking to remember that sometimes a solution is way easier than it seems.

Are you hungry yet?

So have I missed anything? Do you have any other nice tool to share? I’ll be glad to hear from you via comments!

Now let’s go trough one more tutorial and create fluid grid based web design.

DiscountHotels – Design a Modern Business Website

In the following tutorial we are going to browse through the making of a web layout for a hotel website which offers deals related to trips and hotel discounts. Be sure to follow each step and if you are a bit confused, take a look at the final result to better solve your problem.

Editor’s note: DiscountHotels exists in real life and is one of the top services in finding the best deals for flights and hotels. We respect their trademark in every way.

Resources:

Final Result:

Step 1

To start our template create a new document with the sizes indicated in the image below.

Step 2

Fill the whole document with a simple gray color for beginning.

Step 3

Fill 80% of that simple gray color with a big rectangle and fill with white.

Step 4

Add this drop shadow effect for the white rectangle we have created in the previous step.

Step 5

Now we’re adding some contact information in the right side of our header. Get the icons from the resources list located at the beginning of the tutorial.

Step 6

Type in “Discount Hotels” with Nevis Font – this will be the text of our logotype, then add these drop shadow details.

Step 7

Now add a gradient overlay effect with the colors indicated in the screenshot.

Step 8

Now we are creating a blue bar where all our navigation links will be placed.

Step 9

Add the following Gradient Overlay effect for the bar we’ve recently created.

Step 10

With the preset Arial font, we are adding nav links which we will add some drop shadow to. Then we must create a 1 px black line, which will work as dividers for the nav links.

Step 11

Add a darker blue shape which fits the home section. It will be a part of our hover effect for nav links.

Step 12

Add gradient overlay style for that blue shape we created in the previous step with the colors stated in the image.

Step 13

As a last element for the hover effect, add some drop shadow style with the details as shown in the image.

Step 14

Get a beautiful landscape image (free or stock one), and place it under our nav links. It should be bright, colorful and high-quality.

Step 15

Create a white, rounded rectangle, where we’ll place some more information and input forms. For beginning add some dummy text “Book Your Hotel”

Step 16

Create a “long” grey rectangle and give it a 1px stroke as stated above. With a darker grey color add some text in that box.

Step 17

Now create a simple grey-colored circle, and add the following gradient overlay details to it. Then add a dark 1px stroke to it.

Step 18

This is our result so far, be sure you followed all steps listed.

Step 19

Now it’s time to create a simple input form for our shape. To do this, just make a white rectangle in the specific zone, and add a 1px grey stroke, and you will achieve such result.

Step 20

Now add 5 more as seen below. For those forms where a drop-down is present, use the Custom Shape (U) and add a simple arrow as seen below.

Step 21

Now it’s time to create another shape, with the following gradient overlay details. It may be rectangle or square.

Step 22

Add some important text in that box, with a simple white and the following style details.

Step 23

Now it’s time to place some text on that stock image we’ve put under the nav links. Use whatever font you’d like, and add the style details indicated on the image.

Step 24

Now as we’ve finished with that image, it’s time to finish with that white box, which keeps those forms and shapes in it. Add a rounded rectangle with this drop shadow effect.

Step 25

Add some Gradient Overlay details with the following colors.

Step 26

Add text for our big 3D button, and then style it with the drop shadow effect.

Step 27

Now we are creating another small gray 3D shape with the following details as stated on the image.

Step 28

Place some gradient overlay styling for that box, by following the colors shown on the image.

Step 29

After we finish the rectangle, it’s time to add some text which will ask your visitors to subscribe to your newsletter. Also, create a simple input box which is identical to the one from step 19.

Step 30

Now we place some simple text and create another drop-down form like in step 20.

Step 31

Under the “hotel deals” text, you should add another big, blue rectangle with hex code #3f8ac1 which is also shown on the image. The color is not so important because it will be changed with a color overlay effect in the next step.

Step 32

Now we must change the color of our rectangle by adding a color overlay effect, you have to add also a 1 pixel simple grey stroke to the rectangle.

Step 33

In the grey rectangle we have recently created, we must add some content. Add a simple square image which will show the location you are featuring. Also a title and some featuring text should be added.

Step 34

To increase the beauty and brightness of that rectangle, we must add a button and a price which will show the price of the “special deal” the website offers. The effect of the text and the button creation techniques are the same as in past steps.

Step 35

Copy that rectangle with special deals, and paste it many times because you won’t have only one deal, but about 6.

Step 36

We are almost done with our content section, and now moving to the sidebar. Take another stock image and add some white text and the following styling.

Step 37

Now we create a new shape under that stock image. The shape is identical to the one we have created in step 2-3 (our background).

Step 38

In the white shape we have created in the previous step, you add a simple rectangle with the following “Gradient Overlay” styling effect.

Step 39

For the same blue rectangle, add a drop shadow effect with the details stated in the image below.

Step 40

With the Arial font, start adding city names. For the font, add the styling shown on the image below.

Step 41

Now add a shape (of any color) which covers one of the locations you have written, then apply the Gradient Overlay styling.

Step 42

Now it’s time to add some simple text, which will define the special deals you are promoting and show in the sidebar of your web layout.

Step 43

Add a facebook fan page screenshot under the last shape we have created in the last steps, then make a box like you did in step #37.

Step 44

Now for the latest rectangle shape, create another also rectangle shape which will be located inside of it. Then set its drop shadow effect by following the image.

Step 45

For the same rectangle shape, add the following gradient overlay styling, with the colors shown in the image.

Step 46

Add a prominent and relevant title, then place some dummy/random text in the shape created.

Step 47

Add one more stock image with text under the section of all “Special Deals”. It will be first element for our footer section

Step 48

This is the last element for our footer. Add all kinds of text, links, also copyright information and you may try adding a big blue 3-d like buttonlike we made earlier in this tutorial.

What do you think of this tutorial? Tell us in the comment section.

Editorial Team

Written by Editorial Team

59 Comments

  1. Nice post mate!!clear explanation…Thanks for your article…

    Reply

  2. A topic near to my heart thanks, please consider a follow up post. good day! I like your posts. I hope that you will update more articles…More power.. Thank you for the great site … full of useful information.

    Reply

    1. Hello

      Thank you very much for your comment.

      I am glad that you liked my article and we are planning on better quality articles this year to teach beginners in web design. So stay tuned by subscribing to 1stWD.

      Reply

  3. Estiaq Ahmad Lemon February 13, 2013 at 03:01

    Thanks Rakhitha Nimesh, I learn many things from here and i hope in future you will keep this thing going on….
    Estiaq Ahmad Lemon

    Reply

    1. Hi Estiaq

      Thank you very much.

      I am planning to provide similar tutorials in future with more improvements. :)

      Reply

  4. Great ARTICLE Rakhitha Nimesh…It must have taken you time, experience and research to come up with this. The step by step layout optimization is well articulated.

    Thank you so much for your time.

    Kind regards,
    Peter

    Reply

    1. Hello Peter

      Thank you very much for your interest in my article.

      In 1stwebdesigner we are always focused on providing fresh content with lots of research and experience.

      Please let us know how I can improve my explanation process? What’s missing? etc..

      Also let us know what you like to see on 1stwebdesigner in the future articles.

      Reply

  5. Thanks for a brilliant share Nimesh. Responsive web design is the hottest topic being discussed everywhere. and I badly need to learn this art very quickly :)

    Reply

    1. Hi Shoaib

      Thanks for liking my tutorial. I hope you learned something about responsive design.
      Let us know what you are finding difficult to learn so that we can help you through future tutorials.

      Reply

  6. Isn’t Twitter Bootstrap and Foundation Zurb very similar..??

    Reply

    1. Hi Azhar

      I think they will be similar in nature for general purposes. But you may find each of them contains different components and features for advanced use.

      Reply

  7. Thanks For This Tutorial.
    I am using Bootstrap since 3 months. It’s Brilliant. Bootstrap Helped me a Lot.
    My Latest website with bootstrap. The Red’s Group

    Reply

    1. Hi Azhar

      You are welcome.

      Bootstrap is my favourite too. What would you like to see in 1stWebdesigner in the future tutorials?

      Reply

      1. My Age is 17 now and i am a website designer and developer now.
        I know php,mysql,html,css,html5,css3 and wordpress.

        I would like to see Ajajx And jQuery Tutorials in 1stwebdesigner future tutorials.

        I Created a new blog after reading “Every Website Designer Have a Blog” article on 1stWD.
        Could you suggest how I could improve my blogging skills.

        Reply

  8. Really interesting article… Very well explained as well… Thanks!

    Reply

    1. Hello
      Thank you very much for your interest in my article. I hope you will stay with 1stwebdesigner to experiece more quality articles on web design.

      Reply

  9. That was really awesome, full guidelines step by step to optimize layout from fixed width to fluid. I just was wondering if this could be helpful for me as I’ve also fixed width template.
    Great tutorial ..

    Reply

    1. Hello Imran

      I am glad you liked my tutorial. You should definitely consider converting your fixed layout to a fluid layout to make it compatible with mobile device.

      Let me know if you have any questions.

      Thank you

      Reply

  10. This tutorial is awesome. Many responsive web design frameworks are available now which can be used to create fantastic responsive websites. A framework I have used recently is Skeleton Boilerplate. This is framework is quite helpful in this trend. There are also many good books available to start designing responsive web design. I just bought a book on Responsive Web Design from http://www.1stwebdesigner.com here http://bit.ly/TD08mW . They have demonstrated each step and technique with fantastic examples. I think the book is worth the price.Thanks.

    Reply

    1. Hello Hriday

      Thank you very much for liking my article.

      Skeleton is my favorite too. Its simple and effective. Do you have any tips or difficulties you faced with creating the responsive layouts with skeleton ?

      1stwebdesigner is the best. Responsive design book is a very good guide to start from scratch. Hope you follow 1stwebdesigner with the upcoming awesome tutorials and books in future.

      Reply

  11. While creating a new website, these samples are very useful and handlyl.
    Now a days having a responsive web design is very important. any tips on how to modify existing websites ?

    Reply

    1. Hello Prowebguru

      Thank you for the interest in my tutorial.

      Responsive design works on column based designs. In my example 12 columns are used. So we have to try to separate exiting designs into column based model first.

      Then have to separate each section(row) like header,footer,navigation, etc… If everything goes well, we can apply a responsive framework easily to the separated sections.

      Finally we can adjust the deign using media queries for different screen sizes.

      Even though it sounds simple, modifying existing website is very tough process.

      Let me know if you have further concerns.

      Thanks

      Reply

      1. Thank you for your valuable inputs.
        I will try separating all sections and if I find any difficulty I will contact you.
        Thanks.

        Reply

        1. Sure. Let me know if you have any difficulties .

          thank you.

          Reply

  12. i used your article so much, you made me thinking about my methods thank you

    Reply

    1. Rakhitha Nimesh December 23, 2012 at 08:24

      Hello Netran

      Thanks for your interest in my tutorial. Feel free to share your methods also.

      Reply

  13. Great article, very helpful. We’re using bootstrap too.

    Reply

    1. Rakhitha Nimesh December 20, 2012 at 22:12

      Hello Rachel

      Great to hear. Can we know why did you select bootstrap instead of other frameworks ?

      Thank you.

      Reply

  14. It’s very useful for my new website. Thank you so much for this code. Thanks You Very Much..

    Reply

    1. Rakhitha Nimesh December 20, 2012 at 01:02

      Hello Saif

      Let us know your experiences in responsive design once you create your new website.

      Thanks

      Reply

  15. Ludwig Königsberger December 16, 2012 at 06:58

    Great read into fluid grids and also a great tutorial for starting into rwd!!

    Reply

    1. Hello Ludwig
      Your website seems to be responsive as well. Hope you share your experiences on RWD with us.

      Thanks

      Reply

  16. Nice read! i have converted my site to responsive => Designzzz its not really that good, but yeah good for my first time :p

    Reply

    1. Rakhitha Nimesh December 16, 2012 at 06:56

      Hello Ayaz

      Your site looks cool. Just need few adjustments maybe to the tablet size screens and your site will function as fully responsive one.

      Thanks for sharing your experiences.

      Reply

      1. Yes Rakhitha, yes you are correct it still needs adjustments, and thanks for appreciating :}

        Reply

        1. Rakhitha Nimesh December 19, 2012 at 06:25

          Hello Ayaz

          Hope you will come back and share your experiences once you make the site fully responsive. :)

          Reply

  17. Nimesh I really loved the way you outlined all the important factors of a fluid grid responsive designing in such a briefly illustrated article. Never knew that it would be more effective than traditional methods. I m certain that others will learn quite a lot from this well-informed material. Thanks for your efforts!

    Reply

    1. hi Logopearl

      Thank you very much for your interest in my tutorial.

      Reply

  18. Great tutorial. I have been trying to make most of my new projects responsive. I converted My Blog to a responsive design a few months ago.

    Reply

    1. Rakhitha Nimesh December 12, 2012 at 11:01

      Hello Joey

      I checked your blog and it looks awesome. Good example for Responsive Design.

      Why don’t you share some of the things you learned and issues faced making it responsive.

      Thanks for sharing your thoughts.

      Reply

  19. Hello, thank you so muche for this code. It’s very useful for my new website. Enjoy Responsive Web Design !

    Reply

    1. Rakhitha Nimesh December 11, 2012 at 10:33

      Hi Solutis

      Looks like you love responsive design as well. what is your new website ?

      Is it responsive ?

      Let us know.
      Thanks for your interest.

      Reply

  20. Responsive web design is defiantly the future of web design. I think in a couple of years from now every major website will be built using responsive web design.

    Reply

    1. Rakhitha Nimesh December 10, 2012 at 23:26

      Hello Dave

      Definitely its going to be a major factor in web design . Already lots of site are redesigning and restructuring to adapt to mobile devices.
      So are you a web designer ? Do you have working experience in responsive design ?

      Thanks for sharing your thoughts

      Reply

  21. I would like to give you thanks. I hope this will be very helpful for every web developer. Nice and helpful post.

    Reply

    1. Rakhitha Nimesh December 10, 2012 at 23:27

      Hi webinfobd

      Thanks for the interest in my article.

      Reply

  22. Antonio Rodrigues December 6, 2012 at 04:36

    Foundation by Zurb is my favorite prototyping system, and very helpful when building fluid grid based responsive layouts. Robust yet very easy to get started, with online docs & examples clear and simple. Currently working on two projects, Foundation based ;-)

    Reply

    1. Hi Antonio

      Thanks for sharing your thoughts.

      I havent used Zurb yet.But lot of people who have already worked with the frameworok are quite happy with everything it provides.Can you share the new things you learn and difficulties faced througuout the process regarding responsive design.

      looking forward to hear from you.

      Reply

  23. Thanks for great article ! I’m using Sketeton framework for html5 templates.

    Reply

    1. Hi Kimmy

      Skeleton is one of my favorites too. Recently I had the chance to work with skeleton WordPress theme and it looks awesome.

      Thanks for sharing your thoughts

      Reply

  24. Brilliant way to explain things.
    Thanks for all the details.
    Dileep

    Reply

    1. Hi Dileep

      Thanks for sharing your thoughts

      Reply

  25. Victor Valencia December 1, 2012 at 15:16

    I have worked with bootstrap and I feel very good, this is very good article especially now that the mobile trend becomes increasingly strong, thanks for sharing Excelent Article!

    Reply

    1. Hi Victor

      Bootstrap seems one of the popular among web designers. Thanks for sharing your thoughts and let us know any problems you faced or things learn throughout your project.

      Reply

  26. I use Bootstrap framework for my first responsive Joomla Template.

    Very useful and save a lot of time for developers.

    Recommend to use it. You can check my templates

    Thanks !

    Reply

    1. Hi Chameron

      Thanks for your suggestions.

      I have worked with Bootstrap in WordPress and it is very easy to handle with the other features it provides. You mentioned that you have used it on joomla. So Bootsrap will be compatible with other popular frameworks as well. Feel free to share your thoughts on other frameworks if you have previous experience on them as well.

      Reply

  27. One grid system you left off the list is Zurb Foundation. It’s been my favorite responsive grid system to use because it offers several features beyond the grid itself, such as pre-defined classes for basic styling of buttons, forms, tabs, navigation, and more. It also has some (optional) built-in jQuery features such as a responsive slideshow and modals. It’s a very robust grid and prototyping system.

    Reply

    1. Hi Ashlee

      Thanks for mentioning about Zurb Foundation. It looks like a complete framework for responsive design.

      I haven’t had the chance to work with this framework and hence I didn’t include it in the tutorial. I’ll make sure to follow this framework and see how these features work.

      Reply

      1. Zurb Foundation it’s an amazing tool, simple an effective :)

        Twitter bootstrap is a great solution but for me it’s more a design pattern collection. There are too many options available for one man.

        Reply

Leave a Reply