When designing for a CMS-driven website, one of the biggest challenges I have encountered is the WYSIWYG Editor. A WYSIWYG is used to create and manage the rich text components of web pages. The editing view shows how the published content will appear with respect to fonts, headings, layout, lists, tables and images. The most helpful element of a WYSIWYG interface is that the buttons, controls and keystrokes are the same as in most major word processors and text editors.
The drawbacks in terms of design? Using this kind of editing interface, a content author can effectively ignore all the rules set by the web designer, impacting the look-and-feel and brand experience of your site. This is probably the biggest threat to the front-end design for sites that are built using a CMS.
One way I have managed to overcome this challenge is to “Lock down styles or use snippets”
Your best option for stylistic consistency is to “lock down” your styles, which is to say make only the acceptable font and image sizes, colours and styles available to content authors.
If this feature isn’t available in your CMS, create a set of snippets for reoccurring elements, such as headers, buttons or single, double or multi-column layouts. This allows the content authors to quickly insert and update elements without straying from the site’s defined design elements and styles. In your style guide, indicate that content authors must select the styles from the snippets and not use the default CSS Class Selector.
The use of the Class Selector is problematic because it does not specify or limit the styles a content author must use when creating and publishing content.
Other good tips are to define which areas will be using rich text and create a detailed style guide. To read more about these tips download our recent whitepaper “Effective Visual Design Strategy For CMS“.
About Effective Visual Design Strategy For CMS
Designing strategically and effectively for a CMS-driven website is not as easy as one might think. I’ve always considered it as being one of the more complex areas of designing for the Web. It requires great skill and experience to achieve a high-performing CMS-based site that’s welcoming, reassuring, brand-resonant and easy to navigate for both users and content authors.
The two main benefits of implementing a CMS are (1) Fast, easy content authoring that requires little technical skill and (2) Consistency in terms of brand standards, approval and other policies relating to online content. But how do how do you strike a balance between intuitive, attractive design and a functional, user-accessible CMS?
In this whitepaper, we share our expertise on the 7 main challenges you will encounter in creating the visual design for a CMS-driven site, along with tips that will help you avoid these common pitfalls:
- Limitless options and deep navigational structure
- Varying column heights
- Ever-expanding page names
- Interchangeable content areas
- The WYSIWIYG (What You See Is What You Get) Editor
- Varying page layouts and design elements
- Using rich media
Before you plan the design strategy for your website, you must ensure you have a full understanding of your business and technical requirements, including:
- Target audience
- Brand
- IA, user interaction and usability needs
- Business goals and critical success factors
- Search engine optimization requirements
- Accessibility and browser compatibility
- The structure and limitations of your chosen CMS
The last item on the list is what we discuss in this whitepaper . It sounds obvious, but your site’s interface design has to function well within the specific content management system you have selected. Creating the visual design of your site based on an understanding of your particular CMS technology is often overlooked as a key factor in the success of a build.
The golden rule is to provide both front-end and back-end users with a friendly and flexible interface design that:
- Minimizes overall start-up investment
- Is intuitive, making it easy to learn and execute tasks
- Reduces ongoing maintenance costs both for your development team and your content authors