{"id":591,"date":"2022-03-14T20:32:58","date_gmt":"2022-03-14T20:32:58","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=591"},"modified":"2022-03-16T20:34:41","modified_gmt":"2022-03-16T20:34:41","slug":"modern-web-design-tips","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/","title":{"rendered":"Modern Web Design Tips"},"content":{"rendered":"<figure id=\"attachment_592\" aria-describedby=\"caption-attachment-592\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-592\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-3-300x200.jpg\" alt=\"web design tips\" width=\"900\" height=\"600\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-3-300x200.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-3-768x512.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-3-1024x683.jpg 1024w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-3.jpg 1200w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-592\" class=\"wp-caption-text\"><center><a href=\"https:\/\/www.pexels.com\/photo\/person-apple-laptop-notebook-1171\/\" target=\"_blank\"><span style=\"font-size: small;\">SplitShire \/ Pexels<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/deed.en\" target=\"_blank\"><span style=\"font-size: small;\">CC0 1.0<\/span><\/a><\/center><\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Tips_in_Modern_Web_Design\" >Tips in Modern Web Design<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#HTML_Tables_for_layout_%E2%80%93_too_old_school\" >HTML Tables for layout \u2013 too old school.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Background_color_%E2%80%93_declare_it\" >Background color \u2013 declare it.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Tabbed_navigation_elements_%E2%80%93_benefit_from_it\" >Tabbed navigation elements \u2013 benefit from it.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Modal_windows_%E2%80%93_classy\" >Modal windows \u2013 classy.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Links_%E2%80%93_style_them_accordingly\" >Links \u2013 style them accordingly.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Underlining_text_that_is_not_a_link_%E2%80%93_what_are_you_thinking\" >Underlining text that is not a link \u2013 what are you thinking?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#The_active_property_%E2%80%93_use_it\" >The :active property \u2013 use it!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#ALL-CAPS_%E2%80%93_avoid\" >ALL-CAPS \u2013 avoid.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Clean_coding_%E2%80%93_adhere_to_this\" >Clean coding \u2013 adhere to this.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Stylesheets_%E2%80%93_always_on_top\" >Stylesheets \u2013 always on top.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/#Scripts_%E2%80%93_always_at_the_bottom\" >Scripts \u2013 always at the bottom.<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Tips_in_Modern_Web_Design\"><\/span>Tips in Modern Web Design<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"HTML_Tables_for_layout_%E2%80%93_too_old_school\"><\/span>HTML Tables for layout \u2013 too old school.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>CSS drives websites of today<\/strong>. There are still some sites; however, that use tables for their layout. Tables should only be used for tabular data, and that\u2019s it. No excuses. Tables intervene with your site\u2019s accessibility, flexibility, and functionality.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Background_color_%E2%80%93_declare_it\"><\/span>Background color \u2013 declare it.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Declaring the background color will enable users with non-default browser background colors to <strong>appreciate your design instead of seeing awkward colors<\/strong> through a transparent body.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Tabbed_navigation_elements_%E2%80%93_benefit_from_it\"><\/span>Tabbed navigation elements \u2013 benefit from it.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Using the tabbed navigation technique will allow you to <strong>keep a rather large content in a compact space<\/strong> thus giving you a clean, organized design.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Modal_windows_%E2%80%93_classy\"><\/span>Modal windows \u2013 classy.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">In the spirit of conserving space, modal windows are exceptional in presenting additional information that has no space in your intended layout. <strong>Modal windows are floating windows that allow you to show larger images, extra content, forms, etc<\/strong>.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Links_%E2%80%93_style_them_accordingly\"><\/span>Links \u2013 style them accordingly.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Links should stand out from the rest of the text.<\/strong> They should be distinguishable so that users won\u2019t have to guess whether or not your text is intended to be a link.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Underlining_text_that_is_not_a_link_%E2%80%93_what_are_you_thinking\"><\/span>Underlining text that is not a link \u2013 what are you thinking?<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Underlining text that should not be underlined will cause a lot of confusion<\/strong>. Furthermore, clicking underlined text that is not linked gives the user some degree of disappointment. But you could still underline text that is not a link under certain circumstances.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_active_property_%E2%80%93_use_it\"><\/span>The :active property \u2013 use it!<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">The link property :active is not only used for adding special style to an activated link or element, but it <strong>also serves as a feedback or confirmation to the users that the link has been clicked<\/strong>. This way, if there are any delays, the user would know not to click the link again with the presumption that the request is being processed.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"ALL-CAPS_%E2%80%93_avoid\"><\/span>ALL-CAPS \u2013 avoid.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>All-caps is easily translated as shouting<\/strong>. If for artistic reasons you couldn\u2019t do away with an all-caps text, then use CSS to style it. This is what the property \u201ctext-transform\u201d was built for.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Clean_coding_%E2%80%93_adhere_to_this\"><\/span>Clean coding \u2013 adhere to this.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Write your codes as clean as you can. <strong>Clean coding eliminates confusion and increases maintainability<\/strong>. This will benefit you, your site and others.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Stylesheets_%E2%80%93_always_on_top\"><\/span>Stylesheets \u2013 always on top.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Situating your stylesheets inside the document allows the page to render progressively and therefore giving the impression that the<strong> page loads considerably faster.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Scripts_%E2%80%93_always_at_the_bottom\"><\/span>Scripts \u2013 always at the bottom.<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">To the same effect as putting stylesheets on top, placing <strong>scripts at the bottom of the page will make it load faster<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tips in Modern Web Design HTML Tables for layout \u2013 too old school. CSS drives websites of today. There are still some sites; however, that use tables for their layout. Tables should only be used for tabular data, and that\u2019s it. No excuses. Tables intervene with your site\u2019s accessibility, flexibility, and functionality. Background color \u2013 &#8230; <a title=\"Modern Web Design Tips\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/modern-web-design-tips\/\" aria-label=\"Read more about Modern Web Design Tips\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":592,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[290,71,229],"class_list":["post-591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-modern-web-design","tag-web-design","tag-web-design-tips"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/592"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}