Speaker 1: Hello, I'm Mike, and today we're going to go over some web design best practices for your next website project. 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 want to let you know that there will be links to more resources in the video's description, and remember, subscribe and ring that bell to get more notifications for future helpful content. Alright, 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 are 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 one, symmetrical design. Arrange elements in an even fashion across the web page. 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 is also a type of symmetrical balance called radial balance, where objects radiate from a central point. Number two, 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 three, 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 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 colors 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 colorblind, which includes up to 4.5% of the world's population. There are three types of colorblindness. 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 4.5 to 1 for 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, menus, all of which need to be easily visible to be usable. Typography. Site typography 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 of free, web-safe fonts that you can count on to display properly, regardless of the user's 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-serif fonts for headings and serif 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 complement 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 text 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 are 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 are some web design best practices for common site elements. We are 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. 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 to 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 sitemap, 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 Google site links. 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 drop-down menu if there are several categories. However, drop-down 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 drop-down 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 visit to 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 in 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 increased 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 a 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 best 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 are 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 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 a medical condition. Users with situational limitations, such as those accessing the internet on devices in bright sunlight or in an environment where they cannot 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, lawmakers 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 a toolbar where users can resize fonts and view your site in high contrast and grayscale, 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 text 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 is 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. Kintz's WordPress hosting can speed up your website by up to 200% and you'll get 24x7 from our expert WordPress engineers. Let us show you the Kintzta difference. Try a free demo of our MyKintzta dashboard at demo.kintzta.com. Thank you for watching. Don't forget to subscribe for more tutorials, explainers, and helpful content like this.