Part of what makes the web so interesting is that no two websites are the same. New web development frameworks emerge every year with an ever-growing number of packages and tools to extend those frameworks.
However, while determining a strategy for how to build your website is important, a shift in thinking to understanding what all successful websites have in common can also be helpful to consider for any website project.
In this post, we’ll look at some of the top characteristics of good websites as well as examples and supporting evidence to explain why they’re so important and how you can implement them as part of your strategy, no matter how your site is built.
If you’re thinking about starting a new website design project or revisiting an existing website, this list might be worth a look!
1. Page Speed
Users expect pages to load quickly. Slow page loading times will likely frustrate your users and can cost you anything from a missed conversion to lower search rankings, or more likely both.
Let’s look at some of the reasons your site needs to be blazing fast nowadays, what role CMSs and frameworks play, and the best ways to optimize for speed and performance.
The measurable effect page speed has on conversion rates illustrates how the speed of your site can impact your bottom line. Whether your site is designed to convert visitors into leads or sales, page speed is a key factor to the success of any business website and pages that load faster result in higher conversion rates.
A frequently cited Forrester Consulting research study revealed that 47% of users expect pages to load in two seconds or less.
Big brands have also made page speed a focus. Page speed optimization is big business for E-Commerce giants like Amazon and Walmart. This post on the impact of slow page load time summarizes a few findings.
When load times jump from 1 second to 4 seconds, conversions decline sharply. For every 1 second of improvement, we experience a 2% conversion increase.
Other Page Speed Statistics
The analysis from this backlinko.com study on page speed also reveals some interesting findings and statistics.
First off, the mean Speed Index speed – or how quickly a user sees a page load – was 4.782 seconds on desktop and 11.455 seconds on mobile.
This falls far below the two second threshold we cited earlier for how fast users expect a page to load, meaning that the typical website isn’t cutting it when it comes to page speed and may be frustrating its users and losing out on conversions.
A Think With Google research study provides some interesting insights on bounce rate along with a comparison of industry benchmarks across a variety of page speed metrics.
Page speed is also a ranking factor for SEO. Key ranking signals like time on site, bounce rate, and pages per session are influenced by how fast your pages load.
High bounce rate and other negative SEO consequences resulting from slow page loading times can negatively impact search rankings, costing you quality traffic.
Notice the same two second threshold seems to be an extremely important one for Google search ranking as well.
Earlier in the post, we mentioned the variety of frameworks and CMS platforms available.
The same backlinko.com study referenced above also looked at the average speed of different CMSs. Weebly and Squarespace had the best overall speed performance of 19 CMSs evaluated. WordPress ranked 14th in overall speed performance.
The important thing to note here is that the average speed across all sites built with a particular CMS in this study likely reflects the average way a site is configured with that CMS.
Unfortunately, our guess is this likely skews the average speed statistics quite a bit for many of the CMS platforms cited in the study.
In other words, the typical implementation of a CMS may not prioritize speed and performance.
Slow websites built with WordPress are not the result of WordPress itself but more likely the number of resource intensive plugins as well as unaddressed opportunities to optimize performance that could include anything from not using a modern web development workflow to failing to correctly set up a CDN or good caching policy.
In fact, WordPress can be used as a headless CMS in combination with other frameworks including Static Site Generators (SSG) like Gatsby.js to build blazing fast websites. Essentially, a headless CMS lets you use your CMS purely as a backend – or data source – allowing you to bring that data into any frontend framework or technology for handling what to do with it or how to present it.
Using a modern JS framework with headless CMS provides a significant speed and performance advantage when compared with the traditional approach to using a CMS.
This lesson likely applies to some of the other CMSs included in the backlinko.com study, so if you’re considering building your site with a CMS you shouldn’t necessarily be discouraged by these statistics and remember not all CMS implementations are created equal.
How to Improve Page Speed
This is what’s known as the critical rendering path. You can read this guided course from Google on optimizing the critical rendering path to learn more about increasing page speed by optimizing the critical rendering path.
This guide to achieving a perfect 100/100 Google page speed score also highlights some of the common ways to improve page speed.
Below, we’ve provided a list to highlight some of the most effective strategies for improving page speed.
Ultimately, the browser must make requests and process the HTML, CSS and JS resources that power your site. The fewer requests it makes, the faster those requests, and the smaller the size of those resources, the faster your site will load. So, not surprisingly, bundling (or combining multiple files into one) and minifying those resources (removing any unused code or white space) to serve the fewest and smallest files possible, is one of the fundamental ways to reduce slow page loading times.
Compressing images or serving them in next-gen formats will reduce the size of image files and help speed up your site.
Correctly Sizing Your Images
Assets such as images and other media will create larger files, so reducing the use of images and serving the smallest appropriate size of the image will also improve page speed. For example, if someone is viewing your website on a mobile device that is 300 pixels wide there’s no reason to be serving a large image file that is 2400 pixels wide.
Scalable Vector Graphics (SVG)
Scalable vector graphics (SVGs) should be used in place of images for icons and other graphical elements when appropriate. SVG images will save you valuable bytes to improve performance and also scale to render at any size without loss of quality.
Content Delivery Network (CDN)
When you request a web page, one of the factors that impacts how long it takes to complete that request is the physical distance between you and the server. This is delay is known as latency. A CDN helps minimize this delay by storing cached versions of your site’s pages on a network of different servers across multiple locations.
In short, a cache stores data temporarily. In regards to website hosting, caching allows you to create temporary copies of your site’s pages. If a copy is available, it will be delivered to the visitor in far less time than is required to actually access the server and process the request.
2. Good UI/UX Design
No matter the objectives of your website or the personality of your brand, one thing all successful websites have in common is good User Interface (UI) and User Experience (UX).
UI/UX design is a comprehensive discipline and something that can be applied to just about anything you can experience – from making coffee to riding a rollercoaster – but we’ll attempt to simplify some common principles of UI/UX to highlight more practical ways to consider UI/UX as part of good web design.
If UI is the point of interaction and communication between users and your website, then UX is a way of describing how users experience interacting and communicating with your website – or how users feel about using your website.
There are probably a few obvious characteristics of a good UI/UX that come to mind if you think about your own experiences visiting different websites. For instance, websites that are easy and intuitive to navigate are likely to help you find the information you’re looking for faster.
Many good UI/UX practices are based on the simple notion that things should be intuitive and obvious. In other words, don’t make users think.
You want users to experience your website without having to think about the purpose or meaning of different elements and components of the website. Everything should be obvious and self-explanatory.
If users have to question what will happen when clicking on a link or don’t immediately understand the purpose of a particular section of content on a page, it will create an obstacle in their ability to effortlessly explore and experience your website as intended.
Applying this simple rule when designing various user interface elements is one way that can help improve the UI of your website.
It’s no secret that an increasing share of website visits and are taking place on mobile devices, and the trend is sure to continue.
This means if your website doesn’t display well on mobile, you are certain to lose users to other rival sites who’ve prioritized responsive design.
A mobile-first approach to web design emphasizes sketching and prototyping the smallest screen sizes for mobile devices first and then working your way to larger screens.
Addressing mobile design at the earliest stages of design and development ensures the focus is on delivering the best possible UI/UX on mobile devices.
Guides like this UX Planet post on responsive design best practices can help to familiarize you with some of the key principles behind good responsive design.
Keep in mind that when designing for mobile you are designing for thumbs – swipes and touches replace clicks and drags of a mouse – so you need to style and size buttons and links accordingly.
Design for Scanning not Reading
Users don’t typically interact with web pages the way they read a book or a magazine article. They scan.
Users are often only concerned with finding the information they need to answer a specific question. Typically, it doesn’t take reading the entire contents of the page to answer this question, but rather just reading a specific section. Users want to get the information they came for, and then get back to what they were doing.
Less is More
A less is more approach to the layout and style of your website can help to reduce the cognitive load for users.
Put simply, users can only digest so much information at a time.
Complex structures with too many sections or too much information make it difficult for users to easily scan and analyze the contents of the page.
One of the most challenging aspects of this approach is fine-tuning the content of your site to keep it simple and concise. This will eliminate any content that could distract users. If a word or a sentence doesn’t add meaning or value to the user’s experience, it should be removed.
Another common example of this approach is the use of negative space. Whenever you design a positive shape or element, you are also creating a negative space at the same time. A good use of negative space brings balance and harmony to the layout of your website and allows users to focus on fewer elements at a time, reducing the cognitive load.
Create Visual Hierarchies
Visual hierarchies help users determine what information on your website is most important and in what order they should view that information.
Let’s take a simple example. The style and size of a heading is typically different than the size and style of a paragraph so that users’ eyes are drawn to the heading first, stressing the importance of reading the heading over the paragraph.
This definition of visual hierarchy from Interaction Design Foundation is a good resource that describes a list of some of the different visual characteristics such as size and color that impact the importance of an element in the visual hierarchy.
Designing the various UI elements of your site with a clear visual hierarchy in mind will improve the presentation of those elements and influence users’ perception of their importance.
Use Universally Accepted Conventions
A good way to make obvious what various UI elements of your website do or mean is to use universally accepted conventions that users are used to seeing.
The magnifying glass icon demonstrates this idea. Users are accustomed to seeing this icon used in thousands of other websites or applications to represent user search, so they will immediately have an expectation that clicking the icon or filling in the adjacent field will allow them to perform a search.
There’s no need to reinvent the wheel when it comes to the position and style of UI elements that follow universally accepted conventions. Other examples might include the general appearance and location of navigation elements, footers, commonly used icons, buttons, and links.
Putting it All Together
The example above illustrates many of the principles we just covered. Applying these principles when putting together the visual building blocks of your website will help you achieve balance in the design of your site and create a good UI/UX.
3. Quality Content
You’ve likely heard the phrase content is king. But why is content so important and how do you know if you’re creating quality content?
First, creating quality content is critical if you plan to compete with other websites to rank in search engines. A lack of quality content on your website is also likely to create a poor experience for users. So, you’ve already got a couple good reasons to make your content stand out.
Make pages primarily for users, not for search engines.
Don’t deceive your users.
Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?”
Think about what makes your website unique, valuable or engaging. Make your website stand out from others in your field.
You may be surprised to find that Google’s advice for creating content that performs well in search engines is basically to imagine that search engines don’t exist. While this seems like quite the paradox, the warning is rooted in how the Google search algorithm has been required to evolve over time.
Historically, every possible tactic imaginable has been used in an attempt to manipulate search engine results. Search engine ranking signals used to be far less sophisticated and easier to manipulate. Using exact keywords in titles and H1 tags, keyword stuffing, and other tactics might’ve been successful in the past, even on pages lacking any original content.
However, as search engines become more sophisticated, they will only become more focused on better ways to determine the actual usefulness and quality of content. Focusing on quality content over SEO will future-proof your content for long-term SEO success.
Engage Website Visitors
The content of your site needs to stand out in search engines, but it also needs to be engaging enough to convert visitors into leads and customers.
You need to successfully communicate your differentiated value proposition – what is unique about your products or services that make you better than the competition?
However, not all content on your site should be promotional in nature. Educational content such as articles and step-by-step guides is another great way to add credibility and trustworthiness to your site.
You should also ensure your content includes clear calls to action to encourage users to interact with your brand in meaningful ways. This might include appropriate links or buttons to download relevant content, sign up for a newsletter, contact you for more information, or purchase or sign up for relevant products and services.
The type of content you create will depend on your website’s audience and objectives. A landing page intended for decision makers and prospective customers may look very different than a step-by-step guide to clearly explain a complicated topic.
Remember to write for your audience and make sure the content is authentic and useful. Whether your content is designed to be a valuable resource or a sales pitch, it should always provide a unique perspective and offer value in order to engage users as well as perform well in search.
Tips for Creating Quality Content
The web is full of many resources providing tips for writing great content. We’ve added a bullet list of some of the most common and effective strategies we’ve come across.
Make content concise, readable and easily digestible
Use bucket brigades.
Use bullets and lists to organize information.
Use short sentences and paragraphs.
Frequently break up content with visual elements including images and video.
Make content original
Come up with original ideas.
If you don’t have anything useful to say, don’t say it at all.
Make content credible
Support your ideas with well-researched data, statistics or other information from reputable sources.
Provide accurate attribution and external links to sources when appropriate.
Make content in-depth and comprehensive
Content length is positively correlated with search ranking performance.
Increasing the length of content increases the relevance of that content across a more diverse set of queries and topics people search.
Longer, in-depth content tends to create a more engaging experience for users.
Make content actionable
Provide advice and educate readers.
Give readers real examples of how to apply the information presented.
Making the Investment
Ultimately, the biggest cost in creating quality content is time. You can find many statistics proving the effectiveness of content marketing and why you need quality content. However, developing quality content takes time.
Even if creating quality content isn’t at the top of your priority list when building a new website, it should at least be a consideration when developing the content for the initial pages of your site and may be a worthwhile investment if you’re looking to drive high organic traffic to the site over time.
Nothing can undermine your business and destroy the confidence of your users or customers faster than having your website hacked or compromised due to security vulnerabilities.
You may think that security only poses a serious risk to huge corporations or complex web applications handling sensitive data, but small business websites can be a target as well.
Small businesses don’t have the expertise or resources that large companies use to fight against security threats and properly maintain their website, potentially leaving them more exposed. In fact, 43% of cyber attacks are against small businesses.
Small businesses are often the target of malware attacks.
Malware is an umbrella term that describes any malicious program or code that is harmful to a company’s systems.
Prevention is always the best defense when it comes to malware. Implementing strong website monitoring and malware detection and removal software on your website is essential to mitigate the risk of a crippling malware attack that could lead to the potential loss of critical business data.
Secure Sockets Layer (SSL) Certificate
One of the most basic security features of any website is an SSL certificate. An SSL certificate authenticates the identity of your website, letting visitors know your site is trusted. It also encrypts sensitive data transmitted over your website such as payment information.
Even if your website doesn’t transmit sensitive payment information, there is still good reason to ensure an SSL is installed.
First, browsers offer visual cues to visitors to communicate whether a site is secure. Secure sites show a padlock next to the URL in your browser window. If you don’t have an SSL installed, the browser will not show the padlock and may accompany this with a warning to the visitor that the site is not secure and may not be trustworthy.
Second, SSL is a ranking signal for search engines and has become a standard for any modern website. Installing an SSL can only help your website’s SEO and failing to do so could put you at a disadvantage.
An SSL can be purchased through most hosting providers or domain registrars, but before purchasing one you should assess your options. Let’s Encrypt provides an excellent option for a free SSL that serves the needs of most small business or personal websites. If you run a large eCommerce website, for example, you may require a higher level of validation and thus need to look at paid SSL options.
Make Daily Backups
Any website should have a reliable solution for backups.
Before you implement a solution for backing up your site, you should be sure to test it. Many backup solutions promise the availability of daily backups, but you shouldn’t wait until the day something goes wrong to try restoring your first backup.
Not only do you want to check to make sure backups are indeed being generated, but you should also ensure that your backups contain all necessary files including your database and that all of those files are not corrupted in any way. Finally, you should make sure you understand the process for restoring your site with a backup.
The Cost of Downtime
While your website is down, costs abound.
First, employee productivity is likely to suffer. The larger your business and the more reliant you are on services provided through your website or hosting that may be impacted – such as email or file share systems – the greater the loss in productivity.
Another perhaps more obvious cost of downtime is the inability for users to access your website.
For an active E-Commerce store or company providing recurring subscriptions or other paid services through their site, there are obvious costs associated with downtime due to loss of customer activity or access to paid services. Those customers may also have personal data or information on the site that could be compromised or lost during an attack.
While the stakes may not be as high for a typical small business or personal website, a website is still an indispensable part of any marketing strategy.
Website downtime can shut down all traffic and new lead flow to your website, not to mention create a negative first impression for any new visitors and distrust in your brand.
If your website is used for any paid advertising campaigns, it may also result in wasted ad spend if your campaigns aren’t being closely monitored.
You also need to consider the cost of identifying and removing the threat as well as restoring your website. Depending on the extent of the attack, the time and cost of any additional services required to identify and remove it, the availability and reliability of site backups and other factors, you may be looking at a significant expense.
Specific Security Risks
The following list summarizes the top ten security risks from The Ten Most Critical Web Application Security Risks report written by the Open Web Application Security Project (OWASP).
While some of these risks aren’t necessarily applicable to small business or personal websites, it provides a helpful reference with some common examples of how you might avoid these risks.
An injection flaw enables an attacker to insert malicious requests and gain access to sensitive data in the database, potentially exposing you to the risk of website takeover.
Update, update, update! Staying current on software is generally the best measure to protect against injection flaws. For example, always keep your WordPress core, theme, and plugin files up to date if your site runs on WordPress.
Authentication is necessary for any site providing users the ability to create an account and login. Even if you don’t provide a frontend login to users, you have some administrative account to login and manage your website. When authentication is weak, hackers can assume the identify of website admins or users to commit fraudulent activity.
Enabling two-factor or multi-factor authentication is one of the most effective ways to strengthen authentication security.
Sensitive Data Exposure
Passwords, credit card numbers, health records, personal information and business secrets are examples of information that require extra protection.
One of the most effective measures to prevent exposure of sensitive data is simply to ensure your sensitive data is always encrypted. You also want to ensure high security standards are used whenever storing this data. For the typical small business website, a lot of these considerations will be taken care of under the hood, and your choice of hosting provider, CMS or framework, and the quality of third-party software used will determine your compliance and ability to prevent exposure of sensitive data.
XML External Entities (XXE)
XML processors are automated tools used to evaluate and process XML documents.
Broken Access Control
This consists mainly of being diligent about controlling who has access to your site and with what permissions.
Was access previously granted to a user who no longer requires it? Were the correct permissions assigned to the right users? Less control over access means a greater potential for things to break on your site. Always ensure only valid users with the appropriate permissions have access to your site.
Default administrative account usernames are a common authentication weakness that attackers exploit.
Always update the default admin account settings. For WordPress sites, for example, this means changing the default username from admin to something unique and assigning a secure password.
Cross Site Scripting (XSS)
XSS refers to ways that attackers can hijack a user’s session and capture a user’s cookies or other sensitive information to then modify page or redirect traffic.
Using secure forms and ensuring that sensitive data is read only are some common ways to mitigate the risk of XSS.
Serialization refers to the way data is converted into a stream of bytes so that it can be written into a file.
Serialization is not likely to be high on the radar for the typical small business website, and it will likely be addressed through simply choosing software that follows good serialization practices.
Using Components with Known Vulnerabilities
Sites are built with various plugins, libraries, frameworks, CMSs and other components.
Secure components – typically those which are updated frequently and reliably, verified by members of the community, and have historically had very few known issues – should be trusted and preferred over less secure options. Alternatively, in some cases another option may be to replace insecure components with some custom development effort.
Insufficient Logging and Monitoring
In short, when something happens to your site, you want to know about it.
Accurate and reliable logging and monitoring allows you to catch potential threats before they happen and respond in the event an attack does happen. Establish effective monitoring that alerts you in a timely fashion and ensure logs are generated in an easily readable and actionable format.