Skip navigation
PhoenixUK
Currently Being Moderated

Utilising Fluid Grid Layout But Only Requiring Desktop & Tablet Parts Query?

Nov 23, 2012 4:32 PM

Tags: #fluid_grid_layout #fgl

Hi All,

 

I'm studying a foundation degree in ICT and one of the modules is Web Design & Development, for our first assignment we have to design and then implement said design to a working website.

 

I want to use the Fluid Grid Layout feature in CS6 and whilst I've watched one or two great tutorial video's on creating one from scratch in DW, does anybody know how I can just utilise the desktop and tablet part of the FGL?

 

The reason for this, we've not been told to design / develop for smartphone devices and hence I need to stick to just desktop and tablet.

 

I have read on here this evening about FGL's possible inadequacies but for my level of knowledge and coming from using Joomla in the past for my sites, I would like to stick it out with DW FGL if I can that is.

 

Any help or advise on the above issue / query would be very much appreciated indeed.

 

Regards,

Rob

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 23, 2012 8:14 PM   in reply to PhoenixUK

    Well, AFAIK there is no way to 'disable' mobile layout while you're using Fluid Grid in DW. However, you can skip the mobile design, start from the 'Tablet' design bit then move to Desktop design. This way, your site will be messed up on a mobile device if you test on one. But you've mentioned you're not looking at doing it for mobile device. So I think you should be okay with that.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2012 3:45 AM   in reply to PhoenixUK

    The Fluid Grid Layouts in Dreaweaver CS6 are designed on the principle of "Mobile First". When you create a Fluid Grid Layout page, Dreamweaver creates three sets of style rules. Each set contains styles for each Fluid Grid Layout Div.

     

    The media queries used for the tablet and desktop styles are designed to inherit values from the mobile styles. So, the theory is that you create all the basic styles in the mobile set, and use the tablet and desktop styles to override the basic styles only when necessary. The media query for tablet styles looks like this:

     

    @media only screen and (min-width: 481px)

     

    Similarly, the media query for desktop styles also uses only min-width as its condition:

     

    @media only screen and (min-width: 769px)

     

    In theory, you could ignore the mobile styles, and put all your basic styles in the tablet section. But there doesn't appear to be any advantage in doing so. The real difficulty in working with Fluid Grid Layouts is understanding how the CSS cascade works. If you understand that, you'll probably end up with a design that works across all resolutions anyway. Unfortunately, Dreamweaver's styles are unnecessarily repetitive, and the CSS Styles panel's lack of support for media queries means that you need to work almost exclusively in Code view to create the styles.

     
    |
    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