We’re celebrating All Hallows Eve Friday Focus with dark designs. Trick or treat!

Designs of the Week

This is actually a WordPress theme that happens to have a site of its own. Gives off a gothic feel with a touch of translucency.

Break the monotony (and possibly the eerieness) with something brighter, quirkier, or both.

I like that the grunge effect here is peeking at the sides, when normally you’ll find it all over the background. I also like that it’s got different hues.

I like this site’s color scheme, even though that brick red is close to becoming unreadable on that denim blue. It’s a clean (though a little grungy) one-page site.

Despite being predominantly black and gray, a splash of red (literally) and touches of gold brighten the whole site up. Another simple and effective technique with the help of color. (Sometimes it’s all you need.)

Social Media Weekly

Design – 15 Key Elements All Top Web Sites Should Have
Be sure to keep these elements in mind when designing a website.

Design – 19 Creative Halloween Advertisements
Laugh, scream, and be inspired by these ad campaigns for Halloween!

Programming – Are More Programmers Using Ruby or Just Window-Shopping?
Good question. Is Ruby living up to its hype?

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.

I was recently accused of over-implementing my projects at work. How audacious! How un-Web 2.0! How true. The fact is, over-implementation is one of the big downsides to Web 2.0. We have more frameworks than ever, for example:

• CSS: YAML, BlueprintCSS, and YUI
• Javascript: jQuery, Prototype, MooTools
• PHP: CakePHP, Zend, PHPDevShell

There is a ton of functionality packed into each of these frameworks—most of which are geared toward speeding up development. However, with all this added functionality has come the tendency to overbuild everything.

Gone are the days of single-function onClick validation scripts. Now you must load an entire library, call anonymous functions, focus on reusablity. Before you know it, what could have been handled in 3 lines is now p,a,c,k,e,d into a 30kb JavaScript file that includes plus an extra CSS file as a dependency and 275kb of PNGs.

I find it ironic.

Web 2.0 was founded on simple, elegant design and code. It was feature shy. I bought into it wholesale and went along for the ride and now I am using it to over-implement my projects.

The solution comes (unsurprisingly) from 37Signals who have managed to stay the course all these years. They are still preaching the same message they have been preaching since day one: Less is more.

1. Never implement more than you need to
2. Never plan further than you can see
3. Don’t be afraid of imaginary work

Don’t get me wrong—I think frameworks are extremely useful. However, next time I sit down to write some sweet app I will be thinking a little harder about whether I can get by without one.

XML Data Driven CSS Charts? Whaaa!!!

No its not crazy talk. CSS Charts are possible nowadays and they can even be semantically correct. Let's say you already have started using CSS based charts on your site. Wouldn't it be nice if the CSS charts were update able via an XML file. You are in the right place! This technique is going to show you how to make accessible charts that are scalable and easy to update.

The Basic Structure Markup

Below you will find the basic structure for the chart. I used a definition list since it does a great job of showing relation between values. You could also use list items, but I didn't like the way it looked semantically.

Style that Chart!

I am not going to go into a lot of detail about each part of the CSS. The basic structure is pretty straight forward and doesn't require you be a brain surgeon. Please see the CSS file located in the source zip at the end of the post. I am however going to talk about some of the CSS that controls the height and color.

Heights

The height of the bars in this tutorial are controlled by CSS so it is required that you create classes for the various heights so the XML parser can associate. I create the heights in 5% increments, you can changed to whatever you want.

Here is a snippet of the heights:

Colors

We are going to create a few generic colors that we will offer as options for the bar colors.

The Data Structure

Now lets get into the meat of this technique. The data! As you already know the data is going to be stored in an XML file. Below is the generic structure.

The Data Parser

This is where the technique really starts to come together. We now start utilizing both the XML file and CSS selectors to achieve our goal...data driven charts! Below is a snippet of the parser so you can get an idea of what were trying to do and get the basic jist of things. The full files will be available at the end of this article so you can dissect.

Keep in mind that it's always a good idea to have error handling in place to handle any kind of exception that can occur. I didn't include in code snippet due to space constraints, plus I didn't want to bore you guys.

The Final Product

This is how you would structure your ASP page to finally bring all the elements together. Just by calling the ASP file in as a file include then reference the below code in the body.

Below I created an example page utilizing the techniques discussed in this article. I have also attached the source file so you can rummage through the code. I am always open to new methods...drop me line and well discuss.

Happy charting!!!

DEMO: view page

Source Files: download

WYSIWYG editors are “What you see is what you get” programs that allow designers to see their design as they build it, rather than relying strictly on code they type by hand. As you place elements on the screen or change colors, the WYSIWYG builds the code for you. There are several different WYSIWYG editors, some free and others that require a purchase. These programs do a great deal of good, but as with anything, there are cons regarding their use too. With that, let us take a look at some of the pros and cons of using a WYSIWYG program to design and build your website.

Pros

• They are easy to use, so even people who have no knowledge of HTML can use them to create their websites.
• Gives you more creative control as you get to focus more on what the design looks like instead of what the HTML code looks like.
• You will save time because a lot of things that take long time to hand code in HTML are quickly and easily done with a few clicks of a mouse.

Cons

• Most WYSIWYG include HTML code that is hard to read that usually doesn’t comply with Web coding standards set forth by the World Wide Web Consortium, also known as the W3C.
• Usually the codes are very specific to the product you are using to generate them, which may create issues with their viewing, or editing.
• It will be harder to market yourself to employers who want you to know HTML, not a specific WYSIWIG editor. You won’t be able do well if you are used to one particular program and are forced to go to using organic HTML with notepad.
• You will not be able to control the elements on the page as precisely as you can with straight HTML coding. While you will likely still be able to edit all of your alt tags, you will probably have to go through leaps and bounds to get to them.
• You will have to use your mouse a lot, which could cause what is known as a Repetitive Stress Injury and cause pain in your wrists or shoulders.

So, what’s the answer?

It generally comes down to personal preference. If you know HTML, you can use the WYSIWYG editors in conjunction with a notepad editor so that you can take the control you general lose with the WYSIWYG. If not, you are likely just doing web design as a hobby and should not really worry about it.

If you’re looking for a good WYSIWYG program, you may want to try Adobe’s Dreamweaver. Though it will run you about $399 for the upcoming CS4 release, it is most definitely an excellent program for web designers as it integrates well with all the other Adobe programs web designers use such as Flash, Photoshop, Illustrator and Director. With plenty of help files and a very user friendly interface, you’ll be able to start using Dreamweaver right away.

Dreamweaver is an expensive program for many of us, so here are some open source HTML editors which are completely free to use and easy to install. These are all linked to the locations where you will be able to download them so you can learn more before you decide to start using them.

• Amaya Web Browsing and Authoring: Not only can you create web pages, you can browse through them too. There is support for multiple file types which you can have open at the same time.
• Trellian WebPAGE: Using a colored HTML editor and support for many Photoshop Plugins, you’ll have the flexibility and precision you need when you use this program.
• Bluefish: Offers focus and support for many coding languages and designing interactive web sites.

If you’re looking for a good text editor, then check out Finding the Right Editor for You by Thord Daniel Hedengren, as he will guide you through everything you need to know about choosing the text editor that will best fit your needs.

What do you use when you design your websites? How do you feel about WYSIWIG editors? Share your thoughts below.

Magazine style layouts are a great way to organize a lot of content on your home page. But do you know how to do it in Drupal? Over the next few posts, I will walk you through the process of creating a great looking home page much like what you see on many of the major news and magazine sites.

I will be using Drupal 6 and a handful of common modules. Unfortunately, many of the modules for Drupal 6 are still in development. Do not be surprised if you run into some little bumps. You should have some experience with the Views and CCK modules, some experience with themes, and a decent knowledge of CSS, XHTML, and PHP.

For now, I am going to focus on three main sections that are characteristic of most magazine style sites.

• Headline story with a teaser and large image
• Several featured stories with teasers and thumbnail images
• A list of recent post titles by category

Once we have completed the series, you should be able to add other common elements on your own.

Install modules and themes

For this to work, you will need to download and install the following modules:

• CCK (Content Construction Kit)
• FileField
• ImageAPI
• ImageField
• ImageCache
• Views

I am using the Framework theme for the front-of-site, and RootCandy as the admin theme. These are optional but it will probably help to have at least the Framework theme installed.

Install everything as normal. Remember to put your themes and modules in the /sites/ directory. Here are the important settings you will need.

Automatically size images with ImageCache

Create three presets named Large, Medium, and Thumbnail. They should all use the Scale and Crop action. I used these dimensions:

Later on, we will use a CCK field to upload an image and attach it to a story. The ImageCache module will automatically scale and crop your image to the dimensions you set.

Use WordPress style Taxonomy to keep things simple

The best Taxonomies are simple. We can all learn a lesson from WordPress when it comes to organizing our Vocabulary and Terms: keep it simple.

Set up a Vocabulary called “Tags” that allows you to free-tag to your heart’s content. Then set up a Vocabulary called “Categories” and add these terms:

• Headline
• Feature
• Category 1
• Category 2
• Category 3
• Category 4

Feel free to replace Category 1-4 with something more suitable to your content. I have a feeling that this Taxonomy structure is probably suitable for 95% of the world’s websites—but that is debatable.

Create regions

Now that we have finished configuring the modules, we can get our hands a little dirty. The first thing you will need to do is open up your front-of-site theme directory (Framework). Next, copy the page.tpl.php file and name it page-front.tpl.php. Drupal will automatically use this file as the template for the home page.

This is the generic code for a region:

The variable $the_region can be anything you choose, but it must be defined in the theme's .info file. The region definition looks like this:

regions[the_region] = My Region

the_region corresponds to the variable that you defined in the code. "My Region" can be whatever you choose to name that region. Create the following regions in the .info file, somewhere near the bottom:

If you try to view your site, it should break. That is because we are overriding the default regions (sidebars, content, header and footer) that Drupal recognizes out of the box. We will need to redefine the default regions. You should now have something like this:

The last step in this part of the series is to add the regions. Find the main content area of your template and add this code:

I added the main div and the region classes to make it easier for styling later on. Otherwise, they are not required.

Part 1 Wrap-up

That was easy. Our theme is now fully receptive to most of the content that will go on the home page. Apart from installing some modules and doing some very basic configuration, we were able to lay the foundation for a magazine style home page with just a little code.

In the next part of the series, we will enhance the Story content type with CCK and create several Views for displaying content.

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

• Commenters, visit Gravatar.com and sign up. If you're using several email addresses, you'll want to add a Gravatar to each one. They could be the same, or completely different ones. It's easy enough.
• WordPress publishers, there's built-in Gravatar support in WordPress. Read up in the Codex, or use a plugin. Want to hack it? We've got a tutorial!
• Other publishers, you can add Gravatar support too. It's pretty simple, read up on it here.

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

Let's take a look at websites that look like they were built with stuff found in your office stationery. Welcome to this week's edition of Friday Focus!

Designs of the Week

A good combination of the elegant and the industrial feel. The "paper" aspect does not look overdone (to the point of looking almost like a scrapbook), which fits the content and purpose of the website.

Now here's a site that leans toward the crafty, scrapbooky look, made for a personal blog. I like that the graphics may look dark, but the doesn't feel glum.

A huge site whose content is presented mainly in images. The downside is you need instructions to be able to navigate it; and the clickable squares aren't even descriptive. The upside is once you figure it out, you'll enjoy browsing around.

This site makes me feel like I've been taken back to the turn of the new millennium. It's pretty different from the grunge styles we see today. It feels much more genuine.

How do you organize a site with lots of content to digest? Try horizontal sections that vary in background styles. Keep them fixed and use transparent illustrations for an interesting scrolling effect.

This site looks completely different from the other ones above. It's the classier side of our office stationery suite, mostly because the designer avoided rough textures.

Social Media Weekly

Design - 23 Awesome Examples of Design as a Force For Good
A great inspirational article just in time for Blog Action Day (October 15).

Design/Programming - 10 Easy Steps to Great Website Optimization
Best practices to optimize websites for speedy and efficient loading.

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.

No color in the spectrum is left unturned this week on Friday Focus. It's all rainbows here---but no unicorns though!

Designs of the Week

Technically, this site is dominated by warm, orangey hues, but it's colorful nonetheless. And the Design literally has rainbows in it! More importantly, it's bold and inspiring. Best tip we can get here is to be unfraid to use black to add focus and contrast.

Since this site calls for a more formal look, the colorful graphics were isolated into a corner so as not to distract. If you look closer the circles look like the bottom of the cone of site logo! The 3D-going-2D is a neat twist.

Here's a darker design that still plays with the spectrum from end to end. Not to mention some transparency. I'm slightly disappointed that the background graphics fade out as you scroll down, but it's probably for readability's sake.

Since this site is so big, what better way to represent the different sections than with various colors? Strictly speaking it's not a very good idea and it should be supported by something more effective, like icons, but I really like the areas where the rainbow effect is applied. It doesn't even look overwhelming, color-wise. And I just love the footer navigation graphic.

If you're going for a rainbow pallette, you don't have to use every single color for everything. In this site you can see the text use two shades of yellow, while the links use blue. Again, we have transparency here. Finally, the combination of wispy fractals and a crocheted background texture is not something you see everyday, but it looks wonderful!

Social Media Weekly

Design - Color & Design In Politics: Obama
The unofficial design-centric campaigns for US presidential nominee Barack Obama is nothing short of inspiring. This is just one of the articles that compiles them.

Programming - Forget Flexibility, Design for Now!
An article that discusses how designing for flexibility can hold us back.

Hi Devlounge readers! Thord has kindly given me this opportunity to tell you about a one-of-a-kind event you've gotta be a part of.

It's called Blog Action Day. If you haven't heard of it yet, you will on Wednesday, October 15.

We're a non-profit organization trying to get the world's bloggers to talk about (and, we hope, actually do something about) a given subject on October 15 each year.

In 2007, the first annual Blog Action Day focused on the environment. About 20,000 bloggers participated.

The chosen theme for 2008: poverty. Once again, we anticipate many thousands of participants, including at least 20 of the Technorati top 100 blogs.

We hope to change the global conversation next Wednesday - and maybe the world, even if it's just a little.

You can register your blog at our website to help us track how many people are going to take part in Blog Action Day 2008.

I'm the assistant event coordinator for BAD08, which means I help make sure our email inbox, blog, Twitter account and other online profiles are running smoothly. I also try to find organizations and companies who might support our event. (We've got nearly 80 so far.)

All Web designers and developers should pay close attention to the viral approach Blog Action Day has taken. The homepage showcases an addictive video that people often share with friends. We have banners and images that people can grab and use freely. And we flaunt those big numbers right on our homepage to excite even more people. 

And yet the bulk of the actual work is being done by a very small team - perhaps four or five people who are really deeply involved.

Giant gates can swing on small hinges.

Will you be a hinge with me?

Giant imagery is this week's theme on Friday Focus. Happy October everyone!

Designs of the Week

I like the boxy/modular look of this site. I especially like that the huge background image shows what the company is all about, which is landscaping Knoxville and surrounding areas.

Again, the look of the site strongly reinforces its subject with the napkin and the handwritten effect. But this time, the layout is non-linear. Minus points for using Comic Sans MS in the testimonials section though!

You don't have to make your background image appear throughout the length of your site. For the more meaty content, this page uses a solid background color. Then you end up at the footer with jagged borders evocative of the mountain slopes.

Great mix of all things floral, textured, and hand-drawn. But the design detail I like the most is the sewn patch look.

Social Media Weekly

Design - Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!
The title speaks for itself. A guide to thinking out of the box and designing BIG!

Programming - CSS Systems for writing maintainable CSS
A presentation by Natalie Downe about "CSS Systems", a "top-down approach to architecting a site's CSS".