Here at Innovative Architects, we have seen first-hand how responsive design is quickly becoming an essential part of designing for the web. And as with other new techniques, there are mistakes to avoid from the onset.
We know your time is precious, so without further ado – here are 4 examples:
- Avoid Designing for Devices Rather than Screen Size
One issue some businesses face when incorporating responsive design is focusing their energy in the wrong place. More specifically, they focus on designing for individual devices rather than for screen size. Instead of designing for tablets, wearables, desktops and phones, according to The Next Web, businesses should focus on designing for the following sizes:
- Micro-screens
- Small screens
- Mid-range
- Large
- Extra-large
Focusing on size instead of specific devices is important because many devices no longer come in “standard” sizes; there are now some phones that are larger than tablets.
- Avoid Using Size Breakpoints
Failure to follow the advice of our first tip can constrain new designs because of issues that arise when conforming a new product into a standardized size breakpoint. To avoid this problem, consider starting with a mobile-first design and working first with the smallest screen size that fits your customers’ needs. Once you’ve achieved this, start scaling your screen size up until you reach the largest size needed.
The benefit of using this method is that you’re able to use the fluidity of the Web rather than work against it.
- Avoid Thinking Small
Regardless of how it seems, responsive design does not solely revolve around mobile devices. Even with an increase in mobile usage, desktop use still accounts for 42% of digital media time in the U.S. For this reason, it’s important to work with large screens the same way you do small screens. Additionally:
- Check your images to ensure no quality loss has occurred.
- Use your screen’s size to your advantage; don’t simply make a small screen larger.
- Avoid using giant fonts; they take up unnecessary space.
- Pay attention to line lengths; try to keeps yours in the 45 to 75-character range.
- Avoid Launching Your Website Before It’s Ready
There’s always a chance that what you do in the controlled environment of your lab may not translate to real-world applications. Therefore, you should test all responsive design sites in the real world before releasing the product to the public.
Innovative Architects is on hand if you need assistance deciphering the world of responsive design. You can contact us or browse our blog and knowledge center for further assistance.