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

Start learning with our library of video tutorials taught by experts. Get started

Preparing CMS Web Graphics and Layouts Using Open Source Tools
Illustration by

CMS design dos and don'ts


From:

Preparing CMS Web Graphics and Layouts Using Open Source Tools

with Jen Kramer

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Preparing CMS Web Graphics and Layouts Using Open Source Tools
1h 40m Intermediate Dec 16, 2009

Viewers: in countries Watching now:

In Preparing CMS Web Graphics and Layouts Using Open-Source Tools, Jen Kramer shows how developers and graphic designers can collaborate to create a great site design that integrates with a content management system (CMS) like WordPress, Drupal, or Joomla!, all using open-source software. This workflow is based on two existing open-source design tools, KompoZer and GIMP. Jen shows how to modify web graphics and create slices with GIMP, and then place these in an HTML page integrated with CSS in KompoZer. Along the way, she discusses web design best practices and special challenges that might arise when designing for CMS software. Exercise files are included with this course.

Topics include:
  • Using static HTML versus a CMS in web design
  • Knowing the dos and dont's of CMS design
  • Exploring GIMP and KompoZer
  • Saving slices for the web with GIMP
  • Inserting graphics in an HTML page
  • Styling web pages with CSS
  • Changing the default styling assigned by a CMS
Subjects:
Web CMS Web Graphics
Software:
GIMP KompoZer
Author:
Jen Kramer

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.

There are currently no FAQs about Preparing CMS Web Graphics and Layouts Using Open Source Tools.

 
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.
Upgrade now


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 Upgrade now

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

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.