{"id":1795,"date":"2021-04-28T14:47:00","date_gmt":"2021-04-28T11:47:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=1795"},"modified":"2022-06-28T10:32:10","modified_gmt":"2022-06-28T07:32:10","slug":"css-tricks-to-improve-ux","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/","title":{"rendered":"10 CSS Tricks That Greatly Improve User Experience"},"content":{"rendered":"<p><strong>Have you thought about improving the user experience recently? If yes, we recommend using <a href=\"\/articles\/category\/css\/\">CSS<\/a> to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.&nbsp;<\/strong><\/p>\n<p><!--more--><\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" alt=\"cookie photo\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg\"><\/p>\n<p>This is extremely important because websites now compete mainly on the experience battlefield. A report shows that 88% of online shoppers wouldn\u2019t return to a website after having a <a href=\"\/articles\/ux-solutions-deteriorating-convenience-in-use\/\">bad user experience<\/a>, while 70% of online businesses that fail do so because of bad usability. In such circumstances, you cannot afford to neglect this issue any longer.<\/p>\n<p>In this article, we&#8217;ll share 10 CSS tricks that greatly improve user experience. Let&#8217;s take a look!<\/p>\n<h2>1. Use CSS animations to bring attention to important elements<\/h2>\n<p>You can use animations to direct a user&#8217;s attention to a specific element on your page. This is especially useful for elements that are not initially visible, such as a <a href=\"\/articles\/simple-popup-box\/\">popup or modal window<\/a>. Animations can also serve as a way to provide feedback after an action has been performed.<\/p>\n<p class=\"aligncenter\"><a href=\"\/articles\/html-css-keyframes-animated-head-drawing\/\"><img decoding=\"async\" alt=\"css animation\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\"><br \/>\nAnimation created with pure HTML and CSS. <\/a><\/p>\n<p>It not only makes your website more attractive but also turns it into a more engaging and fun experience for users. Just make sure not to use too many animations or make them too obtrusive, as that would have the opposite effect.<\/p>\n<h2>2. Use CSS to improve the usability of your forms<\/h2>\n<p>The second tip is to improve the usability of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html-css-js.com\/html\/tags\/#form\">website forms<\/a>. One way to do it is to use CSS to style the input elements. This includes using the correct input type for each field and providing clear labels that are easy to read.<\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/06\/1-user-xperience.jpg\" alt=\"user xperience\"><\/p>\n<p>Additionally, you can use CSS to show\/hide optional fields or to display error messages in a consistent manner. This trick helps you come up with unified and easily understandable forms that users will appreciate.<\/p>\n<h2>3. Use CSS to style your links<\/h2>\n<p>Links are one of the most important elements on your page, so it&#8217;s important to style them in a way that makes them easy to read and click. This can be done by using a simple CSS rule to change the color of links on hover. Besides that, you can use CSS to add an underline or change the font-weight of links.<\/p>\n<p class=\"aligncenter\"><a target=\"_blank\" rel=\"external nofollow noopener noreferrer\" href=\"https:\/\/html-css-js.com\/css\/generator\/font\/\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2020\/06\/font-css-generator.jpg\" alt=\"css font style generator\"><br \/>\n<strong>Online CSS Font Generator \u00bb<\/strong><\/a><\/p>\n<h2>4. Use CSS to improve the look and feel of your site&#8217;s buttons<\/h2>\n<p>Buttons are a vital component of your pages, so it&#8217;s important to make them look good and easy to click. You can use CSS to change the color, size, and shape of buttons. You can also add hover effects and other animations to make them more interactive.<\/p>\n<p class=\"aligncenter\"><a target=\"_blank\" rel=\"external nofollow noopener noreferrer\" href=\"https:\/\/htmlcheatsheet.com\/css\/\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/04\/css-button-generator.jpg\" alt=\"css font style generator\"><br \/>\n<strong>Online button generator of the CSS CheatSheet \u00bb<\/strong><\/a><\/p>\n<p>Testing different types of buttons are critical to the success of your website as they are one of the most important elements for your conversion rates. If you manage to create a perfect button, you can count on increased user engagement levels.<\/p>\n<h2>5. Use CSS to make your site&#8217;s navigation more user-friendly<\/h2>\n<p>Do you know that 94% of respondents say easy navigation is the most useful website feature? The navigation on your site plays a big role in the overall user experience. You can use CSS to style the navigation so that it is easy to read and use.&nbsp;<\/p>\n<p class=\"aligncenter\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/prettycoolsite.com\/\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/02\/2-pretty-cool-site-screenshot.jpg\" alt=\"website with hamburger menu\"><\/a><\/p>\n<p>The goal is to make it as easy as possible for users to find what they are looking for on your site. They should be able to access just about any point on your website in two or three clicks at the most.<\/p>\n<h2>6. Use CSS to improve the presentation of your content<\/h2>\n<p>The way your content is presented can have a big impact on the user experience. You can use CSS to style your content so that it is easy to read and digest. At the same time, you can use CSS to <a href=\"\/articles\/image-align-center\/\">add images<\/a>, videos, and other multimedia elements to your content to make it more engaging.<\/p>\n<h2>7. Use CSS to make your site&#8217;s layout more responsive<\/h2>\n<p class=\"aligncenter\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html5-templates.com\/preview\/masonry.html\" title=\"Masonry Template\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/04\/masonry.jpg\" alt=\"masonry\"><br \/>\n<strong>Masonry template<\/strong><\/a><\/p>\n<p>Responsive design is a must for modern websites. You can use CSS to make your site&#8217;s layout more responsive so that it looks good on all devices. This means adjusting your pages so as to make them suit mobile phones, tablets, laptops, and desktop computers just the same. This trick makes your website more inclusive, so you can attract all sorts of visitors &#8211; regardless of the devices they are using.&nbsp;<\/p>\n<h2>8. Use CSS to speed up the loading of your pages<\/h2>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/\">loading time of your pages<\/a> is important for the overall user experience. You can use CSS to improve the loading time of your pages by using a CSS preloader. Additionally, you can use CSS to load resources asynchronously so that they are not blocking the loading of your page. Be careful to avoid Cumulative Layout Shift (the page jumping as new elements appear).<\/p>\n<h2>9. Use CSS to improve the accessibility of your site<\/h2>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/10\/58888-big.jpg\" alt=\"Intense - Multipurpose Website Template\"><\/p>\n<p>Accessibility is an important consideration for all websites. You can use CSS to improve the accessibility of your site by using accessible colors, fonts, and sizes. Besides that, you can use CSS to hide or show content on different devices so that it is accessible to all users.<\/p>\n<h2>10. Use CSS to create better printouts of your pages<\/h2>\n<p>When users print your pages, they should be able to get a good printout that is easy to read. You can use CSS to improve the printouts of your pages by using the correct media types and styles. Additionally, you can use CSS to add page breaks and headers\/footers so that your printouts are well-organized.<\/p>\n<pre style=\"color: #000000; background: #ffffff;\"><span style=\"color: #800080;\">@<\/span><span style=\"color: #004a43;\">media<\/span> <span style=\"color: #004a43;\">print <\/span><span style=\"color: #800080;\">{<\/span>\n  <span style=\"color: #800000; font-weight: bold;\">body<\/span> <span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">color<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">000<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">background<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">FFF<\/span><span style=\"color: #800080;\">;<\/span>\n  <span style=\"color: #800080;\">}<\/span>\n  <span style=\"color: #800000; font-weight: bold;\">img<\/span> <span style=\"color: #800080;\">{<\/span><span style=\"color: #bb7977; font-weight: bold;\">display<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">none<\/span><span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<\/pre>\n<h2>Final thoughts<\/h2>\n<p>CSS is a powerful tool that can be used to improve the user experience of your website. By using the tips in this article, you can make your site more usable and engaging for your users. Make sure to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/csseditor.com\/\">tidy&nbsp;up and compress&nbsp;your&nbsp;CSS<\/a> code before going live.<\/p>\n<h3>Author: Charlie Svensson<\/h3>\n<p>Charlie Svensson is an IT specialist who happens to write blog posts about new technologies. As a member of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bestessayservicereviews.com\/\">research paper services<\/a>, Charlie frequently shares his ideas about the latest developments in UX design and programming. He is a passionate runner and a father of two lovely toddlers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you thought about improving the user experience recently? If yes, we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-1795","post","type-post","status-publish","format-standard","hentry","category-articles","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>10 CSS Tricks That Greatly Improve User Experience<\/title>\n<meta name=\"description\" content=\"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.\" \/>\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\/css-tricks-to-improve-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 CSS Tricks That Greatly Improve User Experience\" \/>\n<meta property=\"og:description\" content=\"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\" \/>\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=\"2021-04-28T11:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-28T07:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"10 CSS Tricks That Greatly Improve User Experience\",\"datePublished\":\"2021-04-28T11:47:00+00:00\",\"dateModified\":\"2022-06-28T07:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\"},\"wordCount\":1049,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg\",\"articleSection\":[\"Articles\",\"CSS\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\",\"url\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\",\"name\":\"10 CSS Tricks That Greatly Improve User Experience\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg\",\"datePublished\":\"2021-04-28T11:47:00+00:00\",\"dateModified\":\"2022-06-28T07:32:10+00:00\",\"description\":\"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 CSS Tricks That Greatly Improve User Experience\"}]},{\"@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":"10 CSS Tricks That Greatly Improve User Experience","description":"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.","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\/css-tricks-to-improve-ux\/","og_locale":"en_GB","og_type":"article","og_title":"10 CSS Tricks That Greatly Improve User Experience","og_description":"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.","og_url":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2021-04-28T11:47:00+00:00","article_modified_time":"2022-06-28T07:32:10+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"10 CSS Tricks That Greatly Improve User Experience","datePublished":"2021-04-28T11:47:00+00:00","dateModified":"2022-06-28T07:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/"},"wordCount":1049,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg","articleSection":["Articles","CSS"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/","url":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/","name":"10 CSS Tricks That Greatly Improve User Experience","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg","datePublished":"2021-04-28T11:47:00+00:00","dateModified":"2022-06-28T07:32:10+00:00","description":"we recommend using CSS to perform highly practical UX tricks. They can make a big difference in the overall feel and look of your website.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2021\/10\/cookie-photo.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/css-tricks-to-improve-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"10 CSS Tricks That Greatly Improve User Experience"}]},{"@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\/1795","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=1795"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1795\/revisions"}],"predecessor-version":[{"id":1798,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1795\/revisions\/1798"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=1795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=1795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=1795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}