3 Replies Latest reply on May 29, 2015 11:56 AM by Nancy OShea

    Separate Mobile Files?

    pyrgal

      I have 3 website that have been up for years- they look great, work well, & best of all, they make us money! The desktop & tablet views look great!

      I have upgraded to DreamweaverCC, & have been attempting to convert layout to Fluid Grids, which has been the most frustrating experience. I have read forums, & I realize that I am not alone.

      My question is, can I just do a separate layout for mobile sites? How would I go about this?

        • 1. Re: Separate Mobile Files?
          Nancy OShea Adobe Community Professional & MVP

          Depending on how you built the old site, converting to FGLayout could be futile.  Rebuilding from scratch is usually the better procedure.  Also keep in mind that mobile users interact with their devices very differently than desktops.  Page width is just one piece of this puzzle.  Mobile menus, forms and other interactive elements must be responsive, swipe & tap gesture friendly.  

           

          Making a separate web site just for mobile devices is fraught with other challenges.

          1. You would have to maintain 2 separate web sites. 
          2. You would have to use scripts to detect the device width and redirect smaller devices to the more compact mobile page. But it's a one-way trip. So if mobile users want to see the desktop site, they can't.   They would be redirected back to the mobile site. 

           

          IMO, it's best to have one, responsive web site that everyone can access.

           

          If FGLayouts aren't working for you, try something else.

           

          Bootstrap

          http://getbootstrap.com/

           

          Foundation Zurb

          http://foundation.zurb.com/templates.php

           

          Skeleton Boilerplate

          http://www.getskeleton.com/

           

          Initializr (HTML5 Boilerplate, Responsive or Bootstrap)

          http://www.initializr.com/

           

          DMX Zone's Bootstrap FREE extension for DW

          http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

           

          Project Seven's Page Packs (Commercial CSS Templates)

          http://www.projectseven.com/products/templates/index.htm

           

           

          Nancy O.

          1 person found this helpful
          • 2. Re: Separate Mobile Files?
            pyrgal Level 1

            Thanks Nancy for your quick reply!

            That's what I was afraid of. I have started 1 website from scratch, over 4 times now.

            My biggest issue has been, like a previous post, the confusion over the "fluid-grid.css". (we must have been doing the same tutorials).

            Working in tutorials, in creating file you are asked to create a css file - it was suggested "main.css". However in working the exercise files, instruction was given to make queries in "fluid-grid.css", which was confusing. where did that come from? It left one to wonder if the "fluid-grid.css" was an auto generated file or just named by lesson author in his lesson.

            Nevertheless, I have a "main.css" file that contains everything. If that will work, I will trudge forward.

            And I thank you again for your prompt reply!

            • 3. Re: Separate Mobile Files?
              Nancy OShea Adobe Community Professional & MVP

              Think of it this way.  Fluid Grids generates a layout CSS file for you when you first create a project.  It asks you to save & name the file (whatever.css).  Then save the HTML document (whatever.html).

               

              Keep in mind that the layout css (whatever.css) is temperamental.  You must never edit it manually or via the CSS Designer Panel during the building phase of mobile, tablet and desktop.  For practical purposes, use a separate external CSS file all your content styles -- backgrounds, typography, menus, etc...  That way if something goes wrong, your layout (whatever.css) will still be intact.

               

              Build mobile first.  That's what everything else is based on. Build tablet 2nd and desktop last.

              Once your responsive layout is built, tested and checked for code errors, resist the temptation to go back and make further tweaks to the layout.   At some point, you must leave that phase of the project and just focus on content.

               

               

              Good luck!

              Nancy O.