{"id":5102,"date":"2022-08-14T11:11:20","date_gmt":"2022-08-14T11:11:20","guid":{"rendered":"https:\/\/bluecoral.vn\/?p=5102"},"modified":"2022-08-15T09:24:50","modified_gmt":"2022-08-15T09:24:50","slug":"what-are-the-differences-between-web-design-standards-and-website-best-practices","status":"publish","type":"post","link":"https:\/\/bluecoral.vn\/vn\/what-are-the-differences-between-web-design-standards-and-website-best-practices\/","title":{"rendered":"What are the differences between web design standards and website best practices?"},"content":{"rendered":"<p><strong>If you\u2019re a marketer\u2026<\/strong>\u00a0you probably don\u2019t think about design standards every day.<\/p>\n<p><strong>If you\u2019re a web designer\u2026<\/strong>\u00a0you know that standards can help you do your job.<\/p>\n<p><strong>If you\u2019re the visitor\u2026<\/strong>\u00a0you just know the site is confusing and where the back button is.<\/p>\n<p>Your guests are not mindless spectators. As the one millionth website they have visited, they have preconceived notions about what they will find and where they will find it. In order to meet your visitors&#8217; expectations, it is generally a good idea to adhere to standards.<\/p>\n<h2>What are web design standards?<\/h2>\n<p>The World Wide Web Consortium publishes\u00a0<a href=\"https:\/\/www.w3.org\/standards\/\" target=\"_blank\" rel=\"noopener\">a set of standards<\/a>, but these are mostly technical web standards (HTML, CSS, file formats and JavaScript), privacy standards and accessibility standards. They are not focused on the actual design of websites.<\/p>\n<p>But if you\u2019re a designer, standards are about website features and designs, not code or content.<\/p>\n<p><strong>Web design standards are norms and models for web page layouts and UX features, used by marketers and web designers in comparative evaluations.<\/strong>\u00a0They are guidelines for usability.<\/p>\n<ul>\n<li aria-level=\"1\">What web design features are standard?<\/li>\n<li aria-level=\"1\">What elements should be included? And where?<\/li>\n<li aria-level=\"1\">What elements should be avoided?<\/li>\n<\/ul>\n<p>This little research project answers those questions.<\/p>\n<h2>Which features are standard on websites?<\/h2>\n<p>To answer this question, we created a checklist of 14 web design elements, then looked at 500 marketing websites to see just how standard these standards really are. Using\u00a0<a href=\"http:\/\/www.nngroup.com\/articles\/the-need-for-web-design-standards\/\" target=\"_blank\" rel=\"noopener\">guidelines<\/a>\u00a0from an earlier NN Group article, we use the following thresholds:<\/p>\n<ul>\n<li aria-level=\"1\"><strong>Standard<\/strong>: 80% or more of websites use the same design approach<\/li>\n<li aria-level=\"1\"><strong>Convention<\/strong>: 50 \u2013 79% of websites use the same design approach<\/li>\n<li aria-level=\"1\"><strong>Confusion<\/strong>: 49% or fewer websites conform, no single design approach dominates<\/li>\n<\/ul>\n<p><em>Note: The dataset was mostly B2B marketing websites from five major industries: finance, tech, manufacturing, food and construction. Websites were reviewed in desktop view with a focus on homepages. Data was gathered in the fall of 2021.<\/em><\/p>\n<p>We learned that there are surprisingly few standards, but quite a few web design conventions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5103 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-1.jpg\" alt=\"\" width=\"800\" height=\"1066\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-1.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-1-225x300.jpg 225w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-1-768x1023.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-1-15x20.jpg 15w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Conforming to standards is usually a good thing. We all visit a lot of websites, so we have a lot of expectations. When something works the way we expect, we\u2019re happy. When something doesn\u2019t work the way we expect, we feel friction and frustration.<\/p>\n<p>So conforming to norms is generally a good way to meet visitors\u2019 expectations for usability.<\/p>\n<p>But standards can let us down.<\/p>\n<p>We shouldn\u2019t do something just because a lot of other people do it. Often the popular features don\u2019t even align with best practices. Many of the most common features consistently test poorly in usability studies.<\/p>\n<p>Let\u2019s look at the features in context on a page. This chart shows both their popularity and our input on how well these align with\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/lead-generation-website-practices\/\" target=\"_blank\" rel=\"noopener\">lead generation website best practices<\/a>.<\/p>\n<p>The data comes from our review of 500 websites.<\/p>\n<p>The recommendations come from our experience building and measuring patterns of visitor behavior on 1000+ websites.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5104 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2.jpg\" alt=\"\" width=\"800\" height=\"1399\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2-172x300.jpg 172w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2-586x1024.jpg 586w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2-768x1343.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-2-11x20.jpg 11w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>So clearly, web design standards and web design best practices are not the same. This becomes even more evident when you see just how common it is for websites to miss simple opportunities to add clarity.<\/p>\n<h2>Are websites communicating quickly and clearly?<\/h2>\n<p>The first job of every webpage is to tell visitors that they\u2019re in the right place. This can be done simply by being specific and descriptive in several places:\u00a0<strong>titles, headers, navigation labels, calls to action and evidence.<\/strong><\/p>\n<p>The majority of websites fail to be descriptive in at least one of these elements, even though each of these elements could be addressed in minutes at no cost in any content management system.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5105 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-3.jpg\" alt=\"\" width=\"800\" height=\"515\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-3.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-3-300x193.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-3-768x494.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-3-20x13.jpg 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>This may be simpler to review in context. If we show each of these in a sample layout, you can clearly see just how prominent these elements are in user experience.<\/p>\n<p>If your website doesn\u2019t tell visitors what you do in these visually prominent areas, your visitor is likely to be confused or even frustrated, especially when it\u2019s their landing page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5106 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-4.jpg\" alt=\"\" width=\"800\" height=\"468\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-4.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-4-300x176.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-4-768x449.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-4-20x12.jpg 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Now let\u2019s look closer at each UX feature and web design element we looked for:<\/p>\n<h3>1. Logo in the top left corner<\/h3>\n<p><strong>93% of websites have a logo in the top left corner.<\/strong><\/p>\n<p>Where else would it go?<\/p>\n<p>This is really one of only two web design standards. Center aligned is the alternative, which can work well, but you need to plan the navigation around it carefully.<\/p>\n<p><strong><em>Recommendation:<\/em><\/strong><\/p>\n<ul>\n<li><em>Don\u2019t make it too big. That\u2019s unnecessary.<\/em><\/li>\n<li><em>Don\u2019t use the version with the tagline locked in. That\u2019s illegible, especially on mobile.<\/em><\/li>\n<li><em>Don\u2019t forget to compress the image to reduce page speed. It\u2019s one of the first things to load.<\/em><\/li>\n<\/ul>\n<h3>2. Social media icons in the header<\/h3>\n<p><strong>13% of websites have social media icons in the header.<\/strong><\/p>\n<p>That number is half of what it was five years ago.<\/p>\n<p>The top of every page is definitely the most prominent place to promote your social media presence. Social icons in the header are especially common on B2C websites and niche publisher websites, where brand awareness and pageviews are life and death.<\/p>\n<p>But on a B2B lead generation website, it\u2019s a weird idea. These are candy-colored exit signs.<\/p>\n<p>Traffic is hard to win and easy to lose. If the visitor clicks one of those icons, they\u2019ll land on a site that does everything possible to keep that visitor. They\u2019ll be distracted. They\u2019ll forget about you. That\u2019s why this is on\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/remove-from-your-site\/\" target=\"_blank\" rel=\"noopener\">our list of things to remove from your website immediately<\/a>.<\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0Remove the social icons from your header. Put them at the very bottom of the visual hierarchy, down in the footer.<\/em><\/p>\n<h3>3. Search tool in the header<\/h3>\n<p><strong>53% of websites have a search tool in the header.<\/strong><\/p>\n<p>About half of all websites have a search tool available on every page in the header, which is unchanged from the first time we conducted this research five years ago in 2016.<\/p>\n<p>Site search is a very common feature, but it\u2019s not necessarily helpful to visitors.<\/p>\n<ul>\n<li aria-level=\"1\"><strong>If your site has a lot of pages or an active content marketing program<\/strong>, a site search tool may be helpful to visitors<\/li>\n<li aria-level=\"1\"><strong>If your site is small and the navigation labels are descriptive<\/strong>, you probably don\u2019t need one.<\/li>\n<\/ul>\n<p>A site search tool that no one uses is a cost with no benefit. It adds visual noise for no reason.<\/p>\n<p><strong><em>Recommendation:<\/em><\/strong><\/p>\n<ul>\n<li><em>If you have a site search tool, check Google Analytics to see if visitors are using it. And if so, what they are searching for. This can be a quick way to find content gaps.<\/em><\/li>\n<li><em>If your site search reports are blank,\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/how-to-set-up-site-search-google-analytics\/\" target=\"_blank\" rel=\"noopener\">follow these steps to set up site search reports in Google Analytics<\/a>. Then optimize your site based on those reports.<\/em><\/li>\n<\/ul>\n<h3>4. Contact button in the top right<\/h3>\n<p><strong>55% of websites put a contact link or button in the top right corner of the header.<\/strong><\/p>\n<p>Most websites put \u201ccontact\u201d in the top right. It\u2019s sometimes a link with the same treatment as the other navigation. Sometimes it\u2019s treated like a button, with a contrasting color, increasing its visual prominence.<\/p>\n<p>Visitors expect to find it there. So it\u2019s a good spot for it.<\/p>\n<p>Here\u2019s an example of a web design standard (or convention) that aligns with best practices. In this case,\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/website-navigation\/\" target=\"_blank\" rel=\"noopener\">website navigation best practices<\/a>, along with a bunch of other global elements.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5107 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-5.jpg\" alt=\"\" width=\"800\" height=\"669\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-5.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-5-300x251.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-5-768x642.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-5-20x17.jpg 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0If you\u2019ve got a contact button in the top right, keep it there. But don\u2019t expect this little guy to do all the work. Make sure there are other, more specific calls to action in other key locations. See #8 below.<\/em><\/p>\n<h3>5. Main Navigation in the header<\/h3>\n<p><strong>90% of websites have a horizontal navigation bar in the header.<\/strong><\/p>\n<p>This is another true standard. The vast majority of websites have horizontal navbars in the header, which collapse into the three-lined \u201chamburger icon\u201d for the mobile visitor looking at the responsive design.<\/p>\n<p>Horizontal navigation saves pixel width for content, compared to the left-side navigation menus in earlier eras of web design. It\u2019s expected and space efficient.<\/p>\n<p>For the secondary navigation menu, it\u2019s common for designers to put these above the main menu across the very top. This is sometimes called the \u201ceyebrow.\u201d<\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0Stick with the standard and use a horizontal main navigation bar. But be specific in the navigation labels. See #12 below.<\/em><\/p>\n<h3>6. Dropdown menus<\/h3>\n<p><strong>58% of websites have dropdown menus.<\/strong><\/p>\n<p>Most marketing websites have dropdown menus. The idea is to let the visitor go anywhere from anywhere. Dropdowns \u201csave a click.\u201d The alternative is to make them visit the top level page before seeing sub-navigation, thereby deliberately guiding the visitor through a series of pages.<\/p>\n<p>Why are dropdown menus so popular?<\/p>\n<p>Because they work for everyone. For the visitor, they\u2019re a shortcut. For the marketer, they are segmentation.<\/p>\n<p>Every click tells you more about the visitor\u2019s intent, allowing you to speak more directly to them based on their needs. Dropdowns get them to the right page faster, where the chance for conversion is higher.<\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0Use dropdowns only if the section has a lot of pages and subsections. (Avoid little dropdowns with few options because they don\u2019t test well in\u00a0<a href=\"https:\/\/www.nngroup.com\/articles\/mega-menus-work-well\/\" target=\"_blank\" rel=\"noopener\">UX studies<\/a>). These really big dropdowns are called \u201cmega menus.\u201d<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5108 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-6.jpg\" alt=\"\" width=\"710\" height=\"917\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-6.jpg 710w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-6-232x300.jpg 232w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-6-15x20.jpg 15w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/p>\n<h3>7. Value proposition above the fold<\/h3>\n<p><strong>54% of homepages put the value proposition in the H1 header.<\/strong><\/p>\n<p>Those hard working words at the top of the homepage\u2026<\/p>\n<p>The homepage H1 header is the single most prominent bit of text on a website. The web copywriter has four options:<\/p>\n<ol>\n<li aria-level=\"1\">State the value proposition, as in \u201cWe do X for Y\u201d (simple, direct, specific)<\/li>\n<li aria-level=\"1\">Repeat the business name (unnecessary)<\/li>\n<li aria-level=\"1\">Use the tag line (often clever but\u00a0 vague and unhelpful)<\/li>\n<li aria-level=\"1\">Push an ad, announcement or content piece (current promotion)<\/li>\n<\/ol>\n<p>The majority of homepages use the first option. The header is the value proposition, the business category or the services provided.<\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0Use the H1 header on the homepage to simply say what the business does. Don\u2019t miss the opportunity to tell the visitors they\u2019re in the right place. Some of your visitors don\u2019t know you yet. Plus, a keyword-focused H1 is also an\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/seo-best-practices\/\" target=\"_blank\" rel=\"noopener\">SEO best practice<\/a>.<\/em><\/p>\n<h3>8. Calls to action (CTAs)<\/h3>\n<p><strong>33% of homepages have a call to action (not just \u2018contact us\u2019).<\/strong><\/p>\n<p>The contact button may be standard, but calls to action are not. Two thirds of websites do not have an actual call to action on the homepage.<\/p>\n<p>A call to action is more than \u201ccontact\u201d or \u201cread more.\u201d It has a more action-focused verb and it\u2019s more specific. When the visitor reads it, it makes the benefit feel high or the commitment feel low.<\/p>\n<p>Consider the difference:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5109 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7.jpg\" alt=\"\" width=\"800\" height=\"338\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-300x127.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-768x324.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-20x8.jpg 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Source:\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/how-to-design-button\/\" target=\"_blank\" rel=\"noopener\">How to design a button that wins clicks<\/a><\/p>\n<p><em>Recommendation: Set up an A\/B test to see if your CTAs have room for improvement. For the variant, try something longer and more specific. Use words in the CTA (or nearby) to let the visitor know that this isn\u2019t a huge commitment.<\/em><\/p>\n<p>Here\u2019s what an A\/B test of a call to action looks like, using Google Optimize. Although this test wasn\u2019t done running, you can already see the variant pulling ahead from the original.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5114 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1.png\" alt=\"\" width=\"1276\" height=\"206\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1.png 1276w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1-300x48.png 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1-1024x165.png 1024w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1-768x124.png 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-7-1-20x3.png 20w\" sizes=\"auto, (max-width: 1276px) 100vw, 1276px\" \/><\/p>\n<h3>9. Slideshows and carousels<\/h3>\n<p><strong>42% of homepages have slideshows or carousels.<\/strong><\/p>\n<p>They are timed to advance after a certain number of seconds (slideshow) or they can be navigated by clicking a label or thumbnail (carousel).<\/p>\n<p>This is an alarmingly high number, considering\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/rotating-sliders-hurt-website\/\" target=\"_blank\" rel=\"noopener\">the overwhelming evidence<\/a>\u00a0showing the poor performance of homepage slideshows.<\/p>\n<p>Probably, slideshows are still popular because they are built into cheap website templates. Or it may be because they help resolve conflicts in meetings when every department wants a little piece of the homepage.<\/p>\n<blockquote><p>The slider was invented to keep people from stabbing each other in conference rooms.<\/p><\/blockquote>\n<p><em><strong>Recommendation:<\/strong>\u00a0Rather than hide content in a second (or fifth) slide, make each slide a section on the page and stack them on a tall page. Prioritize them based on their likely importance to your visitor.<\/em><\/p>\n<h3>10. Video on the homepage<\/h3>\n<p><strong>18% of homepages feature some kind of video, not just a looping background video in the hero area.<\/strong><\/p>\n<p>When we first conducted this research, very few homepages had video. Now in 2021, times have changed. Video isn\u2019t a web design standard, but it\u2019s become far more popular.<\/p>\n<p>Changing the format of a message from text to video is the ultimate format upgrade, especially effective when the message is critical. Here are the three big opportunities<\/p>\n<ul>\n<li aria-level=\"1\">About us video (who we are, what we believe)<\/li>\n<li aria-level=\"1\">Testimonial video (\u201cthey are legit\u201d\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/social-proof-web-design\/\" target=\"_blank\" rel=\"noopener\">social proof<\/a>)<\/li>\n<li aria-level=\"1\">Explainer video (what this is, how it works)<\/li>\n<\/ul>\n<p>These are all conversion-focused, bottom-of-the-funnel videos, not content marketing videos on blog posts. Conversion videos are the most important of\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/types-of-marketing-videos\/\" target=\"_blank\" rel=\"noopener\">the three types of videos<\/a>. For these, it\u2019s worth hiring a pro producer and using a pro hosting\/streaming service.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5110 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8.png\" alt=\"\" width=\"1600\" height=\"744\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8.png 1600w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8-300x140.png 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8-1024x476.png 1024w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8-768x357.png 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8-1536x714.png 1536w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-8-20x9.png 20w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><strong><em>Recommendation:<\/em><\/strong><\/p>\n<ul>\n<li><em>To increase the percentage of visitors who play the video, work hard on the thumbnail.<\/em><\/li>\n<li><em>Use a face and a little call to action.<\/em><\/li>\n<li><em>Take the best quote out of the video and add it to the thumbnail, so people will get the message even if they don\u2019t play the video.<\/em><\/li>\n<\/ul>\n<h3>11. Descriptive title tags<\/h3>\n<p><strong>54% of homepage have descriptive title tags.<\/strong><\/p>\n<p>Close to half of all homepages fail to be descriptive in their title tags. Many just show the business name, include the tag line or simply say \u201chome.\u201d<\/p>\n<p>This is a missed opportunity to say what business the company is in, similar to putting the value proposition in the H1 header. It\u2019s especially important for search.<\/p>\n<p><strong>The homepage title tag is the single most important piece of SEO real estate on any website.<\/strong>\u00a0It\u2019s the strongest place to indicate relevance on the page with the most ranking potential (homepages almost always have more page authority than any other URL on a given domain)<\/p>\n<p><em><strong>Recommendation:<\/strong>\u00a0Use the title tag on the homepage to indicate the value proposition, the business category or the name of the main service. Do it in 55 characters or less if possible, to avoid truncation in search results.<\/em><\/p>\n<p>The worst possible homepage title tag? \u201cHome.\u201d<\/p>\n<p>A unicorn cries every time a web developer makes \u201cHome\u201d the homepage title tag.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5111 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9.png\" alt=\"\" width=\"1600\" height=\"1030\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9.png 1600w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9-300x193.png 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9-1024x659.png 1024w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9-768x494.png 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9-1536x989.png 1536w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-9-20x13.png 20w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h3>12. Descriptive navigation labels<\/h3>\n<p><strong>30% of websites have descriptive navigation labels, as opposed to \u201cservices\u201d \u201cproducts\u201d \u201cabout\u201d and \u201ccontact.\u201d<\/strong><\/p>\n<p>That means 70% of websites have generic navigation labels. Again, this is a missed opportunity to both indicate relevance to a search engine and to tell visitors they\u2019re in the right place.<\/p>\n<p>Compare the difference:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5112 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-10.jpg\" alt=\"\" width=\"710\" height=\"436\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-10.jpg 710w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-10-300x184.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-10-20x12.jpg 20w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/p>\n<p><strong><em>Recommendation:<\/em><\/strong><\/p>\n<ul>\n<li><em>Be descriptive in your navigation labels. Help the visitor accurately predict what they\u2019ll get when they click.<\/em><\/li>\n<li><em>Avoid generic labels (\u201cservices\u201d), branded terms (\u201cRetro Encabulator\u201d) and formats (\u201cebooks\u201d). Remember, visitors are looking for answers. Meaningful nav labels help them quickly get where they\u2019re going.<\/em><\/li>\n<\/ul>\n<h3>13. Social proof or other supportive evidence<\/h3>\n<p><strong>28% of homepages have testimonials, awards, or other evidence.<\/strong><\/p>\n<p>Most homepages contain no evidence whatsoever. That\u2019s not good. Adding social proof and evidence isn\u2019t a web design standard, but it\u2019s definitely a best practice.<\/p>\n<p>A page without evidence is really just a big pile of unsupported marketing claims.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5113 size-full\" src=\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-11.jpg\" alt=\"\" width=\"800\" height=\"753\" title=\"\" srcset=\"https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-11.jpg 800w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-11-300x282.jpg 300w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-11-768x723.jpg 768w, https:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/web-design-standards-11-20x20.jpg 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Ideally, every marketing claim is supported with\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/social-proof-web-design\/\" target=\"_blank\" rel=\"noopener\">one of these forms of social proof<\/a>\u00a0or it\u2019s backed with quantitative (data) evidence. Here\u2019s a list of types of evidence you can add to any marketing website.<\/p>\n<ul>\n<li aria-level=\"1\">Testimonials<\/li>\n<li aria-level=\"1\">Client logos<\/li>\n<li aria-level=\"1\">As-see-in press logos<\/li>\n<li aria-level=\"1\">Awards<\/li>\n<li aria-level=\"1\">Certifications<\/li>\n<li aria-level=\"1\">Endorsements from influencers<\/li>\n<li aria-level=\"1\">Years in business<\/li>\n<li aria-level=\"1\">Number of customers, clients<\/li>\n<li aria-level=\"1\">Success data (ROI, dollars saved, time saved, etc.)<\/li>\n<\/ul>\n<p><em><strong>Recommendation:<\/strong>\u00a0Back up every marketing claim with some form of evidence. Ideally, the evidence appears near the marketing claim it supports. Fill your pages with reasons to believe!<\/em><\/p>\n<h2>Custom design is dominant<\/h2>\n<p>Obviously, not all design standards are standard after all. Except for the placement of the logo, the main navigation and the placement of the header, there really aren\u2019t strong standards for website design.<\/p>\n<blockquote><p>The nice thing about standards is that you have so many to choose from. \u2013 Andy S. Tanenbaum, Computer Scientist<\/p><\/blockquote>\n<p>Web design conventions include contact in the top right, dropdown menus, value proposition high on the page and a search tool in the header.<\/p>\n<p>Other common design features may still be considered best practices, but may not be used by the majority of websites. Custom web design, with wireframe designs specific to the business and its audience, rules the day.<\/p>\n<h2>Practical insights for web designers<\/h2>\n<p>Why make your site different?<\/p>\n<p>If a design element is expected in a certain place, then that\u2019s where it should go.<\/p>\n<p><em>Note: Not all sites follow all conventions, even sites we design break conventions from time to time. However, there are strategic reasons behind breaking those conventions. A good design company will work with you on these strategic decisions throughout your project.<\/em><\/p>\n<p>Beyond design elements (and your own brand guidelines) there are types of web design standards that all good designers understand:<\/p>\n<ul>\n<li><strong>Brand standards<\/strong><br \/>\nColors, type and tone are specific to every business. You should have a style guide for your website and stick to it.<\/li>\n<li aria-level=\"1\"><strong>Coding standards<\/strong><br \/>\nWebsites should be built using the\u00a0<a href=\"http:\/\/www.w3.org\/standards\/\" target=\"_blank\" rel=\"noopener\">programming standards agreed upon by the W3C<\/a>. This makes them more likely to display and behave properly in browsers.<\/li>\n<li aria-level=\"1\"><strong>Accessibility standards<\/strong><br \/>\nAccess to information is a basic human right. This has been recognized by the UN Convention on the Rights of Persons with Disabilities. Follow\u00a0<a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\" target=\"_blank\" rel=\"noopener\">these standards<\/a>\u00a0to make your site accessible to everyone, including the visitor using a screen reader.<\/li>\n<\/ul>\n<p>Standard web conventions are shorthand for good design, same as any digital marketing best practice. If you\u00a0<a href=\"http:\/\/www.nngroup.com\/articles\/breaking-web-conventions\/\" target=\"_blank\" rel=\"noopener\">break any of these rules<\/a>, you should do so intentionally and with a very good reason. And you should plan on measuring the impact of being unexpected.<\/p>\n<p>Does your site align with standards? Follow best practices? Or break the rules?<\/p>\n<p><em>Article by Andy Crestodina of Orbit Media<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re a marketer\u2026\u00a0you probably don\u2019t think about design standards every day. If you\u2019re a web designer\u2026\u00a0you know that standards can help you do your job. If you\u2019re the visitor\u2026\u00a0you just know the site is confusing and where the back button is. Your guests are not mindless spectators. As the one millionth website they have [&hellip;]<\/p>","protected":false},"author":3,"featured_media":5107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-5102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/posts\/5102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/comments?post=5102"}],"version-history":[{"count":3,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/posts\/5102\/revisions"}],"predecessor-version":[{"id":5213,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/posts\/5102\/revisions\/5213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/media\/5107"}],"wp:attachment":[{"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/media?parent=5102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/categories?post=5102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluecoral.vn\/vn\/wp-json\/wp\/v2\/tags?post=5102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}