In the not too distant past, the main approach towards ensuring a great online experience for both desktop and mobile users involved creating completely separate pages.
This was time consuming, required double the amount of work and resources, could lead to possible lapses in continuity across devices and offered poor scalability.
What was needed was a more efficient and useful approach. This gave rise to responsive design, which makes it possible to create adaptive pages on the same domain, with the purpose of delivering the same user experience across different device types.
However, in order to make responsive design work, do not forget that there are important differences regarding what works well on desktop devices and what works well on mobile devices. These differences are often overlooked!
Here are five considerations on how to implement responsive design and make it work best for your need and organization.
1. Your approach
If a desktop site is already available, it is very tempting to just use it as a basis and then try to make the contents fit onto smaller devices. It can be tough to slim down the contents as the device size gets smaller. It’s usually better and easier to start “mobile-first” and to scale up to tablets and desktops. It’s usually easier to fill up space, than to having to progressively cut down on content.
2. Navigation menus
The most common type of desktop-accessed website navigation is in the form of a horizontal bar that runs across the header of a page – and it’s what most of us are familiar with. Sometimes however, we find desktop websites where functionality has been compromised for the sake of responsiveness. In these instances, a burger menu has been created in place of the horizontal menus.
While it’s good to embrace responsiveness as the way forward, it’s important to realise that it cannot be a one-size-fits-all approach. When a page that is displayed on a particular device (e.g. desktop) looks and works like a page that was designed for a different one (e.g. smart phone), it is at the cost of overall user experience.
3. Lightboxes and layers
Layers work very well on desktop devices (when used correctly and not as obnoxious spamming tools), and under some circumstances they are as equally effective on mobile devices.
However, one needs to remember to…
• Make closing icons big enough: if a user is not interested in an offer, don’t force them to open it by making the closing icon so small that it’s impossible for them not to automatically trigger the offer.
• Avoid working with text links: just as you shouldn’t make it impossible for users to close an offer they are not interested in, it’s also not a good idea to work with small text links in layers (or in mobile pages in general) as they also make it difficult for users to actually perform the desired action.
• Consider creating different versions of the same layer for different types of devices: Not doing so can lead to having layers that are only partially visible because they are badly aligned or simply way too big to be displayed correctly on a mobile device - where not even sliding will help as the layer remains locked in place.
4. Keep it short
More and more pages that I browse on desktop devices seem to be insanely long, and as a result don’t keep my attention.
The problem here is that too many established practices are being sacrificed for the sake of having a page that is easy to manage and which will work well (if only from a technical perspective) on all kinds of devices.
A desktop page should still look and work like a desktop page and the same should apply to a mobile page. While creating long pages that are well suited for scrolling may be perfect for mobiles, it’s not something which will necessarily work well for desktops as well.
One approach would be to work with adaptable elements which can change form depending on the size of the screen. For example, content on a desktop device could appear in a carousel, but a long list could be used for mobiles. There are plenty more solutions that can be tried and tested but the key is to always remember that desktop and mobile users have different requirements.
5. Test and test again
Responsive design brings along many benefits, but it also harbours plenty pitfalls. With the right knowledge and ideas, they can be overcome, paving the way for the ultimate adaptive user experience. Nevertheless the necessity of testing cannot be stressed enough.
Every site is different and has different goals; moreover, each site attracts varying types of users with equally varying tastes and preferences. What works well on one site cannot automatically be assumed to work well on others. In all my conversations with customers and potential customers, I always stress and encourage frequent and continuous testing.
By Hans Zorn-Aguirre, Senior Analyst at Oracle-Maxymiser
PrivSec Conferences will bring together leading speakers and experts from privacy and security to deliver compelling content via solo presentations, panel discussions, debates, roundtables and workshops.
For more information on upcoming events, visit the website.
comments powered by Disqus