The term "Responsive Design" is a blanket statement used to cover all of the intricacies involved in making a website / application function well for large displays (desktop), handheld displays (mobile), and everything in-between (tablet, laptop, etc). This topic is becoming increasingly important as the range of devices, and the displays used for them, is growing and changing exponentially. No longer can you trust that your website will be viewed on one of three sizes of screens. Now your responsive design must take into account a plethora of sizes ranging from 4k monitors down to the Apple Watch.
Depending on who you talk to, you may have been told that making a site or app "responsive" is easy. And while technically, yes it is relatively easy to make a website adapt its visual display based on the user's screen size, this is in-fact a very complicated topic that involves a lot of considerations to be made, both for the user experience as well as the technical approach.
At Tragic, we build high-performance websites that scale. Below are some of our tips for creating a polished, future-proof responsive experience on every device:
1. Mobile first is not always the best approach, we prefer feature-first.
There has been a recent push in "mobile first" design, that is first designing for mobile and then adapting that design for larger displays. This philosophy is built off of the idea that the majority of a website's traffic comes from mobile. But that is not always true, many websites still get a majority of their traffic from desktop users, and some have a 50/50 split. Also, desktop still has significantly higher conversion rates than mobile (4% to mobile's 1.3%), so if you prioritize the mobile experience you risk a higher loss in conversions for desktop. However, few projects have the budget to design every page for desktop, tablet, and mobile. Our approach, which has proven to be quite effective, is to design the full experience for desktop, design the most important pages for mobile, and then focus on how individual features or functionality will work for both mobile and desktop. This saves your designer the trouble of creating 20+ polished designs, but also provides the outline your developers need to create a polished responsive experience.
2. A good responsive website takes into account the adaptation of content as well as design.
Instead of just focusing on the available pixels, focus on who your user is and what they are trying to do. Beyond just optimizing for the user experience, optimize the content for the user and their device. Is the goal of a mobile user the same as a desktop user? If not, prioritize the content / menus / features to help each user accomplish their goals faster and easier on their given devices.
3. Future-proof your design - Don't forget tablet.
Tablet is often overlooked when it comes to responsive design, and this is going to be a growing problem as new types of different devices begin to enter the market. Right now everyone focuses on desktop, and (if they have time) mobile. But nobody is considering the weird in-betweens, which will begin to be a bigger problem as the number of devices continue to grow. You may not have time to design a completely unique experience for every device, but at least make sure you test your website for all screen sizes between mobile and desktop. If you don't you will find yourself constantly fixing issues in the future as new devices begin to enter the market.
4. Load times are part of responsive design and should not be overlooked.
One of the major issues often overlooked in responsive design is the website's load time. Mobile users are finicky, and they do not like to wait for a website to load. Often, part of the load time on mobile is caused by the user having to load the assets for both mobile and desktop. This can be solved in a number of ways depending upon the architecture of your site, but it is important to test and optimize the site to ensure fast loading times for every device. Google has started to adjust ranking based on the site's load time, proving that the importance of optimizing your site is of growing importance.
Above all, the most important thing to remember when it comes to responsive design is to think about your users!
Consider their goals and motives just as much as you consider their device's screen size. Make sure you are creating a site experience that helps them accomplish their tasks with ease no matter what device they are on.
