How Fluid Grids Work in Responsive Web Design

Posted in Coding, Tutorials, Web Interface • Posted on 59 Comments

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 grid based 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.

What is a Fluid Grid?

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 layout 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”

22 Written ArticlesWebsiteGoogle+

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

59 Comments Best Comments First
  • Ashlee

    Thursday, November 29th, 2012 10:59

    1

    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.

    +1
    • Rakhitha Nimesh

      Friday, November 30th, 2012 21:37

      2

      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.

      +2
      • GeekGrunge

        Thursday, January 10th, 2013 08:07

        41

        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.

        0
  • Joey

    Tuesday, December 11th, 2012 12:44

    19

    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.

    +1
    • Rakhitha Nimesh

      Wednesday, December 12th, 2012 11:01

      20

      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.

      +1
  • Hriday Das

    Saturday, January 5th, 2013 11:52

    39

    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.

    +1
    • Rakhitha Nimesh

      Friday, January 11th, 2013 09:39

      45

      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.

      +1
  • LogoPearl

    Thursday, December 13th, 2012 09:31

    21

    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!

    +1
    • Rakhitha Nimesh

      Thursday, December 13th, 2012 21:53

      22

      hi Logopearl

      Thank you very much for your interest in my tutorial.

      0
  • Solutis

    Tuesday, December 11th, 2012 09:12

    17

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

    +1
    • Rakhitha Nimesh

      Tuesday, December 11th, 2012 10:33

      18

      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.

      +1
  • Antonio Rodrigues

    Thursday, December 6th, 2012 04:36

    11

    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 ;-)

    0
    • Rakhitha Nimesh

      Saturday, December 8th, 2012 12:19

      12

      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.

      0
  • Ayaz Malik

    Saturday, December 15th, 2012 05:58

    23

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

    0
    • Rakhitha Nimesh

      Sunday, December 16th, 2012 06:56

      24

      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.

      0
      • Ayaz Malik

        Wednesday, December 19th, 2012 00:42

        28

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

        0
        • Rakhitha Nimesh

          Wednesday, December 19th, 2012 06:25

          29

          Hello Ayaz

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

          0
  • Ludwig Königsberger

    Sunday, December 16th, 2012 06:58

    25

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

    0
    • Rakhitha Nimesh

      Sunday, December 16th, 2012 08:07

      26

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

      Thanks

      0
  • Chameron

    Friday, November 30th, 2012 23:32

    3

    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 http://joomavatar.com/demos/templates/j25/avatar_simple/

    Thanks !

    0
    • Rakhitha Nimesh

      Saturday, December 1st, 2012 06:50

      4

      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.

      0
  • saif

    Tuesday, December 18th, 2012 14:13

    27

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

    0
    • Rakhitha Nimesh

      Thursday, December 20th, 2012 01:02

      31

      Hello Saif

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

      Thanks

      +2
  • Victor Valencia

    Saturday, December 1st, 2012 15:16

    5

    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!

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:28

      10

      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.

      0
  • Dave Keen

    Monday, December 10th, 2012 04:54

    14

    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.

    0
    • Rakhitha Nimesh

      Monday, December 10th, 2012 23:26

      15

      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

      0
  • Dileep Dharma

    Tuesday, December 4th, 2012 12:52

    6

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

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:26

      9

      Hi Dileep

      Thanks for sharing your thoughts

      0
  • Kimmy | Zerotheme.com

    Tuesday, December 4th, 2012 21:11

    7

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

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:25

      8

      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

      0
  • Rachel

    Wednesday, December 19th, 2012 21:23

    30

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

    0
    • Rakhitha Nimesh

      Thursday, December 20th, 2012 22:12

      32

      Hello Rachel

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

      Thank you.

      0
  • Azhar Khan

    Saturday, January 12th, 2013 14:47

    47

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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:39

      50

      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.

      0
  • Peter

    Friday, January 25th, 2013 10:00

    52

    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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 23:57

      53

      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.

      0
  • Eadnepa

    Tuesday, February 26th, 2013 02:33

    59

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

    0
  • car games

    Monday, February 18th, 2013 05:12

    57

    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.

    0
    • Rakhitha Nimesh

      Wednesday, February 20th, 2013 06:32

      58

      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.

      0
  • Estiaq Ahmad Lemon

    Wednesday, February 13th, 2013 03:01

    55

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

    0
    • Rakhitha Nimesh

      Friday, February 15th, 2013 21:51

      56

      Hi Estiaq

      Thank you very much.

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

      0
  • Shoaib Sheikh

    Thursday, January 24th, 2013 07:52

    48

    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 :)

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:38

      49

      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.

      0
  • Azhar Khan

    Saturday, January 12th, 2013 14:36

    46

    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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:41

      51

      Hi Azhar

      You are welcome.

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

      0
      • Azhar Khan

        Monday, January 28th, 2013 12:37

        54

        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.

        0
  • prowebguru

    Monday, December 24th, 2012 09:50

    35

    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 ?

    0
    • Rakhitha Nimesh

      Monday, December 24th, 2012 20:40

      36

      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

      0
      • prowebguru

        Wednesday, December 26th, 2012 13:43

        37

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

        0
        • Rakhitha Nimesh

          Sunday, December 30th, 2012 18:44

          38

          Sure. Let me know if you have any difficulties .

          thank you.

          -1
  • nitaran tarrah

    Sunday, December 23rd, 2012 04:55

    33

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

    0
    • Rakhitha Nimesh

      Sunday, December 23rd, 2012 08:24

      34

      Hello Netran

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

      0
  • Design Nirvana

    Friday, January 11th, 2013 01:17

    42

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

    0
    • Rakhitha Nimesh

      Friday, January 11th, 2013 08:25

      43

      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.

      0
  • Imran Khan

    Monday, January 7th, 2013 07:18

    40

    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 ..

    0
    • Rakhitha Nimesh

      Friday, January 11th, 2013 09:35

      44

      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

      0
  • webinfobd

    Sunday, December 9th, 2012 16:02

    13

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

    -1
    • Rakhitha Nimesh

      Monday, December 10th, 2012 23:27

      16

      Hi webinfobd

      Thanks for the interest in my article.

      0
  • Eadnepa

    Tuesday, February 26th, 2013 02:33

    59

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

    0
  • car games

    Monday, February 18th, 2013 05:12

    57

    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.

    0
    • Rakhitha Nimesh

      Wednesday, February 20th, 2013 06:32

      58

      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.

      0
  • Estiaq Ahmad Lemon

    Wednesday, February 13th, 2013 03:01

    55

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

    0
    • Rakhitha Nimesh

      Friday, February 15th, 2013 21:51

      56

      Hi Estiaq

      Thank you very much.

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

      0
  • Peter

    Friday, January 25th, 2013 10:00

    52

    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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 23:57

      53

      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.

      0
  • Shoaib Sheikh

    Thursday, January 24th, 2013 07:52

    48

    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 :)

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:38

      49

      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.

      0
  • Azhar Khan

    Saturday, January 12th, 2013 14:47

    47

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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:39

      50

      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.

      0
  • Azhar Khan

    Saturday, January 12th, 2013 14:36

    46

    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

    0
    • Rakhitha Nimesh

      Friday, January 25th, 2013 09:41

      51

      Hi Azhar

      You are welcome.

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

      0
      • Azhar Khan

        Monday, January 28th, 2013 12:37

        54

        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.

        0
  • Design Nirvana

    Friday, January 11th, 2013 01:17

    42

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

    0
    • Rakhitha Nimesh

      Friday, January 11th, 2013 08:25

      43

      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.

      0
  • Imran Khan

    Monday, January 7th, 2013 07:18

    40

    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 ..

    0
    • Rakhitha Nimesh

      Friday, January 11th, 2013 09:35

      44

      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

      0
  • Hriday Das

    Saturday, January 5th, 2013 11:52

    39

    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.

    +1
    • Rakhitha Nimesh

      Friday, January 11th, 2013 09:39

      45

      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.

      +1
  • prowebguru

    Monday, December 24th, 2012 09:50

    35

    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 ?

    0
    • Rakhitha Nimesh

      Monday, December 24th, 2012 20:40

      36

      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

      0
      • prowebguru

        Wednesday, December 26th, 2012 13:43

        37

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

        0
        • Rakhitha Nimesh

          Sunday, December 30th, 2012 18:44

          38

          Sure. Let me know if you have any difficulties .

          thank you.

          -1
  • nitaran tarrah

    Sunday, December 23rd, 2012 04:55

    33

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

    0
    • Rakhitha Nimesh

      Sunday, December 23rd, 2012 08:24

      34

      Hello Netran

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

      0
  • Rachel

    Wednesday, December 19th, 2012 21:23

    30

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

    0
    • Rakhitha Nimesh

      Thursday, December 20th, 2012 22:12

      32

      Hello Rachel

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

      Thank you.

      0
  • saif

    Tuesday, December 18th, 2012 14:13

    27

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

    0
    • Rakhitha Nimesh

      Thursday, December 20th, 2012 01:02

      31

      Hello Saif

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

      Thanks

      +2
  • Ludwig Königsberger

    Sunday, December 16th, 2012 06:58

    25

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

    0
    • Rakhitha Nimesh

      Sunday, December 16th, 2012 08:07

      26

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

      Thanks

      0
  • Ayaz Malik

    Saturday, December 15th, 2012 05:58

    23

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

    0
    • Rakhitha Nimesh

      Sunday, December 16th, 2012 06:56

      24

      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.

      0
      • Ayaz Malik

        Wednesday, December 19th, 2012 00:42

        28

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

        0
        • Rakhitha Nimesh

          Wednesday, December 19th, 2012 06:25

          29

          Hello Ayaz

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

          0
  • LogoPearl

    Thursday, December 13th, 2012 09:31

    21

    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!

    +1
    • Rakhitha Nimesh

      Thursday, December 13th, 2012 21:53

      22

      hi Logopearl

      Thank you very much for your interest in my tutorial.

      0
  • Joey

    Tuesday, December 11th, 2012 12:44

    19

    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.

    +1
    • Rakhitha Nimesh

      Wednesday, December 12th, 2012 11:01

      20

      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.

      +1
  • Solutis

    Tuesday, December 11th, 2012 09:12

    17

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

    +1
    • Rakhitha Nimesh

      Tuesday, December 11th, 2012 10:33

      18

      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.

      +1
  • Dave Keen

    Monday, December 10th, 2012 04:54

    14

    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.

    0
    • Rakhitha Nimesh

      Monday, December 10th, 2012 23:26

      15

      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

      0
  • webinfobd

    Sunday, December 9th, 2012 16:02

    13

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

    -1
    • Rakhitha Nimesh

      Monday, December 10th, 2012 23:27

      16

      Hi webinfobd

      Thanks for the interest in my article.

      0
  • Antonio Rodrigues

    Thursday, December 6th, 2012 04:36

    11

    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 ;-)

    0
    • Rakhitha Nimesh

      Saturday, December 8th, 2012 12:19

      12

      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.

      0
  • Kimmy | Zerotheme.com

    Tuesday, December 4th, 2012 21:11

    7

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

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:25

      8

      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

      0
  • Dileep Dharma

    Tuesday, December 4th, 2012 12:52

    6

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

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:26

      9

      Hi Dileep

      Thanks for sharing your thoughts

      0
  • Victor Valencia

    Saturday, December 1st, 2012 15:16

    5

    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!

    0
    • Rakhitha Nimesh

      Wednesday, December 5th, 2012 05:28

      10

      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.

      0
  • Chameron

    Friday, November 30th, 2012 23:32

    3

    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 http://joomavatar.com/demos/templates/j25/avatar_simple/

    Thanks !

    0
    • Rakhitha Nimesh

      Saturday, December 1st, 2012 06:50

      4

      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.

      0
  • Ashlee

    Thursday, November 29th, 2012 10:59

    1

    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.

    +1
    • Rakhitha Nimesh

      Friday, November 30th, 2012 21:37

      2

      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.

      +2
      • GeekGrunge

        Thursday, January 10th, 2013 08:07

        41

        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.

        0

Comments are closed.

54.161.155.142 - unknown - unknown - US