I mainly write this post to the designers of our team here at Perficient, but developers can read it, too. I stumbled upon a random website by complete happenstance and not because I’ve ever been there before, and I was struck by its responsive layout.
CSS Tricks
This is the kind of design I feel we need to be…designing. It isn’t a 960px based grid system centered on the page that has breakpoints to bring in separate styles for tablet and mobile when your browser window size decreases, it’s a full-page site at all times, using percentages for element widths even on the “desktop” version. I encourage you to click on an article and see their layout for that template as well as the home page. The larger your browser window, the larger the content area becomes.
We talk about responsive design as being a seamless transition between desktop, tablet and mobile, yet I still see us designing a desktop version, a tablet version and a mobile version of our sites. This approach no longer needs to be the one we make. We’re developing our sites with one codebase for all mediums, so why aren’t we designing them in the same way? I am aware that it is difficult to convey how a responsive design will function in a static Photoshop or Illustrator comp, but we need to be mindful of this long before the development starts. When you start drafting your next design, try to think outside the canvas and let the design effortlessly flow throughout your workspace instead of conforming to the boundaries of it.
Responsive Design (+1 General Blog Title)
by Zach Handing on December 17th, 2012 | ~ minute read
