CSSnewbie

6 Great Wordpress Plugins Behind CSSnewbie

Maintaining a site as complex as CSSnewbie requires a bit more than just fancy CSS footwork. It also relies on a Content Management System (CMS) – Wordpress, in this case – and a healthy dose of plugins to extend that CMS’s capabilities. Here are six of the many Wordpress plugins that help keep CSSnewbie growing and thriving.

cforms II

The cforms plugin helps you build complex contact forms and embed them in your Wordpress site – all from the Wordpress back-end. I use this plugin on my contact page, and my advertising page. The plugin is amazingly customizable, both from within Wordpress and by manipulating the CSS the plugin uses. Although, I have to admit I haven’t done a lot of modifications to the forms’ CSS yet.

Comment Relish

Comment Relish is a great way to encourage interaction between your site’s readers and authors. The concept is pretty simple: each time a new person comments on your website, this plugin automatically sends them an email of your devising. You could theoretically use this plugin to inform your new community members of just about anything – a new e-book, perhaps, or other sites you run that they might be interested in visiting. I’m currently using it to thank my users for their comment and encourage them to comment again (and subscribe to my feed, if they haven’t done so already).

Using this plugin has been an overwhelmingly positive experience for me. Many commenters have responded to the email to tell me they appreciate the articles I’ve produced and to show me the work they’re producing in CSS. If you’d like to see the plugin in action, just leave a comment, and you should get an email at the address you specify fairly quickly.

Google XML Sitemaps

My content is only useful if people are able to find it, and search engines are the number one way most people start looking for new information. Thus, it pays to make sure your site is being properly indexed by search engines. One of the easiest ways to ensure you show up in the world’s most popular search engine (Google, for those counting) is to use the Google XML Sitemaps plugin.

This handy-dandy little plugin automatically creates an XML-based file describing your site’s content that you can then submit to Google. Once you tell Google where your sitemap resides, they’ll use it to ensure they’re fully indexing your website. And every time you post a new article, the plugin updates your sitemap. Organic Google searches are a growing segment of my inbound traffic, and I have no doubt that this plugin has a fair bit to do with that growth.

Redirection

Of course, all the search results in the world won’t do a bit of good if you reorganize your website and don’t leave a forwarding address for your users. About a month ago, I rethought my article permalink structure – I decided having the article’s “primary category” in the permalink wasn’t useful, as most articles belonged to several categories, and I didn’t consider one any more “primary” than the others. Unfortunately (in a way), Google had already indexed my site, and people were visiting from other sites via several soon-to-be-incorrect links. That’s when the Redirection plugin saved my rear.

All I had to do was describe to the plugin what my old permalink structure looked like, and what my new one now looked like. It took care of all of the forwarding stuff in the back end. I was worried the process of setting up a redirect file would take me most of the afternoon… but it ended up taking me all of ten minutes.

SEO Meta Editor Advanced

And while we’re on the topic of making sure your users can find your content, a little search engine optimization (SEO) can make a big difference, too. Wordpress already does a pretty good job with SEO just by providing clean, well-written code in their included templates and making “friendly” URLs the default for all new installations. However, there’s more that can be done in terms of metadata, and for that, I turn to the SEO Meta Editor Advanced plugin.

The plugin adds a couple of extra fields to each post that I write, allowing me to specify a group of meta keywords and a description. The keywords help search engines categorize my articles and increase the chances of someone finding the information they want. Search engines also use the “description” field to describe your pages instead of just grabbing an excerpt from your article that may or may not be descriptive. This is particularly useful for someone like me, because I can be a bit wordy at times (this time, for example). The description field ensures that people coming in off search engines get a good, concise summary of the article they’re clicking through to.

Snippet Highlight

The fundamental purpose behind CSSnewbie is to help people learn more about CSS. To do that, I often turn to code snippets to explain concepts or describe techniques. However, a snippet of code all by itself can be difficult to read – especially once the snippet is more than a few lines long. The Snippet Highlight plugin helps out by colorizing my code examples. It’s what turns this:

p {
	font-weight: bold;
	color: #333;
	text-transformation: uppercase;
}

Into this:

p {
	font-weight: bold;
	color: #333;
	text-transformation: uppercase;
}

The plugin can also add line numbers to your code snippets, but I personally found them a little distracting, so I modified the plugin’s CSS to exclude the line numbers.

These are just six of the many plugins that help keep CSSnewbie running – but these six I tend to rely upon more heavily than the others. I’m constantly trying out new plugins in the background to see if they could make the site more useful. If you know of any plugins that you think would be a good match for the site, please let me know about them in the comments!

Jump-start Your Development With CSS Frameworks

Scott Phillips is a web developer working at Drake University in Des Moines, Iowa.

Do you get a feeling of déjà vu every time you begin a new web project? Do you smack your forehead trying to remember the best way to get something to render correctly in IE6? …again? Do you refer back to old sites when choosing font-families and sizes?

There is a better way.

Learning how to wield the mighty powers of CSS is important, but you don’t have start coding from scratch every time. CSS frameworks can save a lot of time and even make your site look better in the end.

What’s a framework?

CSS frameworks are like Legos. Combine their simple building blocks in thousands of different combinations to create a clean and usable layout for your site. Once these basic elements are in place, go wild adding your own custom headers, footers, backgrounds, bullets– whatever you’d like. All of the frameworks discussed in this article include support for multi-column layouts and readable typography. Some go further with classes for design elements like navigation menus, pull-quotes, lists, forms, and more.

How do I use them?

Generally speaking, all you need to do is add the framework’s classes to certain XHTML tags and include the needed CSS files in the header of your document. In a matter of minutes you’ll have an attractive (yet basic) layout. Of course, each framework has it’s own documentation, examples, and tutorials.

Pros

• Save time. This is the biggest advantage of using frameworks. They give you a huge head-start on your CSS. All of the tedious/boring stuff is done, freeing you to spend time on more creative things.
• Best practices. Many talented developers contribute to frameworks. Take advantage of their expertise. For example, the hot topics of Grid-based layouts and vertical rhythm are concepts borrowed from the print world. Even if you aren’t totally sure how they apply to the web, CSS frameworks can help you take advantage of them.
• Cross browser support. Convincing different browsers to render a design consistently has always been a pain. Frameworks have built-in fixes for the worst offenders.

Cons

• Not always semantically meaningful. A basic tenant of good web design is to separate presentation from content to produce readable and maintainable code. CSS frameworks require compromises that may get the purists among us a little upset.
• Bloated code. Do you really need support for 24 columns when you only use three? Probably not. In reality, however, the file sizes of all of these frameworks are reasonable. You could always strip out unused portions is file size is a really big concern.
• Don’t use it as a crutch. It’s important to understand what is happening under the hood of a framework. Each one has a learning curve. You’ll need to spend time understanding how they are built, their strengths and weaknesses, and how to customize them.

Popular Frameworks

Blueprint CSS

Blueprint CSS is my first choice in CSS frameworks. It is lightweight, easy to understand, and produces very attractive grid-based layouts with minimal effort. In addition, its typography choices (everything from headers to lists and addresses) are readable and attractive. It’s not perfect, however. Although Blueprint wasn’t the first one available, it has generated a lot of buzz and developed an active community since it’s release in August 2007. There is currently no built-in support for flexible-width layouts. I’ve found at least one online Blueprint CSS editor, but it’s not nearly as nice as the YAML’s (see below).

YUI Grids CSS

The Yahoo User Interface (YUI) library is a set of controls and utilities for creating rich interfaces for web applications. It is aimed primarily at the Javascript + Dom Scripting + Ajax crowd. A subset of the library essentially constitutes a CSS framework when used together. They are Grids CSS, Reset CSS, Base CSS, and Fonts CSS. YUI has been criticised having bloated code and requiring too many extra DIV tags. On the other hand, these are the very same libraries that Yahoo uses for some of their own large projects so they must be solid. Beyond the standard documentation, those of you with longer attention spans may want to watch the author, Nate Koechley, give a 42 minute overview presentation.

YAML

Yet Another Multicolumn Layout (YAML) is yet another framework worthy of serious consideration. In fact, it may become my go-to framework in the very near future. YAML hasn’t received the amount of attention that some other frameworks have due to the fact that it was originally written and documented in German. It should not be overlooked. A few of its many strengths include a focus on fluid layouts, exceptional documentation, and the truly impressive drag-and-drop YAML Builder.

960

960 Grid System is a newcomer to the scene. It is very similar to Blueprint but has different design considerations like wider margins. 960 also lacks a number of features that the author considers unnecessary (like a baseline font size). 960 includes printable grid paper and template files for Fireworks, Photoshop, OmniGraffle and Vision. Even if you don’t use the framework, these will make a handy edition to your web design arsenal.

Tool Review: Firefox Error Console

Some of the best tools in any web developer’s toolset are completely free. Today I’m going to talk a bit about the Firefox Error Console, and how it can help you become a better CSS author.

First, it’s important to mention that not only is the Error Console completely free, but it’s a pre-installed function of Firefox – you don’t have to go hunting down any special plugins or anything. Simply open a webpage and go to Tools –> Error Console to open the console.

Once you’re there, you’ll see a selection of buttons across the top like in the image above. The one we’re most interested in is the “Warnings” button, because that’s where all of our CSS errors show up. Simply click the Warnings button and you suddenly have a very precise and concise view of what Firefox thinks of your CSS. I’ll warn you, though: it isn’t always pretty.

Take the first item in the list of the image above, for example. Firefox is telling me that it’s had some problems parsing a “display” property in the CSS of one of my (many) Wordpress plugins. If I click the URL below the error, it pops open a “view source” window with the offending line already selected. In this case, here was the line in question:

display:inline-block; /*for Opera & IE*/

As the comment behind the property states, this style only works in Opera and Internet Explorer. Firefox doesn’t support an inline-block display setting. Therefore, it throws an error and ignores the property. This can be pretty useful knowledge if Firefox isn’t behaving like you’d expect it to, or if another browser is rendering better than Firefox.

Or consider the third (highlighted) item in the image. Here, Firefox is having problems with a vertical-align property, but Firefox understands vertical-align. So I clicked the URL to look at the source and found this code:

vertical-align:center;

Here, the problem lies with the code, not the browser. There is no “center” value for the vertical-align property. The author of the code should have written “vertical-align: middle” instead. It’s a small difference in semantics, maybe, but it makes a big difference in how that element is displayed.

So I encourage you to check out the Firefox Error Console sometime. I think you’ll find that it’s a great resource for figuring out why your CSS isn’t behaving like you thought it should. As I mentioned earlier though, it can sometimes be a bit scary to see how many errors a single page can through. The front page of CSSnewbie, for example, throws 18 CSS errors! My only (small) consolation is that all of those errors come from plugins I have installed – my template’s style sheet is clean.

If you have another commonly available tool that you use on a regular basis and would like to see mentioned, please let me know. I’d love to do a review on it. You can either leave a comment on this post or use the contact form. Thanks!