Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm having some serious trouble understanding one aspect of responsive design. I understand almost all of the basics but one thing that is troubling me is setting up correct grids in photoshop for various break points. From what I can gather, a responsive design will scale down your grid as the device width decreases. This means that it's not just a case of removing a few columns and your grid is back in proportion.

At the moment the only thing I can think of doing to duplicate a responsive grid is to scale down the document in photoshop and that will then keep the relationships between the columns, gutters and margins. I've looked at how other people do it and nobody seems to do it this way. I was looking on youtube and found this chap - http://www.youtube.com/watch?v=YrhSCet6kYg he seems to just use the same grid but smaller parts of it instead of resizing the grid completely to match the break point. Can anybody shed some light on this?

Thanks

share|improve this question
    
Can you give me some idea of what variations of screens and devices (etc) that you're aiming at? –  Confused Feb 25 at 14:15

2 Answers 2

The truth is, few are using Photoshop to mock up entire sites anymore. That's just not how modern web design is done in my experience.

Wireframing has become much more of a starting point for design than it was 5 years ago. The days where you'd spend hours creating the perfect mock up in Photoshop, then recreating everything again in HTML are long gone. Any more Photoshop (and others) are used as a supporting tool for fleshing out wireframes, by creating and exporting sprite sheets or images for CSS background use, as opposed to starting points for design. This is also why architectures such as Twitter's Bootstrap have become more prominent.

The theory behind responsive design is that as the screen narrows, the structure of the web page alters to better suit the narrow interface. You simply can not accomplish this dynamic ability within Photoshop. The only way to accommodate the reduction in any raster editing application is to use only a portion of any grid as opposed to resizing a grid.

The way the gentleman in your video link is moving things to the left side of the grid is really how you need to use Photoshop if you are going to configure entire pages. You have to think of everything being laid out at the maximum screen width then simply move, not resize, elements for a smaller width. Responsive design doesn't generally scale anything, it simply moves elements. It's really only images (like photographs) which get resized dynamically in a responsive design, text, buttons, icons, etc rarely get resized.

share|improve this answer
1  
@Donal If you are after a Photoshop-like tool for responsive design, try Adobe's Edge Reflow. It ships as part of Creative Cloud. –  John Feb 25 at 15:49
    
Thanks @John I discovered this yesterday. It looks very interesting and is starting to blur the lines between designers and coders. It looks perfect for layout but for design I think I'd prefer photoshop's more options. I haven't looked into it fully yet so I don't know how powerful it is –  Donal Hanafin Feb 26 at 11:42
    
It was demo'd at Adobe Max conference last year. I came out of the demo thinking it was cool, but feel working in code directly and building smaller elements in PS is the best workflow. It reminds me of Dreamweaver, where you can code CSS by placing images etc, but in the real world you still need to know the CSS anyway, so it just doesn't make sense to learn and use these wysiwyg type tools. –  John Feb 26 at 16:05

"Responsive Design" is a fad term to create more revenue for designers that suck at design but love to talk about rules.

EDIT: FOR THOSE THAT CAN'T FOLLOW THE OBVIOUS: Responsive Design postures there being some set of amazing rules able to determine how a design should correctly respond to being in any variation of screen size vs pixel density. This simply isn't possible, practical, or even remotely fun to do. It's faster to custom design layouts and designs for each screen size and pixel density ratio you want to focus on, and push that out for each. And you'll get a better looking result.

--- If there's a trick to this, its bandying around the term long enough with your clients that they consider it something expensive to cover your time. Of course the opposite is true. Designers that usually throw this around are pretending they can somehow automagically design once for every device and their secret sauce will "responsively" adapt their design and layout to all resolutions and screen size/density variations.

--- Nothing could be further from the truth. It's time to face facts on "Responsive Design"... that it's jargon portending to represent something impossible or implausibly limiting as both possible and a good idea, when it's neither.

--- There's just a tonne of work involved in making a site or app work well on all the possible variations, and it involves a lot of compromises.

"Standards Compliant" design and development was the last of these fads, before this one.

Think about what it is... like deeply. Responsive Design is an attempt to make any given layout and design idea work on different resolution devices, screens, browser windows and suchlike. It's impossible to make an allowance for all possible variations and all the different fragmentations of device, browsers and screens.

So you have to step back even further, and consider the content, the users and their expectations and the provider of the content and their ambitions.

Now... what devices, screens and browser windows do you want able to see this content, and in what manner?

Grids can be a guide to your initial ideas, but by their rigid nature they're not going to solve the problem completely, just give you a set of "constraints" within which to try out different mutable containers for the content.

The reason very simple layouts and design are popular is because it takes much less work to mutate them into all the various spaces and places they'll be seen... which means it's still a lot of manual work to figure out how you want the content structured, laid out and layered.

So start with all the screen sizes, browser types and their possible logical window sizes, and screen sizes of your app (or whatever it is) and basically build to order. It's that much fun.

btw, the expected margins, gutters, column dividers etc.. they vary from device to device, screen to screen, OS to OS... so it's kind of up to you how you do it. There's not really any rules.

What that video is suggesting is that there's a common (sort of) LPI (lines per inch, you can use any metric you like here) to the experience, so it's just a matter of figuring out a commonality to the screen size. This "SORT OF" works, but you might want to also consider that a phone is held much closer to the eyes, and they have crazy levels of resolution now... etc.

So, no fun at all, really.

Probably the main thing to consider is keeping a visual consistency across all devices, screens and browsers and just thinking of it as a tonne of work.

share|improve this answer
2  
Yeah.. just ignore the fact that as of 2013 the majority of web users are now on Mobile devices with varying screen sizes. –  Scott Feb 25 at 15:06
1  
No, not what I'm saying, at all. The entire point is to PICK those resolutions and devices you want to target for creation of specific layouts ideally suited to your intent/goal. That's (in Android) commonly 480p, 720p and 1080p. iOS has it's two main screen resolutions, and iPad's just one aspect ratio but two resolutions. Android tablets a little trickier. Pick the sizes you want to aim at because there's no such thing as a perfectly responsive design for all variations of display possibilities. –  Confused Feb 25 at 15:47
1  
Just my opinion (don't kill me!): It took me a while to understand your answer, probably because the first sentence is your position regarding responsive design, then the reference to those who can't follow the obvious I find unnecessary ("have a constructive, fair, and impartial tone", blah blah). I agree with your comment re targeting, and I think it makes a much better job at explaining your viewpoint. Although your comment is exactly how I would define responsive (and not as just endless variations of the same screen). –  Yisela Feb 26 at 3:14
    
"A Responsive Design". It's a noun, in most cases, that attempts to describe a design that responds to all scenarios in terms of sizes, resolutions and ratios. It (falsely) implies there's some magic way of making this perfectly possible. The closest there is to a system for these kinds of behaviours is Apple's AutoLayout, and it's darn near inexplicable. The deeper truth is the design needs to be mutable, unique constraints will need be made each time, and it's going to be a realm of compromises because nobody has come close to building a system for design and development pre-visualisation. –  Confused Feb 26 at 8:01
    
And it is always important to point out when jargon is created for surreptitious purposes, abused as such, and becomes a false lexicon lead - as has been the case with "Responsive Design" and "Standards Compliant Design" before it. Both falsely assume that those talking about arbitrary rules fabricated around false and deliberately deceptive idealism designed to appeal to the enterprise pundit's dream of electronic media as finished product know something that those just doing the work and getting on with it, do not. The opposite is true. It's towards certifications and other such nonsense. –  Confused Feb 26 at 8:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.