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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Preparing CMS Web Graphics and Layouts Using Open Source Tools.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.