When talking about process, there are a lot of ’firsts’ to consider. Do we author our projects with a “mobile first” approach and/or do we design them with “content first“.

My job is predominantly working with front-end technologies and building the interfaces of websites designed by someone with much more creative skills than I. So I do not have much steer as to how the design process runs, but I can look at what I do when I get the finalised designs and begin the build.

The very first thing I tackle is the HTML. It might sound obvious, but as ‘designers-who-code’ and developers we can all often get caught up in the visual aesthetics of a page.

This focus on aesthetics can lead to style led mark-up which is, lets face it, often bloated and difficult to update when the need to update or extend the website.

Rather, what we should be doing is training ourselves to take a step back and disengage from the design at the beginning of the build. Focusing on the content and context of the elements on the page. As you can see, this is extending the concept of content first design to front-end development.

By changing our thinking and approach, we can ensure the foundation of our application – the mark up – is;

  • minimal and easy to read for other developers
  • consistent, allowing for easy modularisation of the application and creating components within our CSS
  • semantics driven, which is easy for search engines, screen readers and humans to understand

Next time you are presented with a design, try taking it back to its greyscale, wireframe equivalent. This way you can focus on the hierarchy of the elements, their relationship to each other and the content it is representing.

You can then begin to write your HTML. When doing this do not write any IDs or class names, these will be added later when finally applying the design. Your focus at this point is getting your semantics in place and creating a base layer to build upon.

With this approach in place, I hope it will begin to make you think more about the semantics of your mark-up and content, preventing you from writing mark-up solely as hooks to your styles.