New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

CMS design dos and don'ts

From: Preparing CMS Web Graphics and Layouts Using Open Source Tools

Video: CMS design dos and don'ts

When designing for a content management system, you're designing for software, not a brochure. You need to think about how design adapts the different challenges from content. Here are some points to consider when looking at custom graphic design. First of all think about typography. On the web, there are no fonts that travel with the webpage. You can specify which fonts you'd like to appear, but unfortunately you'll have to hope those fonts are installed on the end user's computer.

CMS design dos and don'ts

When designing for a content management system, you're designing for software, not a brochure. You need to think about how design adapts the different challenges from content. Here are some points to consider when looking at custom graphic design. First of all think about typography. On the web, there are no fonts that travel with the webpage. You can specify which fonts you'd like to appear, but unfortunately you'll have to hope those fonts are installed on the end user's computer.

That's why most designers stick with the most common fonts for HTML generated text on their webpage. Those fonts include Arial, Verdana, Trebuchet and Tahoma for the Sans-serif options, Times and Georgia for Serif options, and finally Courier for fixed-width Monospace fonts. In a content management system based design, your menus are generated as HTML, as is most of the content on the website.

Stay away from funky fonts in the menus, the main content area, the headers, or callouts on the left or right side of the page. If you use funky fonts in those situations, your client will have very hard time editing the text. It is okay, however, to use these funky fonts in a logo or in images. Here is the Hansel & Petal website, and you can see that there is a font called Diner that's being used in the navigation and for some of the titles, such as Special Events, Weddings, and Corporate Functions here. Also the More Info graphics.

If the client decided they wanted to add another item under this list of Special Events they would have to create another graphic for the title of that special event, and most clients don't really have that level of ability. By making a simple change to using Georgia, which is a so-called web-safe font, in the navigation and in the headings here, the client now has a great deal more ease of adding additional items under the Special Events area. Be sure you're using simple HTML for anything the client would want to change.

Another common problem seen in designs for content management systems are a fixed height design. Those are a fashion "no." Articles are different lengths, and your client would wind up entering long and short articles. Your design needs to gracefully extend or contract in the vertical direction. Gradients should fade to a solid color if you choose to use a gradient. Don't use busy backgrounds that don't tile well. Solid colors are generally best.

Here is an example of some text inside of a colored box. As I increased the size of the font using Ctrl+Plus or Command+Plus in my Firefox web browser, you'll see that the box expands nicely around the text as the text grows in size. The box in the left, however, stays the same size as the text pushes down. It's not nearly as attractive as the box on the right. Keep this in mind when you're thinking about callouts within the text. You can't control their height either.

A rotating testimonial, for example, may be long or short. The same kinds of rules need to apply. Font sizes need to be dynamic so that everyone can read them. If they're coded flexibly, font sizes can be increased or decreased by the end user, so that they can easily be read. The number one growing population on the web is senior citizens, who generally want a larger font size to read on the computer. For long blocks of text use a Sans-serif font.

That's the opposite of what a print designer does. They use Serif fonts as you see here for long blocks of text. However, Serifs are distracting and can be smudgy on the web. So use San-serif fonts for easier reading. Also make sure long blocks of text for your content have a very good strong contrast. Designers love to use tiny light gray type on white backgrounds, which really doesn't facilitate reading, particularly long passages.

Ideally, use black or dark colored text on a white or very light background to provide maximum contrast and minimum eyestrain to the reader. Headings are also very important to use on the Web. Use headings, such as H1, H2, and H3, and so forth for titles and subheads in your text. They are really ugly in the Raw HTML format as shown here, but with a little CSS, they can be made quite beautiful. Be sure you spell out how these headings should look in your sample text in your comp.

So that your web developer will know how to replicate them. Otherwise your web developer will come up with his own design, and you really don't want that. Also, be sure to specify how the links should look in your text. Menu links may look different than links in the content. For links in the content, as I show here, show how the link looks unvisited or in its default state, as over here on the left, visited and on hover. Generally speaking, for the content area, leave the link underlined in the text, so it's clear that it's a link.

You may remove the underline on hover. The reason to do this is for accessibility reasons. If your reader is colorblind and 10% of the population is, they may not be able to see the links if there's not another identifying factor other than color for those links. If you'd make your links bold, make them bold in all states. Making links bold on hover will occasionally displace text and wrap menus to another line, which can be disconcerting as shown here.

Note that as I hover over this link, it wraps onto a second line. That makes your text box go a little bit taller, and if I had more boxes underneath this text, it would become a longer and longer column of information. The entire column shifting up and down can be quite disconcerting to your end user. There's not a lot of rules for design in a content management system, but a few of these pointers will make your design strong and easily used by your client, as they update their own website.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.