Devlounge

Design, Develop, and Grow

The Fun Is Over: Remove Those Falling Snowflakes Now

By

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!

Lorem Ipsum Sites Every Web Designer Should Bookmark

By

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?

The Plugin Rule

By

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.

Fun with WordPress 2.7: Adding Asides without Hacking the Loop

By

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]
#content .category-asides { margin-left: 30px; padding-left: 10px; border: 3px solid #eee; border-width: 0 0 0 3px; }
#content .category-asides span.comments { font-weight: bold; }
#content .category-asides .entry p { font-size: 12px; line-height: 18px !important; margin-bottom: 10px; }
#content .category-asides h2 { font-size: 12px; line-height: 18px; float:left; margin:0; padding: 0 8px 0 0; border:0; }
#content .category-asides h2 a { color: #333; }
#content .category-asides h2 a:hover { color: #a00; }
[/CSS]

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]
.category-asides { your custom styling }
[/CSS]

…and take it from there.

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

Getting Ready for WordPress 2.7: Really Simple Category Styling

By

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][/php]

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 [Read more…]

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge