DW CC Fluid grid layout how to change px width for desktop layout

[NaviB2]

Hi there,

I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.

The width of the original design was 960 px and the hero pic and others have been exported at that size.

The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.

However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.

How can you change this setting when starting a new fluid grid layout?

I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.

Why is this?

Not all of our clients want a site 1232px wide on a pc.

Thanks so much.

[BenPleysier]

Please supply a link to the site.

[NaviB2]

Hi Ben,

Thanks so much for your reply! I am not finding many people who are trying out the DW CC responsive design so I really appreciate this.

Here is the link to the page with the responsive template attached to it. For some reason it is no longer centered so it looks like the auto right auto left is no longer working. http://rangsgraphics.com/Home

The responsive template is only applied to this one webpage, which is a duplicate of the home page. If you click on any menu links, you will be on a webpage with the current template which has a wrapper, auto left auto right, containing divs at fixed width floating left. The old way that I need to move on from!

I also remember now that I put a right hand margin on the body to try and line it up with the header, which I know is wrong, but I couldn't work out how else to change it. However, you can see that the BC menu is expanding out to the full width of 1252 px wide.

So its back to my question - how can I set the PC version of the responsive site to 960 px as the max width? It looks like 1252 is set in concrete in DW CC at the moment. If that is the case, I guess I can do all website designs for clients at that max width and export the images for the design at that width.

[BenPleysier]

Hi Mary,

I had a look at the CSS and became completely confused.

May I suggest that you start with a new document rather than fiddle with a current document. To help you with a fluid design you could use this free extension found here http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

I had a look at using the extension, I did have to put a limit on the body element as in

body {

    max-width: 950px;

    margin: auto;

}

The rest was fairly straight forward.

I use the Foundation framework for all of my work. This can be found here http://foundation.zurb.com/

A pity that you were not a week earlier, I have just returned to Melbourne after spending three weeks in Ardross. I could have paid you a visit.

[NaviB2]

Hi Ben and Nancy,

Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?

I have been following the recent videos from Adobe on this.

As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.

So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.

It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.

However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.

Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.

One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.

Here is a pic of the screen I am talking about that sets the maximum width:

I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.

If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.

Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

[CaramelMacchiato]

Mary,

> However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.

I would think, in fairness, that it would serve you well IF you learn how to code by understanding the fundamentals of HTML and CSS. Fluid Grind or responsive web design concept requires competent and deep understanding how HTML and CSS. If you do not know how HTML and CSS, then responsive design concept will be very difficult for you to learn.

Just saying, know HMTL and CSS as well as jQuery would help a lot. This will save you and your prospective client some time, money and effort.

Good luck!

[NaviB2]

Hi Carmel,

Thanks for your reply.

I do know HTML and CSS well, and I can change javascript if required, however I can't code javascript from scratch by hand, or write JSQueries by hand either, I'm afraid that is a bridge too far for me.

I am finding in the new DW CC that not being able to change the CSS code myself is a bit like trying to work with one hand tied behind my back. Just creating the code by using the new panels set up for that is interesting however. I am keeping the split view open so I can watch the code that DW is creating as I work and I am learning a lot from that about the code you need to do a responsive site.

I was hoping that the js and CSS files containing media queries that DW CC creates when you start up a fluid grid design would save me from having to learn how to code this stuff by hand in Notepad.

It is starting to look like this is not the case.....

[CaramelMacchiato]

Mary,

Perhaps that you want to look at alternate way of coding responsive web design the way you like it to be. I have conducted some experiments with Dw CC (and Dw CS6 when Fluid Grid concept was introduced in previous version, CS6), I dislike the way Fluid Grid set up. I would think it actually confuse many people, those who do not know much about HTML and CSS, then it can be disaster for some people.

Since designing responsive web design certainly requires deep knowledge of HTML and CSS, because it takes more work to code, test (yes, it is very important to do a thorough testing with different devices including smartphone, tablet, and laptop & desktop platform) and variety of browsers as well.

As you point out that you know some HTML and CSS, good for you. But it seems that you want to do a fast track of making responsive web site rapidly without having to do more work in coding by simply using Fluid Grid, it is not ideal way of producing responsive web site this way. Unless if you understand how Dw CC works inside out, plus HTML and CSS, maybe... Maybe not.

I would think if you so desire to create responsive web site, perhaps do this way by focusing on "Mobile First" concept... Then tablet and finally desktop and laptop. Keep things simple works the best. Less is more, the better it will be. More is less, the complicated process make the responsive design project more difficult to work with.

Maybe Nancy or other Dw experts chime in and offer alternate perspective better than mine.

Plus, play with responsive web design project on your personal website, practice makes it perfect... Then work on more challenging project.

Responsive web design is very new concept for many people. Yet people didn't realize thar mobile is already becoming more popular than desktop computer these days and for next few years... I assume that you already know this trend toward mobile getting more popular.

Hope some of perspective be of help, be of interest and for your consideration... I would encourage Nancy and et al to chime in and offer tips,ideas and suggestions...

Best,

Brian

[NaviB2]

Hi Brian,

Thanks for your reply and advice, it is very kind of you.

The replies I am getting here don't seem to recommend DW CC as a way of developing a responsive website.

It is a pity, as the videos on fluid grid layout in DW CC were interesting and I was keen to try it out.

I am going to assume for now that 1232 px maxwidth for the PC view is the default for DW CC responsive layouts and if I decide to use DW CC to create a responsive website I will design the website look accordingly.

I will go back to this design I am working on now in DW CC and export the header etc images at 1232 px.

Otherwise, the responsive design I have done is going OK. I have realised that I will not be able to use the BC menu I set up, as the BC javascript holds it at a set with, so I will do a menu in CSS instead.

Also I have learned that I need to set the body background tile and color and the H1 to H4 and a link styles I want in the website in a separate CSS stylesheet and attach that stylesheet to the responsive template.

[mytaxsite]

MaryBlight wrote:

Here is a pic of the screen I am talking about that sets the maximum width:

I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.

Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

I think you are missing the point here.  The idea of responsive design is to resize the window according to the user's preferences.  The number 1232 is the maximum window size;  The minimum size is 769px;  It depends on how much the user resizes his window.

Having said this, in my perpetual license version of CS6, there is a template for this in the folder:

<C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout>

Look for a file called: FluidGridLayout.htm.  It says:

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
 width: dw-layout-width-desktop-value;
 max-width: 1232px;
 padding-left: dw-outer-gutter-desktop-value;
 padding-right: dw-outer-gutter-desktop-value;
 margin: auto;
}

Perhaps changing the value here might do the trick.  I haven't tried it yet but might do it when I get time later this evening.  I don't use Dreamweaver CC so I don't know if there is a similar template that can be changed.  The instructions only say:

BuiltIn 

Templates for creating a variety of documents, including different page layouts.

Hope this might just work for you.  Please post back if this did not  so that this can be ruled out from possible solutions.

Good luck.

[NaviB2]

Hi there myTax,

Thanks so much for this reply.

In the DW CC code there is something similar. However, the DW CC tutorials say that you can look but not touch as far as the code goes. Normally I would just get in there and start typing, but the tutorials saying not to do this made me hesitant to do this.

On the third go at setting up the design in DW CC I thought what the hell and I did change the 1232px setting to 960px in several places in the code. This didn't break the code, luckily, but it also did not fix the problem. The header was still wonky. So I either didn't find everywhere in the code that set the max width at 1232px or changing the code has no effect. I wil have to experiment more on that one.

I thought I was making a simple point about maximum image size to export the header background for the site.

At the moment the header image for the site was exported as 960px, and as max width for the responsive design in DW CC is 1232px and doesn't appear to able to be changed easily, the header image sits over to the left of the overall site layout as the background image is simply not wide enough. The image does scale down very nicely to tablet and phone size, but the pc version is not right.

It is no biggie, I can go back and export the image at 1232px instead, as the original design in PS is set to 300dpi so I can export the image at a larger resolution at 96dpi and it will be fine.

It has been an interesting journey, and now I know that about the 1232px max width I can design accordingly if I want to do a responsive site in DW CC. I am quite sure that at some stage this max width will be able to be changed, but it does not look adjustable at the moment. I can see it is early days.

[CaramelMacchiato]

Hi Mary,

I did some further experiment with Fluid Grid in Dw CC, as it is ideally for me to learn... as I am seeing many problems or questions posted by other Dw users all over on Adobe Dw forums for quite some time. So I wanna to get both of my hands dirty under the hood of Fluid Grid using Dw CC. I can see that it is not perfect. However, by knowing HTML, CSS and JS certainly would be helpful as you know it.

I see a workaround remedy to work with Fluid Grid website, best to create new CSS file. Do not mess around with boilerplate.css or respond.min.js. Lassiz faire on those two files. (chuckle)

I am getting used to CSS designer in Dw CC with some adjustment.

As for 300dpi in image file IS not recommend for web medium as it would be fairly very large - too large file to download into smartphone/tablets if used with cellular network. Be very ultra-conserative with this approach. Be warned in advance, if longer downloading on any website, any Internet user will stop and leave the site like there is no tomorrow! Aim for clean, fast loading website, the better it would be.

Responsive web sites should be very ultra-conserative approach with thoughtful planning... use smaller image files - fewer the better... just saying.

Brian

[NaviB2]

Hi Brian,

Thanks for your kind answer again. Wow I guess I need to check my posts as I seem to have sounded really dumb on this thread! lol!

All I meant was that the original design is set to 300 dpi as we always design for print and web at the same. So when we export out the images for web we can downgrade the dpi quite easily to 96 which optimum for web. I use the export for web option in PS which always results in images that load faster on a website.

So as the original design images are far larger than I need for web it is not a big deal for me to export the header out as 1232 px wide instead of 960px. As I said before it is not a biggie to go with the responsive set size of 1232px.

Yes you are right about the testing in DW CC, and there seems to be a lot of people out there having trouble! Thanks for telling me about your experiences as I am having a similar experience.

I think it is going quite well, but using a separate CSS stylesheet for body bground tile, color and H1 to H4 and a links is the go. I plan to set that up in DW CS6 as I can't quite see how to do that in DW CC.

So I think the plan for me to do the website is as follows:

1. Set up body H1 to H4 and a link styles for the site in a CSS stylesheet. Use DW CS6 to create this. Save the stylesheet in a stylesheet folder for the site you want to create in responsive design.

2. Go into DW CC, set up a new site and point it to the website folder that should contain the stylesheet folder you created in step 1.

3. Start a new fluid grid layout file in DW CC. In the dialog screen for the file, add the stylesheet you did in step 1. Keep in mind that pc max width of 1232 px does not appear to able to be changed.

4. Save the new file. It will be a html file. You can use this file as a template file if you wish (in Adobe BC or otherwise). You just need to insert the template contnet code in the body tag later.

5. At the same time save the boilerplate.css and respond.min.js files created with the new html file.

6. Never try to change the boilerplate.css and respond.min.js files yourself. Let DW CC create code in them as you insert the divs for the layout between the body tags.

7. Add divs and edit them using the side panels on the right in DW CC to set the CSS styles. If you have a simple layout it should work out OK.

8. The result will be a responsive design that will change as you change your browser size when viewing the page. It is a good solution with one template file managing all the different size screens viewing it.

Keep in mind that you can also work on the website in CS6 if there are some features not available in DW CC.

My responsive design implementation is 90% there so I am going to have another go!

[shunithD]

MaryBlight...

You can set the max width for te site in the css that controls the fluid grids... the one that DW creates automatically at the beginning. Like here (bold):

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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

.gridContainer {

    width: 100%;

   max-width: 960px;

    padding-left: 0.4891%;

    padding-right: 0.4891%;

    margin: auto;

}

Of course, you may just need to relook at your percentages as well. For instance, please note that the max width has been set for 100% as well... also, padding values, etc., etc.

The default css (based on 90% width) is here:

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

.gridContainer {

    width: 89.0217%;

    max-width: 1232px;

    padding-left: 0.4891%;

    padding-right: 0.4891%;

    margin: auto;

}

Hope this helps...

One last point about your image ppi... it makes no difference if it's set to 1 or 72, 96 or 300. Your browser and screen only look at the total pixel count. IOW, a 600 x 400 px image at whatever ppi will always display at 600 x 400 px.

Cheers!

[shunithD]

Mary, further, do you have an on screen ruler? If you don't, you should get one... very useful. Quite a few out there. There's one stand alone called Cool Ruler (free)... you can get it here:

http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Cool-Ruler.shtml

FastStone Capture (shareware) also has one:

http://www.faststone.org/download.htm

[NaviB2]

Thanks for the reply Shunith,

I did try changing the width, but it did not work. The template did not change size, so you are probably correct about having to change all the percentages as well.

I have now done a tutorial on Lynda.com and the guy running it said he could not change the width either, so I think it is set in concrete. I do recommend Lynda.com if you want to find out more about responsive design in Dreamweaver, as the Adobe tutorials don't go into enough detail.

The problem is that the javascript and media queries in the DW generated files should not be messed with, otherwise it breaks the responsive abilities of the code. So it is best left alone. It is fine, as the original image is at 300dpi in Photoshop, so I can reexport it out as larger if needed.

Thanks so much.

Regards,

Mary

[Herbert2001]

I strongly advice you to have a look at Foundation or Bootstrap as the basis for a responsive grid - they've been developed and tested by a very large and helpful community, and arguably much more suited and robust than DW's fuild grid.

They are also relatively easy to use, and adhere to better coding practive than DW's version. Of course, it is somewhat up for discussion.

One thing I'd like to mention though, is that I cringe every time you mention "dpi" in relation to web/screen based design. Let go of the notion of ppi and dpi, and design with pixels only in mind when doing this type of design. dpi for the screen does not exist. For retina screens like the iPad 3 and newer you basically design for 1024x768 with a twice as sharp display in mind, so just output at twice the base resolution.

Forget ppi/dpi in relation to the web. With responsive design, and depending on the type of graphic, you can also rely on SVG for scalable vector graphics. And use a polyfill/imagefill method to make certain the high resolution versions of your images are not loaded up on a low resolution device. Prepare several versions for different resolutions. This way the user experience remains a fast one even on low resolution devices with a low bandwidth.

Check out https://github.com/scottjehl/picturefill

Oh, one more thing: prefer to work with EM or REM units in combination with percentages  as opposed to pixel based units in css for the best result and most accessible responsive layouts in html/css.

And there's a visual bootstrap builder here: https://jetstrap.com/

[NaviB2]

Hi Herbert,

Thanks for your advice on this one. I am surprised at how many people are saying forget DW CC responsive design and just use Foundation, Bootstrap and Github. I wonder how long that will take me to learn? I did have a look at it all a while ago and was a bit daunted. However I have seen some courses on Lynda.com for those other solutions and I will do them too.

I am finding that Dreamweaver works well for responsive design for an overall template for a website. I am also exploring Dreamweaver and Jquery via another Lynda.com course.

As far as the dpi goes, I am just talking about the original design done for the client in Photoshop. Because that original design is at 300 dpi, it means I can export out an image as 1232 pixels wide, without the image pixellating, as of course at 300dpi the original design is much larger than I need it to be for web.

I use the export for web option in Photoshop to export the image out at the actual pixel size I need for the web design. So exporting the header image out at 1232 pixels instead of 960 pixels is easy, as the original design is much larger than that, whether it is measured in pixels or dpi. In fact, when you export an item out of Photoshop at an absolute pixel size, the dpi is irrelevant.

I usually design for print and web at the same time so the original design images are at very high res. I can then export the image out from Photoshop at the required pixel size for web and also use the image again for print, as it needs to be at 300dpi for any print media.

[Herbert2001]

Ah, okay, I understand now.

Btw, if you are exporting to png images you may want to investigate tools like ColorQuantizer (win) and ImageOptim (mac). CQ is by far the best, but is not available for macs. Much better compression than Photoshop (which basically stinks for png web export, if you'll excuse my language).

[shunithD]

That's strange... it works for me... Or are you going by the pixels displayed in the Fluid Layout Generator? If so, forget that... That will alsways show 1232  pixels for the dektop grid. You need to make the change in the css that controls the fluid layout. Works fine then.

Also, as Herbert pointed out, you might want to try Bootstrap. Keep in mind that these are just templates. You can use them in DW and tweak them to suit yourself.

[Nancy OShea]

Why are you short changing people with wide displays?  960 grids are no longer relevant to laptops and desktops which have an average display size that is closer  to 1280px; nor tablets that are 1024px wide.  What you have isn't really a responsive web site, is it?

Nancy O.