Impressive Front-end Elements in a Website Theme

Sun, Aug 30, 2009 - 7:50pm -- Isaac Sukin

I recently compiled a list of things that increase the "wow" factor in a website theme, in anticipation of building a new theme for one of my websites.

Custom buttons
Custom buttons (for "submit" buttons for example) can add a lot to keeping the feel of a site throughout. This can mean context-specific images on the buttons, and/or the "sliding door" effect, and/or round corners, and/or a shiny effect...
Mouseover effects
Using JavaScript or the :hover pseudo-element to make things change color or opacity when you mouse over them can really make users go "wow."
Menu tabs
Many themes have their menu links implemented as tabs of some sort, whether on the top or sides (or occasionally elsewhere) in the theme; so when a site only has plain links, it can look pretty boring.
Background of important elements
Certain things just need to pop. This may mean making something a different color (to the extent the color scheme allows) or giving it a different background image, or using the mouseover techniques described above.
Textfield/textarea change background color on focus
It's easy to forget which textfield or textarea you were last typing in, especially if your theme is gray like the cursor. You can help your users with this by making the background color of textfields and textareas change when the textbox is in focus. You could also mess with background images and borders here, or even change the color of the text in the focused field.
Text resizing
This is really more of an accessibility thing, and is maybe more of a site feature than a theme aspect, but it's pretty cool when done right.
Edit-in-place
This is pretty hard to do, and is more for administrators and content editors than standard users, so it might not be worth the effort. However, it's a major time-saver if done right.
"Welcome" sticky
Some sites have a little bubble that appears when you're new to a site. Sometimes it only appears the first time you come, and other times you have to click it away. Occasionally you can even drag it around the screen. These things are cool, and it gives your users the impression that the site cares about them and what they do.
Override list bullet image
The little circle is not very exciting.
Text-transform CSS property and/or text-to-image transformations
This may or may not apply depending on what your theme ends up like, but don't forget about this one. You can use it to make your titles and important content stand out more, especially given the right font.
Remove input filter formatting options
If you only have one input filter available to standard users, and you have a WYSIWYG editor installed (and you should), then there's no reason you need to tell the general public that line breaks will be automatically transformed into <p> tags.
Remove "(not verified)"
This text shows up next to the names of anonymous posters. If you only have one main content-creator on your site (for example, on a personal blog) then everyone except you will be "not verified," so you should remove this text.
Don't forget to theme imagegallery/quote/pagers/blockquote/cite/pre
Most themes only cover standard elements, but leave off lesser-used ones, or don't cover classes added by common modules.
Number your comments
If your site supports comments, it's cool if comments are numbered, so it's easy to keep your place in a conversation. The numbers can be made into permalinks, reducing clutter elsewhere.
Use clear, easy-to-read, large fonts
Too often these days, themers use small fonts just to make things fit better. But visitors appreciate the clarity of large fonts, including in textfields and textareas.
Previous/next links on posts (especially with images, news, and blog entries)
When browsing a site, this makes it more likely users will keep reading.
Zebra striping of table rows, blocks, etc.
Adds some visual interest to something that might otherwise be drab.
"Random article" button
This is only relevant for some sites, but if you have a lot of articles, it may be one way to keep readers looking at your content.
(Styled) tooltips
Your site may not need this, but if you use a lot of jargon, having styled, explanatory tooltips can help with that.
Stylized form item labels
This often-forgotten element makes it an even better candidate for doing something cool, whether that means adding images or embedding the form labels inside the textfields/textareas.
Changing image for fieldset titles based on open/closed status
I've only seen this done once or twice, and it was poorly implemented, but it was cool nonetheless.
Speech bubbles for quotes/comments
Using images that look like speech bubbles helps emphasize what quotes and comments are.
Icons
Simply crucial to understanding what's going on in a site.
Seasonal/daily changes
If you have the technical expertise to do this, there may be nothing more impressive than a theme that changes color based on what time of day it is.
Autogrowing textareas
Like on Facebook, it's useful when textareas grow magically once they fill up so users don't have to scroll up and down to read what they wrote.
Rounded or sharp corners, defined borders, and image-decorated edges
These just add some pizazz. When done nicely, they can really give a theme atmosphere.