Questions About Responsive Web Design

Today I got an email from a visitor asking some questions about implementing my Bootstrap Photoshop templates into a responsive web design workflow and responsive web design in general. Here is my (lengthy) response:

Is Photoshop dead as a creation tool for websites?

Not entirely but maybe a little. If you are going for a responsive design then you, as a designer, have to give up a little on pixel-perfection — or at least on a truly consistent experience for all visitors on all devices. This is a little like when we hit the CSS revolution and we started designing sites that looked nicer and worked better on “modern” browsers (Firefox and Safari) than on older browsers (old IE).

It looks like some design companies are focusing more on “mood boards” (or “style tiles”) than traditional design mockups as a first step. This is not a new idea but it seems to be gaining steam given the new web design landscape. After getting approval on a board they move to more interactive wire-framing (layout) using something like Bootstrap’s build-in styles or basic HTML blocks. Then they start iterating from there by adding in the design elements that marry the “mood” and the “layout” into the actual website design. (More on mood boards and style tiles.)

This is not how we operate (yet).

We still create a Photoshop design mockup that looks like a real website (more on that later). However, I now write a big explanation about how it is a mockup intended to establish a general design direction rather than a pixel-perfect representation of the finished website. Basically it is my “mood board” except it looks like a real website.

Where does the design stop and the code begin?

It may help for you to understand a little about how the responsive code works. Responsive stuff happens in the CSS through things called “media queries.” Media queries let the CSS guy create his normal stylesheet at the top and then create separate sections that adjust the styles based on certain criteria such as the screen size (width) or display resolution (for retina displays).

For example, by default Bootstrap has all of its normal grid styles in one CSS file. The normal grid is a 940px grid with 12 columns of 60px each and 20px gutters between each column. That is what you get if you have the responsive stuff disabled in Bootstrap.

If you turn on the responsive stuff then there is a second CSS file that gets included that starts off with some CSS that says, “If the browser width is 1200px or more then make each column 70px and make the gutters 30px” which brings the layout up to 1170px wide on wide displays. The next CSS rule says “If the browser width is between 768px & 979px then make each column 42px and make the gutters 20px” which takes the layout down to 724px. Or course, for browsers between 980px & 1199px (which aren’t accounted for in these two rules) they just keep the CSS styles from the original (non-responsive) stylesheet at 940px.

And the responsive CSS files goes on from there with other breakpoints that change the layout of the site. Most notably, it changes the column structure so that instead of having multiple columns with things side-by-side in rows, everything collapses into one column stacked on top of each other.

Does that make sense? I know it’s a lot of numbers and I’m not giving you any practical examples yet. Let’s try that next.

A practical example.

Let’s say you have a responsive image slider (like Royal Slider or Flex Slider) on the front page covering the full width of the layout (12 columns). Typically you would put that in a container that it set at 12 columns wide and then you tell the slider itself to be 100% wide inside the container. When those media queries start changing the width of the columns the slider itself changes width. It stays at “100% wide inside the container” but the container’s width is changing. (Typically the height on the slider is set to auto so that the image ratio stays the same.)

Bootstrap also lets you do things likeā€¦

  • Collapse a navigation menu into a menu that opens/closes on click for smaller devices
  • Add a class to only show items on phones, or only show on desktops, or only hide on phones, etc., so that whole blocks of content can be displayed or hidden on certain types of devices (or screen sizes)
  • Change font sizes, element widths (like form fields), etc. for different screen sizes
  • Modify the logo or tagline size or position
  • Really, anything that can be done with CSS can be targeted at a specific screen size or resolution.

How do the PSD templates fit into the process?

The Bootstrap responsive PSDs should help you design layouts that will fit Bootstrap’s built-in responsive break-points if that is what you want to do. You could, knowing how the CSS is going to stack things up, create separate mockups for each screen size and show them to your clients. That is a lot of work and probably not worth it — but you could. More practically, the templates let you start your design with any screen size you want. Some projects focus on a mobile market first so you may want to start with the mobile site design template. Others may start with the 940px template because that is the most common size for your target audience — you may even be disabling the 1170px size altogether on your project (you can do that).

My current RWD process.

I like to create one website mockup for a project. This lets me experiment with colors, layout, textures, specific design elements/motifs that I will repeat throughout the project, etc. Once the client and I are on the same page about the overall aesthetic created in this mockup then I move to putting that design into real (sometimes responsive) code. At this point the mockup is a reference for those elements, motifs, colors and maybe a primary logo or texture. The initial mockup for a standard website is typically based on the the 940px template (right now).

Keep it responsive.

One thing to remember is that you are developing one responsive website, not a desktop site, a tablet site, and a mobile site. You cannot create completely different designs for each screen size and then ask a coder to make a responsive website out of them. The website inherently stays the same across all devices, it just “responds” to each display size differently to best accomplish the purpose of the site for that device.

Upstatement wrote a great writeup on redesigning the Boston Globe website as a responsive site that discusses some of the decisions they made about how things change as the visitor’s screen size changes.

If you want to see some great examples of responsive designs other people have done check out Media Queries or the Best Web Gallery Responsive Category.

I hope that helps. I know it is a lot of information and I welcome your questions or feedback.