Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.