{"id":19882,"date":"2018-10-26T08:01:52","date_gmt":"2018-10-26T13:01:52","guid":{"rendered":"https:\/\/www.hostgator.com\/blog\/?p=19882"},"modified":"2019-06-05T13:30:25","modified_gmt":"2019-06-05T18:30:25","slug":"web-design-best-practices-guide","status":"publish","type":"post","link":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/","title":{"rendered":"Web Design Best Practices: A Helpful Guide"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Your website is the main face of your brand online. And <\/span><a href=\"https:\/\/www.hostgator.com\/website-builder\"><span style=\"font-weight: 400;\">building your website<\/span><\/a><span style=\"font-weight: 400;\"> with best practices in mind will ensure your brand is putting its best foot forward. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">What people see when they visit it influences how they see your brand   online and off. And your web design largely defines how people experience your website.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In short, web design is important.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A bad web design can make your website layout look unprofessional, lose visitors\u2019 trust, or make it difficult for them to find what they\u2019re looking for (and therefore increasing instead of<\/span><a href=\"https:\/\/www.hostgator.com\/blog\/reduce-website-bounce-rate\/\"><span style=\"font-weight: 400;\"> reducing your bounce rates<\/span><\/a><span style=\"font-weight: 400;\">). <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A good website design shows your visitors you know what you\u2019re doing and that it\u2019s worth sticking around and interacting with your brand.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Whether you\u2019re working on a building new website or launching a re-design for the one you already have, there are a few important web design best practices you should honor.<\/span><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.hostgator.com\/website-builder\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"73\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2016\/10\/HostGator-Website-Builder.png\" alt=\"HostGator Website Builder\" class=\"wp-image-12733\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2016\/10\/HostGator-Website-Builder.png 600w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2016\/10\/HostGator-Website-Builder-300x37.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1. Make Your Site Navigation Intuitive.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Part of the design process is figuring out how to organize all the pages and what to include in your <\/span><b>website menus<\/b><span style=\"font-weight: 400;\">. Getting your site organization right is both<\/span><a href=\"https:\/\/www.hostgator.com\/blog\/website-architecture-best-practices-seo\/\"><span style=\"font-weight: 400;\"> important for your website architecture<\/span><\/a><span style=\"font-weight: 400;\"> and because it determines how easy navigating your website is for visitors.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">When deciding what pages, categories, and subcategories to include in your website\u2019s menus, think first about your visitors. What will make it easier for the average visitor to find what they\u2019re looking for? But also decide what the most important pages you want them to find are.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Strive to organize your website in a way that will make it just as intuitive to a first-time visitor as it is to someone who knows it well.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Maintain a Consistent Style.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">If you visited a website that had a specific style on the home page but changed to something completely different on the next page you linked on, you\u2019d find the change confusing. You might wonder if you were in the right place at all or had somehow navigated away from the site you thought you were on.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">You don\u2019t want your site visitors to deal with that kind of confusion. Early on in the design process, sit down to develop a <\/span><b>web design style guide<\/b><span style=\"font-weight: 400;\">. A style guide is a useful web design tool that will help you make sure all the pages on your website visually match well enough to let visitors know they\u2019re all related to each other as well as to your brand.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Make sure it includes:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The website\u2019s color scheme<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The logo design to use (and any variations on it in terms of size and shape you\u2019ll use throughout the site)<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The font(s)<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The visual style (for example, do you want a minimalist feel? A playful one?)<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">As you move into the particulars of designing the site, your style guide will be a helpful resource to keep you on track.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Design Each Page With a Goal in Mind.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">You\u2019re not just designing a website for fun, you want it to accomplish something. And even if you have one overarching goal for the whole website, different web pages will need to have more specific goals.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For example, an eCommerce website will primarily be designed to get people to make purchases. But in order to do that, some pages will be focused on getting people to visit the website to begin with, so they&#8217;ll have the primary goal of improving search engine optimization &nbsp;or encouraging social shares. Other pages will more directly try to get people to click that 'Buy'\u009d button.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Clearly define the specific goal you want and &nbsp;to accomplish this and make sure your design for it centers the goal.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Keep Each Page Focused.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Another<\/span><a href=\"https:\/\/www.hostgator.com\/blog\/new-year-web-design-tips\/\"><span style=\"font-weight: 400;\"> good web design tip<\/span><\/a><span style=\"font-weight: 400;\"> that goes hand in hand with having a specific goal for each web page is to make sure your pages have a clear focus. Don\u2019t try to do too much on any one webpage. You don\u2019t want your web pages to look cluttered   that not only makes it look bad (which makes visitors more likely to click away), but it also presents too many distractions.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">How will people know the next best step to take, if your page is filled with so many links and images and text that they can\u2019t figure out what to focus on?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">If you realize a particular web page has too much going on, split it up into multiple pages. Having separate pages that each has a more clear focus will be good for user experience and improve your opportunities to optimize for SEO.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Make Your Website Responsive.<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.stonetemple.com\/mobile-vs-desktop-usage-study\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Mobile use now surpasses computer use<\/span><\/a><span style=\"font-weight: 400;\">,&nbsp;<\/span><span style=\"font-weight: 400;\">and every year the amount of time people spend on the web on mobile devices only grows. For website owners, that means your web design <\/span><i><span style=\"font-weight: 400;\">has<\/span><\/i><span style=\"font-weight: 400;\"> to prioritize the<\/span><a href=\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-website\/\"><span style=\"font-weight: 400;\"> mobile friendly experience<\/span><\/a><span style=\"font-weight: 400;\">. In most cases, the best option for creating a website that works well both on desktop and mobile devices is to build a responsive website.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Responsive web design involves<\/span><a href=\"https:\/\/uxplanet.org\/responsive-design-best-practices-c6d3f5fd163b\" target=\"_blank\" rel=\"noopener noreferrer\"> <span style=\"font-weight: 400;\">identifying breakpoints<\/span><\/a> <span style=\"font-weight: 400;\">on the page where the page can be cut off and everything to the side moved below the breakpoint without the experience losing anything. That\u2019s why mobile devices often display the same images and text, but with all elements of the page that appear alongside each other on the desktop showing up as stacked above and below each other.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">When designing each page on your website, you need to define at least three breakpoints to ensure your pages work well on each of the three main device sizes (although many designers prefer to use more).<\/span><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"310\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-breakpoints.png\" alt=\"web design breakpoints\" class=\"wp-image-19886\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-breakpoints.png 730w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-breakpoints-300x127.png 300w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure><\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">To a large degree, responsive websites have become common enough that most <\/span><span style=\"font-weight: 400;\">web design tools<\/span><span style=\"font-weight: 400;\"> or designers you turn to will automatically employ best practices for responsive web design.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As just one example, all of the templates offered with<\/span><a href=\"https:\/\/www.hostgator.com\/website-builder\"><span style=\"font-weight: 400;\"> HostGator\u2019s website builder<\/span><\/a><span style=\"font-weight: 400;\"> are responsive, so even newbie website owners that don\u2019t know anything about HTML or other coding languages can easily create a website that\u2019s responsive.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">No matter what <\/span><span style=\"font-weight: 400;\">web design tools<\/span><span style=\"font-weight: 400;\"> you use though, make sure you design your website with mobile in mind and use responsive design best practices.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Use Fluid Images.<\/h2>\n\n\n\n<p><a href=\"https:\/\/alistapart.com\/article\/fluid-images\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Fluid images&nbsp;<\/span><\/a><span style=\"font-weight: 400;\">can aid in responsive web design and improve user experience on your website. You can make any of the images you use fluid with the right HTML code. If you add 'max-width: 100%'\u009d to the source code for the image, you\u2019re letting browsers know to resize the image to fit the page on every device.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As an example, the full code would look like:<\/span><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">&lt;img src=&#8221;image-name.jpg&#8221; style=&#8221;max-width:100&#8243; &nbsp;alt=&#8221;your image alt text&#8221;&gt;<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This will keep your images from blocking text or other parts of the page on devices where they outgrow the section of the page you want them to stay contained within.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Make Clickable Elements Large Enough for Mobile.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Another important component of good mobile-friendly website design is thinking about how people use their mobile devices. Clicking a small button on a computer is easy with the pointer that you have total control over and that can get very specific in what it points to. On a mobile device though, you have to be able to 'click'\u009d that same button by touching it with your finger.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">If a link or button is too small, or worse, if you have different links located too close together, your users will struggle to get the links to work.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">When designing your web pages, make sure you test each one out on a small mobile device to confirm that all the links and buttons are easy to use.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Use Visual Hierarchies.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">This relates back to the goals you developed for each page of your website. Every page will include the most important information that you want people to notice, as well as additional information and design elements that matter, but aren\u2019t of the same level of importance.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In order to make sure that every visitor on every device sees the most important parts of the page before moving on, develop a visual hierarchy for each web page. The most important elements need to go at the top so they show up for everybody, and the other parts of the page can fall further down for the people interested enough to keep scrolling to see the whole page.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Make Your Site Accessible.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Your visitors don\u2019t all interact with the web in the same way. While that\u2019s useful to consider in general, it\u2019s an even more important point to remember when designing for people with different types of disabilities. An important web design tip to keep in mind during the design process is, therefore, to aim for inclusivity and accessibility.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The Web Accessibility Initiative has outlined a number of<\/span><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-principles\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <span style=\"font-weight: 400;\">Accessibility Principles<\/span><\/a><span style=\"font-weight: 400;\"> for web designers to honor when creating their websites.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The people who benefit most from accessible web design may be in the minority, but some are very likely in your target audience. By building an accessible website, you open your brand up to a wider audience and can build goodwill with a community that\u2019s often underserved.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Stick to Design Standards.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Have you ever been confused by a website that has its menu in a different spot than you\u2019re used to? Or had a hard time closing a pop up that had the X in a weird spot?<\/span><a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\"><br>\n<\/a><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">While web designers can often benefit from finding ways to be creative or unique, there are certain&nbsp;<\/span><a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">web design standards<\/a> that&nbsp;<span style=\"font-weight: 400;\">define how people interact with websites and what they expect to find.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">When you move away from these norms, you risk creating confusion and a negative experience for your customers. A few of the main standards it\u2019s a best practice to stick with include:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Putting your logo in the top left<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Putting contact information in the top right<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Having your main menu stretch across the top of the screen<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Putting your value proposition high up on the home page<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Including a CTA high up on the home page<\/span><\/li><li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;Adding a search feature to the header<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">When you think about it, everything on that list is probably exactly what you expect to see when you visit a website. If you\u2019re going to venture away from these standards, make sure you think thoughtfully about why and make sure you\u2019re not creating unnecessary confusion in the process.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Good Design Makes for a Good Website<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Your web design determines how your website will look and feel to the people that visit it. Getting it right is paramount to the <a href=\"https:\/\/www.hostgator.com\/blog\/building-successful-website-guide\/\">success of your website<\/a>. Take some time to understand the main <\/span><span style=\"font-weight: 400;\">web design best practices<\/span><span style=\"font-weight: 400;\"> and<\/span><span style=\"font-weight: 400;\"> create a website<\/span><span style=\"font-weight: 400;\"> that people will find useful and intuitive. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your website is the main face of your brand online. And building your website with best practices in mind will&#8230;<\/p>\n","protected":false},"author":166,"featured_media":19936,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-19882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-hosting-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.2 (Yoast SEO v23.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Design Best Practices: A Helpful Guide - HostGator<\/title>\n<meta name=\"description\" content=\"Improve your website&#039;s traffic and conversions by updating your website&#039;s design. Read on to disover our website design tips and best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design Best Practices: A Helpful Guide\" \/>\n<meta property=\"og:description\" content=\"Improve your website&#039;s traffic and conversions by updating your website&#039;s design. Read on to disover our website design tips and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"HostGator\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HostGator\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-26T13:01:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-05T18:30:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2018\/07\/web-design-best-practices.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kristen Hicks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/atxcopywriter\" \/>\n<meta name=\"twitter:site\" content=\"@HostGator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kristen Hicks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\"},\"author\":{\"name\":\"Kristen Hicks\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5\"},\"headline\":\"Web Design Best Practices: A Helpful Guide\",\"datePublished\":\"2018-10-26T13:01:52+00:00\",\"dateModified\":\"2019-06-05T18:30:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\"},\"wordCount\":1835,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png\",\"articleSection\":[\"Web Hosting Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\",\"name\":\"Web Design Best Practices: A Helpful Guide - HostGator\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png\",\"datePublished\":\"2018-10-26T13:01:52+00:00\",\"dateModified\":\"2019-06-05T18:30:25+00:00\",\"description\":\"Improve your website's traffic and conversions by updating your website's design. Read on to disover our website design tips and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png\",\"width\":1200,\"height\":629,\"caption\":\"web design best practices\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.hostgator.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design Best Practices: A Helpful Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"name\":\"HostGtaor\",\"description\":\"Web Hosting and Marketing Tips for Entrepreneurs\",\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\",\"name\":\"HostGtaor\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"width\":1092,\"height\":215,\"caption\":\"HostGtaor\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/HostGator\",\"https:\/\/x.com\/HostGator\",\"https:\/\/www.instagram.com\/hostgator\",\"https:\/\/www.linkedin.com\/company\/hostgator-com\",\"https:\/\/www.pinterest.com\/hostgator\/\",\"https:\/\/www.youtube.com\/user\/hostgator\"],\"email\":\"support@gator.com\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5\",\"name\":\"Kristen Hicks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g\",\"caption\":\"Kristen Hicks\"},\"description\":\"Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.\",\"sameAs\":[\"http:\/\/austin-copywriter.com\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/atxcopywriter\"],\"url\":\"https:\/\/www.hostgator.com\/blog\/author\/khicks\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Design Best Practices: A Helpful Guide - HostGator","description":"Improve your website's traffic and conversions by updating your website's design. Read on to disover our website design tips and best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/","og_locale":"en_US","og_type":"article","og_title":"Web Design Best Practices: A Helpful Guide","og_description":"Improve your website's traffic and conversions by updating your website's design. Read on to disover our website design tips and best practices.","og_url":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/","og_site_name":"HostGator","article_publisher":"https:\/\/www.facebook.com\/HostGator","article_published_time":"2018-10-26T13:01:52+00:00","article_modified_time":"2019-06-05T18:30:25+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2018\/07\/web-design-best-practices.png","type":"image\/png"}],"author":"Kristen Hicks","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/atxcopywriter","twitter_site":"@HostGator","twitter_misc":{"Written by":"Kristen Hicks","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#article","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/"},"author":{"name":"Kristen Hicks","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5"},"headline":"Web Design Best Practices: A Helpful Guide","datePublished":"2018-10-26T13:01:52+00:00","dateModified":"2019-06-05T18:30:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/"},"wordCount":1835,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png","articleSection":["Web Hosting Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/","url":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/","name":"Web Design Best Practices: A Helpful Guide - HostGator","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png","datePublished":"2018-10-26T13:01:52+00:00","dateModified":"2019-06-05T18:30:25+00:00","description":"Improve your website's traffic and conversions by updating your website's design. Read on to disover our website design tips and best practices.","breadcrumb":{"@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#primaryimage","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/07\/web-design-best-practices.png","width":1200,"height":629,"caption":"web design best practices"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostgator.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design Best Practices: A Helpful Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.hostgator.com\/blog\/#website","url":"https:\/\/www.hostgator.com\/blog\/","name":"HostGtaor","description":"Web Hosting and Marketing Tips for Entrepreneurs","publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hostgator.com\/blog\/#organization","name":"HostGtaor","url":"https:\/\/www.hostgator.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","width":1092,"height":215,"caption":"HostGtaor"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HostGator","https:\/\/x.com\/HostGator","https:\/\/www.instagram.com\/hostgator","https:\/\/www.linkedin.com\/company\/hostgator-com","https:\/\/www.pinterest.com\/hostgator\/","https:\/\/www.youtube.com\/user\/hostgator"],"email":"support@gator.com"},{"@type":"Person","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5","name":"Kristen Hicks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g","caption":"Kristen Hicks"},"description":"Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.","sameAs":["http:\/\/austin-copywriter.com\/","https:\/\/x.com\/https:\/\/twitter.com\/atxcopywriter"],"url":"https:\/\/www.hostgator.com\/blog\/author\/khicks\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/19882"}],"collection":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/comments?post=19882"}],"version-history":[{"count":5,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/19882\/revisions"}],"predecessor-version":[{"id":22924,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/19882\/revisions\/22924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media\/19936"}],"wp:attachment":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media?parent=19882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/categories?post=19882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/tags?post=19882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}