It is not uncommon for developers to start marking up their webpages immediately after receiving visual mocks from designers. What this does, however, is that it robs everyone (developers, designers and product analysts) from understanding the content before it goes live. In fact, it’s rather surprising how a lot of organizations, big and small, don’t have a good grasp on their content and it’s semantics. This lack of understanding can lead to a bunch of serious problems:
- Illogical organization and flow of the data on the User Interface (UI).
- Incomplete implementations and, thus, maintainability issues.
- Invalid markup, which leads to accessibility and/or search engine visibility problems.
These problems are costly in terms of time and money. So, how can they be avoided? The answer is to design your content, just like you design other parts of your application. What needs to be done as the first step is to examine your content. Users come to your web application for one thing and one thing only; to consume and interact with YOUR content. It would be ill-advised to not examine this content and design “it.”
So, in a nutshell, content-first design is an exercise that allows us to interrogate the content to better understand:
- The most important piece(s) of data
- The priority of each piece of data in relationship to others
- The logical grouping of data to form meaningful objects
- The various workflows/scenarios in which the priority might change (does the workflow change when accessing the content on mobile devices vs. desktop?)
Consider the UI mock of a typical search results and filters application (see below):
The user got to this page as a result of some search query (from within the app, from a search engine, etc). It’s not at all uncommon for developers to code this mock in the following manner:
<!doctype html> <html> <head>...</head> <body> //banner <section id="filters"> <h1>Filters</h1> <form> <input type="checkbox">... </form> </section> <section id="search-results"> ... </section> </body> </html>
If you’re a developer, stop here for a second and ask yourself if you would have written a similar implementation. Be honest!
Now, while this HTML implementation is perfectly valid, it isn’t at all ideal. The main reason for this page’s existence is the search results. Shouldn’t this content (search results section) be front and center? Shouldn’t it come first in the source order? The answer is yes, it should. The filters complement the main content (search results) and, thus, should come next in the source order. So in order for the code to be more semantic, the filters and search results section need to be flipped in order.
As suggested previously, content-first design allows you to question the priority of the data and interrogate the content in a way that can reveal patterns and relationships. The exercise will aid in writing more semantic code and, hence, better visibility/accessibility to screen readers and search engines.
For ideas on how content-first design workshops might be conducted, watch this presentation.