The response in "responsive" Web design provides a clue about how to think about the practice. It's essentially a set of actual techniques - and yes, sometimes tools too) that move elements of the page (e.g. images, navigation, text) based on the capabilities of the device it is being viewed upon. Responsive design enables websites to obtain information about the device and then display a version appropriate for the layout. There are actually quite a few digital moving pieces, so if you're using responsive design right now - ask these six questions of yourself or your designer before making anything digital come alive.
You likely need no further explanation of why going responsive is the best design choice for your digital presence, but you'll also need some practical guidance - just the kind of information that subscribers expect from Website Magazine. Here's a quick guide for those interested in using responsive design, some things you should and need to know, and more importantly ask, about responsive techniques and tools, today and in the future.
A quick note, if you're reading this on a desktop version you'll quickly notice that WebsiteMagazine.com is not actually "responsive" per say. Aren't we practicing what we preach? Well, sort of - we are mobile compliant. Responsive design is terrific for lots of things (like our Web 100 project) but not for every enterprise in every single scenario. Website Magazine, for example, opted for a mobile website over responsive layout as it provided us greater control over the complexity of information we publish and some unique opportunities related to our mobile applications. So yes, Website Magazine is mobile compliant, just not responsive (and it works!).
OK, enough defending our business decisions! You want to know as much as you can about responsive design... and you're about to. The following outlines several guiding principles as you design (or redesign) your consumer-facing websites for modern desktop, mobile and tablet experiences.
Is the Code Simple or Complex?
Remove/Reduce Interfering HTML
Many might believe that responsive design will limit the amount of information (it does, at least in appearance) that can be made available, but responsive design demands nothing more than a thoughtful approach to the user experience. The way to achieve that is to ensure that the layout is kept as simple as possible.
Are you prioritizing the elements correctly for optimum consumption? Take a moment now to test - remove all styling CSS and styling information from your email or Web design and display it in a browser. If the content is easy to read and ordered appropriately, you're on the right track. If not, you're likely engaging in some poor HTML practices, such as the use of inline styles or unnecessary absolute or float positioning.
Another option is to use a one of the many testing tools to see how your responsive designs hold up. One of my personal favorites is Responsi, a very straightforward design-testing tool, which provides drag-to-resize viewport and several standard device presents. Designers will find tools such as Responsi and others very useful in their day-to-day design tasks.
Are Media Queries In Place?
The IFTT of Modern Digital Design
If you've read anything about responsive design you have come across the term media queries; the code that queries the users device to understand how the site is best viewed and then providing an appropriate response for the width conditions. Essentially, depending on the client-side response, designers will load the right style sheet and even have the ability to add specific styles in different scenarios. Think of media queries as "if this, then that" statements.
Are Optimal Resolutions Targeted?
Know the Common Breakpoints
In order to create and use media queries however, it is important to know which are the most common resolutions used to view your digital assets. A business' mobile efforts are best focused on the most popular devices, which fortunately makes quick work of the development process for designers. To work with these devices, designers must essentially just account for the minimum and maximum widths - 480, 768 and 1024 (in both portrait and landscape). Using a free tool like Responsi (listed above) or Screenfly helps to understand quickly if everything is appearing in an optimal way.
Is the Layout Flexible?
Adapt Quickly to the Viewport
When it comes to responsive design, layouts (obviously) need to be flexible, which means you'll need to leave those pesky tables alone. The best option is to use a flexible, fluid grid (which uses columns to arrange content) and relative instead of fixed width to adapt to the right viewport size. If you're using the right media queries in conjunction with a fluid layouts, you'll have most if not all devices covered. To speed development on this front, consider the use of grid systems such as those listed here and here.
Are Images Acting Responsively?
Adaptive Sizing of Images
The use of pictures and images on a responsively designed website or email can cause headaches for designers - and if you're not careful, it can create a poor experience for users too. The trick is to use adaptive sizing within the CSS to adjust the image width. The optimal way to set images with 100 percent width, but capped to not exceed the actual file size (it's also important to consider the readability of images - read Design Principles for Master Developers for more.)
Is the Content Prioritized Appropriately?
Removal of Non-Vital Elements
Responsive design has forced both designers and the businesses that employ them to seriously consider element prioritization - or what goes where (and when) in a smartphone and tablet context. For example, it might make sense to include a third-party advertisement on the desktop version of your site, but doing so may interfere with the mobile or tablet experience of users. The best course of action is to remove non-essential items. In a mobile/tablet context the aim should be to have one path to action for each mobile page - whatever is most important should stay, every other path needs to be hidden. That can be achieved through the application of a special class, which hides non-essential elements from the view of the user.
Responsive Web design (RWD) is changing the way websites are developed. As more and more digital companies explore what's possible with RWD, they'll have questions that need to be answered. Start with these high-level responsive design questions and ensure your next project is truly prepared to handle all users on any device they may be using.
