Skip to main content

Experience Design

Responsive Design (+1 General Blog Title)

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Zach Handing

I'm a front-end developer working at Perficient Digital, and I'm passionate about HTML, CSS, and grilling chicken.

More from this Author

Follow Us