Responsive design has become the industry’s recommended approach for effectively supporting multiple devices and screen sizes – but not all sites on the web are created equal.
“Whether designing a small website or reworking an extensive platform, there are some mistakes you will want to avoid on your next responsive design project.
Focusing on devices instead of screens
The device is no longer a clear indication of the size of the display – which is why device size can not be the sole criteria used when developing responsive breakpoints. Focusing on screen size instead of device size is an important step away from using only known device sizes for responsive breakpoints.
Thinking small
Despite the importance of smaller screens, responsive design is about more than just mobile devices. The discerning responsive designer should think both big and small with their layouts.
Hiding content
In the early days of mobile sites, the dominant thinking was that visitors were in a rush and were only looking for small chunks of content that the “full site” had to offer.
Content like contact information and directions were prioritised, whilst other content was hidden away on mobile versions. If content is relevant to users on one device, it should be available on all devices and not hidden away. You might present and prioritise content differently for different screen sizes, but never hide content itself.
Insisting on consistent navigation
Different screen sizes and form factors require different kinds of site navigation. Absolute consistency across the different layouts of a responsive site may result in a poor user experience if the site is not optimised for every possible dimension combination.
Failing to design for touch
Different screens allow for different input methods, including touch. On small screens, the lower left corner is the easiest place for users to access, most often with their thumb. On tablets, which are held differently than phones, the top corners are prime touch real estate. On smaller screen layouts, placing call-to-action (CTA) buttons or other important links in that lower left corner will ensure ease of access.
Linking to non-mobile friendly content
The ability to link visitors to other pages or content, either on your site or elsewhere on the web, is one of the key elements that make the WWW so powerful. The problem for responsive experiences is when your device-agnostic site links to other non-responsive webpages. If you are linking to sites and resources that you control, including micro-sites or partner websites, you want to ensure that all of them provide a consistently positive responsive experience.
Ignoring performance
A few extra seconds may seem like nothing, but it is an eternity for someone waiting for a website to load. Responsive websites must be optimized for peak performance in order to load quickly regardless of the device or connection that those devices have to the Internet.
Failing to test your responsive design
What works in development doesn’t always hold up in the real digital world. Running usability tests for responsive sites with real users on actual devices will allow you to uncover UX issues prior to a wrelease.
Even if you are short on time or budget for user testing, loading a site yourself on specific devices will at least help double check your design and development decisions.”
To read the full article, visit The Next Web.
Comments are closed here.