Designing for Content Management Systems

Advertisement

Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up. However, most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS.

By considering the CMS as you design, you can maintain far more control over the final output. If your designs will be implemented and integrated into the CMS by a developer, then taking control at the design phase will help you to keep control over the design as opposed to leaving decisions to the developer or the content editors.

Know your enemy

Content Management Systems vary greatly in how much control they give the designer and the content editors. As a designer, you should first find out how much control over the templating system of your chosen CMS you have. Control may vary from simply being able to edit the existing templates to being able to shape the CMS completely around your designs. In some older CMS products you may find that you have little control over the mark-up that is inserted into the pages.

Where the content editors are concerned you should find out:

  • Will the editors be able to insert any HTML tags into content areas, either by way of a WYSIWYG editor or directly?
  • Is content simply large blocks of marked up content inserted by the editor or does the CMS use any kind of structured content?

Editing a Page in WordPress
Many people use WordPress as a CMS. In WordPress, users can add any mark-up to the Page content area

If users of the CMS will be able to insert their own HTML, then you need to consider how your design will hold up when that happens. The ideal situation for a designer is where the user has limited ability to enter their own mark-up and the CMS uses blocks of structured content to guide them into adding content in the right way that can then be marked up correctly by the templates. The more freedom a user has, the more defensively you need to design.

Keep it consistent

However flexible your CMS is, it is important to consider the consistency in your design templates. Training content editors is far easier if the elements that they have to work with are consistent across all pages of the site.

If working with any kind of structured content in your design (for example an article listing that displays a list of titles and excerpts from articles on the website), think of each section as a repeating block. With CSS3 we can more easily target every other item, or the last item, but this is not available for older browsers and it may not be possible to edit the back-end code of the CMS to add a class to every other item or the last item. Ensure that the design will hold up if each repeating block is the same — you can always add extra finesse for those browsers that do support CSS3.

When dealing with areas that are essentially large blocks of content where the user has control over the mark-up, don’t assume the user will remember to add lots of different classes to the mark-up to trigger the CSS effects you envisaged. Either keep things simple or use CSS3 selectors to target areas of the design.

Do not assume content length or height of blocks

On the web it is never a good idea to assume you know how tall something will be — as even where you have control of the content, text resizing can blow your assumed heights right out of the water and cause overlaps or text running off background images.

When designing for a CMS, you have the additional issue of more or less text being added to an area that you envisaged. If creating the initial designs in Photoshop or similar, consider how each box and the surrounding content will react to a greater or lesser amount of content. If providing PSD files to someone else to build, ensure that any background images on these boxes are provided with instructions on what happens if the box is taller. For example do we show more background or matt onto a flat color?

Grid type layouts of boxes can be a particular problem in this situation. A common design might have several boxes with header areas. They look lovely and neat in the PSD comp with regular lengths of lorem ipsum. However, once the content editors have added content, we find that some headings are on one line, some on two and the boxes are wildly differing heights leaving the neat grid looking rather messy. Considering this at the design phase may have dictated a different layout here.

Dubbed Creative homepage
The lists on the homepage of the Dubbed Creative website do not depend on height of content: some points have more text than others. This type of layout looks tidier than attempting to create equal height boxes with non-equal lengths of content.

If you are handing over to a front-end developer, thinking through these scenarios keeps the control on your side. Decide how you want it to look and explain to the developer how it should react to text resizing, additional content and so on and you don’t run the risk of leaving these decisions to people without an eye for design.

Avoid using image replacement for text

It is possible to generate images on the server side using PHP and other languages, however your CMS is unlikely to offer this capability as a standard feature. Therefore you should consider how any non-standard fonts will be included in your designs if that text needs to be managed by the CMS.

The situation with fonts is becoming far easier as there are now a number of services that allow you to use fonts that are not installed on your user’s computer but that would otherwise be difficult or impossible to license to include on your website. If you need a specific font you may be lucky and find that one of the below services have it available, or they may have something available which is close enough to get the visual effect you want.

The Fontdeck website
Services such as Fontdeck and Typekit mean that using images for text is not neccessary to use a specific font.

Consider the CMS when designing navigation

The CMS that you are using is likely to dictate the navigation to some extent, so find out by checking the documentation or speaking with the developers what will be possible. It is useful to know what control content editors have over navigation. If they can add elements to the main navigation for example, it may be that you are best to avoid a neat row of tabs at the top of the site as additional tabs added by users may wrap.

Tabs on the Long Hollow website
An attractive row of tabs such as these on the Long Hollow Church Website may look untidy if editors have access to add new top level navigation elements.

Questions you should get answers to include:

  • How many levels of navigation will be displayed? Is this configurable?
  • Can content editors add to or change the main top-level navigation?
  • Can you highlight the current page or section?
  • Does the CMS offer breadcrumb style navigation?
  • What mark-up will the CMS output for the navigation? Can we change it or add classes?

Design and create CSS rules for all possible HTML elements

In your design and dummy content you may only use two levels of heading and never add an ordered list or blockquote, However, if these elements can be added in the CMS, then at some point someone will use them. If you have used a CSS reset stylesheet you may not have styles defined for these elements at all — which will mean they look rather strange when used. Ensure that you have created CSS for all HTML elements in the content areas of your site.

I find it helpful to start my stylesheet with the default styling for all elements as this then acts as a fallback if I don’t add specific rules for styles later on in the document. I can always overwrite this CSS to make level 2 headings look different when they are in the main content area to when they are the heading of a sidebar box, but if I don’t add any specific CSS and then the user adds these elements, they do have some thought put into them.

Assume HTML elements can be stacked in any order

When creating your design, it is easy to assume that the content will look very much like your structured sample content. The h1 will be followed by a couple of paragraphs, never stacking headings and so on. The reality will be different once content editors get their hands on the design, so test the elements in different combinations.

Ask yourself questions such as:

  • Does the design still hold together well with stacked headings? Is there appropriate spacing between them?
  • What happens if a heading is used inside a list item?
  • What happens if different list types are nested? Is the spacing correct at the bottom of each list?
  • If the user can insert and align an image, what will then happen to the text around that image? Will there be a margin or will the text run right up against it? What happens if they put an image inside a list item?

Use CSS to enforce the style guide and semantics

This is something we tend to see once users become comfortable with their CMS: they begin to realize that, for example, an h1 heading gives them large bold text. You then start to find h1 headings in all kinds of strange places — wherever the user thinks something should be marked as very important. This can include half of the content of some pages. In the first instance we all need to try and educate our users and provide them with a style guide to help them understand the importance of semantics and correct usage of mark-up but the person you originally train will probably not be the person who manages the content forever and ultimately you will find users being creative with their mark-up.

A considered use of CSS can prevent this from happening. For example, we generally only want one h1 per page. If the main page heading is in a container, then you can use CSS selectors only to target that h1 with the main heading styling and reset the browser defaults on all other h1 headings to the same as the main body copy. This means the user has no benefit to using h1 in a non-semantic manner. The advanced selectors found in CSS3 can be very useful here.

CKEditor screenshot
CMS Editors may want to get creative when given a “WYSIWYG” editor such as CKEditor – use CSS to protect your design as much as possible.

Test with real content

Once your design has been developed into (X)HTML and CSS, test your assumptions in terms of how the content will behave. I find it helpful to do this before the templates are incorporated into the CMS. Points to test:

  • Take each headline or small box in the design. Put in three times the amount of content you would expect it to have. How does it look? Does the box expand nicely or do you run off the background image or overlap another element?
  • Grab a chunk of HTML from anywhere — just View Source on some site and grab a bunch of content complete with HTML tags. Paste it into your main content area in the template. How does it look?
  • If using structured mark-up to display an event or similar — does the design hold up if certain items are removed or do you end up with obviously empty areas such as the word “Tel:” with no phone number after it if a phone number was not entered for a contact?

Help your content editors to maintain the design

If you hand over the CMS with little instruction for your users, then you can’t really expect them to read your mind and maintain the design as you would like. Even if your initial content editor is thoroughly trained on how to edit the site, as time passes by they may forget, or decide to get a little bit creative, or the initial editor may leave and someone else takes over with little training. At the end of the project, keep control over the design by helping your editor to do things the right way.

Remove functionality from the editor

The WYSIWYG editor in your CMS may by default give the user the ability to add all kinds of styling, even adding inline CSS. However, with many editors it is possible to trim down the toolbars to just offer a limited subset of icons and therefore functionality that is exposed to the user. If you can trim down the editor to only offer the ability to add basic HTML elements, you will have far fewer problems to deal with.

Add CSS to the WYSIWYG editor

If content editors have access to a WYSIWYG editor when editing content, add the CSS rules used on the site to the editor CSS. That way, editors can see how their changes to the content will actually look. In combination with using CSS to enforce the style guide, this can help users to maintain the consistency on the site.

Create a style guide that also includes semantics

Include a style guide for the site as part of your handover documentation. It is easy to just handover documentation on how the CMS functions and forget to also explain to content editors which elements they should be using when adding their content. This is particularly important if editors have a lot of control over the mark-up which they enter.

By considering how content will be edited on your site and the possible ways in which, over time, that content will grow and change, you can maintain far more control over a CMS website than you might think. If you have any additional tips or would like to discuss problems you have encountered when designing for Content Management Systems, leave a few lines in the comments below.

Further resources

Here are some additional resources that might help with your own CMS based projects:

(vf) (ik)

CMS,

↑ Back to top

Rachel Andrew is a web developer, writer and speaker and one of the people behind the content management system, Perch. She is the author of a number of books including chapters in the Smashing Book Three and the upcoming Book Four, where she writes about Providing Technical Support. She writes about business and technology on her own site at rachelandrew.co.uk.

  1. 1

    Interesting article. I’ve had to deal with a lot of these issues. From my point of view, the hardest part is when writers and editors with no web experience start contributing to the sites. There are far more ways to screw up a web site than you can imagine until you’ve been through it a few times and seen it happen. Your point 10 is enormously important, but it’s perhaps not sufficient. You need to proactively strip out any mark-up other than a few basic tags.

    The real culprits are those who paste from Word. If you’re not stripping out all the horrid mark-up, then a site can go downhill fast.

    7
  2. 2

    Nice article , thanks for sharing!
    I liked the “don’t assume height or width” of a certain element, i think it’s important keep that on mind also if you design for a multilanguage website, so navigation and other translatable elements’ dimensions can be really different based on the language they are in (check also right-to-left or left-to-right language direction).
    Another suggestion is to keep WYSIWYG functionality to the minimum (headings, underline , bold, anchor , list …… what else?) and properly design the content type from the theme/template layer.
    that’s my 2 cents, keep up the good work.
    A

    2
  3. 3

    Like it as well, but to be honest I do not see many differences to designing a normal webpage! Maybe because of my english knowledge and I just don’t get the point from this article! I am quite shure you did a great job!

    -3
  4. 4

    I think one of the hardest things is to think of all of the combinations of element stacking that is possible. Think about the sheer amount of elements in HTML and how many of combinations they all represent. It can be daunting. I would be curious to know if anyone has a resource that might provide some of the most common ones? Or if anyone would be interested in such a thing?

    4
  5. 5

    This is great. I really wish I read this a few years ago before I redesigned the North Shore-LIJ site (which has since undergone further redesign not under my watch). It was the first time I ever had to design for a CMS. Also the site had a ‘democratic’ approach to content creation. Essentially anyone could create content which meant lots of unforeseen situations.

    With that said, much of what I learned is encapsulated in this article.

    I would stress the fact that text will always grow longer and wider than you anticipate. That is the single greatest factor in designing for a CMS. Also, accounting for styling of all possible CSS and HTML elements is crucial. (Yes, people will add tables and charts!)

    Solid article.

    2
  6. 6

    I feel the best and most consistent CMSs are the ones that break everything down into tables.

    -42
  7. 7

    It’s also important to pick a content management system that doesn’t require that you design for it!!

    Don’t go with a CMS that generates code, go with one where you can control all of the markup. This will allow you to design freely and know that you’ll be able to put it on the CMS. The only two CMSs that my company will use are Expression Engine (http://www.expressionengine.com) and HiFi (http://www.gethifi.com) for this very reason.

    We also make sure that we also set up a stylesheet that can handle ANY of the elements our clients throw at a WYSIWYG editor. This ensures that the site will look good even after we hand it over. This is the baseline stylesheet we use:
    http://www.gethifi.com/blog/a-boilerplate-for-css-typography

    3
  8. 8

    Very interesting article. I work as a web designer, and i do layouts mostly. I’ll have to say i thought i had everything covered up when dealing with CMS layouts but you touched some very interesting points that i actually wrote down.
    Thank you :)

    3
  9. 9

    Great article, as others have said.

    I think the thing that was my “aha” moment was when you said to force semantic use of CSS. That’s one thing I always struggle with after turning over projects to clients. Your suggestions were very helpful in that regard.

    Thanks.

    3
  10. 10

    Need graphical header generation with non-standard fonts and image manipulation? TYPO3 can do this out of the box, and best of all, it’s free and Open Source.

    1
  11. 11

    Thanks Rachel. I think it’s also important to consider localization during UI design and CMS development. Here is a case scenario: we open a store in France, business growing well, we need to open a store in Russia. Difference in language can make it difficult to go through CMS redesign. If you have enriched menu structure it may take some effort and cost.

    2
  12. 12

    I don’t comment here often, but just wanted to say genuinely useful and interesting article, I have had many problems with these sort of issues.

    1
  13. 13

    Good article, with some sound point.
    In the corporate world of CMS, I find that the majority of problems with CMS design and implementation come down to browser version (many clients, especially public sector still use IE6), users having too much control of content formatting (so don’t give it to them!), and finally as mentioned above – the dredded pasting of MS Word html!

    1
  14. 14

    CMS are best, when they don’t try to edit your code. Many CMS’s does this. At my job I implment websites all the time using Umbraco CMS.

    2
  15. 15

    A simple way to overcome user-styled content is by the proper use of the !important keyword in CSS. Simple, but powerful. Even better is of course to not to allow them to style content too much in the first place.

    2
  16. 16

    Good article on the basics.

    It seems the more control you give, the less you want your name associated with that project. Most users care little to nothing about semantics. To them, if it looks good visually, that’s all that matters.

    I prefer the ability where users are given a text editor with nothing more than the ability to bold, emphasize, make blockquotes, link text and define header tags.

    Images are a nightmare. Explaining to users that their 20 megapixel image that is 12,000 pixels wide needs to be resized before it can go online is a challenge. It’s not that my server-side language of choice (ColdFusion) can’t resize this, but if the image doesn’t take up the width of the paragraph, then we have to mess with floats and margins to keep it off text, etc.

    Basically, the customer wants to be the designer, but doesn’t have the knowledge/experience the designer has. Truly a challenge to bridge the gaps properly.

    3
  17. 17

    A few very general things on developing for a cms:

    - Keep things as modular as possible, especially if elements of the page can be moved around.

    - In keeping that modularity, keep containers as flexible as possible, because God only knows what kind of content is going into them, and the best we can do is accommodate the content as best as possible.

    - When it comes to text sometimes it’s good to add a little redundancy to the css. For example using the same text style for p tags and containers because we will write semantic code, but clients aren’t thinking about tags and not all CMS’s write semantic code. So if the style is only on the p tag and the text is just floating it will go unstyled. Not a good practice, but in some cases a necessary one.

    - Providing clients with a freeware image resizer like Irfanview and explaining the issues with uploading photos the sizes of billboards (usually) doesn’t hurt.

    - Above all else remember that we design the sites for the client, and once it’s in their hands they can do whatever they want with it. The farthest our responsibilities lie are to build the site to be as unbreakable as possible, and inform the client of best practices as much as possible. Beyond that it’s out of our hands, and sometimes it can be heartbreaking to see a website that was designed beautifully with garbage content thrown in. It’s like designing a Ferrari only to have people put their dog in the backseat after a muddy run in the park, but it’s their car and they have every right to do so.

    4
  18. 18

    The CMS I have been working on the for the last few years is very designer friendly, and I wanted to make sure that it was (being a designer myself). The templates, the CSS and the Javascript editor is really easy to use with full version control and it basically makes building sites a breeze. Also it has a website import that brings in all the HTML/CSS automatically. Would love your thoughts: http://www.halogy.com

    2
  19. 19

    This is great, but I think the title is a little misleading.

    Nowadays pretty much every website you design should be designed for CMS integration. If you’re not using a cms – even for small sites/mini-sites, then you’re shooting yourself in the foot for content updates. Every site should be scalable. Even if you don’t plan to update the site you’re designing, building a CMS template means you have a framework that can be leveraged for future projects.

    I know there’s definitely times you won’t get to use a CMS, but still – you should design with content flexibility in mind – (ie. as if you were using a cms)

    2
  20. 20

    Wow, what a fantastic article! Catering for dynamic content is often so quickly overlooked by many designers!

    I agree with Glen too – i don’t know why you wouldn’t put a site on a CMS, even if the client doesn’t (or you don’t) intend to update it.

    2
  21. 21

    Hi – I love WordPress for exactly what you’re talking about. It’s completely configurable and clients love it because it’s so easy to learn. Of course, as noted above, cut and paste from Word is the biggest problem I have when clients work on their sites.
    Function follows form for me in design these days. My sites are getting cleaner and simpler – design is taking a back seat to functionality.
    Thanks for putting that altogether – good reading!

    2
  22. 22

    Excellent article. I particularly appreciated the comments about structured content, which is something that too few designers think about. In many CMS systems, it takes too much work to set up arbitrary content structures, with the database, admin screens, and rendering the info onto the pages, but some (e.g., Webvanta) make it easy.

    When you have the site’s core content organized in a database, then you finally can separate content from markup. CSS allows us to separate markup+content from styling, but it does nothing to separate markup from content, which requires database-driven content. This makes life so much easier for content editors.

    The problem of allowing content editors all the freedom they need to set up some formatting, while keeping them from messing up the layout or ending up with a typography Frankenstein, remains a challenging one. Many wysiwyg editors lead people in the wrong direction.

    One important step is to take away almost all of the formatting controls (certainly font size, color) and to have a way to give the user a drop-down menu of styles that apply a CSS style.

    The “paste-from-Word” issue is a recurring nightmare for many people. Some wysiwyg editors have a Word cleanup filter that can be used when pasting, but content editors don’t always use it.

    People who aren’t intimate with web technology — in other words, almost everyone — expect it to just work. Unfortunately, they don’t entirely think through what this means. On the one hand, they expect it to look like their Word document; but on the other hand, they expect it to look like their web site.

    Ideally, the wysiwyg editor would automatically preserve everything the user wanted from the Word formatting, but use the typographic styling of the web site, in some magical mix that looks just right. Someday we’ll have products that can actually do that…

    3
  23. 23

    Very good article for beginners with any CMS.

    I remember my beginnings with web build on content management system.

    I really wanted to prove to myself and to my client how good I am and how much control over content he can have. Results were disastrous. Ever single page was packed with redesigned by me styles, had different look and feel, no consistency what’s so ever not mentioning about markup.

    As less control we will give our clients then less work with aftercare we will have and eventually result will be much more predictable and entire website harder to break. My advice – don’t be too fancy. Keep things simple, don’t overdo and limit control of CMS to your clients as much as it is possible. You will simply make your life much easier.

    3
  24. 24

    Thanks for sharing such a nice article. Its really a must read for professional and amateur designers. Designers when designing overlook most of the above points and concentrate more on look rather than the functionality of the website. If the above points are kept in mind….designers can go a long way…thanks
    Manprit

    2
  25. 25

    Gr8 Article…!!!
    I just love u guys….

    0
  26. 26

    One of the better articles I have read about getting things right for designing with a CMS. We have been using SilverStripe CMS as our weapon of choice and love the flexibility it gives us in what we can deliver to the client while keeping it very simple for the content manager to manage content. They built the CMS in mind of many of the above rules, you should check it out if you have the chance. SilverStripe.

    1
  27. 27

    Interesting points but to actually offer all of that and protect you design you have to include all these “small” tweaks in your price.
    We all know the battle for the right price held with the client.

    1
  28. 28

    I agree with all of the points made here, however, the content strategist in me feels compelled to point out that we should not be choosing a CMS until we’ve thoroughly planned for the content that will deliver the message that support the website’s business goal.

    The graphical design should support the content, and the choice of CMS should accommodate first the content, then the design.

    I acknowledge that this isn’t what I think you are saying, but please please please folks – do not let your choice of CMS drive your content and design decisions. Let your content drive the design AND your choice of CMS.

    Then do what Rachel says. :-)

    1
  29. 29

    Great article. I’m a first time poster but felt I had to after reading the article. We use TrewForm CMS from Abendago (www.abendago.com) in Vancouver BC. It works around whatever design you want and provides ultimate flexability with the ability to turn-off “builder-mode” when you hand it over to the client. Because of this, the designer just designs what they want and the CMS connects. BUT, the client still gets access to a stupidly easy CMS. It has great caching for load speeds, support modrewrite for SEF URL’s, and lets you easily connect with custom tables in mysql (rather than having all your custom tables in one big table with lookups etc) Check it out, and if you’d like a demo, just message me!

    0
  30. 30

    Great article Rachel. Try Ektron Web Content Management(http://www.ektron.com/Products/Web-CMS/Web-Content-Management/ ) to automate the entire web publishing lifecycle from creation through dynamic delivery, reducing costs and speeding time to Web.

    0
  31. 31

    I’ll second Adam’s recommendation of SilverStripe.

    Another no limitations CMS I’ve taken a liking to is Modx: http://modxcms.com/

    0
  32. 32

    i use modx which is a great cms for designers, no need to learn a new template language just copy and paste your css and html and you are done and now have all the benefits of a cms.

    oh and its opensource!

    0
  33. 33

    Nice introduction to what many predict will become (if it is not already) the dominant model for web development. Two curious omissions that might have substantial impact on CMS strategy: SEO and Joomla. CMS platforms provide enormous potential benefit to SEO since they allow site owners to prime the organic content pump. And a well-made dynamic platform will out-perform ‘flat’ html sites because structural SEO features (meta, page titles, urls, sitemaps, etc.) can be easily – and constantly – managed from the backend.
    As for Joomla, well, arguments about the relative merits of one platform over the others quickly descend into the shrill or the silly. I’ve built sites in all the major platforms (Drupal, WordPress, Joomla, ModX, Silverstripe, Expression Engine, CMS Made Simple), and have had loads of fun and frustration with each. Having said that, Joomla remains the most popular CMS platform in the world. Combined with well-coded template, JCE wysiwyg, and the K2 CCK, it enjoys the same advantages mentioned in above comments on other platforms. Like all CMS platforms, it comes with its own ‘issues’ and is best handled by a developer/team that has expert knowledge of the pitfalls. I don’t believe in a ‘one-size-fits-all’ approach, but it does seem worth adding to an introductory article.

    0
  34. 34

    Lots of excellent tips here.
    I have to create WordPress themes from Photoshop designs , and often the designer does not have enough knowledge of designing for a CMS. So the neat equal height boxes are often a recurring issue.
    I like to make the layouts as fluid as possible, because it makes the design much more robust, but some designs I receive would be impossible to make fluid.
    For Jquery sliders, it would be nice to combine javascript and media queries to resize the slideshow when the browser is resized, because usually you have to define the widths in pixels not ems.

    0
  35. 35

    As someone who builds custom CMS interfaces for digital asset management on a regular basis, this article is on the money. Most people don’t realize that building a CMS is like building a web site three times over – not only does the designer/architect have to consider the outcome for the end-user but the administrators as well, plus bear in mind the increased level of form interaction, increased complexity of validation, and the database design all at once.

    I’ve had a lot of hits and a lot of misses. Simplicity always works, but my biggest recommendation is to be wary of feature creep, and particularly over time. Keeping the architecture, limiting the input capabilities (despite the complaints of the input-ers themselves) and keeping the end result in mind are some of the best suggestions for this often overlooked area of web development.

    0
  36. 36

    Great article, I design by default (for clients) using content management systems (including a lightweight php one I programmed myself for smaller sites) I find they keep the client far happier (as they tend not to worry about incurring further costs, and feel as they are part of the design process when including their own content themselves)

    I tend to believe that content management is going to be universal across the web pretty soon and with some of the great open source versions available (in particular WordPress and Concrete5) which are my 2 favorite open source systems. We are heading for great versitile prescence on the web I think :)
    Thanks :)

    0
  37. 37

    After having spent the last 7+ years building templates for a newspaper website using a CMS, I agree whole-heartedly with Mr. Slater. If possible, keep any editors away from any design elements and allow them access to only content.

    It was a daily battle with a few select reporters that felt they need to highlight “just this one” breaking news story in a different way to make it stand out, instead of using the protocol that was set up specifically for that purpose, which retained consistency in look and in delivery across all areas of the site (We actually gave them several options, designs that they approved. Go figure).

    Then, as mentioned, you get the folks that paste from Word; as in our situation, the reporters would copy from the editorial CMS, which unfortunately used Word as it’s base. :-P But fortunate for us, the online CMS would allow replacement of certain invalid characters with valid ones. Encourage them to paste to Notepad or TextEdit so they can see any invalid characters.

    Then there are the few that think they know HTML and don’t actually know how to close a tag, screwing up everything below that crap tag and the rest of the page. Again, fortunate for us, the CMS had a variable so we could strip all HTML coding. And no, I didn’t tell them I was doing that. Shhh….wait until the next time they try to put a table in the wrong field. X-D

    Make it clear to clients their attempts to design on the fly should not be done, what may work under one condition will break it elsewhere and you’ve already designed (possibly using multiple stylesheets) for delivery on multiple platforms and browsers.

    And if they say they don’t care about what it looks like on mobile/tablet/browserA/browserB, explain to them they need to rethink that.

    Oh and we never used tables in our code. The entire structure is built with divs, with some stories being pulled into about 6 different places across the site, with varying templates/designs but each product/section was still built modularly.

    0
  38. 38

    Good article. I’m slicing designs all the time. If designers will follow at least a few tips that were mentioned here, slicing will be much easier.

    And about the end user’s side I totally agree. The less the user will have tools to mess up, the easier it would be to develop and maintain websites. That’s why as I believe guys started ImpressPages CMS (www.impresspages.org). No bullshit from the user is allowed. It’s up to you what user can and cannot do. Default customization is almost always good enough for every project. Designer deals with design, user with content, everything else is done by the CMS. Easy as that. There are more solutions with similar approach as SiteFinity (www.sitefinity.com) or WebGUI (www.webgui.org), but only ImpressPages is on PHP/MySQL platform and works on shared hosting.

    1
  39. 39

    Good article, thnx!

    It really works if you give your CMS user only those tools that’s needed for the job.

    I haven’t found real use for frontent CSS usage in WYSIWYG editor if keeping editing in backend all the way. User doesn’t need to know much about FE design, if CMS customization is done properly.

    I have been in web development and user support for more than 10 years and I have found that it’s better to have special tools and preset elements for text and image combinations, downloads, tables, etc. It is better to keep editing and design separated, as most of the content editors doesn’t know much about the design anyway. It’s better to let them focus on the content itself.

    For the reasons above I have sticked with one of the biggest Open Source CMC http://www.typo3.org

    2
  40. 40

    Klaus-M. Schremser

    March 10, 2011 11:13 pm

    Hi Rachel,

    thanks for this really great article. A good base for all CMS implementers.

    An important component for the CMS is the WYSIWYG editor as we always see in our projects. For a perfect presentation of your content you have to write it in the context of your site and design. Many WYSIWYG editors are not able to let you write and manage your content in the style and context of your content pages, that’s the reason why we decided to use Aloha Editor, which is a true HTML5 based WYSIWYG editor (http://www.aloha-editor.org).

    Maybe this helps also some of your readers. By the way, Typo3 v5 (Phoenix) will use Aloha Editor as their main WYSIWYG editor.

    Greetingz from Shenzhen (China), kms

    0
  41. 41

    Nice article! I’m a beginner HTML/CSS slicer and i’m having trouble with coding the markup and css for a custom/inhouse php/mysql cms. My design falls apart when programmers try to implement it. I always have to fix something. I’m still in the process of learning but it is becoming very frustrating as some of the things are not so intuitive. They take my html and break it apart (i guess) but when the php code is executed and builds the page from those parts on the fly, combining them into a certain template, things go very wrong (at least thats how i this process works). I would appreciate if someone can point me in the right direction, books, articles and anything that could help me understand things better and find my way out of this.

    0
  42. 42

    I ACTUALLY was initially happy to find this particular web-site.I desired to thanks for your time with this excellent study!! I certainly taking advantage of any little it all and I have you book-marked to see fresh items you post.

    0
  43. 43

    On a related note, CKEditor 4 was recently launched with inline editing support and a new skin. Might be worth an update: http://ckeditor.com/demo#inline

    0
  44. 44

    “The real culprits are those who paste from Word. If you’re not stripping out all the horrid mark-up, then a site can go downhill fast.” That is so important to remember. And something you don’t always realize until you get dollar signs and asterisks in place of quotes.

    3
  45. 45

    utf-8 helps a LOT! … but not everything.

    2
  46. 46

    I completely agree. I use MODx for exactly that reason, although I’ve heard a lot of good stuff about Expression Engine.

    3
  47. 47

    Joel,

    I perfectly agree, a CMS should not stand in the way of any design(er), nor should it force you to adapt the customer’s demands to the capability of the tool (a process called consulting sometimes ). To make things worse demands are not static but tempt to be varying with time.

    This is why we developed onion.net (http://onion.net) a model driven CMS platform (or a system to build systems as one of our solution partners calls it) in the way we did it. And so far, the flexible approach kept its promises. I invite you, to add it to your list of useful CMS products ;-)

    Regards from Dortmund, Germany
    Bernd

    1
  48. 48

    Another CMS that is based on this concept (perhaps more so than the others) is ProcessWire http://processwire.com/videos/

    4
  49. 49

    Another great CMS which gives you complete control over the output is MODx.

    4
  50. 50

    Just encountered this discussion now but wanted to wade in, nevertheless. Let me be the lone voice to disagree with your premise about going with a CMS that provides total freedom. That is not a business case, it’s a point of view. There is absolutely nothing wrong with your POV but it ignores a whole audience. We created our http://www.yourwebdepartment.com platform because designers who don’t know programming, don’t know what to do with ‘total freedom’, don’t need it and besides no one should be busting a gut building a website that a client is only paying a $1,000 for. Not to mention that with all the freedom these systems provide 95% of websites fall into very specific design frameworks which we have no problem executing.

    Then there is the need of the client. YWD is a programming free system for both the content and design side. That means if a designer loses a client at some point in time and the client wants a new website, they can turn to a new designer, create a new design, all without reprogramming anything. There is value in this kind of application. My point is that none of the system you have addressed make sense in a world of $500 to $10,000 website jobs. YWD is designed to make a great site for the client and profit for the designer.

    Finally, I would like to add that a web designer should have many different kinds of CMS’s at their disposal. Great original piece, but the designers using YWD would be completely flumuxed by the more technical aspects of it.

    0
  51. 51

    You can say that again…. and again… and again.. like I have to repeat it daily to my clients when they say “help my site looks horrible, there is a ‘bug’ in the development”. Kill MS Word!

    2
  52. 52

    Just had a demo of Umbraco CMS – from a developer perspective, a really nice CMS. Can’t wait to do some work with it.

    1
  53. 53

    I feel the need to address this comment, as it raises an interesting point, even if it received many thumb-down’s.

    Tables are indeed consistent for layout, and easier to work with. Just try getting a non-techie to understand css floats and the box model!

    That being said, tables are
    – horrific when it comes to loading time.
    – hard to space and style consistently
    – not aware of either horizontal or vertical grids
    – very ugly

    So, what can we do to address complex layout issues? (e.g. floated images, two column layout for the content, those nice “art directed” posts where images extend to the left etc)

    One solution that I’m looking into right now is an UI to allow creation of table-like layouts in the WYSIWYG. Search for the Carrington theme for WordPress to see an implementation.

    Another one would be creating custom content templates that content managers would use.

    What do you guys think?

    0
  54. 54

    Amen!

    On the topic of images, maybe use a script that can resize images based on an URL. e.g.: http://www.example.com/image?width=300&height=100
    Use that in conjunction with a grid system, calling the auto-resize based on the section the content is being displayed.

    Or you can constrain thumbnail generation to a few custom image sizes based on your design’s grid. Then, the user will have to choose between e.g. small, medium, content-width, rather than self-resizing to an arbitrary size.

    1
  55. 55

    I’ve been using CKEditor for a while, and their Word cleanup filter is quite good

    And, this being the really cool part, you can force any type of paste to go through this filter, rather than have the user push the ‘Paste from Word’ button. It works, and if you copy/paste some other HTML, it will process it correctly.

    Alternatively, force paste as plain text for troublesome areas.

    2
  56. 56

    Great article, paste from word and additional CMS generated code can really throw styles you try to create.

    Having extensive knowledge of ektron web content management I really wouldn’t go for it for the reasons above. Look at the source of the code generated on ektron’s clients websites, it litters it with plenty of meaningless div tags and even includes CSS styles on the front end that are meant only for editing which really play around with your style sheet.

    I’m not going to push any CMS, i’m not trying to sell one, but how one that costs thousands of pounds, compared to the several free ones can claim to ‘reduce costs’ is laughable.

    CMS’s built with MVC are usually the way to go, because they usually offer the most control of what happens when it comes to rendering the site. Unfortunately you’ll always be held hostage by the HTML editor the CMS wants to use, the restrictions that brings and how it handles Microsoft Word.

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top