2 Replies Latest reply on Mar 10, 2014 1:49 PM by Nancy OShea

    another fluid grid layout question...

    asjd1

      Hello everyone.  Relatively new to DW and relatively new to CSS/HTML (only a few months experience).  I'm working in fluid grid layout right now in order to (attempt) to build a responsive site, but I'm running into some issues that are confusing me.

       

      The most important is this concept that the desktop and tablet versions inherit styles from the mobile version.  Can someone explain to me how this is beneficial? 

       

      I know for example that a lot of people do PS mockups of potential websites that they then send to potential clients.  Most of those that I have seen reflect the full desktop version.  So if the client is seeing the desktop version, and that is the "model" they want, then why on earth would you use the MOBILE version as the model for all stylings?  would it not make sense to have your "bells and whistles" desktop version created first, and THEN do the tablet and mobile layouts?

       

      I feel like there must be a simple and obvious answer to this otherwise DW wouldn't have organized this cascading styles property the way it did.  But I for the life of me can't figure out why you would focus on the mobile layout before your primary desktop layout.

       

      Any help would be greatly appreciated!

        • 1. Re: another fluid grid layout question...
          osgood_ Level 8

          asjd1 wrote:

           

          Hello everyone.  Relatively new to DW and relatively new to CSS/HTML (only a few months experience).  I'm working in fluid grid layout right now in order to (attempt) to build a responsive site, but I'm running into some issues that are confusing me.

           

          The most important is this concept that the desktop and tablet versions inherit styles from the mobile version.  Can someone explain to me how this is beneficial? 

           

          I know for example that a lot of people do PS mockups of potential websites that they then send to potential clients.  Most of those that I have seen reflect the full desktop version.  So if the client is seeing the desktop version, and that is the "model" they want, then why on earth would you use the MOBILE version as the model for all stylings?  would it not make sense to have your "bells and whistles" desktop version created first, and THEN do the tablet and mobile layouts?

           

          I feel like there must be a simple and obvious answer to this otherwise DW wouldn't have organized this cascading styles property the way it did.  But I for the life of me can't figure out why you would focus on the mobile layout before your primary desktop layout.

           

          Any help would be greatly appreciated!

           

          You may want to read this article about mobile first (not that I particulary agree with it)

           

          http://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/

           

          My approach is to design the desktop version first then tablet and then smartphone. In the article it talks about unecessary download of images but in my experience the few mobile solutions/tests that I have worked on have not been compromised by designing for the desktop first.

           

          It's really about what you feel comfortable with. There is a lot of hype and bulls•it spun out by so-called experts...always has been and always will be. They tend to say one thing and then when it suits them say the other.

           

          Write your own media queries...it's really quite simple. If you depend on DW then you are somewhat restricted.

          1 person found this helpful
          • 2. Re: another fluid grid layout question...
            Nancy OShea Adobe Community Professional & MVP

            That's just the way FGLayouts work.  

             

            Remember, there's a lot more to RWD than just page widths.  Mobile users interact with their devices differently and as such have greater need for mobile-friendly forms, finger-friendly navigation and significantly less bandwidth  than their desktop counterparts.  All of this fits in better with the Mobile First approach.  But if you like building desktop first, go for it.  Just don't use FGLayouts.

            I know for example that a lot of people do PS mockups of potential web sites that they then send to potential clients.  Most of those that I have seen reflect the full desktop version.

            Actually, Adaptive designers do several mockups --

            • mobile portrait (320px wide)
            • mobile landscape (480px wide)
            • small tablet portrait (600px wide)
            • small tablet landscape (800px wide)
            • tablet portrait (768px wide)
            • tablet landscape (1024px wide)
            • laptop & desktop (1280px wide)

             

            Or they design for a flexible range of device widths like this:

            • mobile (320px - 480px wide)
            • tablets (481px- 800px wide)
            • laptop & desktop (801px - 1280px wide)

            Example:

            http://alt-web.com/FluidGrid/Fluid-4.html

             

             

             

            Nancy O.

            1 person found this helpful