Responsive design’s definitely got momentum on the list of things designers need to put into a site if they want to get a good response, but there are considerations within responsive design itself that can keep you from wasting precious time and money when your site’s slated to go online in the near future. While we’re only going to review three of them, please keep in mind that there are many more potential mistakes that you can make with a responsive design. This is by no means a comprehensive list; merely inventory of what you should be looking for, and why it matters.
- Not using adaptive images. This one can be a real deal breaker if you want to make sure that your mobile version, or several mobile versions, looks great. With images that have a fixed width, you will begin to get a crop of the image that could cut off some pretty important details. You don’t want to lose the hard work that goes into picking high resolution images for a product, for example, nor would you want to cut off the message in a banner image. Using relative units to indicate an image’s width, or you can use a responsive image class to ensure that it will adapt to the screen’s viewport.
- Make sure your menus adapt too. While you can set the images used on a menu to properly adapt, you may not have all of the room required to have the entire length of the menu at the top of a page. Thus, you may run into an issue of menu wrapping, which can break the overall presentation and just visually look unappealing. There are a few fixes for this particular problem, including keeping the menu in its own navigation bar that can be dropped down, with subcategories listed on the side of your value. You will notice that many e-commerce sites tend to go with this method; in fact, a vertical menu with subcategories tends to be ideal if your site has a lot of different content to navigate to.
- Warping, overlapping elements. This one can be a big problem if you aren’t carefully. The easiest way to get around is to make different specifications about a column or row specific; if you can’t fix it that way, you can also set the padding yourself to ensure that it isn’t overlaying any element that you don’t want it to. The goal is to avoid content, whether image or copy, that just lays flatly over other parts of the site. You will find this one’s actually pretty common with responsive design mistakes. It’s also easy to avoid.
Overall, a lot of these problems can be avoided if you start out with the right checklist of goals. Keeping specifications exact, responsive, and well defined will make your entire job much easier, and your project will be cleaner in the end.