Feature
Post

Category
Column

The Fun Is Over: Remove Those Falling Snowflakes Now

We have all seen it, those falling snowflakes. They are everywhere this time of year. In principle, I like the idea of decorating your site or blog for the holidays, it’s nice. However, some things should just not be done.

Like falling snowflakes, all over the page.

But the problem is, everyone has seen it already, and it was annoying the first time around.

Yes, I know, it is easy to add one of those scripts to your site, and at first glance it looks nice. But the problem is, everyone has seen it already, and it was annoying the first time around. The thousand time, it makes me close the tab and go someplace else.

Another thing that I loathe with decorated websites is the addition of sound. This is luckily not as common anymore, which goes for websites overall, but for some reason the madness spreads in December. Please don’t ever make your website play music per default! Sure, add a play button if you think your readers will want to hear a midi file playing Jingle Bells or whatever (my guess is “no”), but don’t autostart it please.

Also, don’t force an animated Christmas card on me, just because I have the nerve to visit your site. I don’t want to see that when typing the URL, I want the actual site. Not a crappy Flash animation, the site. Link it from there instead, if you want to wish your visitors Happy Holidays, and then the ones in the holiday spirit can watch it and go awww, while the rest of us can use your site as intended.

Snow on your logo. Been done, but OK. Same goes for a festive background image, added details to the corners of your existing site, things like that. That’s OK, it can even be a bit nice, although I get tired of seeing the same green clipart over and over again.

The key to decorating your online presence is to not hamper the actual site!

Keep that in mind until next year. Now please remove those falling snowflakes.

Now, that being said, have a Merry Christmas and a Happy New Year!

Feature
Post

Category
Webapps

Lorem Ipsum Sites Every Web Designer Should Bookmark

There are approximately 67,588 sites that offer the lorem ipsum phrase for your convenience. If you don’t know what it is, this is what Wikipedia will teach you:

In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. It is a form of “greeking”.

Even though using “lorem ipsum” often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation.

In other words, it is placeholder text to fill your designs with, that looks better than blah blah blah and won’t distract the viewer with any actual meaning.

So where can you get it? Well, google it and you’ll have a bunch of hits, and there are truly great web sites that offer the phrase for your convenience. I have a soft spot for Lorem Ipscream, flirting with ice cream and whatnot, but I wouldn’t say that it is a great choice for filler text, others are doing this better.

Chris Coyier of CSS-Tricks has made a nice attempt with HTML-Ipsum. It is basically a collection of lorem ipsum snippets in various HTML tags, for your copy-paste convenience. This includes OL and UL lists, which is really handy, as well as some less funky stuff that still might be useful in some situations. But especially the lists, good call Chris! You can get them for Coda or Textmate as well, a nice feature.

However, my undisputed champion in this glorious battle is Per Bang’s Lorem Ipsum Generator. This most excellent site lets your choose how many paragraphs should be displayed, if they should be long, medium, short, mixed, and the same for the actual sentences. It can also do lists, and show everything in HTML source code as well as right there on your screen for copy-pasting. You really should give this one a go, it is by far the best one I’ve found.

What’s your lorem ipsum poison?

Feature
Post

Category
Publishing

The Plugin Rule

I got caught up in a discussion on plugins for WordPress today, which got me thinking about some things that I really should share with the Devlounge readership. It might seem a trifle basic to some of you, but you should understand that there are a lot of people who extend and further extend their websites with plugins, widgets, gadgets, gizmos, addons, extensions, or whatever they are called for their publishing platform, and by doing so really just make the visitor’s experience worse.

So what am I talking about, really?

Plugin Overload

Sometimes you stumble over a cool feature that someone has on his or her website. You want it for your own, or your client wants it for their site. Googling it will find a solution, of course, and it might be a plugin for the CMS you’re using.

Excellent! Install! Blam! It’s up!

Then it happens again. And again. It goes on and on, and suddenly you have 20+ plugins installed, and you’re wondering why the reader stats are going down.

The ease of adding plugins makes us sometime forget 5 things:

  1. Extending the CMS with plugins might strain it more.
  2. Additional functionality usually means additional database queries, calls to scripting actions, or whatever.
  3. Widgets hosted on a different server can hog up a site, just because the server they are on isn’t responding properly.
  4. Too many things at once might clash, because the developers didn’t take everything into consideration.
  5. Cramming too many features in one place will most likely make it cluttered and unfocused.

It is very easy to just download a plugin and extend our CMS today. A lot of times that is a good thing, but sometimes it goes too far. There really is no telling how well two different plugins will work together. A lot work perfectly well, but some might clash due to poor programming or coincidence. After all, there is no way that the developer can test his work with everything out there, now is there?

There’s also the matter of load times. First of all, the more you put on a site, the bigger it will get and the slower it will load. This is less of an issue today, with high speed internet access, but it is still an issue. Second, if you use external services, like Share This or Disqus for instance, you will have to wait for them before you can use their functionality. If they are implemented right, the rest of the site will load, but that is not always the case. Third, people are impatient, high speed internet access or not - they want everything to happen the moment they click. So when someone finds a link to your Kick Ass Super Duper Post Of Brilliance, clicks in anticipation of reading something genius, and then it loads slooowly, you might just have lost a faithful reader.

Finally, there is something called two many features as well. Do you really need everything you clutter your site with? Just browsing the blogosphere tells me that the case is usually “probably not”…

The Plugin Rule

So what can you do? I have something I call the Plugin Rule. Basically, it goes something like this:

Never add a plugin for a feature your CMS can do with a little bit of custom coding.

Now, there’s the issue of actually doing that custom coding as well. Let’s say you’re running a WordPress blog and want a submit to Reddit link. You could do that with Share This, with one of the numerous plugins, or you could hack the theme template and add the submit link there. The ideal solution is the last one, since it relies on no plugins nor external services, but not everyone is capable of doing that. They should, of course, choose a plugin that gets the job done. That is, if they really need the feature - otherwise just forget about it.

It all boils down to your level of expertise of course, but try and avoid using plugins for everything. Always search for a less obtrusive solution. And perhaps most important of all: Always question the need of the added functionality. After all, less is sometimes actually more.

Feature
Post

Category
Code

Fun with WordPress 2.7: Adding Asides without Hacking the Loop

As you've probably noticed, there's a bunch of funky things you can do with WordPress 2.7, due any day now. Previously, we've played with the new sticky post functionality, and then there's the category styling features added with the new template tag for post CSS classes. Let's dive a little deeper into the latter, adding an asides functionality without actually hacking the loop or using a plugin.

Requirements and Preparations

For this to work, you need the beta version of WordPress 2.7 (the third one's the latest when I'm writing this, but do check the dev blog to make sure). You also need to use the post_class() template tag to spit out the classes in your post's div tag, so make sure your theme is up to date with that. It is detailed in this post. You could always use the default theme with the 2.7 beta as well, and then easily add this functionality to your own theme when the full version is out.

As for preparations, you'll need to decide on what category should be your asides one. In my Notes Blog Core theme, I call it "asides", plain and simple. It also has "asides" as its slug, so that means that post_class() will add the CSS class category-asides to the post div, as detailed in the previous post. You can call your asides category whatever you want, just swap out the slug part in the code.

The Code

Right, so lets get this baby on the road! First of all, this is how we want it to look:

You can see this baby in action over at my Notes Blog theme site, where I'll be offering the Core version of the theme for free at a later date. I've pulled this code snippet from the Notes Blog Core theme, so this is actually exactly what I'm doing in my style.css file right now:

CSS:
  1. #content .category-asides { margin-left: 30px; padding-left: 10px; border: 3px solid #eee; border-width: 0 0 0 3px; }
  2. #content .category-asides span.comments { font-weight: bold; }
  3. #content .category-asides .entry p { font-size: 12px; line-height: 18px !important; margin-bottom: 10px; }
  4. #content .category-asides h2 { font-size: 12px; line-height: 18px; float:left; margin:0; padding: 0 8px 0 0; border:0; }
  5. #content .category-asides h2 a { color: #333; }
  6. #content .category-asides h2 a:hover { color: #a00; }

So what's happening here? It's pretty straight forward. Just disregard the #content if you will, that's the div container with the content stuff. You probably have one in your theme as well.

The .category-asides is the actual class of course. This is where we tell it how to behave. You can see the border, some padding and margins, things like that. The rest tells us how h2 tags should work and so on.

And that's it, basically!

How to Add This to Your Theme

Naturally, you don't want my Notes Blog Core styling on the asides your theme, unless it really fits. Luckily, it's very easy to add this to your theme. Just add the .category-X class, where X is the slug of the category you want to be the asides one, and style it accordingly. In other words, if you want to use the category called "asides", just add:

CSS:
  1. .category-asides { your custom styling }

...and take it from there.

Feel free to borrow ideas, elements, or whatnot from the asides code demoed above.

Feature
Post

Category
Code

Getting Ready for WordPress 2.7: Really Simple Category Styling

With upcoming WordPress 2.7, just released in beta 3 as I'm writing this, styling your categories gets even easier. Previously, you more or less had to do a conditional tag thing and echo a specific class to get some custom styling, but no more.

Enter this little line of code:

PHP:
  1. <?php post_class(); ?>

The only thing it does, when it's inserted in your post's div tag, is write class="post". In other words, you replace your class="post" with post_class().

Why? Well, this little thing adds some other nice classes to each post as well. We've already discussed the sticky post class, sticky, in a previous article here on Devlounge. Besides that one, it adds the following classes:

  • category-X where X is the post's category, one for each category, so it could be category-games and More →

Feature
Post

Category
Code

Getting Ready for WordPress 2.7: Sticky Post Styling

Sticky posts are a new feature in WordPress 2.7. Basically, it means that you can mark a post as sticky, which means it'll stay at the top of your post listing until another sticky one shuffles it down. More or less like sticky posts on forums.

This has been possible previously as well, with a plugin by Lester Chan.

WordPress 2.7 is out in beta, and isn't due until later this month (late, most likely), but you might want to get your themes ready for this new functionality. You do have to change your post class output to post_class, which I detailed here.

This is what you need to add to your style.css:

CSS:
  1. .sticky { background: #bbb; }

That's right, it is just one simple little class, .sticky, for you to add to your stylesheet. The code above will just give the sticky post a grey background color, so how about we do something more funky?

CSS:
  1. .sticky {
  2. font-size: 24px;
  3. border: 1px solid #bbb;
  4. border-width: 1px 0;
  5. background: #eee;
  6. padding: 15px;
  7. }

That would give us a box with large text, a grey border in the top and bottom, and a light grey background, with 15 pixels padding. Naturally, you'd have to style your sticky posts for your design, this is just to give you something to think about to highlight your headlining posts in the future.

Remember, this won't work with versions of WordPress prior to 2.7!

Feature
Post

Category
Code

Handling Headers: Where to Use h1 and h2

How to handle headers, ie h1, h2, h3, and so on, is something that I'm being asked a lot. The most common question by far is "should I have my logo in the h1 tag, or my post title, on my blog?", and it is a good one. In fact, I'd reckon not all of you will agree on the answer.

The reason I'm bringing it up now is this post on the topic, over at Webmaster-Source. I've gotten several emails asking if Matt's conclusion is the right one. Basically, this is what Matt says about it:

Here’s the best way to handle headings on blogs:
On the index and archive pages, h2 tags should be used for post titles. On permalink pages, use h1 instead. You can then use h2s, h3s, etc in your post content, for subheadings. I suppose an h2 would work for the “x Comments” and “Leave a Comment” messages as well.

Personally, I don't do it that way. The way I see it, the h1 should be the site's name, even if it is a logo, since that is the highest item in the hierarchy. For me that goes on both listing pages and single pages. Like so:

Website Title → Post title

I think this is true because you're on a website, reading something that is located on this website. That means that the actual website name (usually a logo, as I said) should be the first header, ie h1, while the story you're reading should have its title in h2, and then sub-titles in h3, h4, and so on.

That's my take.

However, I'd love to hear how you guys do it! How do you arrange your headings on your blogs and websites, and why do you do it the way to do it? Share in the comments below.

Feature
Post

Category
Publishing

Gravatars: Why Both Commenters and Publishers Should Use It

Gravatars are global recognizable avatars, a hosted avatar service for profile pictures, usually used to pimp comment sections on blogs, but also on forums, author pages, and whatnot. We're using Gravatars here on Devlounge, both for the author byline at the top of each post, and for commenters.

It used to be a poor web service, actually. Gravatar started out great, but then got massive issues, having a hard time serving all the avatars across the web. That all changed when Automattic bought the service, and with the hardware support of their servers, Gravatars are now delivered promptly and without hassle.

I'd say they have managed to get the Gravatar service to where and what it should be: A stable global avatar supplier, with support for multiple email addresses for the more schizophrenic among us, me included.

So why should you have a Gravatar associated with your email when commenting, and why should you have Gravatar support on your blog or forum?

Commenters: Get a Gravatar!

No matter if you comment to voice your opinion first and foremost, or if you have a more hidden agenda (like getting visitors to your site, or promote a product or service for that matter), you should have a Gravatar. Not only does it make your comment stand out more than the ones who doesn't it's also an opportunity to promote your brand, be it yourself or something else, a little.

You could use:

  • a photo as a Gravatar, which will show off your face.
  • a logo as a Gravatar, which will build brand recognition.
  • a product picture as a Gravatar, which will build product awareness.

You could also have a humorous Gravatar, or a serious one, or whatever you'd like to gain attention to. Having a good and thought-through Gravatar is a way to be seen, and to get a message across, in addition to your actual comment.

For myself, I've got a photo. This is suitable for several reasons, one being to show my face and therefor imply that I've got nothing to hide. Or something like that.

Publishers: Add Gravatar Support!

Publishers should definitely add Gravatar support if they have any kind of user interaction on their site. As I said, user comments is a pretty common way to add Gravatar support, but you could also add it to a forum, a more elaborate guestbook, or similar.

So why would you want to do that? Well, first of all, it will be another push to get readers involved. Think about it, if a reader is aware of the benefits of having a Gravatar, and possibly using it to promote a brand of some kind, then that's just another reason to leave a comment to your post. Not only does the reader get to write a comment, the Gravatar further adds to the free exposure. The same goes for forums, of course.

Another reason is to help you manage spam. Most spammers don't bother to get Gravatars for their spambots, if any, and that actually makes it a little easier for you to manage your comments in moderation. No Gravatar doesn't mean that the comment is spam, but it is way more likely than if there is a Gravatar. It works the other way around as well: If a commenter's got a Gravatar, it's probably not a spammer, at least not an automatic one.

Also, adding Gravatars makes the comments more pretty and alive. That in turn makes them all the more appealing to participate in.

How to Add a Gravatar

Are you using Gravatars on your blog or forum? Why, or why not?

Feature
Post

Category
Design

Why I Love Web Without Words

Web Without Words (sorry for not typing it like you want to, creators, but it disrupts the type) is a great site. I love the idea, and as a designer, I love what it represents.

Just take a look at this wordless version of Yahoo's website:

This is great, this is a way designers should look at webpages to know how their layout is working out. Yahoo is obviously pretty cluttered, no surprise there, but it doesn't necessarily mean that it is a bad design. What it does tells you is that there's a risk of clutter, and that's something.

Looking at the web without words is more or less suitable for different sites. For instance, I think it works better with CNN.com than with Yahoo above.

What You Can Learn From Web Without Words

The thing to take from Web Without Words is a different way to look at websites. You get a very honest picture of your sites layout, the actual wireframe of the site. Web Without Words creator Paul Armstrong explains his site like this:

web.without.words started simply as a way for me "practice what I preach" -- to visually represent my core belief that hierarchy, grid systems and uniformity ultimately lead to a more natural user experience -- to show the overall structure of any website, by striping away all the distractions of text and ads and images and showing a site for what the eye unconsciously perceives. I dissected CNN.com (primarily as a way to recuse myself from all the political grandstanding), cobbled together a website and showed a few friends

It is pretty spot on, but even if you just don't buy the obsession of grid systems and things like that, it can still be a good idea to look at Web Without Words in general, and applying it to your design in particular.

Now if someone would please build me a service where I can just put in an URL and get it rendered in Web Without Words style.

Feature
Post

Category
Column

Bloatware: How to Avoid Bloating Your Application

I read an interesting reflection by Jeff Chandler over at Performancing. Jeff asks if all software is destined to become bloatware, and then applies it to blogging platform WordPress. While I don't agree with the Google Chrome - Mozilla Firefox comparison, basically talking about how much faster and sleeker Chrome is, it is an interesting question.

So far, it looks like WordPress 2.7 will contain a number of integrated plugins into the core leaving some to believe that WordPress is becoming bloated. Although I am not a software developer, this had me thinking on whether or not all software is doomed to become bloatware.

Yes and no, is my answer. Most software becomes bloatware because it isn't rewritten enough. Think about it, if you build upon a core that is dated and bulky it will affect everything you put on it. However, if you revisit your old code every now and then, keep it up to date, and rewrite portions (or all) of it, there is really no reason why your application should become bloated.

Think about it, if you build upon a core that is dated and bulky it will affect everything you put on it.

If we look at web applications in particular, we've got to take scripting and databases into account. PHP gets updated, and suddenly your old code written for an early PHP 4 version should be swapped for PHP 5 code instead. New database queries can be used to speed up your web application, and so on. In fact, because of this, I think revisiting and rewriting the core of a web application is way more important, than traditional software.

WordPress in particular could probably use a rewrite here and there, at least that's what people are telling me, I wouldn't know myself. This is probably something that goes for a lot of open source projects. With the November release of WordPress 2.7, we'll get a bunch of features that previously was handled by plugins. That means that the core is growing, and one should be wary of that. However, this isn't necessarily an issue, because online you just load what you want to load, and if the WordPress core is organized in a decent manner, that means that the extra stuff won't be called for unless needed. I'm not really worried about that.

I am, however, a bit more concerned about walking in old tracks, which is another kind of bloating I guess. If you've got a great idea in 1.0, you build upon it, and then you build upon it, and build some more. And you know what, then you're stuck in it! It would be awfully hard for WordPress to lay off the categories, for instance, and every larger revamp they do to the admin interface will turn a lot of people off.

That's why we get new projects, like Habari.

Any piece of software, online of off, can be bloated. That doesn't mean that it has to.

What do you think? Share your thoughts in the comments.

"));