Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Travis Edlefsen
Travis Edlefsen
2,743 Points

CSS Grid Framework using Photoshop

I am fluent in PhotoShop, but with my company I am starting to learn PHP and web design. I am a big planner. I was wondering if there is a good way to setup a grid on Photoshop, so I can accurately plan and prepare images to be the right size and also better guestimate placement on the page. I don't mean to confuse this with splicing by any means.

Basically I want to minimize the amount of trial and error, in the coding process, for the placement and sizing of my websites elements. Anyone have any input?

Chris Andruszko
Chris Andruszko
18,392 Points

I've created web design "previews" in Photoshop before, but I don't use it for proper placing and size because I code primarily using relative units. I wouldn't use Photoshop for anything more than a visual preview of the design unless there's a way to work with relative units (maybe there is, I don't know).

But your idea would be very good should you need to use absolute units in your code.

TL:DR - Aim for mobile first. If that's not comfortable for you, pick a max-width you want your site to be then choose your gutter sizes... or just download the tool linked below.

==

I think it would depend on your design methods... For example, a mobile first designer might layout the grid in photoshop to correspond to a mobile device. Where as a person who's more concerned with the layout on a desktop may prepare the layout for larger screens.

My preference is mobile first. I don't design pages at all but rather the individual modules that will live on a page. For example, if I'm designing a team page and need to display a photo, name, title and short bio for each team member, I'd start by first designing what a team member module might look like in mobile. I design it first at whatever size I think could be the narrowest I would want the module. Then in the browser, as the window gets larger, I use a media query to display two side by side and so on until the browser reaches the site maximum width (typically I set max width at 1200px). I do this for pretty much everything that I can envision and build a pattern library. Almost everything is decided in the browser.

If that's not comfortable for you, you have 2 options. Create your own grids by determining the maximum width you'd like your website to be and then grid it from there (typically figure out how wide you want your gutters to be and do a bunch of math to figure out your column widths -- which is a "print" based approach).

Or you can just use this free and super awesome extension and it does all the math for you: http://gelobi.org/griddify/

1 Answer

Travis Edlefsen
Travis Edlefsen
2,743 Points

Thanks Stacy Lane. What is the maximum size you usually use to design your individual modules for mobile?