Produce Better Designs with Sample Content

March 2, 2010

By Chris Jean

This week’s tip will help you produce themes/designs that stand up to real-world use.

The problem is all too common. You develop a design, and it looks great. Then you ship it off to a client, and it starts to look horrible. The reason? The client is putting in different content than you did.

The solution is simple, get the content from someone else and make sure that content is very diverse in order to show your styling in as many scenarios as possible. If you are building the design for a specific user/client/company, see if you can get them to supply you with content that they would input. However, even if they do supply content, use some additional sample content since they very well could be giving you the easy stuff so that they can move on.

The quickest way to add some diverse content to your development site is to grab some sample content from the Easier Theme Development with Sample WordPress Content post on WPCandy.

This will take care of adding some posts, pages, and comments, but it doesn’t do anything for your widget areas. I recommend filling all your widget areas with a combination of different widgets. Add Search, Text (some with just a single work with no automatic paragraphs and others with large amounts of text and paragraphs enabled), Archives, Pages, Recent Comments, RSS, Tag Cloud, and Links. Another really important thing in the set up your sample widgets is titles. Don’t assume that every widget will have titles or that the titles will be short. Make some titles long, others short, and the rest empty.

Then, once everything looks great, shuffle all the widgets, change around some settings that the client/user can change, modify the content, and add/remove pages and categories. Look at everything again, and if it all still looks good, you only have a few problems remaining in your design.

Here are a few pitfalls to be aware of:

• Users can produce really long site names, site descriptions, page titles, post titles, and widget titles. Ensure that your design can handle these text elements being long (longer than you think would be reasonable, since it will happen).
• I already mentioned it, but I’ll mention it again: Test widgets with and without titles. I can’t tell you how many times I’ve looked at a theme that had horribly broken widget designs when the widget didn’t have a title.
• Just because it looks good on your operating system, in your browser, on your screen, doesn’t mean that it will look good if any one of those elements are changed. Do the following:
  • Install and test with all the major browsers. Test on Internet Explorer (6, 7, and 8 if you can), Firefox, Chrome, Safari (Windows and OS X), and Opera. This may require more than one computer. If that’s the case, the next recommendation should help you.
  • Find people with a critical eye with a different setup that you can show designs to. If you are on a Mac, find a person with Windows to bounce designs off of. If you run Windows, buy a cup of coffee for anyone at Starbucks and have them pull up your test site.
  • Please, please, please resize your browser window when you design. If I can tell your screen’s resolution from your design due to how the backgrounds drop off at specific points, there’s a problem. You can drag a window off the edge of your screen, make it larger, and then drag the window around to see if you have any messed up backgrounds at higher resolutions.

The key is to never assume anything about how your design will be used, and the first step to breaking these assumptions is to use a diverse set of test content.