featured image - Component Based Web Design

As of July, 2019, desktop makes up almost 50% of the market in Australia. 40% is mobile and 10% tablet. The numbers change for worldwide where 51% is mobile, 45% is desktop and 4% tablet. Countries like India and China are dominated by mobile. So it makes sense to consider mobiles based on the numbers alone.

Mobile sites and responsive design have been around for quite some time. In spite of that, much of current web design thinking is still largely focused on a print mindset. Designers spend a lot of time building beautiful layouts only to see them break on different devices. A design that looks great on desktop computer is going to be completely different on a phone.

Design seems to be firmly about the layout of components. This is quite understandable since web design has only been around for 25 years. Naturally people look to print on how to do layout. Modern print has had hundreds of years for refinement. The world wide web has had one generation.

Web is a fundamentally different medium on 2 fronts. Firstly web sites are mostly interactive. Secondly, websites are displayed on a variety of devices with a variety of different screen sizes.

What's the solution?

Think in terms of components.

Try to make those components harmonise with each other.

There are 2 schools of thought on how to make mobile friendly websites.

  1. build a site for a desktop / laptop and then make it work for smaller devices. (Graceful Degradation)

  2. start with a small screen design and add breakpoints as the design breaks down at larger sizes. (Progressive Enhancement)

Both have their merits. With the numbers of different devices with different sizes, the question is how to best deal that.

The first approach of graceful degradation is the traditional one. Start with a large screen. Test at smaller sizes and set breakpoints when the design stops working. This is not ideal. You build a site taking advantage of amazing technology, only to find it doesn't scale down to mobile. What can happen is a watered down mobile version. If you go down that path, then it is highly likely you will be calling on your web designer to come back and rework the design.

The second approach means you start small and tweak the design as things get bigger. I think this is the better way to go. A mobile first version is designed for slower mobile connections. Load the bare essentials and enhance from that. Solving that problem has the added advantage of making the desktop version snappier.

How do we do this?

martial arts

"You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend." - Bruce Lee

Think of content as water. The page is the vessel. It can be any size. Any shape. The elements arrange themselves to fill the page. Break the page down to smaller parts. Start with beautiful part and you are already halfway there.

Introducing Atomic Design

Atomic design was a term coined by Brad Frost. He based is metaphor on chemistry. Atoms bind together to create molecules. Molecules come together to make more complex things. If you keep expanding this idea, ultimately you end up with a universe.

The parts of a website can be broken down and assembled in a similar way.

Atoms

Atoms are the smallest parts. They are the basic building blocks. Atoms are made up of things such as: links, buttons, text inputs and dropdowns. They can also include more abstract things such as colours, fonts, drop shadows and animations.

The main advantage of starting with atoms is that it cements your brand identity. They often get turned into a reference such as pattern library or company style guide. They are also the building blocks for the next part. Molecules.

Molecules

Molecules are more tangible and are made from putting together different atoms.

For example: putting a form, text input and a button together can create a search block. List elements can be used to create a navigation menu.

Organisms

Organisms are where the molecules are assembled into more complex components. A footer will often be made up from a couple menus, social media links and copyright information.

A masthead organism could consist of a logo, navigation and search block.

Templates

Templates are the next step up. They are created by putting together organisms. This is where the layout, molecules and organisms all come together.

Templates often start life as wireframes sketched out on paper. Over time, these wireframes gain more detail and in the end become the coded page.

Pages

Pages are specific implementations of templates. This is where the templates are tested. For example, how does a 300 character heading look on template designed for 40 characters. What does it look like when the shopping cart has multiple items and a discount applied? How does the masthead look if a user has signed in versus an anonymous visitor. All these specifics can be used as feedback to make changes to the template.

Summary

Breaking pages into smaller parts can help keep things consistent. A desktop layout might have several organisms or molecules spread across it. A small mobile device might only have room for one so it stacks them down the page. Taking this approach gives the user a better experience.

We use a version of atomic design on our sites. Our design system is based on Mina Markham's Sassy Starter.

Further Reading

Posts