Responsive web design: how to avoid the most common mistakes in responsive development (Part 2)
We have mentioned in a previous article that it is more important than ever to provide a perfect user experience on every type of device - and of course, it is included that the websites look good and can be used intuitively.
So more and more companies are choosing responsive web development. However, there are a number of common mistakes in the field which stand in the way of problem-free, enjoyable browsing. Let’s see what those are and what you can do about them.
1. Loading the website takes too long
Think about it: where do you usually use your phone to surf on the web? A big percentage of people browses websites on their smartphones while at public transport, in the coffee break at work, or other times when they have nothing else to do. This means that because of the lack of time and the use of mobile data it is very important that the content loads the fastest possible. This can be achieved by optimising the size of images and other media, and by using a code that is clear and free from unnecessary elements.
2. You want to hide certain content
One important aspect to consider when developing a responsive website is that the less content it has, the faster it will load. This is true, and you do have to pay attention to that, because as you could see in the previous item that site loading time is crucial. However, many people make the mistake of hiding the content that appears on the desktop view on mobile with a simple code. The problem with this is that even though the given part is not visible on the website, the content itself will load. That way you lose valuable seconds. Instead, when it comes to the mobile view, try to put only those elements in the code which are actually necessary.
3. You don’t choose the appropriate image size
It is a wrong assumption that the same image will look good on a PC, a retina display screen, and a mobile device. Image size is a crucial aspect, because a high-resolution image, which looks perfect on a big screen will decrease website speed on a mobile device. An image however, that had been optimised for mobile, will get pixelated on a laptop for example, because of the scaling problems. Always make sure that the images on your website conform to the “expectations” of the given platform.
4. You don’t actually optimise for a touch screen
A phone or a tablet works completely differently than when you are navigating through a website with a cursor. On a smartphone or a tablet you use your fingers when browsing, so it is not advisable to design very small elements that are too close to each other for example. Think about the most important parts of your website, and pay attention to where you put them. On a phone, the bottom part of the screen is the most easily accessible; in the case of tablets, it is the top corners. Besides that, try to pay attention to the navigating (i.e. scrolling, zooming etc.) opportunities on the given screen.
5. You don’t test
In the world of marketing and UX, A/B testing is your best friend. A/B testing is the easiest way to find out what the actual end users’ needs are. Don’t take it for granted that the same layout will work on a mobile device as on a PC or a tablet. In the course of development works, it is not uncommon that deadlines are tight and you do not get to finish something on time. However, we don’t suggest that you save time and money by omitting A/B testing, since this is the best opportunity to find and fix the errors connected to UX. Test your website on multiple devices, browsers, and Operating Systems.
6. You want to cram too many things onto the screen
Since it is a small screen we’re talking about, many designers think that you have to take advantage of all available space, so they cram many small things in one place. But as a result, the mobile view will become overcrowded, and it will be hard to navigate and find content on it. Decreasing font sizes is also a common mistake. Because of the small size, it is not only very hard to read the texts, but you have to consider other UX aspects, too (e.g. too long lines are not nice to read for our subconscious). So the “less is more” approach is the way to go in this case: leave plenty of space in between the elements, and pay attention to the size of texts and the length of lines.
7. You forget about those who don’t use a mobile device
Be aware, because sometimes, creators of a responsive web design can easily go over the line. Although the “mobile first” approach has been very popular for years, this does not mean that you only have to consider those who use a device with a small screen, since many visits come from PCs and laptops, too. When you start with the mobile view when designing a website, and then you go on with the desktop view, you should give a thought to these:
- the mobile view usually contains menu items vertically, underneath each other – so it is not enough just to make the whole thing bigger for the desktop view, but you have to come up with a whole new concept, and you must also keep in mind that empty spaces should be taken advantage of.
- people read differently on a mobile and on a computer: pay attention to all text sizes (they shouldn’t be either too big or too small) and line length on all screens
- all elements should be in place on both the mobile and the desktop view; keep in mind the most important UX guidelines
8. You put non-mobile-friendly links onto the page
We have already mentioned in the previous article that a big amount of visitors arrive from some sort of social media. Even because of this, you must be aware about what kind of solutions you use on a website. The process can be completely ruined, and the flow can be interrupted if you put a link onto your website that leads the reader to a non-mobile-friendly website. If you use external hyperlinks, make sure that a site that is not mobile-friendly does not mess up the browsing experience.
9. You don’t consider that navigation is different on a touch screen
There are many clever solutions to make mobile navigation friendlier. The navigation menu (found on top of the website) is usually re-made as a “hamburger menu” in the mobile view. Long horizontal menus that take up a lot of space should be rather made vertical or made into a drop-down menu, so you can take full advantage of the given screen size.
In our article series, you could have a look at the advantages of this popular technology. Planning and designing a responsive website should be well thought-out, and you should consider all aspects concerning appearance as well as UX. Responsive web design is a basic principle nowadays – make sure that you do it well.