When I started developing websites in 2004, websites were pretty simple. You generally had a header, a navigation, a main content section, a sidebar, and a footer. The content would be dropped into the main section and would generally follow a pretty simple structure. Back then when each page was a simple .html page, any change that needed to happen would be done by a web developer. The client would have no control over their content so while the design and structure could be maintained, it was a hassle to keep content maintained.
Too much control
Then in 2006, I started using a content management system called DNN. With DNN, I could put a Text module on the page that allowed non-technical administrators to update their website using a rich text editor that resembled Microsoft Word. This was a step in the right direction but also came with its own set of problems: suddenly, clients had so much control over their content so they started making changes that, at worst, broke their page layouts, but mostly just made their content ugly because they would add in their own colours, and fonts, and they would try to create their own layouts. The client had too much control over their content so they made the website unwieldy.
What we need today
Nowadays, the content on webpages are much more uniquely designed. Content has specific layouts and that layout can vary depending on different factors like if content is present or not. It gets even more complicated when content has specific expectations like animation, responsiveness for small devices, or it's expecting certain dimensions for images.
Take a "Staff" listing for example. A grid of staff members is a list with a handful of list items. Each item in this list might have a few fields: first name, last name, phone number, photo, email, biography, etc. For non-technical users, this layout might be really challenging to maintain if the user doesn't know HTML, or if the text editor in your CMS is confusing.
So what's the solution?
There is a new methodology which is much simpler and it involves separating the content from the templates that run the layout. By using a module called 2SXC in DNN, I can create sophisticated templates to display content exactly how a designer envisioned, while exposing the specific fields to the content editor so they can update the content without worrying about formatting. There are a few advantages to building custom templates for content:
- Enforce validation on content fields. For example, don't allow users to upload the wrong file types for a profile photo.
- Conditionally show or hide different sections. For example, if the user doens't type in a phone number, then don't display the HTML markup for that section
- Crop and resize images on the fly to ensure images are the right dimensions for that content
- Swap out templates without having to completely repopulate the content
- Expand on content items to add more functionality
If you're using another CMS like SquareSpace or Wix, chances are that the templates offered give you a bit of control but I doubt that you can have truly personalized content.
As a designer, when you know that you are free to design content in the best way possible without the fear that your clients won't be able to update the content easily, you are free to design content in the way that is creative, beautiful, and easy to use.
The possibilities are endless
Aside from the simple, obvious elements like hero banners, staff listing, or call to action, I can create any custom element and make it logical to update. For example, I've created special, animated sections for uniquely animated homepage elements, or circular elements that list out the different chapters of a certain organization, or even custom listings of workshops and courses for a Pilates studio. I can build virtually any type of content, inside any layout - fast, responsive, animated, flexible.
Not only does this standardize the UI elements for updating making it easier for your clients to understand, but it saves money on maintaining licenses for 3rd party plugins or modules that serve only one or two functions. For example, instead of paying for a carousel slider in a module, we use 2SXC. Instead of buying a catalog module to display a list of products, we use 2SXC. Instead of buying a Twitter Feed plugin or module, we just build it in 2SXC.
I would encourage you to re-evaluate how you're developing websites and see if there are ways you could improve the process and experience for yourself and your customers.
I hope you found this article enlightening. If you're a web designer or a design agency and you're looking to build more powerful websites for your clients, please check out Web Development for Designers. I can help you make your beautiful web designs super easy to update. Happy designing!