– Hello, I'm Mike and
today we're going to go over some web design best practices for your next website project. (upbeat music) The web design best practices that we're going to go over today, will focus on the intersection between creating a beautiful website and one that serves the
goals of your business. But before we get too far, I wanna let you know
that there will be links to more resources in
the videos description and remember subscribe and ring that bell to get more notifications
for future helpful content. All right, let's get started. According to Orbit media, you can group web design best practices into three basic categories of standards, brand standards, coding standards, accessibility standards. Websites that lack consistent branding can be stressful to interact
with and cause confusion. It should come as no surprise
that some 38% of visitors have said that they will
stop engaging with a website if the content or layout is unattractive. Keeping in mind that
looks aren't everything, here's some basic design
principles to consider for creating a website
that people want to use.
Balance is the principle
of design that prescribes how to effectively
distribute visual elements. In general, a balanced design
looks clean and natural and has good symmetry. You can incorporate balance in web design in terms of the page layout, centering text or other
elements across the page is an easy way to do so. In general, web pages are
built on a grid system, which creates a form of balance.
You can use the CSS float property to position elements and
balance them across the page. Balance can be achieved in three ways. Number 1, symmetrical design. Arrange elements in an even
fashion across the webpage. For example, if you have a
heavy element on the left, you should have a heavy
element on the right. As mentioned, centering is the easiest
way to achieve symmetry, but it can sometimes come
across as flat or boring to avoid making the page look monotonous, you can create balance
using different elements, such as balancing a large
image with a block of text. There's also a type of symmetrical balance called radial balance or objects radiate from a central point. Number 2, asymmetrical design. This is more challenging to do well. Asymmetrical design involves the uneven distribution
of elements on a page. For example, you may have a
large element in the center, which is balanced by a
smaller one further away. You may use other elements of design, such as color or texture to
balance an asymmetrical design.
Number 3, off balance. These types of designs
suggest motion and action, which can make people uncomfortable. If your website intends
to make people think then an off-balance design may be for you. Composition. The term composition
refers to the placement and organization of design elements. The rule of thirds is commonly used to create balanced composition, especially with photos. Elements should be evenly spaced so that users can differentiate
sections or blocks. You should also introduce negative space or the space between and
around the subject of an image. Negative space can reduce visual noise, increase readability and bring balance. You can introduce a negative space by adding margins and padding
around your design elements. Focal point. Create an area of focus where
you want to draw attention. It should be the most
important part of your page and ideally each page should focus on just one major focal point. Color, color is an important design element when it comes to branding. Hopefully you're coming
into the web design process with an understanding of the colors you want associated with your brand. For web design specifically, it helps to start with a
mood board for your brand, choose a primary and secondary color and a lighter and darker hue for each.
Limit, your use of color so that various accents
don't become an eyesore. Adobe color provides
an excellent free tool for testing various combinations of colors to create a working palette
for website elements. Also when deciding on color, it's important to consider
those who are color blind, which includes up to 4.5%
of the world's population. There are three types of color blindness, total colorblindness, two color vision and
deficient color vision. So make sure that your
design is still usable in consideration of those who may not be able to
differentiate colors. Contrast, While choosing color, it's important to be conscious
of color ratios and contrast. Color contrast refers to
the difference in light between the foreground and background. Using sufficiently contrasting colors allows website visibility
to be easily distinguished.
In general, use high
contrast color options like black text on a white background to make your site readable. The contrast ratio is the
numerical value assigned to the difference in contrast
between page elements. The world content
accessibility guidelines 2.0 recommends a contrast ratio
of to 1 four normal text. To help navigate using this ratio, make sure that when you
design your website, you're envisioning all audiences, including those with accessibility issues. It's easier to do this versus planning to address
these issues after the fact. Consider all aspects of the website, people will be interacting
with including headers, footers, menus, all of which need to be
easily visible to be usable.
Typography. Site topography is another
important branding consideration. While there are many different sources for finding potential fonts
to use on your website, you want to first consider the options that will display consistently
regardless of what fonts the end user has installed
on their computer. Google fonts offers a wide
variety free website fonts that you can count on to display properly regardless of the users installed fonts. Make sure you include
fonts in your mood board to see if they match your color aesthetic.
If you're having trouble
coming up with combinations, Google fonts can suggest popular pairings. You can also use a site like
font pair to get suggestions. Try to limit the font weights you use as having to load too many files can contribute to slow page speed. On that note, consider
hosting Google fonts locally to introduce additional
performance benefits. When it comes to selecting
typographic elements based on web design best practices, as a general rule of thumb, use Sans Sara fonts for headings
and Sara fonts for content. At a minimum don't use decorative
fonts for body content, as it will be difficult to read. Also don't be tempted
to use a wide variety of different fonts on your website.
A good standard to live by is
to use one font for your logo, another for your menus and headings and one more for the body content. on that note, try pairing fonts
that compliment each other, such as those from the same font family. Element hierarchy. Hierarchy refers to the
arrangement of design elements that showcase relative importance. This is achieved by manipulating elements, such as visual contrast, size and placements to call attention. For instance, content must be broken down into logical blocks so that users can distinguish
sections from each other. You can do this through
the use of content headers, which not only make it
easier for users to skip to the parts they want to read, but also break large amounts
of texts into readable chunks so that screen readers
are able to determine the context of each section.
Best web design and formatting practices. According to research by orbit media, 80% of websites use
similar design standards. Some of these design standards, our logo in the top left corner, main horizontal navigation
across the top of each page, value proposition high on the homepage located above the fold. Note that most web designers will tell you that there
is no standard pixel height for browsers and technically no fold, but in general, important design elements should appear high on pages that are generally visible
to the majority of visitors even without scrolling. Here's some web design best practices for common site elements. Images. We're going to focus on the bare minimum of web design best
practices for using images. Adding ALT text. Images cannot be processed
using screen readers unless ALT text is used.
Adding ALT text also contributes to SEO, but some people use ALT text only to supplement their keyword strategy. A more helpful use of ALT text would be to describe the image. Though you could certainly
satisfy search spiders and screen readers at the same time with the right approach. Using images featuring human faces tends to be more effective than other graphics or animations.
It makes people more likely
to engage with the image as humans are drawn to what they perceive as real empathy and emotions. Use responsive images which grow or shrink depending on the browser size. This helps with both site speed and SEO. Website navigation. Users expect to be able to easily find the content they're seeking on a site. Thus it is important
for website navigation to be simple and straightforward. Website navigation is a general term that refers the internal link
architecture of a website. Don't forget that the
main purpose of navigation is to help the users easily find relevant
content on your website.
Your site's internal link architecture forms the basis of your site map, which helps search engines,
access your content easier. It's been found that having
a well-designed site, one where content is easy to find positively affects the website traffic you'll get from search engines, along with a higher chance of
getting Googles site links. Menu navigation. There are several aspects that
make up website navigation but your top or main menu
should be a primary focus as it will be one of the first things users interact with when
they visit your website.
There are different website
menu design heuristics, but the most popular ones
include navigational menu. Ideally, this is located at the front and center of a website. This might involve the
use of a dropdown menu if there are several categories. However dropdown menus
are not recommended, especially when it comes to technical SEO, because they're harder to crawl. Additionally, it has been
found that most people dislike dropdown menus. This is because the human eye
works faster than the hand and so people find it annoying when they've already decided
what they want to click on and something else drops down, which can lead to a
decrease in visits pages. Hamburger menu. Primarily used for a
mobile optimized design. A hamburger menu is usually located at the top left right side of the page. It appears as a square with three lines that can be expanded with a click. However many designers
despise the hamburger menu, which has inspired web
developers to consider new ways to make mobile website
navigation fun and functional. Here are a few tips for
designing navigation based on web design best practices. Add a search bar to help
users easily find content.
This is especially useful for websites that have a lot of
content like a news blog. Design your site following
the three click rule, which States that users should be able to find desired information with no more than three mouse clicks. This is because users actually prefer navigating through a
site rather than looking through the search results when possible. Make your menu titles descriptive
with keywords in mind, which help users find items easier and also positively contributes to SEO. The position of menu items matters. Put the most important pages
towards the front of your menu so that they're easily accessible. Keep menu items at a maximum of seven, not only to keep site design clean, but also because having too
many menu item categories can potentially affect your
ability to rank and search. Google may interpret these
seemingly unrelated categories as a sign that your website hasn't decided on a specific niche. Coding standards. With so many websites created
and consumed globally, there certainly is a need for a standardized set
of coding principles. Some aspects of these
website standards include, SEO.
SEO can be used to increase
the number of visitors to your site organically. Since it's too complicated
to adequately dig into SEO in this video, check out our SEO resources in
the video description below. Mobile responsiveness. Responsive design is concerned with creating a great user experience regardless of what device or browser is used to access your website. It is more important today than ever to design your website to be responsive. As more than 60% of internet users access the internet
via their mobile phones and half of E-commerce transactions are done through mobile platforms. Adding to that Google's
new search algorithm, also prioritizes mobile friendly sites.
Having a responsive site, not only helps users
navigate your site easier, but also contributes to increase
engagement and conversions. Users recommend brands with whom they have a positive mobile
responsive site experience. And conversely would not only
stop purchasing from brands with a bad mobile site experience, but will also actively
discourage others from doing so. However, despite the
demand for responsive site an estimated 91% of small
businesses don't have one. They should as designing a
mobile responsive website certainly pays off. 62% of companies have
reported an increase in sales after designing a mobile responsive site. Website security.
Another important coding practice, creating secure programs and
websites that users can trust with their sensitive personal information. As a whole WordPress is generally secure, but it helps to take extra precautions to keep your website
secure against attacks. Here are some of the best
website security practices. Get an SSL certificate. Keep your login credentials secure. Keep the WordPress core
plugins and themes updated. Use a secure web host. Make sure to check out the link
in the description to learn about WordPress security practices. Page speed, about half of users expect a site to load in two seconds or less. And if it takes longer than that, 40% of people won't hesitate
to bounce from that page, likely never to return. Besides website visits, page speed is important as it also affects conversion and revenue. For every second of added page load speed, sales will drop by up to 27%. Increasing website speed can prevent the loss of 7%
of possible conversions. Here's some ways to make
your web pages load faster. Use a content delivery network or CDN, which takes static files like
images, CSS and JavaScript, and delivers them on the servers closest to the user's physical location.
Consider how you use images. If you want to keep it page speed fast, try to reduce the number of large images used in your design and
make sure to optimize them. If your website needs to
use lots of large images, use plugins that include
functionality for gzip compression, caching or image optimization such as WP Rocket and Imagify. They can help make your files smaller without sacrificing quality
so that they load faster. Consider the number of plugins and files you keep on your WordPress database since they can also
affect page load speed, clean up those that you don't use. While you're at it, keep your PHP WordPress
core and plugins updated to their latest versions. Accessibility standards. Accessibility refers to the practice of making your website usable by everyone. Besides those with disabilities
that affect access. W3 says that website accessibility
is also beneficial for those using devices with small screens, different input modes, etc. The elderly people with
temporary disabilities, including a broken limb, lost
glasses or medical condition.
Users with situational limitations such as those accessing the internet on devices in bright sunlight or in an environment where
they can not listen to audio such as public transportation. Or individuals with slow
internet connection. Accessibility should be everyone's concern as we're all affected by it in some way. Reasons to make your site accessible. Still not sure it's
worth spending your time on accessibility? Consider these reasons, it's an ADA requirement. The Americans with Disabilities
Act was passed in 1990 to protect the civil rights of those with disabilities
from discrimination. It covers things like transportation, telecommunication, employment and even building codes. Since this law was passed
nearly 30 years prior, a time when the internet
was not as ubiquitous, law makers are seeking to amend it. It fosters inclusivity. A survey by the Pew research center shows that people with disabilities are three times less likely to go online than their
counterparts without disabilities, which is a shame because statistics show that about 30% of
professionals have a disability with 62% of those with disabilities flying under the radar
for fear of negative bias. It will help you win more business.
By being more inclusive, you bring in a network of
people with disabilities, which represents $7 trillion
in disposable income, SEO benefits. Search engines reward websites that are accessibility compliant in order to encourage more
websites to be accessible. How to make your website more accessible. An easy way to make your
website more accessible is to install the WP accessibility plugin, which adds accessibility
features including the toolbar where users can resize fonts and view your site in high
contrast and gray scale.
Comparing color contrast to check if it fits the standard of the ADA, removing title attributes from
images inserted into content. Most screen readers
aren't able to sense this and read the anchor texts instead, enabling skip links, which are internal page
links that allow users to skip directly to the content, which is useful for people
using screen readers. A few additional steps to take, add subtitles or a transcript if your site produces media such as audio, audio books, videos, podcasts and so on to benefit the deaf and the mute as well as people who want
to consume your content but cannot consume media in public.
Create keyboard accessible links and menus for people who
have motor disabilities and can only use a keyboard and not a mouse to navigate your site. Dropdown menus are discouraged
but you can remedy that by assigning shortcuts
for each dropdown menu, such as press one for the homepage, press two for the about page and so forth. Lastly, test your site
for website accessibility. The web accessibility initiative does not endorse any specific tool, but we have included a
link in our resources below where they offer a list of tools you can use to audit your efforts. Good websites shouldn't be defined by objectively good design, just as important as site usability, ease of navigation and accessibility. Armed with these best practices you have everything you need to create something that
looks and functions well. Did we miss anything important? Share your web design best
practices in the comments below. (electronic whooshing) Kinsta's WordPress hosting can speed up your website by up to 200% and you'll get 24/7 support from our expert WordPress engineers.
Let us show you the Kinsta difference. Try a free demo of our my Kinsta dashboard at demo.kinsta.com. Thank you for watching. Don't forget to subscribe
for more tutorials, explainers and helpful content like this. (upbeat music).