Key Responsive Web Design Principles

Responsive Website DesignNow that we’ve talked about the benefits of responsive design and I’ve also shared some great responsive websites, it’s time to talk about the key design principles that make up a responsive website. Whether you are building your website from scratch or you are working with an existing design and trying to convert it, this should give you a rough idea of what it takes to get started.

Responsive Design is Not About Mobile

In fairness, the reasons for using responsive design have a lot to do with mobile devices, but responsive design is not just about mobile. Responsive design is about being able to access the same great content across any device. Your content strategy should not be different depending on how someone is accessing your website. Responsive design is about allowing for the best experience no matter what device is being used.

It is also important to remember that responsive design is not about creating a different version of your website for different devices. With the ever changing landscape of mobile devices this would prove to be an impossible task.

Responsive Design vs. Adaptive Design

You may have heard the term adaptive design before and it is commonly used interchangeably with responsive design. However, they are not the same thing. Adaptive design is the concept of defining your where your design breaks down by device and targeting individual devices using media queries in CSS. For example, focusing on Apple devices, you might target the screen resolution for an iMac, an iPad and an iPhone when creating your design.

This used to make a lot of sense when there were a limited number of devices and screen resolutions. Now we have tablets of all different sizes and smartphones with tons of different screen sizes. We also have small laptops and big desktops. There are so many different screen sizes that it makes the task of designing for each one exceedingly difficult. This is where responsive web design comes into play.

Key Responsive Web Design Principles

Now that we know what responsive design is not, let’s go over some of the key responsive web design principles. The main difference that separates responsive design from other approaches is the focus on designing your website around break points in the design and not trying to target different devices. For example, your website may look great on an iPad in landscape but the design looks weird in portrait mode. In responsive design, instead of just changing the design for the smaller portrait screen on the iPad we might find that the design starts to look bad on a browser 900px wide so we would change the design at that point. If you are building a responsive website it should adhere to the following:

  • Built on a Fluid Grid A website built on a fluid grid will be based on percentages instead of on pixels.
  • Responsive Images & Video Images should scale depending on the resolution of the screen they are being viewed on.
  • Media Queries Define Breakpoints Media queries in CSS are used to alter the layout at various breakpoints in the design.
  • Non-Essential Content is Removed At smaller screen sizes none essential content is hidden to remove clutter and improve the user experience. Be careful when deciding what to remove as all of the core content should still be accessible on smaller screens.
  • Responsive Navigation While not every website will require responsive navigation techniques, those with extensive menus would benefit from using various techniques designed for smaller screen resolutions.

These are just the key elements that make up a responsive website. Hopefully they give you a better understanding of what it takes to create a responsive layout. If you want to learn more about responsive design, Smashing Magazine has a great selection of articles on the subject here. There is also a great gallery of responsive design examples at http://mediaqueri.es/.

To get great web design, marketing and video production ideas please subscribe to the blog by clicking on the subscribe button below!

Leave a Comment