Table of Contents
Are there any secrets we can learn from the best designed websites in the world? Yes. In this article, you will learn about three main practices you can adopt to improve the quality and usability of your projects. Using these practices will also help you provide a better service to your clients. To make this article useful for wider audience of web designers, I consciously chose three general secrets you will be able to apply on any type of web design project. Are you ready to discover three secrets of great web design?
Secret no.1: Being user-friendly
There is one thing many web designers don’t like to admit. We can’t predict behavior of users. Unfortunately, we often find ourselves in situations when either we or someone else wants us to do exactly that in order to create user-friendly website. If you have at least some experience with client work, you probably know this. For many people, being a web designer means that you can predict what will people think and do. This is simply not true. Still, there are some practices we can learn from best designed websites to make our website user-friendly, especially for mobile users.
Thumbs up
The first practice for mobile web and touch devices is to make sure all interactive elements on your website or in your user interface have sufficient size. What is sufficient? Different people (companies) will give you different answers. Apple suggests that the ideal “touchable” area should be 44px. Microsoft says it’s 34px. Based on my experience, good rule of thumb is to use 48px, or 3 rem (if font-size set for HTML or body is 16px). It is also good idea to use at least 6px for creating some space around the element to prevent people touch the wrong element.
Navigation can be a real pain when you design new UI for website. If your website has more complex navigation with many links, this issue can become more difficult. By looking at couple examples on awwwards of the best designed websites you can see that there is no one generally used approach. Some websites display navigation with all links to a point just before the layout starts to break. Then, links are hidden behind some kind of burger icon or label.
Despite what I previously said, many examples of best designed websites featured on awwwards are showing interesting inclination or trend of using hidden navigation and label as default. This is often true in case of portfolios and websites for startups and smaller companies. One reason can be that portfolios and websites for startups are presenting the most important information and CTAs about the fold. Also, the links in navigation are often not so important.
My second hypothesis is that many of these niche websites are designed and built as landing pages. The general layout pattern of landing pages always contains some kind of contact information, product or service description and CTA(s). As a result, homepage can often give the user all information he needs to make certain desired conversion action. Therefore, links in navigation doesn’t need to be always visible.
This approach of hiding navigation as default is not so common in e-commerce sector. The majority of best designed websites from e-commerce sector I took a look at were hiding navigation only when they were forced to do that. It was only when navigation couldn’t fit the layout, when label appeared and navigation disappeared. My hypothesis? Many e-commerce websites are built to encourage you to browse the range of products. These websites want to make discovering interesting products as easy as possible.
The general goal is not only to sell you the product that brought you on the website, but to show you related products and increase the size of your transaction. That’s why you always see CTAs such as “Related Products”, “Customers Who Bought This Item Also Bought” or “Readers Also Enjoyed”. However, these CTAs can’t cover all the options. For example, if you bought a book about design, system can’t predict (yet) that you also want a shampoo, jacket or watches.
What system can do is to at least show you these categories. Then, these links will remind you that you want or need something else. Based on this hypothesis, hiding navigation could be counterproductive and even harmful for your or your client’s business. Therefore, if you are designing an e-commerce website with wide range of product categories, I would suggest that you avoid hiding navigation until the layout will force you to it. If Gucci can do that, you can too.
What about e-commerce websites focused on one category of products? Here, the options are more liberal. The probability that user will want to buy several products of the same category, just in different size or color, is low. Therefore, using hidden navigation along with label as default is acceptable. This practice can also give you more space without unnecessary clutter. Then, you can use this available space to give the user more information about product so he can make more informed decision. If you want an example, take a look at Rolex.
The last thing we should quickly discuss, in terms of navigation, are labels. Some web designers are still trying to reinvent the wheel and apply their creativity and labels are often the victims. Unfortunately, labels are not the only victims. When labels are badly designed, users suffer as well because users may not be able to recognize what that thing should actually do. This is why designers usually use design patterns. Users know these patterns and know how to use them.
Usage of these patterns is also why you see one or two variations of certain icon or label almost everywhere. To make your website user-friendly your goal should be making the website as natural as possible. Avoid any possible uncomfortable surprises such as unknown icons or labels. Trust me, user and your client will appreciate it.
Smarter mobile layouts
When you take a look at the best designed website, you will often see that the majority of calls to action (CTAs) are positioned in the upper part of the page. Quite often, CTAs are placed above the fold. One issue with this hypothesis is that, due to the explosion of new devices and huge variety of resolutions, it is now more difficult to predict where the fold will be. Unless every page of your website has full screen header, you can’t predict the fold on every page and every device. Fortunately, we can get very close to hypothetical fold by using the smallest viewport size.
Another reason for placing calls to action to the upper part of the page is that hypothesis that mobile users are in most cases on the move. Let’s also not forget that mobile users often have only limited time and as well as bandwidth. If we put CTAs to the upper part of the page (also the screens) with related content under it, we can save users’ time and make their experience better.
Great example of this approach are some well-designed e-commerce websites. These websites first show the thumbnail images, product name, price and CTA to buy. Although these information may be displayed in different order, they are almost always above the fold. The last thing that’s above the fold is the website’s navigation. Everything else, such as product features, specifications and other information are below it.
The best way to follow this practice is by using a careful content strategy. You have to remember that the part of the page that’s in the initial view should contain the most important content. What’s the most important content? Think about what the user is there to do. Think about what he or she wants to achieve on the website. Only when you know your users and understand their needs and motivations you will be able to distinguish between what is important and what is not.
Secret no.2: Orientation on performance
Almost all best designed websites are focused on performance optimization. Well, not all of them. There are some websites that look like Louvre, but are incredibly slow. Even if your website is far from Louvre, in regards of design, using following practices you too can achieve their performance.
Smaller chunks are better
Nowadays, websites often contain huge amount of scripts and CSS styles. This makes these slow and on mobile devices sometimes almost unusable. Fortunately, there is one simple approach or trick we can learn from best designed websites. We can split the styles or scripts into smaller chunks and put them into separate files. Then, we can load only the file with chunk that is necessary for specific page along with stylesheet containing only the main styles for the page.
I know that this contradicts the often used best practice of concatenating files of the same type into one in order to lower the number of HTTP requests. This practice was created for the environment of HTTP/1. However, with the introduction of HTTP/2, this practice may soon become obsolete. HTTP/2 offers many benefits. One of these benefits is that with HTTP/2 we can use one connection for multiple requests. Will the concatenation be still relevant?
The best answer is that it depends. Meaning, it will still be a bad idea to take your stylesheet and split it into dozens of smaller modules and components. Doing so would cause a lot of headaches for nearly every web developer. From the point of performance optimization, there will no longer be significant benefits of concatenation. Therefore, it might be a good idea to try the approach I described in the beginning of this part.
Instead of loading one stylesheet with thousands lines of CSS that doesn’t get used on the page, we can use one stylesheet with “base” styles or scripts and then load only the “modules” we need at the moment. You can think about this as another, a little bit different, approach to progressive enhancement. Load what’s necessary first and then add only what do you need.
Being lazy can be good (in web design)
Another way to improve performance the way best designed websites are doing it is by using lazy loading for visual assets such as images and videos and even content. The point here is that you don’t really need to load every piece of content when user visit your website. What really needs to be loaded is the content above the fold. This is what users see when the page loads. Everything else that is out of sight can wait. Lazy loading will allow you to increase website’s loading speed. It is also quite possible that some users will read only part of the page before going on another one.
In that case, forcing users to wait because the page needs to load tone of content, that will not even be displayed, is kind of nonsense. Think about how many times did you visit some website only to read the content above the fold. How pleasing would it be to wait for you to wait four or five seconds to read just a few sentences? I know this may sound extreme, but we all know how patient some users are (or not). Best designed websites understand this. These websites don’t force their users to wait longer than is absolutely necessary.
The procedure is simple. Load the content above the fold first. Then, load the rest of the content little by little as the user scroll. Although this approach will require couple additional lines of JavaScript, I believe that it will still be better than decreasing the loading speed of the page due to additional kilobytes or even megabytes of content. Remember, being lazy can be good some times.
Use intelligent CSS and JavaScript design
How many lines your main JavaScript or CSS stylesheet has? How many percent of the website’s weight these files form? The harsh truth is that many websites are bloated with duplicate and redundant code. This is mostly an issue in case of older website which went through couple rounds of upgrades or amateurish redesigns. Bloated code is also common in websites with frequent replacement of web developers and web designers. The problem with bloated code is that it is often not important enough for clients to solve it.
CSS and JavaScript refactoring requires a lot of time. This time also has to paid. Neither of these facts is something your clients like to hear. Therefore, many clients will rather ignore this issue completely. As a result, the website will get more and more bloated over time. Sooner or later, this situation will reach level when the website will be almost unusable. The only solution? Take it down, spend few months cleaning it up and upload it again. Consequences? Annoyed users, decline in profits, decline in daily visits, increased bounce rate and customer support under siege.
There is one way to avoid this uncomfortable situation people behind best designed websites are already using. You need to do a regular checks of the code. Depending on the amount of changes done on the website, you can do these checks every month or quarter. In the worst case, do checks at least once every six months. During those checks, look for duplicate, redundant or obsolete code. Redundant and obsolete code should be removed and duplicate code unified.
This is where CSS modularization can be quite useful to decrease the amount of duplicate code. Similar approach can help reduce the amount of JavaScript as well. You can achieve this by choosing one of the design patterns. Anyway, whatever method for structuring your code will you choose, the goal is still same – reducing the amount of code by avoiding unnecessary duplicates. Does this look like too much work? In that case, you should remember that purposeful prevention is much better, easier and also cheaper than correcting the consequences.
The Second, if the code is already bloated, you have to insist on refactoring. It is your responsibility to explain your client what consequences and impact bloated code can have on his business. You can also explain to your client that doing nothing now will result in more work and higher expenses later. So, it would be beneficial for your client and his business to take care about the issue now.
Use of videos and images smarter
This last practice of smarter usage of videos and images is not used as often as it should be. Many of the best designed websites are still ignoring it. So, this is your chance to get ahead. The main idea of this practice is to use media queries, screen width detection and even device detection scripts to serve specific version of assets and content. The simplest way to implement this practice is using different image (resolutions) for different devices.
Let’s say that someone visits your website on smartphone. In this situation, your website should serve only images with smaller resolution specified for smartphones. Here is a one golden rule: you should never serve the same image (one resolution) for every device. The way I practice this is that I will choose specific breakpoint between smartphones and tablets, tablets and small desktops, small desktops and medium desktops, medium desktops and large desktops and finally large desktops and everything above.
The next step is that I will take these breakpoints and use them to create different version of image assets I need. This will leave me with at least six images (smartphones, tablets, small desktops, medium desktops, large desktops and everything above). I will also create versions for retina screens. This will leave me with at least twelve images. The last step is to use CSS media queries with breakpoints defined sooner to implement the images appropriately. I will give you more concrete example to give you a better idea of what I mean.
Let’s say we have five breakpoints – 480px for mobile phones (yes, these things still exist) and smartphones, 768px for tablets, 992px for smaller desktops, 1400px for medium desktop and 1920px for large desktops. Everything above the last breakpoint is for ultra large desktops and TV. In this scenario, I would use 480 pixels wide image for smartphones, 768 pixels wide image for tablets, 992px for desktops and so on.
Another thing I would do is that I would use mobile-first design. In other words, 420px version of image would be the default image. Then, you would gradually increase the min-width property in media queries. In case of images linked with img tag, I would use srcset attribute. We can also use picture element. Then, the procedure is almost the same – you choose breakpoints and use specific version of image that will be served.
What is my advice for “responsive” videos (such as full-screen videos in header)? Don’t use them on screens smaller than 550 pixels, maybe 768 pixels. Don’t get me wrong. I understand that video headers are cool and great way to surprise your users. Full-screen videos used in headers are also great way to degrade the performance of your website. Seriously. There is nothing better than using 70 MB ultra HD video because some smart aleck thinks it’s cool idea.
This practice can be okay for desktops and let’s say also for tablets. For mobile phones, however, it is complete nonsense. It goes against any possible business goal you or your client may have. The majority of business goals are in some way tied to profit. In order to make a profit in your or your client’s business, you have to sell products or services to your customers. How do you want to convince anyone to buy from you if he is annoyed by waiting until your website finally loads?
The conclusion is that you can’t. People will buy from you mostly for two reasons. First, people buy certain things because they have to. There are situations where you will be pushed to make the purchase by forces you can’t ignore so easily, such as hunger or thirst. Second, people buy certain things because they want to. When you really want something, for whatever reason, you can decide to buy it. However, how many annoyed or angry people have you seen buying something?
Sure, people can make a purchase even if they are annoyed or angry. However, this purchase will probably not happen on the website that was the cause of the annoyance or anger. If your incredibly slow website annoyed someone it is also possible that he will buy from one of your competitors. How does that sound? Solution? Keep video headers for devices such as tablets and bigger. Interestingly, there is only a handful of examples among the best designed websites that are using header videos. What do you think is the reason for that?
Secret no.3: Meticulous focus on visual communication
Is there anything that immediately stands out on all examples of the best designed websites? Yes, meticulous focus on visual communication. When user visits your website, visual properties such as images, typography, colors, whitespace, iconography, etc. are the first things he sees. These properties are also often easy to improve.
Use high quality images
You can take a look at enormous amount of examples of the best designed websites. What you will never see are stock images. Can you even imagine that some well-known brand would use stock images? Probably not. On the other hand, can you remember any low-budget website that used at least one stock image? I think that we all know at least one website that is using stock image above the fold, right in the header. People behind the best designed websites know that if they want their websites to look certain, they have to use appropriate assets.
Do you want to increase the perceived value of your website? First, you have to remove the term stock image out of your dictionary. If you want to follow the best designed websites in the world, this term no longer exists. Second, you have to find professional photographer. Remember that replacing cheap-looking stock images with cheap-looking home-made images will not help either. Having set of unique images is not enough. These images must have certain quality. Otherwise, they will not be congruent with proclaimed quality.
Use sufficient amount of white space
Another way to improve the visual communication of your website is giving its content space to breathe. Again, take random really well-designed website and compare it with regular one. You will see huge difference in terms of the white space and its distribution through the layout. In general, elements on the best designed websites use a lot of spacing. There are large gaps between individual elements and content. In some cases, the background color makes more than fifty percent of the whole page.
Now, let’s take a look at some average website. With a bit of luck, there will be at least some white space to distribute the content. The questions is, how much white space it will be? Probably not enough. Many designers are afraid to use white space. The reason often is that their clients think white space is a waste of space. Nothing can be further from truth. Proper amount of white space, and lack of clutter, will help you make the content easier to read and navigate through for users. It will also help you avoid overwhelming users with high amount of information. So, instead of reducing white space, try to increase it.
Consistent iconography and typography
The last thing we can learn from the best designed websites is to use consistent iconography and typography across the website. When designing a website, you want to make user’s experience great. One of the ways you can achieve this is by keeping certain properties the same on every page. These properties are font families, font-size of specific typography elements (headings, body text, etc.), line heights, icons, colors, navigation and spacing around elements just to name a few.
Main purpose of this practice is to create natural and predictable environment that will results in uninterrupted experience. As a designer, you don’t want to make the user second-guess anything. You also don’t want to confuse him by using one style on one and completely different on another. All of these things can be reasons for user to leave your website. If you want to create this user-friendly environment, keep the major parts and styles of your website consistent. You should change only the content, never its styles.
The easiest way to implement this approach used by many of the best designed websites in your project is by creating the base styles and design direction of your project. In case of typography, the procedure can be following. Select one or two fonts you will use across the website, define base font size and line-height (for body text), define font size and line-height for every type of heading you are going to use, define colors for body text and headings. If you are using tags such as small, sub, sup etc. repeat the process.
When you are done with typography, choose one set and style of icons and stick to it. Use the same approach for navigation and other reusable website components. Very good thing to do is creating a style guide for your project. This way, you will have all the styles organized on one place so you can always go back and double-check yourself. Style guide will also make it easier for you or anyone else to follow up on your work. Your clients will appreciate this.
Closing thoughts on secrets of best designed websites
Today, you’ve learned about three main secrets to improve the website you are working on. There are many other secrets we didn’t discuss. The reason is that many of these secrets or practices are useful only in certain industries and sectors. Don’t worry, we are going to discuss these more specific secrets as well. In a fact, you can think about this article as the first part of new series focused on learning from the best designed websites.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
