9 ways to improve UI in Web Development

It's a common knowledge that User interfaces are an important part of an application to make it stand out and appealing. However, it is also one of the most ignored aspect of programming, which if not done correctly, can be difficult to manage as it grows. Improvising the basic building blocks of UI, i.e., HTML and CSS to the best practices can help us achieve the business goals and an improved UI. Here are the 9 way you can improve UI by leveraging HTML and CSS to write sane, manageable and scalable applications.

1. First things first - Defining DOCTYPE

   Declaring doctype must be the first thing you do starting with HTML documents. It explains the browser which XHTML standards user is using and helps it read and render your markup correctly. One should prefer HTML5 (HTML syntax) as preferred syntax for the documents:

   (It’s recommended to use HTML, as text/html. Do not use XHTML as it lacks both browser and infrastructure support and offers less room for optimization than HTML.)

2. Often ignored Meta tag  

   Meta tags might seem like a trivial detail, but this is an important tag that will have all the information about your DOM and its behaviors. These are also responsible for all the SEO related information in your page. Few of the important once are listed below that are must in any webpage: 

   • Make sure your editor uses UTF-8 as character encoding and specify it in HTML templates and documents via this element 
   • Setting the viewport to make sure your website supports media queries and look good on all devices.  This Meta element should be included in all your web pages 
3. Loading external files 

    Managing the resources can be tedious as your application grows. Always use HTTPS (https:) for images and other media files, style sheets, and scripts while accessing these files from server/CDN unless the respective files are not available over HTTPS. 

   • If you are accessing files from your local repository always use relative paths instead of absolute paths, like use: 
   • Avoid using multiple imports of same file with same or different versions. We often import a library of style/script file that we will need for our implementation without checking if the application is already has that file imported like: 
4. Dealing with IDs and Classes

   Use meaningful or generic ID and class names. There cannot be multiple elements with same ID i.e., an ID must be Unique throughout the page and element can have only one ID. However, we can have as many classes as we want and wherever we want. ID and classes can be together or individually used to apply CSS over the page, but an important thing to note that an ID will always have precedence over a class. If a div have CSS applied using both ID and class, the CSS written in ID will override whatever is written in class. For example: 

   

   The container will have red color due to more precedence to ID.

5. CSS is easy, Right?

   CSS is the single most important part of website that will grow large and hence managing it properly is essential.  

   • Margins and Padding: Always use margin to give space outside the element while padding to create space inside the element, both are separated by border.
   • Shorthand Properties: Use shorthand properties where possible. For example: 
   • Never Use Inline CSS: 
   • Don’t use !important unless necessary:
6. Not all Browsers are same - Cross Browser 

   As a rule, we want an HTML element to look the same way, independent of which browser is being used to view it. Unfortunately, this is not the case because of the way browsers run. No matter how well we write our CSS something or other will not work in some browsers. To tackle that we can take help of the following things to avoid and fix those issues:

   • Use of Normalize CSS and Reset CSS - These CSS provides cross-browser consistency in the default styling of HTML elements. 
   • Target specific browsers using  
   • Target older IE specific Issues: 
7. Bootstrap

   Bootstrap I one of the most famous libraries if not the most famous for responsive UI development and templating However with the number of classes and functionalities it provides, it’s quite possible that a developer may make mistakes while using it. Here are few points to consider before starting to use it.

   • Version: It’s important to decide on the version of bootstrap to be used in the application based on the browser compatibility and Device compatibility requirements. Latest versions of bootstrap (4+) doesn’t support IE browsers less than 10.
   • Bootstrap JS: It’s important to import jQuery file before importing the bootstrap JS file for it to work, since the Bootstrap JS file has several dependencies on jQuery.
   • Scaffolding:
     • Never use a .container class inside another .container as the container class is fixed with though out the application and nesting it inside other container class can lead to CSS issues like overflow. You should do the following:
     • Never use a .row class as a direct child of another .row class as the .row class has negative margins, like:
     • Also never override the inbuilt classes provided by Bootstrap or any other libraries.
   • Media Queries: If you are using a framework like bootstrap for responsive design make sure to use the viewport break points like what the framework is using. For example:

     If you use any random breakpoint, it may break at several places leading to multiple changes and retesting. You can refer from list of all the breakpoints from the documentation.

8. HTML, CSS Validity is important

   Always write Valid HTML to ensure better browser compatibility, higher crawl rate, and good user experience. HTML is said to be valid based on several different parameters and its validity can be cheeked using tools such as the W3C HTML validator and Use tools such as the W3C CSS validator to test valid CSS. Following are some of the basic rules one should follow while writing:

   • Close all HTML tags: In HTML, you do not have to close all elements (for example the <p> element). However, we recommend closing all HTML elements to avoid future nesting issues and better code readability:
   • Wrapping extra elements: One should not wrap unnecessary tag around other tags. That can break code in some browsers and is not a recommended practice. Few examples:
   • <a> vs <button>: There is a lot of confusion as to when use <a> tag and when to use the tag the semantic way. Following are few use cases when to use what:
   • Tables: Tables can be difficult to deal with at times if not written properly. As a standard practice one should write column elements <td> <th> inside a row element only <tr> </tr>. Also, every element should be inside a column. Below are few examples:
9. Optimization

   Once the development is completed, we start refactoring our code to remove redundancy. To improve performance, we can follow the below steps:

   • Always load the scripts at the end of your page and not with CSS inside the head tag to improve the page loading performance.
   • Minification and Unification: A Web page can have many CSS and JS file for different purposes, but for every file there is a separate HTTP request. Hence, we should unify all different files to a single file and use the minified version of that file for better performance. Most of the IDE comes with extensions to do that, however, there are online tools as well to do that.