Semantic UI - The Touchup my Webpages Needed
07 Oct 2021
Pretty Webpages: when appearance matters
Everyone admires a “good looking” website. Even if it is only a subconscious acknowledgment, it makes a difference when we buy things online or spend time reading someone’s blog. We like to buy from sites that look reputable and we avoid sites that look homemade. Because what if a site that looks homemade, is actually homemade and has a lot of security flaws? We don’t want to get caught up in a scam and accidentally share our credit card information with the wrong people. As another example, we tend to gravitate towards blogs with a nice appearance because if the blog has a nice appearance, it means the owner cares about what they are saying. Which might mean that the information is better researched and the recommendations are more accurate (although this is not necessarily the case). So, how do webpages gain a nice appearance? The style of a webpage is partially hardcoded into the HTML, but most of the styling comes from CSS (cascading style sheets). However, CSS can be difficult to implement unless someone is good at programming with HTML and CSS. Enter UI Frameworks and other similar development tools that aid in simplifying webpage styles.
What is Semantic UI?
The makers of Semantic UI thought of common web layouts and graphics that would be helpful in building attractive webpages. If a user applies Semantic UI, they can have navigation bars and dropdown menus that look similar to the styles found in commercially produced websites. They can insert icons that have a standard appearance and change the size of images by simply typing “small” or “large” along with “ui image.” All the user needs to do is use Semantic words like “ui” when defining the class of their HTML elements and include a few lines of Semantic UI script to activate Semantic UI. Although a novice programmer might prefer the simple layouts provided by popular website builders (e.g. GoDaddy, Wix), Semantic UI gives the average programmer more options. Since the user is actively building their own webpages with code, Semantic UI lets them take more control over the final appearance and helps them better understand how their code is influencing their website. In short, Semantic UI alleviates some of the frustration associated with styles, so users can build functional and beautiful webpages more quickly.
Limitations of Semantic UI
Although Semantic UI is very easy to use and has many themes to choose from, it is not compatible with all browsers (e.g. Semantic UI is not compatible with most versions of Internet Explorer). It has also been a while since Semantic UI’s last update (3 years ago, Version 2.4.2). So if Semantic UI in its current state works well for you, then it’s a great, easy solution to building nice looking webpages. But if there is a problem you are trying to solve that hasn’t yet been addressed, then it might be worth investigating other CSS development frameworks. For example, Bootstrap (used for the websites of Netflix and ESPN), has a larger, active community and is compatible with Internet Explorer. I have not tried Bootstrap myself, but I have heard that it is also easy to implement and is compatible with many different devices (i.e. has responsive styles).
Conclusion
I enjoyed the introduction to Semantic UI in ICS314. I think it is a great tool that makes it easy to build attractive webpages. Previously, I only implemented simple CSS styles to my webpages such as changing the color and font of my text. Semantic UI makes it easy to implement more advanced CSS styling without needing to learn much more code. So, it introduced me to ideas on styling my pages that I hadn’t thought of before. In summary, that made my recent experiences in developing webpages more fun and made me want to experiment more with webpage design.