This store is closed until further notice. Previous orders will be supported as normal, but no new sales will be processed.

Responsive Viewport Sizes - When Should my Theme Respond?

Posted on May 20, 2013 by admin There have been 0 comments

One of the new hottest trends that's developing "Responsive" themes for your store. The best part about Responsive Designs is that they can adapt to the size and orientation of the screen the user is using and show a different user experience based on their device.

We're not going to go into all of the details about how to make a responsive design but I want to start out with going over a couple popular viewport sizes that you can use to make your site respond to.

There are a couple popular responsive frameworks that I referenced to find viewports that the experts have already defined to use in your themes. Why reinvent the wheel when expert programmers have already come up with the answers!

Bootstrap.css is a framework made by Twitter that comes with a handful of predefined classes for responsive design. Here is a snip if their documentation that has the viewport sizes they use for desktop, tablet and smart phone with different orientation classes.

Source: Twitter Bootstrap Scaffolding Responsive Design

Another framework to consider is foundation.css made by ZURB inc. Here's what they use for predefined viewport sizes:

Source: Foundation CSS Media Queries

Foundation is a bit wider and a bit less specific when it comes to sizes but it also opens it up for additional customization.

The exact sizes you use should depend on your content and your analytics - what screen sizes are your users viewing your site on and where does your content actually need to respond so it fits the best on those viewport sizes?

The beauty of custom responsive design is that you can add as many media queries as you want so your content can show/hide/float and change in any way based on any number of inherited conditional media query defined CSS. Don't let the frameworks completely decide your viewports for you if you have a different pixel width need and add extra queries if your design warrants.

Comments
Want 10% off?