Skip navigation
Jason Hoye
Currently Being Moderated

Fluid grids: initial ".css" or media queries?

Feb 10, 2013 8:56 PM

When creating a fluid grid layouts you start with your "fluid-grid.css (or whatever you name it). At what point is it best to switch to media queries and why? Also, what is the best technique to switching so that nothing breaks? Thanks

 
Replies
  • Currently Being Moderated
    Feb 11, 2013 3:56 AM   in reply to Jason Hoye

    Contrary to majority view, I feel it is best to create a fluid design web page based on a screen screen size of greater than 768px. This will encompass most devices greater than smart phones.

     

    Then use media queries to adjust the layout for smaller screens.

     

    (Majority view is to design for smart phones first)

     

    PS. Have a look here http://pleysier.com.au/

     

    Message was edited by: Altruistic Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 5:01 AM   in reply to Ben Pleysier

    Altruistic Gramps wrote:

     

    Contrary to majority view, I feel it is best to create a fluid design web page based on a screen screen size of greater than 768px. This will encompass most devices greater than smart phones.

     

    Then use media queries to adjust the layout for smaller screens.

     

    (Majority view is to design for smart phones first)

     

    PS. Have a look here http://pleysier.com.au/

     

    Message was edited by: Altruistic Gramps

    Hi Gramps

     

    You may be interested to know that this 'view' is now changing to fluid layouts first for tablet/desktop, then mobile second, (if at all).

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 7:56 AM   in reply to pziecina

    Thank you PZ,

     

    It does seem to be the most sensible approach

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 8:35 AM   in reply to Ben Pleysier

    Phew!

     

    That's a lot of css to keep on top of aint it Gramps?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 10:21 AM   in reply to Jason Hoye

    Actually, the Fluid Grid Layouts feature in DW does use CSS media queries in the FGL.css.  Everything is built on the mobile layout first with special rules inside media queries for tablets and then desktops.

     

    David Powers' tutorial on "Introduction to CSS Media Queries" provides an overview of how to do it manually without the FGL feature.

    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 1:37 PM   in reply to osgood_

    @osgood_

     

    I used the Zurb-Foundation framework and have not cleaned the CSS of unnecessary style rules.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 11:38 PM   in reply to Ben Pleysier

    Altruistic Gramps wrote:

     

    @osgood_

     

    I used the Zurb-Foundation framework and have not cleaned the CSS of unnecessary style rules.

     

    Hi Gramps,

     

    Never heard of it but then again I don't now what a lot of those css styles are for or even do.

     

    Then again the responsive design seems to work nicely so I guess it's ok!

     

    Hummm........still havent gone there myself. I'm battling with it, how much extra time and palnnng it takes and which client's really will benefit from it.

     

    Just another problem stacked upon the myriad of problems which already exist.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points