Here’s a list of often-overlooked interior page elements that designers should provide for every site:

Typography

Typeface

Traditional web design has relied on the big six (Arial, Times, Verdana, Georgia, Comic Sans, Courier) because of their inclusion in the Mac and Windows operating systems. There wasn’t much point specifying a font the user wasn’t likely to have. This is still largely the case, but with HTML 5 (and a progressive target audience) you can specify fonts your users don’t actually have using CSS3. Designers who go this route should be prepared to provide their developer with the font files.

Size and Line Height

It goes without saying that the developer will need to know the type size and line height, or leading (space between the lines of a paragraph). It’s very important to keep in mind here the wide variance of screen sizes and resolutions that will be viewing the design’s type. It shouldn’t be too small. Exceptions are always possible, but generally don’t specify body copy smaller than 11pt in Photoshop.

Note: Photoshop’s point sizes don’t translate directly to web point sizes. Copy set at 11pt in Photoshop will appear more like 10pt on a web page.

Paragraph Spacing

If left unspecified the developer will probably end up using default paragraph spacing. If additional spacing between lines is desired, the designer will have to let everyone in on it.

Headers (h1 – h6)

With today’s semantic markup techniques and Google’s weighting of header element content, it’s important to understand the traditional HTML header  system (h1-h6) and how it will be used in page layout. Designers should expect this, and build their design system accordingly. Developers will need to know typeface, size, line height and spacing for each of the six headers content authors will use. If left unspecified, the defaults will be used instead, which will probably not be pleasant for anyone. =)

Inline Links and Hover States

Developers need to know the color and style for links, both visited and unvisited. By style we’re referring not only to bold, italics, etc., but also to underline style. It’s common to have links underlined under normal circumstances, but then to disable the underline when the mouse is moved over the link. Any style cues like this need to be specified. This last state, when the mouse is over the link, is referred to as the hover state or mouseover state.

Lists (Bullets)

Developers need to know how the bullets should look, but usually prefer to leave this set to the font’s default bullet style because it solves a number of implementation gotchas. If the designer is set on having custom bullets, her or she needs to illustrate the expected wrapping and indenting appearance for both unordered (bullets) and ordered (enumerated). Make sure to demonstrate at least two lines so developers can tell how the wrapping should be handled.

Inline Photos

Your design will need to take inline photos into consideration also. Most likely designers will want their photos aligned right, with padding to the left and bottom of the photo. Just make sure the developers can tell what the alignment and padding are.

Footer

All too often footers don’t get the love that headers get, and that’s just wrong. A lot of print designers will provide mockups that treat the web page as if it were a 1024 x 768 piece of paper with the footer ending at exactly the bottom of the page. In reality, though, most web pages extend below a normal screen height (sometimes called the fold). If the design has an outer glow or drop shadow around the main content area of the page, the designer will need to continue this and show the developer how to resolve what happens below the content of the page.

Navigation Menus

If there are navigation menus in the design then the developer will need to know how to execute them. Key points to bear in mind here are: dropdowns, hover states, current section state, and nesting. If the design has dropdown menus the developer will need to know how it behaves in its various states. Does the list drop down from a main menu bar (usually called a suckerfish menu)? If so, does it expand hierarchically? The developer will need to know if each level looks and behaves like the last, and how an entry looks if it’s the parent of child menu items (does it offer a triangle cue?). Does the current section of your top menu stay highlighted? Then they’ll need to know the appearance and hover states for the section item. Is there a left-side nav? If so, make sure to think through how the nesting will look, how wide the column needs to be to accommodate the site’s menu structure up to at least three levels deep.

Callouts

If the site features callouts or display ads, don’t neglect a good place for them. Try to stick to standard ad sizes if at all possible.

Sidebar Items

If the design has sidebar modules (e.g. for Joomla, WordPress, etc.), the designer will need to provide a look for sidebar modules. That includes: headings, text, links, and any separators or other necessary elements. The developer will need to know the typeface, size, link colors, hover states, etc. of these items if they are not site-default.

Specialty Items

Tables

If designers know a site will display tabular data then they should go ahead and provide table examples demonstrating headers, cell spacing, text formatting, borders, alternating row colors, etc. Tables aren’t typical page elements, so this is not a requirement of many designs.

Blockquotes

Like tables, many sites don’t have any content inside blockquotes. But for blogs and discussion sites, they’re a must. Let the developer know how this should be handled.

Wrap-Up

Unfortunately, coming up with a complete website design system correctly is a lot of work. But by understanding what’s required for developers to actually make a design a reality, designers can help ensure the project stays on track, on time, and on budget. That’s when everyone comes out a winner, and that’s what we’re shooting for here. =)

Example embedding code from YouTube:

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/KLGClOOL62Q&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/KLGClOOL62Q&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object>

There is always the option of adding a custom code module below your actual Joomla article using the Module Manager, but this is a complete hack that normal content authors will find too cumbersome to remember, much less execute. What’s needed is a simple method that doesn’t require much effort on the part of the user. Fortunately, there are a number of plugins to help out! We’ll be covering two of them: EasierTube by Lee Everson here, and AllVideos from JoomlaWorks in a follow-up article. Both are Open Source and non-commercial.

EasierTube

Let’s start off with the easiest, most simple to use video embedding method there is… EasierTube, available as a stable 4.4 version for legacy Joomla 1.0, or as a beta 5.5 version for Joomla 1.5 version installations. Just paste the URL of your video into an article and EasierTube converts it to the needed code so that viewers see your video instead of the link. To do this, EasierTube scans articles and converts any YouTube (or Google, UStream, Revver, mpora, mybreak and Myspace) video links it finds into the correct OBJECT/EMBED tags to display the video, but it doesn’t alter the Article Manager version of the article … just what the end user sees in their browser.

Example YouTube URL:

http://www.youtube.com/watch?v=KLGClOOL62Q

Settings: It defaults to a small width, so you’ll want to make sure to edit the default video sizes in the Plugins Manager (just find it in the list, click its name, and edit its settings). EasierTube provides two dimension settings: home page content and interior content. This accommodates folks who may have a narrow blog format on their home page, but a wider format when the complete article is viewed. There are a ton of settings, allowing you to loop, autoplay, provide full-screen viewing, and specify border settings. You can disable related videos, annotations, video info, stats, and even the title. You can turn off support for each of the individual formats it supports (YouTube, Google, etc.).

Possible Problems: This approach is drop-dead simple. All your content authors need is the URL to the video, not all the OBJECT/EMBED code. EasierTube takes any video URL it understands and takes care of the rest. Of course the devil’s in the details. It converts ANY video URL it understands, no matter where it finds it in the article (or the HTML code in the article). If you simply want to post a text or button link to your video, forget about it. EasierTube will commandeer the link, turn it into a video display, and cut off the rest of the paragraph. Not at all desirable. So, as long as your content authors don’t provide text links to videos, you’ll be fine. But be warned. =)

Installation: Like other Joomla extensions, just download the ZIP of the plugin and use your site’s Extension Installer. You’ll get a brief confirmation message, and once it’s installed you’ll need to remember to actually enable the plugin inside your site’s Plugin Manager.

Check back soon for our follow-up article on the AllVideos plugin from JoomlaWorks!

But first, a little background… Web designers are always looking for new and better methods to present content in more efficient and user-friendly ways, and two of the best practices borrowed from desktop applications are “tabs” and “slides.” Tabs allow for multiple content items to be displayed in the same document window, while slides allow portions of the page to expand/collapse on demand. Both provide the designer with a method of allowing the user to quickly get to additional (i.e. supplemental) information without requiring a page load. This idea is pretty common in sites where there is an initial product description above a series of tabs for technical data, comparison charts, related items, etc.; clicking one of the tabs changes the content below the tab set while keeping the product description above. With the advent of freely available JavaScript frameworks like jQuery and MooTools, the bad old days of programatically cumbersome and SEO-belligerent tabs and slides are gone, replaced with elegant DOM- and CSS-based solutions.

A stock Joomla 1.5 install has no built-in facility to display page content in tabs or slides, and so developers must either cobble something together from scratch or use a third party plugin. And that’s what takes us to our first plugin of the series… Joomla Tabs and Slides (in content items). Like most plugins, Joomla Tabs and Slides provides a non-invasive method of adding its functionality without the developer having to add any code to his or her templates or touch the core Joomla code at all. As with most well-written plugins, simply install the Joomla Tabs and Slides ZIP archive in the Joomla Control Panel (Extensions > Install/Uninstall) and then make sure it’s activated in the Plugin Manager (Extensions > Plugin Manager). At this point, you need only add some simple inline tags to your articles, so let’s talk about those.

When Joomla renders your site’s content, it passes through the filters of a number of plugins, each getting the opportunity to do something to the content. Joomla Tabs and Slides simply takes its turn at your content, looks for its special “tab” tags (see example above), and outputs the CSS and JavaScript necessary to turn them into tabs. To begin a tab set, simply add a new paragraph in the Joomla article editor and type “{tab=xxxx}” replacing xxxx with the name of your tab (don’t type the quotes; spaces and special characters are allowed). As you can see, the tab tags begin and end with braces. Then type the content of your tab. It can be just about any properly formatted content (tables, paragraphs, images, etc.). When you’re ready to close your tab and begin the next one (assuming there is more than one), simply create a new paragraph and type “{tab=xxxx}” again, replacing xxxx with the name of your next tab (no quotes). Continue this until you have finished the content of your final tab. Then, create a new paragraph and type ”{/tabs}” (no quotes). This tells the plugin to close up the tab set. In the example above you can see how this looks in the WYSIWYG and source editors, as well as final page render. Note: In the source editor, it’s possible to use wrapper tags other than paragraphs (e.g. h1, h2, h3) but paragraphs seem to be the easiest for content authors to manage.

Hopefully this paints a clear picture of what the plugin can do and how to do it. You can see it in action at one of our sites and also at the Joomla Tabs and Slides plugin page itself. Enjoy!

WordPress.com Stats

If you’re already using Google Analytics for WordPress (see our post on Google Analytics for WordPress) then you already have a ton of information about your blog’s traffic. So much information, in fact, that it may be hard to get a bird’s eye view. That’s where WordPress Stats comes in. Simply give it your WordPress.com API Key (see our post on Akismet for detail on this) and in return you’ll get a dashboard item telling you the quick and dirty version of what’s happening on your site, with a wealth of additional information just clicks away. And don’t worry about server load: WordPress Stats is a hosted analytics solution just like Google Analytics. Great stuff.

Check out the WordPress Stats plugin home page for more information or to download it yourself.

Other Great Plugins to Explore

There are lots of great plugins that we’ll be talking about in the coming weeks (FeedBurner Widget, Flickr Feed Gallery and NextGEN Gallery for example). Which ones would you recommend? Post below in the comments or drop us an email and let us know which ones you find most useful. =)

Flexi Pages

WordPress has come a long way since its humble beginnings, and these days it’s more and more common to see it being used not only as a blog but also as a content management system. The built-in Pages widget does a good job of listing, well, pages, but its options are limited. Which brings us to Flexi Pages, a highly configurable WordPress sidebar widget to list pages and sub-pages. Can be used as an alternative to the default ‘Pages’ widget. It even has a special option to include a Home link, which can come in handy if the title of your home page is something other than Home. =) You can specify the sorting order, pages to exclude/include, and even specify if subpages are displayed. Very handy, and great tool to have if you’re doing more than just blogging.

Check out the Flexi Pages plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover WordPress Stats, a great tool to get a quick and dirty overview of your blog’s traffic without having to leave WordPress.

Advanced Category Excluder

A lot of blog themes use a post’s category to handle pages differently. You might have a category, for example, just for items that you want to show upon the home page. Your theme’s homepage PHP code would sniff out only those posts with the Home category and then display those, and only those, on the homepage. In a case like this, though, you don’t want Home showing up in a normal sidebar category list. What to do? If you’re a coder, or just a savvy WordPress user, you might use replacement Category widget provided by Widgets Reloaded (see our post on Widgets Reloaded) to exclude the Home category’s ID. But for non-coders who don’t even know how to determine a category’s ID, there’s Advanced Category Excluder. Whew!

But Advanced Category Excluder doesn’t just let you omit categories from the category list. It lets you omit categories from just about every form of item there is. You can even specify categories to be omitted from your RSS feeds. It’s glorious!

Check out the Advanced Category Excluder plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover Flexi Pages, a great tool to help keep hidden categories from showing up in unwanted places.

Widgets Reloaded

The built-in WordPress widgets are great, but were designed for simplicity and ease of use. If you want true control over the output of your widgets (like to exclude certain items, change the order, or display the results of a custom query) you need something more sophisticated. And that brings us to Widgets Reloaded, the wonderful little plugin that replaces the existing Archives, Bookmarks, Calendar, Categories, Pages, Search, and Tags widgets and also adds a new one called Authors. Each of these allow you to specify a wide range of parameters as if you were calling the individual functions directly from your template’s PHP code. The result is flexibility and control like never before. Non-coders beware. =)

Check out the Widgets Reloaded plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover Advanced Category Excluder, a great tool to help keep hidden categories from showing up in unwanted places.

Wordbook

Having a presence on social networking sites like Facebook is almost as important as having a website at all (even more so in some cases). So when it comes to getting your message out, it’s handy to be able to post it to your blog and not have to turn around and then also post it to Facebook. That’s where Wordbook comes in. It’s a great little plugin that takes each blog post and submits it automatically to your Facebook feed (photos and all) without having to install a special application at Facebook. Once activated the plugin will ask you to visit Facebook and generate a “one-time code,” which is similar to an API Key like we’ve discussed in previous posts. The Wordbook settings screen provides a link to Facebook that will generate this code, so it’s all very easy to do. Just click the link, login to Facebook, follow the directions and it will spit out your code. Then take that (copy and paste will do nicely) and give it to the Wordbook settings screen and voila!

One caveat, though: If you go back and edit a blog post after it has been published, Wordbook will immediately repost it back to your Facebook feed as if it’s new. Avoid this by temporarily deactivating the plugin just before you make the edit and then reactivate it after the edit is published.

Check out the Wordbook plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover Widgets Reloaded, a great replacement for some of WordPress’s stock widgets.

Twitter Widget Pro

More and more companies are using microblogging services like Twitter to keep in touch with their target audiences. So surely there must be a way to integrate your Twitter feed with your WordPress blog, right? Right! Meet Twitter Widget Pro. This little gem adds a widget item to your blog that you can then effortlessly add to the sidebar of any widget-enabled theme. Just add the widget to a sidebar (Appearance > Widgets) tell the widget the name of your Twitter account (no password required), set a few options and you’re golden. The widget is even smart enough to know if Twitter is unavailable and can display a message instead of just sitting there trying to load forever. And with heavily burdened Web 2.0 sites like Twitter occasionally having outages, you really have to love some good old-fashioned fault tolerance. As a bonus, the widget’s HTML output is heavily laden with CSS selectors so your web guys can style it however you need (if necessary).

Check out the Twitter Widget Pro plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover Wordbook, a great tool to help add your blog posts to your Facebook stream.

Google XML Sitemaps

Search engines do a great job of finding web-based content on their own. But sometimes they need help, and in recent years they adopted a standardized format that site owners can use to submit sitemaps (lists of pages on a site). The format is called the Sitemap protocol and it basically involves putting an XML file listing a site’s indexable content somewhere on the site where search engines can download and process it. Maintaining this XML file can be a very tedious task to do manually, as the format is quite strict. What’s a blogger to do? Surely not update the sitemap XML file by hand after each post? Enter the Google XML Sitemaps plugin.

This little wonder updates your blog’s sitemap file each and every time you publish a new post (unless you wish to update it manually). It not only updates the sitemap file, it also gives Google, Bing, Yahoo and Ask a big heads-up that there’s something new to come see. You can tell it to exclude certain categories, tags, or posts from the sitemap and set up simple rules for priority and update frequency. Note: For Yahoo automatic notification, a Yahoo Application ID (similar to a WordPress API Key, discussed in our prior discussion of Akismet) is required (sign up for one here).

Check out the Google Sitemap Generator plugin home page for more information or to download it yourself. As usual, don’t forget to donate to the author!

Next time we’ll cover Twitter Widget Pro, a great tool to display your Twitter feed in your blog’s sidebar.