Web design isn't what it used to be – literally. The advent of mobile devices has created new design challenges for web designers and coders. Today's smartphones and tablets have the speed to match many desktop machines, or even beat some of them. But that doesn't negate the fact that creating a webpage for mobile devices is a whole different game than designing for a big laptop or desktop screen. If you depend on your website to drive business, gain volunteers, or make a big statement about an issue important to you, then you need to have a website which works as well on mobile devices as it does on traditional computers. If you want people to visit your site and keep reading on their mobile devices, here are three mistakes you need to avoid.
Too Much Data
The more information that needs to be sent to a computer, tablet, or phone in order to render your website, the longer it will take. If slow connections are involved, the problem is even worse. Add this to the short attention spans of most internet users, and this could mean big problems for your site. Just one second of delay in the loading time of a website can mean losing 3.5 percent of potential conversions, according to site performance specialist WebPerformanceToday.com. One second seems insignificant, but the data shows otherwise. To keep loading times down, make sure that your site is as light as possible. When sending your site to a mobile device, only send the most necessary resources that the site will need to render correctly. Sending unnecessary background information will cost you viewers.
Too Big Images
Keeping in line with the theme of slow loading sites on mobile devices, take some care with the images you use on your site. Sending a huge, gorgeous photo to a tiny smartphone screen is a waste of time, especially if the image is going to be viewed in a small scale anyway. You can't get rid of all of your large photos, though, because someone viewing on a desktop or a large tablet will appreciate great graphics. This is a difficulty of mobile website design that is hard to crack. One way to handle it is to scale your photos for different screen sizes and send the most appropriate one to the device that is rendering the site. If you do this carefully, you can fine-tune your images for the most popular devices. But there are always going to be new devices, and this solution may not scale well, especially if your site is image-heavy. Instead, there are some new software packages that scale images appropriately before sending them to devices, whether desktop or mobile. These promise to deliver better loading times for images across all devices, while using just single high-quality images on the back end for better scalability.
Here is another quandary of designing for mobile websites. The original way many web designers dealt with phones and tablets was simply to send a very minimal version of a site, which perhaps didn't even look like the "real" site. For early smartphones on slower connections, this was not always a bad idea. It meant that people could still access sites and it wouldn't take forever to load. However, as smartphones and tablets become more and more capable, and as they also gain more primary importance in web use, sending a minimalist version of your site is no longer the obvious option. If a poor version of your site is the first thing a visitor encounters on their phone, they may not come back later to try again on a desktop machine. Good mobile design needs to provide a good balance between loading times and functionality, so that mobile viewers are not cut off from your best content.