UI Frameworks - The Deal Breaker

22 Feb 2018

First Impressions

Imagine you have an upcoming interview for a job you applied for. One of the first things you may think of is, “what do I wear?” Generally, you’ll pick out a business or business-casual outfit because you want to impress the interviewer. Everyone knows that first impressions matter.

The same goes for websites. When someone goes on a website, whether or not they stay often depends on the aesthetics of the site. Your site may have the information that someone is looking for, but if that person is having troubles looking for the “more information” menu they’ll probably leave to find their answers elsewhere.

This is where User Interface frameworks can help.

Why UI frameworks over pure HTML and CSS

Natural Language

When I started learning HTML and CSS a few weeks ago, I was flustered. It was hard to remember all the keywords and how to implement them to get my webpage to display the way I wanted. When I couldn’t figure out what properties I needed to change, I ended up having to settle for less and the website was not as aesthetic as it could have been.

Then, I learned about a UI framework called Semantic UI. It uses natural language in its code. For example, if I wanted to display a centered image on my webpage, I would type something like:

<img class="small centered image" src="sampleimage.jpg">

Using HTML and CSS, I would have to write something like:

<img style="width: 100px; height: 100px;" alt="Sample"
src="sampleimage.jpg" align="middle">

Notice how much extra detail is needed in the second block of code compared to the first.

The natural language of UI frameworks makes it easy to remember what the words mean and how they will be implemented when used. If you can describe what you want, there will be a simple way to create your idea through UI frameworks. This allows the programmer to make their website attractive to visitors, with the only limitation being their own imagination.

On the same topic, it can also be useful in software development. Generally, code should be clean to prevent bugs and to make debugging easier if needed. This is why functional programming is often used instead of writing hundreds of for loops. Because UI frameworks can make your code cleaner, it can be very useful in software development to prevent errors.

Responsive Design

UI frameworks are also useful because they are responsive, meaning the webpage will be able to display correctly on devices with different operating systems and resolutions. Rather than having to code a webpage multiple times to accommodate for each operating system or device, UI frameworks’ responsive designs allow the page to resize and adjust according to the user’s needs.

“With great power comes great responsibility”

UI frameworks can make web design much easier than using pure HTML and CSS. Although it can be handy, it does have a bit of a learning curve. Similarly to HTML and CSS, I struggled to learn the keywords at first. However, like I said previously, if you can describe what you wish to create, the natural language of UI frameworks will allow you to implement what you want using simple code. In today’s competitive online business world, first impressions do matter and using UI frameworks will definitely make a lasting impression.