Website design is supposed to be simple, and technology is supposed to make everything easier than it already is, so why is it that over the years designing and building a website has actually become a more challenging task?
It’s mostly because of divergent technologies not evolving at the same pace. At one point, desktop monitors with a maximum horizontal resolution of 640px were common, and almost all websites supported these low resolution users. Within less than five years, these low resolution monitors were virtually obsolete, and sites gradually stopped adding support for those displays.
Unfortunately what happened then is many designers went too far the other way, and started designing sites that couldn’t display well for an average user, and as a result, thousands of web development books were produced recommending a standard page width of 750px, which many corporate developers embraced with enthusiasm.
Once wide screen monitors became the new normal—and this is not really a very long time ago—many developers began developing bigger sites once again, normally with a width of around 1024px or 1200px. The less skilled developers were repeating the mistakes of the past, building sites to the maximum resolution of their workstations and forgetting that the average users couldn’t typically go beyond 1600px, and many were even more limited than that.
In the midst of all this, a new revolution quietly took place, and suddenly mobile users were connecting from all over the place, and those site that were easier for mobile users to connect to were thriving a lot better than regular sites of the time.
Two other things were simultaneously happening. First, there was a rapid uptake and expansion of social media, and old standards like MySpace were sunk, while upstarts like FaceBook and Twitter were straining at the bit. The second thing that happened, and this is even more important, is that WordPress became more similar to a real CMS and suddenly it got really big.
The sheer popularity of WordPress led to millions of template designers trying their hand at milking the new cash cow, and as is always the case, those with no talent simply hitched a free ride on the back of other people’s efforts. As a result, a new unofficial standard in corporate template design was born, and we’re all the poorer for it.
Most of us are designing sites for broadband users when we’re supposed to be designing for dial-up. Well yeah, of course it’s not really dial-up, but 4G is still limited to a very narrow slice of territory and it doesn’t always work perfectly. Most mobile users throughout the world are connecting with 3G or less, and that’s not the whole problem.
Not all connections are equal – unnecessary high bandwidth page loads are stealing from mobile users
The really troublesome issue is that the majority of users don’t have unlimited mobile data plans, which means that if they don’t have access to a WiFi hotspot, they’ll chew through their 500MB or 1GB allocation very quickly.
Start by slimming down your byte count
It’s almost amusing that on the one hand developers are making their jobs more difficult and stressful by minifying their source code and fussing over the slightest bit of extra white space, when on the other side of the same coin the designers are furiously doing everything they can to put the biggest images and animations on the screen that they possibly can do.
Most mobile broadband users currently can’t connect at speeds higher than 1.6Mbps, and some of them may be connecting on shaped connections of as low as 64kbps. This means that if the combined total size of all assets on a page is around 5MB, it will take at least 30 seconds for the page to load, and possibly up to 4 minutes in the worst circumstances. But then again, this assumes that accessing your site is all the user is doing. If they’re doing anything else, like downloading files or checking email, their connection to your site will be even slower.
It’s vital to understand that byte counts are even more important than responsive design when it comes to mobile-friendliness. A good example is the Pender County Tourism site, which is built on a responsive framework, but contains 3,245,914 bytes of data and images, which really put my phone through an ordeal to load the page on a low quality 3G connection.
Visually the design is great, but it’s clearly designed for faster connections than most mobile users have. Making this problem just a little more excruciating than it otherwise would be, the site is a tourism site, meaning that it would be likely to attract many international visitors, who would mostly be outside 4G and even 3G coverage areas.
That doesn’t mean it’s wrong. It means site designers have to make a choice about whether they care about mobile users or not. If those users are not important to you, you can go ahead and build that huge image filled home page. Otherwise you should probably think twice about it.
Shed anything that’s not necessary and trim the fat. The Pender County site would be just as good visually with smaller images (as in the above example) and some actual layout design, but that can be a difficult concept to sell to clients. Their expectations have come to settle upon the generic template, and it’s up to you to point out the dangers of going that way. The lead image on that page as it is now is 1.3MB just on it’s own. The entire load is just a touch over 5MB.
Large background images don’t always hurt, especially if you can get away with low resolution images without losing too much. Time for a quick comparison. Check out the LocalVox website first. See that wonderful hero unit the page leads with (in all it’s great PNG glory!). See that huge image in the lower right corner (on a desktop display) of a customer service rep. Learn from these things. Try connecting to the site from a phone in a 2G or 3G environment. Learn some more.
Now compare those with the Jingjai Samer website. The use of a low resolution image doesn’t take anything of value away from the desktop experience, and mobile users will appreciate the quicker page loading time.
What we have to remember is that when creating content for the web, the quality level of images and video will normally need to be a secondary priority to loading speed, and that is especially true for a home page or landing page. Users want substance first, wow second, and that’s usually the opposite of how designers are approaching the task. That’s why in the second site example, you can see it doesn’t waste any space on extras, it just shows the user exactly the information they’re requesting, and they can get more information by following the links. It’s lean and simple, which makes for a better mobile UX, and a better UX in general.
If you’re using WordPress or something similar, disable Smart Quotes
Smart quotes are actually a device of the print industry and they’re used primary for decorative purposes. You don’t see them appear in ordinary published text. You see them in ads and titles, but not on the ordinary pages that make up the main part of a book or magazine. It makes even less sense to use them in ordinary paragraphs on a web page or other electronic text.
When you do need to use smart quotes, it’s far better to include FontAwesome glyphs instead of the actual quote marks anyway, because they look better and they create the right level of emphasis.
So anyway, if you have smart quotes enabled, it’s time to disable them.
Always Be Responsive (or at least adaptive)
As stated earlier, mobile users are an increasing demographic and besides that, Google is actively trying to force you to support these users (after all, Google is in the mobile OS business now). No matter what else you do right, if your site doesn’t support mobile users, your Google rank could take a massive hit. And you could be surprised, because many sites that think they’re already supporting mobile users, and which appear just fine on mobile devices, Google’s web master tools may still indicate that the site doesn’t suppot mobile devices.
Anyway, Google’s recognition of mobile support is definitely secondary to actually providing it. Even if the full extent of your effort is to have a message telling users that your site isn’t suitable for viewing on a mobile device, that’s still better than no support at all.
Fixed, inflexible layouts simply don’t make sense any more. Your site must be able to respond or adapt to different display environments or you’ll lose to sites that can. Fortunately with all the improvements to CSS and HTML, it’s more easy than ever to make your site universally available.
Avoid Using Default Error Pages
It’s easy to customize the error pages for your website, and you should definitely do that. The standard error pages are often not sufficiently detailed and can be confusing to novice web users. Creating your own error pages looks better and gives you more control over what users see and can do when an error occurs. This example from Orange Coat uses a flowchart to guide customers through resolving their 404 problem, and that’s quite amusing and original. Until 10,000 others start copying the idea, at least.
Make it Even Easier for Users to View PDF Content From Your Page
Linking to stored PDF files is so 1990s and also browsers now warn users about the security risks associated with the PDF format. Those risks are actually very real, so it makes sense for users to be somewhat cautious about downloading them. In reality very few users heed the warnings, but if you really want to be sure that users will actually read the PDF content that you’ve prepared for them, you can always consider this technique to embed PDF in HTML content directly in the web page. While this doesn’t completely protect users from all possible vulnerabilities, it does probably cut down some of the risk due to the content being executed on the server side before being rendered on the client side.
Stale content will affect your search engine ranking, because sites with good reputations and fresh content will fare better than sites that have only one of these two vital ingredients. You have to be innovative in thinking up ways to keep things fresh and interesting.
Many sites are way more complex than they need to be and that can make the experience confusing for users. You want to find a good balance between enough material to meet the needs of the users but reduced complexity so they don’t get overwhelmed and disoriented.
Don’t Place Ads Too Prominently
This tip seems to go against logic, but actually right now prominently placed ads could work against you. Users tend to automatically ignore ads that are placed prominently unless they’re really well designed. More subtle advertisements placed closer to the end of the content or actually at the end will usually get more clicks because the user has already satisfied their need for information by the time they finish reading whatever the main content was. They’ll therefore be in a more receptive frame of mind to consider following the ad link.
Users will really hate your site if you’re one of those designers who resorts to dodgy tricks to try and get users to click on a link or some other action you want them to perform but can’t be certain they actually will do it. Once the tactic is recognized, users not only avoid the trap, they’ll then just leech what they want from you and then disappear, so you lose many times over, only getting a fraction of the results that you could have achieved if you’d used a less deceptive approach.
Check Your Facts
In the rush to be “first with the news”, many sites publish information first and correct it later. This is not a good way to do things and it can harm your reputation.
Sanitize and Moderate Public Commentary
Engagement and interaction with the audience is one of the best things about publishing on the web, but it can also be really troublesome. Don’t repeat the mistakes of others who simply allow all comments to pass through without any scrutiny.
Remove Scripts That Make Decisions for Users
Many sites, including some really big names, are guilty of this most annoying sin. Making decisions for the users, such as automatically changing the language of the site to the local language of the region they’re connecting from is annoying, and it’s made worse when you don’t provide adequate options to rectify the automated decision that was made on their behalf without their consent.
When you do things like this, you’re making assumptions about the user, and incorrect assumptions are usually interpreted as arrogance, which irritates people. It’s best to let the user initiate any actions, including language changes. The challenge for you as a designer is to figure out how to make the process of doing so as simple and intuitive as possible.
Remove Unnecessary User Data & Information Requests
Just because you can request geolocation data doesn’t mean you should. If you don’t offer any real benefit to the user in return for the information you request, don’t request it. When you ask for information without giving anything of value in return, you undermine the trust in the relationship between your site and the user. If the information is necessary, it should be obvious that it is, the benefits of providing the information should be clearly visible, and there should be some sort of reassuring message that the data is not going to be stored or used in any way beyond delivering the requested content.
header image courtesy of Gustavo Zambelli