Muna writes

18 Jun 2020 - 2 min read From CSS to Ionic

User interface design over the last few years has become very demanding, modern-day internet users are demanding ever more complex and interactive websites.

My blog has not been immune to this requirement since I first created it. A project that was only meant to be an introduction for me to web development ended up being a vital part of my portifolio.


The problem


Over the past few months, I have tried to improve the blog’s UI, and there have been lots of issues, mostly related to CSS.
Here are some of them:


Interactive Layouts


Layouts were a major headache during development. Implementing complex interactive layouts required that I resort to hacks.


cross device and cross-browser compatibility


After a few days of development, it did not take long before someone texted me informing me something looks skewed.
Turns out the margins did not scale to their device, this led to the articles being squeezed at the center making them look less like an article and more like words on a list.


Maintenance


Maintaining and patching CSS is tough, real tough, anytime I tried to fix an issue or add new functionality, I ended up breaking more stuff.


The solution


A friend of mine recommended that I use the Ionic framework for the UI design.
If you are not familiar, Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile applications. Ionic apps are made of high-level building blocks called components. Components are high-level reusable elements that allow developers to create user interfaces quickly.
At their most basic sense components are wrappers around vanilla CSS elements with natively defined attributes.


Improvements


I decided to dump the repo and build on a clean slate with ionic, the mess that was my previous blog could not be salvaged. Using ionic has had major improvements to my blog UI.



Using ionic allowed me to switch to a minimalistic navigation button that launches a popover window.The navigation design allows all content to be easily accessible from one page.


Improvement and maintenance


Ionic provides many modern well-designed UI components that make the addition of new features and functionality easy and fast. This component comes with default styling that makes the use of CSS a rare requirement


Design

Compared to the old blog, the use of components maintains a consistent design throughout the blog. It also improves scaling and responsiveness across multiple screen sizes.


Conclusion

Feedback has mostly been positive and I find my blog easier on the eyes, my advice on anyone looking towards using CSS on a production site, DON’T, you will end up with hard to maintain code that messes everything up if you try to fix it.

You have arrived at the end of the article; you can come and argue with me on twitter or read another article here.

If you have enjoyed what you just read, consider making a donation to help keep the lights up around here