Modular Web Design

Collection of colourful toys

Image courtesy of Vanessa Bucceri

The process behind designing a website is definitely not a black and white one. There are a ridiculous amount of tools available which aide the process considerably. Some will allow you to design straight to code (Macaw) whereas others let you convert pieces of design to code (Adobe Fireworks). Of course, there is much more available and software like the aforementioned appears to be more commonplace nowadays. I completely understand the appeal of using said software, and of course the benefits, however, I still prefer to design, then code ‘manually’. Call me old fashioned (as can be when talking about tech at the age of 29) but bypassing certain automation makes me feel in complete control of a website and I rest easy knowing that the code is perfect (by my own standards).

Now don’t get me wrong – I’m not opposed to systems which quicken development time, quite the contrary. In fact, over the last few years, I’ve adopted the use of SASS in my projects and by golly is it a gooden! For those who aren’t aware, although that will undoubtedly be a small number, SASS is basically incredible. It does a helluva lot to speed up the process of styling a site and it does this by making use of variables, functions, easier nesting and the ability to separate your stylesheet into bite-sized chunks. That list does SASS an injustice so you should read up on it here: http://sass-lang.com/guide. It’s the latter part I mention, the ability to create a series of separate stylesheets, which lends itself so well to the concept of modular web design.

But what is modular web design? It’s by no means a new concept and is probably already partly in your workflow. The concept, as I understand it, is to think of a website as a collection of components rather than a static collection of complete templates.

Typically when faced with designing a website you’ll have some form of reference material, whether that simply be a logo or maybe even a full set of brand guidelines. Depending on the volume of material the process of designing the site will vary however typically it would be a case of jumping straight in and designing the templates. There is obviously more to this; discussions with the client, wire-framing etc. but the point is the site is usually designed as a whole unit. I guess this is common practice?

MWD, not to be misread as a Weapon of Mass Destruction or confused with a Micro Warp Drive (if you know, you know), tips this design ethic on its head. Instead, you approach the site in steps, designing each individual element. You’d start with basic elements such as colours, typography, icons, buttons etc. then lead through to the actual components on the page; articles, forms etc. See below for a basic mock
(clause: this isn’t a post on the principles of design).

Modular Web Design components

Approaching the design of a website in this way may seem a bit alien. Typically all of these elements would be designed in situ, nested in the overarching layout of the design. Arguably you could say that designing a page as a whole unit would lead to more consistency between the components. Well, that’s the beauty of designing for the web, it’s open to interpretation. If you feel more comfortable designing a page completely then go for it. There is a sound reason for splitting these elements up though. If you visualise these elements as separate components right from the beginning, they’ll be a lot easier to convert to code during the development phase of the project.

As I said before a SASS project can include a number of separate stylesheets which are then imported into one main file. You can, of course, compile into separate stylesheets but for the sake of ease and lowered overheads, everything can be contained in one single file. This means the styles for each of the elements you’ve designed above can be contained within its own file.

Splitting your components into separate files means you instantly know where you need to look in order to adjust any of the code. If your forms need tweaking, look in the form file, if the button styles need adjusting, look into the button file. You get the idea. Not only that but it should help limit the amount of duplicate code.

Have you ever had to return to a project to add a new element only to forget what styles and classes already exist?

Using components allows you to hone into a section of the site and look for any already-existing classes. You can quickly see if there is a suitable class for you to use and if there isn’t you can create one utilising the already set values/variables (padding, colours, etc.). This also ensures that the new element fits nicely within the site’s existing styles and doesn’t just look like a tacked-on element or an afterthought.

Using classes to standardise design across the entirety of a site is the main purpose of CSS however splitting these styles/classes into separate files just makes it that ever-more easier to maintain. Below is a link to my basic SASS project containing all the separate components alongside a really basic HTML file. This is just the tip of the iceberg (pardon the cliché) but you should get a really good idea of how to start building a modular website using SASS.

Simple SASS Project (use the files however you like)

The beauty of this entire concept is there are no golden rules, do whatever feels natural to you. You may decide to bundle _button and _input into _form so long as it makes sense to you and ultimately increases coding efficiency.

I urge you to give this a go when starting your next web project, even if it’s just adopting the structure of a SASS project. I’ve been using this approach on a number of web builds and my development time has significantly decreased. You truly appreciate the convenience once you return to an old project that was set up using a single .css file!

Related

All good things come to an end.

© Kieran McClung, 2019 Privacy & Cookies