7 Common Mistakes to Avoid in Responsive Web Design
January 25, 2016
This article was originally published in July 2014 and has been updated for accuracy and comprehensiveness in 2016.
Responsive web design is paramount for any web experience. At this point in time, to design and develop something for the traditional desktop environment only would be a critical mistake, as in most cases, you’re effectively limiting your audience by as much as 75 percent. It really makes no difference if you’re marketing a multimillion-dollar business or if you’re a stay at home mom blogging about the trials and tribulations of raising a family. No matter what type of website you design for the web it must be accessible on any device with a screen. With the technology found in an average home today, your website is literally viewable on anything with a screen including phones, tablets, laptops, desktops, and even smart watches! Ignoring any of these experiences is an avoidable blunder that can seriously limit your online exposure and the effectiveness of your website.
Naturally there is a larger cost and investment of time and effort required to design and develop a responsive website; compared with a traditional desktop-only website, however, let’s consider the audience and potential gained (or maybe a better term would be retained) by ensuring that your website is optimized and accessible anywhere, anytime. The cost of creating a responsive web design is also significantly less than creating dedicated desktop, tablet, and mobile versions of the same site. Not to mention, it’s much simpler and easier to manage from a single backend CMS like WordPress.
Parachute Design is a Toronto website design company that has been creating responsive websites for quite a while now, and we continue to fine-tune our web development process and efficiency, as web browser technology and SEO practices continue to evolve. Leaning on these years of research and experience, we’ve compiled a list of 7 common responsive web design mistakes to avoid when embarking on developing a new responsive web design project.
Web Design Mistake #1 – Thinking “Desktop First”
In my experience, thinking “desktop first” is the most common web design mistake made by many web designers and developers. To be quite honest, initially we were guilty of getting stuck in the desktop-first mentality for a while too, only to find ourselves having to make compromises with the design of a website user interface in the final stages of a project to accommodate the mobile web environment.
Admittedly, it is a tall task retraining your brain to stop thinking desktop-first when that’s what we’ve known for so long and likely entered the design world doing. Over the years I’ve found this to be an even greater challenge for our clients; to review a mobile website design concept first and envision how it would expand and translate to a more robust desktop experience. Luckily, this is where my experience as a Toronto web designer at Parachute Design really pays off, as our clients can rely on and place their trust in our web design experience and leadership to guide them through what can sometimes seem like a daunting and complicated web design process.
The main reason we’ve trained ourselves to think mobile-first when approaching a responsive website design is that working from the smaller mobile environment, and scaling up to the larger more robust desktop screen, allows us to foresee any issues that may rear their ugly head, preventing us from achieving our main project goal of creating a great user experience. Oversights like navigational breakdowns, dead ends, information architecture challenges, and information graphics that are not scalable, are all common issues we’ve encountered through this process. However, by approaching responsive web design with a mobile-first mentality, we are able to address these web design issues on the smaller screen first. This allows us to create a better mobile experience that is much easier to scale up for desktop, as opposed to creating a larger desktop experience and scaling it down, hoping it works out in the end.
This responsive web design approach is woven into the foundation of the solutions I propose to correct the following mistakes.
Web Design Mistake #2 – Overlooking Website Navigation
One of the most challenging aspects of a responsive website design is creating a website navigation system that is not only intuitive, but is also easily understood by the user on all devices, and works flawlessly no matter where it is used. In my experience many Toronto web designers struggle with this aspect of responsive website design, as it can be quite difficult to break our routine and personal preferences when it comes to our way-finding strategy at each level of the project. In some cases, web designers get stuck and revert to a more rigid desktop-like navigational experience that will not translate or respond completely to the viewer when the website is accessed on a mobile device. In other cases, I’ve even found websites that just break down to the point where they stop working completely, leading to user frustration, a bounce rate that goes through the roof, and a very unhappy website owner.
To avoid navigation issues on your responsive website design, I’ve found that approaching the design with a mobile-first workflow allows us to think about the menu system in it’s most basic form, before scaling up to suit the larger screens. It will surely feel quite uncomfortable for the first while, but designing a truly responsive website navigation system, one for mobile and desktop environments that is familiar to our audience, ensures we offer the very best and most efficient user experience on the website.
Web Design Mistake #3 – Ignoring Mobile Web Experience
When approaching responsive website design and development with a mobile-first approach this would never be an issue. However, where I most often see this error occur is when web designers take a desktop-first approach and find themselves backed into a corner when it’s time to look at designing the mobile version of the website. Desktop layouts and content cannot simply be compressed into the viewport of a mobile device with 100 percent efficiency. In taking this approach you risk overwhelming, confusing, or frustrating users, and you are ultimately left with a website that offers a poor user experience or fails to convert users into customers. Not only should user experience for people be of concern, but also search engine ranking is now largely determined by what Google and other search engines deem to be a positive or negative user experience, which is something that we, as responsive web designers, control.
I don’t want to sound like a broken record here, but by taking the mobile-first approach, once again a web designer is able to address the mobile experience first, eliminating any issues, oversights, or roadblocks at the early stages of the project. The web designer can then scale up the web design, page layouts, and content for larger tablet and desktop versions.
Web Design Mistake #4 – Misunderstanding the Touchscreen Experience
Most handheld devices we use today have foregone the traditional keyboard (although to some people’s dismay) and rely on touchscreen technology to create a more fluid user experience. We now even see manufacturers incorporate this touchscreen experience into laptop computers as well. With the ever growing volume of website users counting on their fingers to navigate websites, it is crucial that web designers truly understand the fundamentals of the touchscreen experience.
For example, if a user has to zoom in to tap buttons or other navigation-based elements, user frustration will quickly escalate and ultimately result in users landing on a competitor’s website that offers a better user experience. As a general rule for touch navigation, we do not scale below 40 pixels by 40 pixels, as we’ve found this to be the absolute minimum size users can comfortably press without interfering with other elements on the page.
Understanding the basics and designing for the touchscreen environment is so important in fact, that I’ve written extensively on the Best User Interface Design Practices for Touchscreen Devices, as well as Mobile Design Patterns – A Look at The Thumb Zone. I highly recommend taking a little time to dig deeper into these articles for a complete understanding of the creating successful responsive website design for the touchscreen experience.
Web Design Mistake #5 – Ignoring Page Speed and Optimization Practices
We now live in a mobile world and spend significantly less time viewing websites on our desktop or laptop computers, and for web designers and developers alike, it’s dangerously easy to overlook the change in our connection to the Internet. We’re all accustomed to high-speed Wi-Fi or LTE, and reasonable (if not great) page speed and performance. When creating a responsive website design, we also need to consider that some mobile users may only have access using a limited connection to view our website. Additionally, in 2010, Google began using page speed as a key ranking factor in determining the appropriate page rank for each website. A good rule of thumb to follow is the faster, more responsive a website is, the better it will perform in search engine rankings.
There are a plethora of free page load speed tools available to us, so why not use them? For example, Google’s PageSpeed Insights, which offers web designers a quick and easy way test the performance of their website projects on both desktop and mobile networks. Be careful to avoid making the assumption that because a website may perform well in the desktop environment it will automatically perform equally well in the mobile environment. We aim for a minimum score of 85/100 in Google’s PageSpeed Insights to ensure the websites we design and develop are performing at an acceptable speed. In order to offer the best page load speed and performance, I’ve outlined a list of best practices in our recent article titled Website Speed and Performance Optimization.
Web Design Mistake #6 – Using Separate Mobile-Specific URLs
Quite possibly, the main attraction of responsive web design is the ability to deploy a single website on one domain that responds in real time to accommodate virtually any device. In some cases I’ve seen website designers and developers use separate URLs for mobile versions of the website, which can wreak havoc on search engine rankings, site performance, and also user experience.
Using multiple or sub domains in a website’s URL structure will force search engines to look at each version of the site as a separate entity. When this happens, you are not only competing with competitor websites for attention and ranking, but also yourself! There is also the possibility that you will get penalized for duplicate content if each version of the website or individual web pages feature the same or similar content. These factors together can sink a website in search engine rankings and take months or even years to recover from. Additionally, it can be frustrating and downright confusing for users to bookmark pages, or bounce from one domain to another as they view the website on different devices.
For more information on proper URL structure and best practices check out our earlier blog article on 9 Guidelines For Creating Proper URLs.
Web Design Mistake #7 – Choosing to Hide Content
This blunder is a big one and I’ve seen so many good web designers commit this web design sin. Consider the limited real estate on a mobile screen and the small space we have to work with for images, design elements, and ultimately page content. If we approach the responsive website design with a desktop-first approach, we quite often end up having to make last minute bandaid solutions where content is hidden using CSS to coax a poor design into the smaller viewport. As much as I hate to admit, we’ve been guilty of this error in the past, hiding content to make a design fit a smaller screen. However, after working with various SEO companies on behalf of our own website (and client websites), and along with our own research, we’ve discovered how damaging this practice can be to the performance of a website in search engine rankings. Three key issues with hiding content at the mobile level are related to SEO, site speed, and user experience.
Hiding content hinders the SEO performance of a website as search engines are smart enough to realize that content is missing from the alternate versions of the website. When a search engine looks at a mobile website with less content than its desktop counterpart, it gives the impression that the information offered is much less in-depth and of less value, ultimately resulting in a lower SERP performance.
Site speed is also a factor that contributes to both SEO performance and user experience. If content is hidden as a website is scaled down for mobile devices, bandwidth is still being allocated to load the hidden content even though we do not see it on screen. This problem contributes to longer wait times and slower website performance for what on the front end appears as a simple website. Page speed is a key ranking factor for SERPs and plays a valuable role in how the website rank is determined, in addition to frustration for users.
Last, but the most critical in my opinion, is user experience. A positive user experience not only leads to more visitors being converted to customers on a website, but also helps form a more positive and memorable relationship with the brand, which is truly invaluable in the marketing world. When a user has an positive and enjoyable experience on your website and continues on their path with that feeling, they are much more likely to come back again and again, as well as stay loyal to and promote the brand.
To Sum It All Up
Avoiding these 7 responsive web design mistakes will improve your website’s page load time, is better for SEO and better for the search engines, and offers an overall better user experience. With any responsive web design project there will always be the chance for oversight as we continue to create more elaborate and unique web experiences for an ever-evolving family of devices. However, through continued research and web design best practice we can continue to reduce these instances to create a much more user-friendly and responsive web for all.