Times are changing faster than many of us even notice. It is already pretty hard to remember the time when you could get on a bus and not see someone concentrated on their iPhone or tablet. People switch to mobile devices to perform more and more operations without even turning on their laptops, not to mention PCs. This means that websites should be really responsive on mobile devices, in order to survive this silent technology revolution. Here are 11 tips for those who want to know how to make websites mobile-friendly.
First of all, what does mobile-friendly mean? It means that all the information can be read and all the operations can be performed from a smaller screen. For example, you can conveniently book airplane tickets or chat with online support from your phone. Some time ago, people could only do that from a PC or laptop, but not today. Today is a smartphone-friendly time, so those who have mobile-friendly website designs are winning the game.
Now there are many companies developing websites that are mobile-friendly from the start, though this is still a new concept. If a website is old, it is likely that plenty of adjustments need to be implemented to improve the situation. There are many tools to test and see which parts should be fixed. Google can help, but let’s not stop here. Concentrate on actionable advice and choose those that fit the situation.
This one is the first and one of the most important, as it allows the website to download faster. Nobody wants to wait long, especially on the go. Compression of CSS usually provides a speed boost, so go ahead and install a good caching plugin that can help with that. Also, compress all the high-resolution pictures so they don’t frustrate users by consuming extra data. Sometimes it is still important for those who don’t have an unlimited connection.
There is such a thing as a minimum viewing size. This can be seen if you open the existing website in a desktop browser and start narrowing the window. Stop right at the point when everything looks fine and the details can be read. This size can be set as a preferred viewport width. Just change the meta tag in the head of a page. After that, every time somebody opens the site on a portable device, it will be shown without any extra space on the sides so users don’t have to zoom in or zoom out.
Even if the site is built to work with different screen sizes, you can still experiment to find the best width for it. Remember that users appreciate clarity and convenience.
This tip depends on the previous one. Setting a preferred page width may change the way some pictures are displayed, and they can become too wide for small screens. No need to cut pixels here. To make them smartphone-friendly, the maximum width should be set to 100%, so that they will be resized automatically for different portable devices.
There is also a trick for background images that have no imag tag – set the background-size CSS property. Upon this, all the background pictures will also be resized depending on the screen.
Custom fonts are great, no doubt. Some of them really make websites look more professional or stylish; however, there is a downside to this advantage. If a user doesn’t have this font installed on his or her device, the trick won’t work quickly. It may take several seconds for the mobile device to download pretty large font files and, in the meantime, users will only see blank spaces instead of text. You may think it’s only seconds, but those seconds can become crucial.
There is a way to show a default font while the custom one is being downloaded, but for this, you will have to write two sets of rules in CSS. One set will display the default font so that users can start reading, and the second one will appear upon downloading. It is a great way to avoid frustration while still maintaining the style.
To make websites mobile-friendly basically means to make them useful for users. Useful often means readable, especially if it’s a media site or blog. Nobody wants to read text that hurts the eyes with tiny fonts. Nothing difficult here, just configure a viewport so that fonts render to the right size for different devices. It might require some CSS knowledge, but the result is worth it.
This tip only concerns WordPress, which is actually a great choice for the modern website. It provides users with the clearest answer to the question of how to convert websites to mobile-friendly websites. Simply get yourself an up-to-date WP theme with mobile-friendly web design and replace the old one with the new one. It is as easy as that.
There are some plugins that can optimize the site, but those are more temporary solutions, as they decrease loading speeds.