{"id":601,"date":"2018-03-04T22:19:03","date_gmt":"2018-03-04T20:19:03","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=601"},"modified":"2018-03-04T22:19:26","modified_gmt":"2018-03-04T20:19:26","slug":"avoid-html-website-features","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/","title":{"rendered":"Bad Web Design Practices That You Should Avoid"},"content":{"rendered":"

Creating websites is a complicated process and many coders can develop bad practices while creating them. Here\u2019s a few things not to do while web coding<\/strong> and some site features you should avoid at all costs.<\/p>\n

\"avoid<\/p>\n

Use a transitional doctype<\/h3>\n

Using the HTML 4.01 \u201cloose\u201d doctype or the XHTML 1.0 Transitional doctype<\/a> is a bad way to start a website. Instead, code with the strict doctype. Some validation errors are silenced with the transitional doctypes and can cause problems later on.<\/p>\n

Write the CSS and HTML simultaneously<\/h3>\n

When making a website, try to fully write the HTML markup before even starting on the CSS. If you write them at the same time you can often lose your train of thought and it could take longer than it should to code the website.<\/p>\n

Use tables for the layout<\/h3>\n

Tables were never meant to be used for the layout. Not only do tables make your markup ugly but they render slowly and make your code hard to maintain. Do not use tables for your layout<\/a>! Use div tags for tables<\/a>.<\/p>\n

Make classes and IDs with capital letters<\/h3>\n

The CSS can become terribly hard to maintain if you have some capital letters in your classes & IDs. Just don\u2019t do it.<\/p>\n

Make inline JavaScript and CSS<\/h3>\n

Writing JavaScript and CSS in the HTML<\/a> files is a bad idea, since every time you go to a page you have to re-download the CSS and JavaScript if they\u2019re not external. If they are external browsers can cache them and will not have to load them again. I hope you enjoyed these tips.<\/p>\n

Site Features That You Should Avoid<\/h2>\n

When creating websites some features sound like a great idea but in reality they only detract visitors. Even though the <blink><\/code> tag is gone (thank goodness!) there are many other equally annoying \u201cfeatures\u201d that people often use, but shouldn\u2019t. Here\u2019s a list of these features you should avoid.<\/strong><\/p>\n

1. Marquees<\/h3>\n

Marquees were nice<\/a> back in the 90s, but now they\u2019re annoying and have been deprecated and removed as of HTML5<\/a>. Readers don\u2019t want to have to wait for the text to scroll so that they can read it all; they want the information now so that they can skip parts that they aren\u2019t interested in.<\/p>\n

2. Background Music<\/h3>\n

Background music is extremely annoying, especially if it automatically plays and\/or you can\u2019t stop it. No, we don\u2019t all want to hear your favorite song. Trust us, your website will not gain traffic if you add background music.<\/p>\n

3. Tons of Fonts<\/h3>\n

Having over 2-3 fonts on one page doesn\u2019t look good. You want to focus on content and readability, not how many fonts you can stuff into one page.<\/p>\n

4. Text Links<\/h3>\n

Text links are a very obnoxious way for you to monetize your sites. Visitors don\u2019t want to accidentally bring up a dialog box whenever they accidentally hover over some word. Stick with traditional ads for your visitors sake.<\/p>\n

5. Ads with Sound<\/h3>\n

Though it\u2019s great that I just bought a new speaker I don\u2019t want to hear ads making noise. People go to your site for information, most people tolerate static ads but ads making noise is just too much, especially if your visitor is listening to music.<\/p>\n

6. Splash Pages<\/h3>\n

Splash pages are simply irritating and they make one more step for the user to get to the content. No, they don\u2019t make your website look professional and a big percent of your visitors might abandon the site even before accessing the content itself.<\/p>\n

7. Popups<\/h3>\n

Popups are terribly annoying, they shift the focus away from your site and if I see popups on a site<\/a> it makes me want to leave.<\/p>\n

8. Frame based Designs<\/h3>\n

Frames are terribly annoying when you\u2019re trying to navigate through a website. Why? Because the back and forward buttons never work properly and if you try to open a link in a new tab you only open that frame, not the rest of the site. We hope you don\u2019t use any of these terrible elements of the web in the future.<\/p>\n

The ugliest website of the whole Internet<\/h2>\n

There are many awful websites but only one can be the ugliest. This example lists all web design taboos you should avoid. Visit BadHTML.com<\/a><\/strong> for more examples.<\/p>\n","protected":false},"excerpt":{"rendered":"

Creating websites is a complicated process and many coders can develop bad practices while creating them. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4],"tags":[],"class_list":["post-601","post","type-post","status-publish","format-standard","hentry","category-articles","category-html"],"yoast_head":"\nBad Web Design Practices That You Should Avoid<\/title>\n<meta name=\"description\" content=\"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bad Web Design Practices That You Should Avoid\" \/>\n<meta property=\"og:description\" content=\"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-04T20:19:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-04T20:19:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Bad Web Design Practices That You Should Avoid\",\"datePublished\":\"2018-03-04T20:19:03+00:00\",\"dateModified\":\"2018-03-04T20:19:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\"},\"wordCount\":732,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg\",\"articleSection\":[\"Articles\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\",\"url\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\",\"name\":\"Bad Web Design Practices That You Should Avoid\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg\",\"datePublished\":\"2018-03-04T20:19:03+00:00\",\"dateModified\":\"2018-03-04T20:19:26+00:00\",\"description\":\"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg\",\"width\":350,\"height\":208,\"caption\":\"avoid these website features\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bad Web Design Practices That You Should Avoid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bad Web Design Practices That You Should Avoid","description":"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.","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:\/\/html-online.com\/articles\/avoid-html-website-features\/","og_locale":"en_GB","og_type":"article","og_title":"Bad Web Design Practices That You Should Avoid","og_description":"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.","og_url":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2018-03-04T20:19:03+00:00","article_modified_time":"2018-03-04T20:19:26+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Bad Web Design Practices That You Should Avoid","datePublished":"2018-03-04T20:19:03+00:00","dateModified":"2018-03-04T20:19:26+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/"},"wordCount":732,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg","articleSection":["Articles","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/","url":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/","name":"Bad Web Design Practices That You Should Avoid","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg","datePublished":"2018-03-04T20:19:03+00:00","dateModified":"2018-03-04T20:19:26+00:00","description":"Creating websites is a complicated process. Here\u2019s a few things not to do while web coding and some site features you should avoid at all costs.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/avoid-html-website-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/03\/avoid-these-html.jpg","width":350,"height":208,"caption":"avoid these website features"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/avoid-html-website-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Bad Web Design Practices That You Should Avoid"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=601"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/601\/revisions"}],"predecessor-version":[{"id":604,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/601\/revisions\/604"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}