Skip navigation

Dreamweaver CC

Firemans Run Calculating status...

Currently Being Moderated

Gridulator & Variable Grid System

Feb 9, 2013 10:08 AM

Hello,

I'm designing a website in Photoshop. I'm going to have someone put my desigin into CSS later. Regarding Photoshop, should I stay within the guidelines of my Gridualtor template,

or stay within the guidelines of the Variable Grid System that adds a margin on each side? I would like to keep the max width of my site at 960px.

Gridulator.com (my template for Photoshop?)

Overall width: 936px

Number of Columns: 12

Gutter width: 24px

Column width: 56px

____________________________________________

http://grids.heroku.com (CSS / Variable Grid System)

Column width: 56px

Number of Columns: 12px

Gutter width: 24px

Content width: 936px

Full width: 960px

375 Views 4 Replies Latest reply: Firemans Run, Feb 9, 2013 12:15 PM

Replies

Currently Being Moderated

1. Nancy O.,

Feb 9, 2013 11:22 AM in reply to Firemans Run

Report

I don't think it matters which grid you use. IMO you should be working with your CSS & HTML person up front. Much of what you can do in Photoshop may not translate well to the web because the web is an inherently flexible medium. Especially now with all the different device widths people use ranging from mobiles, tablets, laptops, desktops, multi-panel displays, portrait, landscape, etc.. Responsive web design with layouts that adapt to fit various devices is the current movement.
http://www.projectseven.com/products/templates/pagepacks/adaptations/i ndex.htm

Workflow: I use Photoshop for images only. I then drop them into my pre-built CSS Layouts.

Nancy O.

|
Mark as:
Currently Being Moderated

2. Firemans Run,

Feb 9, 2013 11:56 AM in reply to Nancy O.

Report

Hi Nancy,

Thanks for your reply. I'm designing a really simple website, (things that I know can translate to CSS, like a solid rectangle box, for example). I'm using Photoshop
cause it's easier for me to get a visual of the positioning...I'm really picky about that part. With that said, I do want it to be responsive, so that it translates well from
desktops, laptops, and tablets. As long as I put everything into a container, I should be OK, right?

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Feb 9, 2013 12:06 PM in reply to Firemans Run

Report

I'm using Photoshop cause it's easier for me to get a visual of the positioning...I'm really picky about that part.
Just as long as you understand that pixel perfect precision is not possible in web pages unless you build the entire thing as a static image which for obvious reasons won't work.
I do want it to be responsive, so that it translates well from
desktops, laptops, and tablets. As long as I put everything into a container, I should be OK, right?

Not necessarily. If you want an adaptive layout, you'll need to design one for each device width you intend to support. I urge you to read some articles on this subject before you proceed.

Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsiv e-web-design/

Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/

CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/

Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html

Nancy O.

|
Mark as:
Currently Being Moderated

4. Firemans Run,

Feb 9, 2013 12:15 PM in reply to Nancy O.

Report

Thanks for your help!

|
Mark as:

Forum guidelines

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

Dreamweaver CC

Gridulator & Variable Grid System

Feb 9, 2013 10:08 AM

More Like This

Bookmarked By (0)

Answers + Points = Status