The Power of CSS in Website Redesigns

The Role of CSS in Crafting Engaging Website Experiences

Author: Connor Willans

1 May, 2024

The backbone of every webpage lies in its presentation, governed by a set of rules. Rules that tell the webpages, their components, and everything in between, how they should be presented to the user. The very words being read right now were given a set of rules; font size, coloring, and positioning, just to name a few. The vast majority of the time, these rules are defined through Cascading Style Sheets, better known as CSS.

The Purpose of CSS

With CSS, developers can efficiently apply consistent styles across various components, streamlining the design process and enabling on-the-fly modifications. While it can be considered a programming language, as most web browsers can interpret it, it’s not a stand-alone one. It needs something to attach itself to, similar to how rules need to apply to something.

This is where other languages come into play, such as Hyper Text Markup Language (HTML) and JavaScript. These serve as the foundation of a webpage, where developers can define components. Everything from text boxes, images, and buttons. In this example, those components would be defined in an HTML file. Let’s also assume that this webpage contains multiple clickable buttons. The team building the webpage wants these buttons to look a specific way. A rectangle with rounded edges, a green background, and white text on the inside. While there are ways to manually style each of these buttons individually, it’s a lot more efficient and intuitive to define what the buttons should look like at one time, and have it applied to all the buttons on the webpage. Then, if the developers later decide they want to change the buttons to be circles, with a blue background, and black text, it is a whole lot easier to change. That is the primary purpose of CSS. It can define a set of rules for each component across a website, no matter how many times it is used.

Redesigning a Website Through CSS

With this in mind, our developers recently worked on a project to overhaul a client’s website, producing a more refreshed look and style to it. A client approached Xorbix with this task, to redesign their website. In this case, the website was already built and fully functional. So, a majority of the required changes would just be the CSS itself. As mentioned previously, this language is just a set of rules on how the content should be displayed.

The Process

Planning and Designing

Our software development company, Xorbix, drafted up some designs of what the refreshed website could look like, to get approval from the client. Using Figma, a free graphics application, both parties were able to view and make changes to the designs. Once a final draft was finished and an agreement was made, it was time to transform the website, using the graphics the team created.

The First Steps

The Figma designs gave the developers everything they needed to begin work on it. While the graphic designers didn’t create Figma images for every single page on the website it covered all the components necessary. Viewable data such as grids, text boxes, and images existed on multiple pages, so the team only needed to create one new design for each, similar to how CSS already functions. Remember the button example in the beginning, with changing buttons from a rectangle with a green background, to a blue circle? The same concept applies here. The developers simply had to dive into the CSS files contained in the project, and changes made to text boxes, for example, would apply across the whole website. The website and project files both had a comprehensive structure already, so making these changes was straightforward.

The Main Process

The website itself consists of fifty-plus pages together, but the components on each page are reused throughout the majority of them. Our developers started with the most reasonable option, the home page. This contained the header that spread across every page on the site, as well as text boxes that were also used in most. By starting with these redesigns, the new style would slowly ripple across the whole site. Our developers constantly referenced the provided design images, copying the exact colors, font sizes, and dimensions over to the actual website. This process made it fairly easy to make significant changes in a short amount of time. Once the first page matched what was agreed on, they entered the second page, containing even more components that were used across the site, such as data tables and a calendar containing patient appointments. Similar to the first page, CSS changes were made to match the Figma designs, and those were indirectly applied to all the data tables and calendars across other pages. So instead of having to change each of the fifty-plus data tables found scattered across the client’s site, our developers changed one block of CSS. Saving a lot of time and energy. This process was basically repeated until all the components on all the pages were switched over to the new designs.

Challenges

While most of these changes were straightforward, some components or designs were single-use. There were times when a specific text box or other element was supposed to look different than the rest. So, our developers had to make new CSS rules specifically for them, which did slightly slow down the overhaul but didn’t happen often.

Another tricky portion was Telerik UI components. These provide structured, pre-built, components that were used in the original website for the client. Changing the style on these Telerik components took longer than the rest, as the Devs had to inspect the website’s code through the browser in order to determine what exactly to add in the CSS rules file. This was likely the developer’s most difficult portion as the rest was fairly straightforward CSS styling.

Conclusion

The journey of redesigning a website highlights the indispensable role CSS plays in modern web development. Through meticulous planning, collaboration, and adherence to design principles, Xorbix successfully transformed the client’s website, breathing new life into its digital presence. Despite encountering challenges such as single-use components, the team’s expertise and resilience ensured a seamless transition to the refreshed interface. As technology continues to evolve, CSS remains steady, facilitating innovation and creativity in the landscape of digital design.