Principles of design to keep in mind when building CMS-based websites
Independent of the platform it’s built on, a website is part of a bigger world of expectations and concerns. When designing a website powered by a CMS, the dynamic aspect of the content makes the following principles even more important:
1. Embrace flexibility
The web is a flexible medium by nature, which means it’s hard to control it. A browser is not Photoshop, so we can’t expect the same level of pixel perfection. Users have their own preferences on how they access websites — we should embrace their freedom and deliver the best experience possible in whatever system they choose to use.
Responsive design is a great start to achieve this — but we can go further. Browsers and operating systems have their standards for interactive elements, like selects and checkboxes, so it’s almost always better to display those standard elements than custom built ones that users will not recognize at first sight. The same concept applies for interactions and animations. Mobile/touch devices have their own patterns for navigation and modals, so it’s better to use this to your advantage instead of introducing something new.
Understand every possible environment and use it to your advantage.
2. Content is king
This is an old concept but a rather overlooked one. It’s a common approach to start designing a website or a page from a vision of how it should look and inserting the content inside the placeholders. This may guarantee a beautiful award winning project that no one uses.
Define clear goals for each page or flow of pages and make sure everything on that page is working towards those goals. The main objective should be front and centre and easily spotted on the page. Every screen resolution or device should present that objective in a clear and understandable way. Create the media queries with breakpoints that make the most sense in terms of adapting the content for best display instead of declaring default breakpoints according to the presumed most used device resolutions.
The best design is the one that communicates the message.
3. Consistency is the kingdom
We mentioned the use of established browser/OS patterns for better usability, but not every interaction you’re designing has a default that can be inherited and sometimes it’s best to create new ones for highly complex flows. Creating new ways of interacting with websites is a good thing; that’s how we evolve the web — just don’t ask your user to learn something new every time he tries to do something different.
If you need to build a complex product selection tool, with several filters and steps, do it in such a way that you can reuse the tool every time the user wants to pick a product. Also, if you have a similar component, like a location selection tool, stick to the same solution you created for the product selection. This way, even though it’s a different objective, the user will already know how to use it and what to expect from it.
Define patterns and stick to them.
4. Performance matters
People are used to receiving instant information and things happening in the blink of an eye. Milliseconds are precious: Making your user wait because you want to display a huge picture at the beginning of a page is a recipe for disappointment. Inserting all kinds of cool animations and transitions that no value to the user will only make them give up before engaging with your website.
If you work with front-end, please, follow the best practices for loading Javascript and prioritize content rendering before you load any superfluous assets. If you don’t, it’s also your responsibility to make the web as lightweight and fast as possible. Recapping Flexibility and Content, you don’t always know where or how your user is accessing your website. They may be on a slow cellular connection with limited data, so it’s important to ensure they can still read your content.
An hour spent by the team is a second saved by the user — and that’s a good thing.
5. Keep accessibility in mind
Following the motto of delivering the best experience for every user everywhere, we can’t forget about accessibility. Every person has the right to access the content they need and they should be allowed to do so without problems. Not only without problems, but with the same ease as every mouse-handling, finger-tapping user.
No special tricks here — stick to the basics and you’re golden. Optimize your navigation and make sure every element is recognizable by a screen reader. If you invent fancy patterns, test them using only a keyboard. Lay out your page in a way that the elements follow a proper sequence and everything makes sense when you remove all styling.
