Tag Archives: web design

Creating and Maintaining a Fan Site

For web designers and developers who are fascinated with particular topics, fan sites are the reason they make websites. I am one such designer, who learned how to design and code websites so that I could make a place to talk about one of my favorite TV shows (and nine years later, here I am! :D).

But what does it take to make a GOOD fansite? Anybody can collect together a few pictures and a few pages of content copied from other sites, but how do you make a fansite that others enjoy, too?

#1: Content, Content, Content

If you want to run a fansite, be it about seahorses or the Harry Potter series, you need to make sure you have a good bit of accurate content about the subject.

For instance, if you’re running a fansite about seahorses, you’d want to have information about where they live, what varieties there are, how they live and breed, what they eat, etc. You’d also want high-quality pictures of seahorses in their natural environments, and maybe some charts and diagrams of various life cycle information. Remember, other seahorse fans would be coming to visit, so you want to provide them with as wide a swath of info as possible.

If you’re making a site about the Harry Potter book series, on the other hand, you’d likely want to have synopses of all 7 books, info about all 8 movies, and lists and descriptions of all the characters. Screencaptures from the various movies, scans of the book covers, and even some samples of music from the series would also be big draws for fans coming to see your site.

As I know from the various fansites I’ve run throughout the years, gathering content can be a challenge, but it’s worth it if you make your site a true repository of information. Then fans know to come to you when they want news, which is admittedly an ego boost as well as a raison d’etre.

#2: Make Sure It Stays Updated

But having a lot of accurate content is not the only challenge to making a fansite; you also have to make sure it stays current. What good is a Harry Potter fansite that stops updating with The Prisoner of Azkaban? Not very, to most current fans. When you make a site, make certain your information is not only accurate, but that it stays accurate with the passage of time.

To stay updated, you need to stay immersed in the culture surrounding the subject. Stay on forums and check official subject-matter sites often; as soon as you find out new information, reference it on your own page so others can know what’s going on.

On my City of Heroes fansite, for instance, I have to make sure my help articles stay updated with all the new game features and developments. And if I can’t keep it updated myself, I’ve got to make sure I link to official sites who are keeping things updated, so my readers can find the info they want quickly and easily. Remember, as a fansite owner, you’re not only making a place for you, but for others, too–you have a responsibility to your users to make information easy to obtain and understand!

#3: Have Original Content Not Found Anywhere Else

Too often, I’ve seen fansites that could be photocopies of each other on the Internet–the same exact page structure, the same exact content. With subject-matter fansites, it’s easy to fall into the “cookie-cutter trap” when you’re trying to make sure you have a lot of information and it’s all accurate. You want to make sure your site is “complete” with lots of info, but if your info could be found just as easily on another page, who’s going to bother visiting yours?

To combat this, I often include personally-written essays on the subject matter, like my Creative Gaming Advice column on my gaming site. Either that, or I’ll include graphics I’ve made representing the subject matter, or even devise a few humorous lyric parodies a la Weird Al to round out my content. No matter what kind of fansite I’m running, I NEED ways to make my content original, ways to share my unique perspective on various issues. I have to find my “niche,” in other words.

Whenever you’re making a fansite, you’ve GOT to include something that no one else on the Internet is going to have–that special something that will define your “niche” for you. If you don’t, your site is going to fade into the background of sameness…and no webmaster wants that.

#4: Link to Official Sites and Affiliate with Other Fansites

A fansite is, in my opinion, simply never complete without a link list to official sites and other fansites. It’s also not complete without some affiliations between fansites, just to help drive traffic. Even though your sites may be about the same thing, it doesn’t mean that you’re in competition with other people–form an alliance, and you may likely have an Internet buddy for life. On all of my fansites, past and present, I have always enjoyed providing the most comprehensive link list I can put together, for my own reference as well as the greater knowledge of others.

Providing links to official sites helps your users greatly while they search for information, and similarly giving links to other great fansites you know of can make everyone in your network happy. You’re all working toward the same purpose–disseminating info to other fans–and you all have a deep interest in the same topic. Why not join forces and help each other get Internet traffic? Who knows, you might just end up being a big enough network that the official site recognizes you all!

Summary

Fansites are fun ways to exercise one’s web creativity, and when done well, they can establish thriving online communities and great conversation. Try building your own fansite, about whatever you love–you might just find yourself at the head of a new wave of interest in the topic!

Do I Still Need to Worry about META Tags?

“META tags? Huh? What are those?” you might ask. The following are examples:

<meta name=”description” content=”An awesomely succinct description here”>
<meta name=”keywords” content=”Hi, I’m a useless tag!”>
<meta name=”author” content=”Your name here, if you’re not afraid of identity theft”>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8 (but who uses this, anyway?)”>
Many thanks to W3Schools.com for this code sample. (The comments in the content blanks are all my own opinions, though. LOL)

For most modern web designers, the esoteric meta tag fell just a little bit before our time. Tucked away in the head section of our HTML documents, these little snippets of code, like talismans, were supposed to help search engines find and index our sites, and therefore supposed to help potential visitors find us a lot more easily.

But these days, meta tags don’t quite function that way anymore. Most modern browsers don’t pay much attention to them, and neither do many search engines. So, the question remains: Are they worth even including in our webpages anymore?

The Verdict: Sorta-Kinda

Meta tags have not lost all their effectiveness, according to this article at SearchEngineWatch.com. Some search engines still do pay attention to them. But just making detailed meta tags is not the be-all and end-all SEO strategy it used to be. Nowadays, it’s far better to combine a selective use of meta tags with other strategies, like blogrolls, affiliate programs, content keywording, topsites listings, ad programs, and the like.

Meta Description: Think Twitter-Length

For your description, write a short, one- or two-sentence summary of your site, and leave it at that. No need for long-winded, essay-question-esque responses! (Ha, I need this advice more than anybody, LOL.) Since the content in meta description tags may or may not all be picked up by a search engine (depending on character limits per individual search engine), you want to make sure the content in the tag is as short and sweet as possible.

Meta Keywords: “Meh”

The meta “keywords” tag used to be of all importance, and you used to stuff it full of all the keywords you thought people would search for and find your site with. These days…don’t bother even typing in <meta name=”keywords”> into your code.

Why? It’s vastly easier on you (and more intuitive for modern search engines) if you just use the keywords a whole lot in the text of your website. For instance, if your site is about beaded jewelry, use “beaded” and “jewelry” a lot in your content. Search engines will still find you, and maybe find you a lot more easily than they would if your site’s content had very few actual usages of your ideal search terms.

Meta Author and Meta Content-Type: Don’t Bother

I’ve never known either of these tags to make much of a difference in search engines or browsers either one. (In fact, it may be dangerous for you to put your real name in such a prominent place in your source code.) Plus, the content-type, while it may have mattered in the past for older browsers, likely doesn’t matter as much anymore with more modern browsers being used. My advice: don’t worry about either of these.

Use Your Title Tag As Well!

Don’t forget your <title> tag! Though it’s not a true meta tag, it will remind your users of what site they’re looking at when they look through their browser tabs. Also, many search engines search your title tags first, even before they search your content, so it’s well worth writing at least something between <title> and </title>.

Make it short and descriptive, like your meta description tag, and you’ll be well on your way to having a site that people actually visit. (Y’know, why we spend hours before a screen typing and clicking, blinking our bloodshot eyes in a vain attempt for rest? LOL)

Summary

META tags aren’t something to lose sleep over anymore, but some of them might be helpful supplements to your other SEO strategies for making your site known. Simply craft a meta description, spiff up your title tag with appropriate text, and you’ll be set in terms of META tags.

10 Ways to Make Your Page Look Professional

Last week, I discussed 10 “newbie” web design mistakes, and even showed you a page full of those mistakes, as cringe-worthy as they were.

Well, this week, to balance that out…I’m going to show you 10 simple ways to spiff up your page and make it look just a little better. These are all simple tricks that give your page just that little bit of extra detail, like a shined shoe or a little bit of jewelry for an outfit. Read on, and see what tricks you might be able to add to your webdesigning bag!

#1: Use Gradients and Shadows for Page Dimension

Any time you can add a little bit of 3-D to your page, especially if it’s an important page element like navigation or content, do so. Soft gradients, especially as a background, give a page a colorful backdrop without being distracting, and small shadows help a page element like a menu or content block “pop” off the page. (It also looks more modern.)


Fokal.com
The black-to-gray vertical gradient on the logo and navigation buttons, plus the dark gray-to-light gray gradient in the lower half (content section) gives just enough contrast without being too distracting.

HairStylesDesign.com
The “Popular Galleries” balloon has a slight drop shadow under it, bringing the page element just that much farther forward into 3D.


CollegeFashion
The logo has a glossy look over the text, painting a slight gradient effect over each letter; also, the navigation below the logo has a very slight gradient. (Not to mention the shadows behind the logo’s letters!)


WhoWhatWear
The bottoms of the logo letters, as well as the tops of the navigation’s letters, have a slight shadow effect that make the page sleek.

#2: Use Georgia Font

According to the New York Times, Georgia font is the preferred serif font for web designers–I personally like it for its soft and yet readable look. (It especially looks gorgeous at larger sizes and in italics…but maybe that’s just me. :D)

#3: Choose Colors that Go Together Well or Set Each Other Off Beautifully

Color scheme is one of the more important facets of your web design. If you’ve got a nicely-organized page, but the colors clash, your users’ eyes will not thank you. However, if the colors blend well or provide a touch of lovely contrast, you’ll have a much better user interface overall.


Freshome.com
Using little hints of the full rainbow in Freshome’s design makes it truly a “fresh” design, especially with white and gray to ground it all.


YouLookFab
The bright teal green of the striped shirt used as a background image, paired with crisp white and black (and a little soft gray), render a page that is attractive without being eye-dazzling.

#4: Blend Your Header with the Rest of Your Page

Gone are the days of a completely useless header image that has nothing to do with the way the rest of the page is designed. *…glances up toward my own blog header sheepishly*

Ahem! Pay no attention to that. Headers are now valid places to put navigation and other site information, so you don’t have to fill them with images if you don’t want to. See the examples below:


Unkno.com
Over at Unnecessary Knowledge, the header and the navigation are literally on the same horizontal lines with each other–just at opposite vertical edges of the page. This allows the focus to fall naturally on the content rather than the “frame” (the layout) of the site.


DesignShuffle.com
With a logo and navigation that don’t take up a lot of visual room, more space is left “above the fold” for content–always a good idea for content-rich sites, if you can pull it off.

#5: Employ Different Fonts for Highlighting Content

No need to go font-raving crazy, but using slightly different fonts in various contexts on your page can make your design be that much more interesting. I usually provide a simple contrast between sans-serif body text and serif headings, but the sites below do even more than that.


InteriorDesign
Let’s see, I count…4 different fonts just in this sample (logo, navigation, colorful headlines, caption text). Each one doesn’t compete with the others, but rather plays off them, accenting each bit of content. There’s a good blend of sans-serif and serif in this example, as well.


DesignReviver
DesignReviver’s site uses 3 different fonts–one for big headlines, one for body text, and one for small side headlines (right side of the page), which helps the user know which content is newest and which posts they also might be interested in.

#6: Make Your Links Interactive when Hovered Over

As of probably 2005, users began expecting interactive links, and the way we webdesigners can make that happen has changed some over the ensuing years. From simple a:hover states to Flash animations, designers have literally tried it all–now, the trend seems to be “simple and lovely” rather than “complex and crazy.” After all, what you’re trying to show the user is that they’re hovering over something they can click on; these sites below do a good job of that.


Freshome
Not only a page of lovely colors, but a sleek, animated navigation as well, making it obvious which category a user is hovering over. It’s not too flashy or over-the-top, but provides just the right amount of interactivity for a navbar.


Webmonkey
Though there are few category links in this navigation, hovering over them provides you an instant look at the articles in the category, which helps a user get to what they need faster.

#7: Specify Rounded Corners for Divs and Other Page Elements

At least for me, rounded corners instantly make a page look better–it’s like putting dress clothes on your site. It looks a little more polished and updated than square corners. (Not all browsers accept the “border-radius” rule yet, but you can use images to get around that.)


MakeupGeek
The rounded corners in both the page border (top left) and the navigation bar make this page a little softer and sleeker than it would be if they had gone with default square corners.

HomePortfolio
Though it’s very, very subtle, the rounded corner that divides the white content div from the gray background shows the designer’s attention to detail, and brings the page into the 21st century, as surely as if they’d switched from Times New Roman to…well, anything else.

#8: Design Sleek Icons and Simple but Beautiful Graphics

Thankfully, we don’t have to be detail-oriented artists to make beautiful graphics for our pages anymore–in this age of app icons that are more simple and to-the-point, our site graphics can be just as straightforward and iconic. In fact, that might make our pages even easier to use and navigate; for certain, they look a lot better than busy icons of the past!


Apartment Therapy
Site logos don’t need to make a recognizable shape to befit a site–in this case, the simple, waving orange line transmits a sense of playfulness and innovation just as much as a more complicated logo could, and in less time.


Appstorm
Not only are different types of content noted by different (big) icons, but even the sidebar has a few icons to make navigation easier. The icons are not multicolored or overly detailed either; they’re just basic white shapes or letters, with a solid-color background in a rounded shape. And the site’s logo is a simple lightning bolt–perfect for a site with “storm” in the name.

#9: Include a Little (or a Lot of) Texture

Texture is something I’ve always had a hard time incorporating in my page, because I can never find a texture that I’m really happy with. Yet I know that texture on a webpage gives your background, site headings, links, and even content blocks just a little bit more visual interest, like the examples below:


DesiretoInspire
The textured dark gray background, as well as the roughed-up edging along the top of the page and the uneven “paint” job on the logo, gives the site a literal “rough-around-the-edges” quality…it’s not too perfect and primped, yet it’s still forward-thinking in design. Great for a design site!


InsideFashion Blog
A grungy-textured background in darker colors, contrasted with a lighter-but-still-crumpled header and content div, make this page look like an underground newsletter of sorts, as if it’s truly out of the back pocket of a fashion insider…which is likely exactly what they were going for. 🙂

#10: Align Your Layout in the Center

Nope, not talking about centered TEXT; that was last week. *shudder* But centered layouts are so much the norm in design these days that left-aligned layouts are almost extinct. Users have come to expect a center-aligned page because it’s easier to view, especially on wider-screen monitors. That’s why it’s important to employ this mode of layout design for professional pages–it’s just easier to use!


Keep Designing
Strong contrast between background and content divs make this center-aligned layout easy to understand and draws the user’s eye straight to content.


HerCampus
Here, the background and the content blend a little more, but there’s still a good delineation between what’s decorative background and what’s real content. The user doesn’t have to look all over the page to try to find links and news.

Summary

Adding a little polish to your page may not be confined to these 10 tips, but certainly these design concepts fit into a more professional look. Try one or more of these out in your next design, and see the magic at work!

Road-Tested (and Robin-Tested) WordPress Plugins

As a blogger on dialup, I don’t have a lot of connection speed to test plugin after plugin. Instead, I spend a good bit of my time researching good plugins on WordPress help sites, and asking other WP bloggers what they personally use. Once I know the general community’s opinions and issues, as well as the opinions of closer blogging friends, I can then know whether the plugin is right for my own WP setup and needs.

In the process of all that research, vetting, and questioning, I have found 6 plugins that really help Crooked Glasses be all it can be, in the midst of all the other plugins available. I highly recommend each of these, as they have all made my blogging life much easier.

Akismet: Worth Its Weight in Data

Akismet, to be fair, came already installed when I loaded WP on my own server. But I have been so pleased with how it targets spam that I recommend everyone who hasn’t signed up for an Akismet API key to do so. (This is a completely unpaid statement on my part–I just really like the plugin because it works.)

Akismet plugin download page

Yet Another Related Posts Plugin (YARPP): Reaching Into My Archives For Me

Despite being named “Yet Another” related posts plugin, YARPP is the only one of the three “related posts” plugins I tested that worked for me. Not sure if it was operator error, faulty installation, or non-working programs on the other two, but YARPP came through with flying colors.

At the end of each single post, now, I have links displayed to other posts similar enough in content, without ever having to lift a finger. THAT is such a help, much more than I ever imagined. Now I don’t have to do huge, link-laden Glassics posts unless I just want to!

YARPP plugin download page

Wordbooker: A Way to Connect My Blog with Friends and Family

Thanks to Wordbooker, which automatically posts newest blogs to my Facebook, my close friends and family can now read my blogs with ease. This actually means a lot to me, to know that real-life people are reading my works and they can comment on Facebook about them.

(Wordbooker’s plugin updates do tend to unhook the link between my FB and Crooked Glasses, but all you have to do is go into the plugin’s settings and re-connect with Facebook, which takes about 5 minutes even over dialup.)

Wordbooker plugin download page

AddThis: Making Tweeting/Liking/Sharing SO Much Easier

AddThis, like many of the sharing plugins, has a tweet button and a like button–but it’s also infinitely customizable by adding other specific-site share buttons to your lineup as well (like Foursquare and Pinterest).

I also like that it tells you how “viral” your links have gone through being shared (via your Dashboard)–though Crooked Glasses hasn’t gone all that viral yet, I know that the potential is there and I’ll be able to track its progress.

AddThis plugin download page

Tweet Old Post: Tweeting from the Depths of My Archives

This wonderful little plugin digs back into my archives and auto-tweets older posts about every 3 or 4 hours, even when I can’t be online due to having to keep the phone line clear (or when I’m feeling sick/headachy, which is often these days). Thanks to this plugin, my older posts have a chance to get some Twitter love, and my blog’s Twitter presence stays fresh and updated.

This plugin and the aptly and funnily-named plugin below are likely the ones I have to thank for my Twitter following…just saying.

Tweet Old Post plugin download page

(Special Honors) Just Tweet That S**t: It Does What It Says!

Like Wordbooker does for Facebook, this plugin auto-tweets links to my newest blogs. It helps so much to have this automated, since I can’t always be online and logged into Twitter when my blogs go live.

The reason this plugin gets a special honor? Because I tried several auto-tweet plugins before this and none of them would authenticate correctly with Twitter. I was about to tear my hair out trying to find an auto-tweet plugin, and NONE of them would do it…but this one did!

Just Tweet That S**t plugin download page

Summary

If you run a WordPress blog and are looking for plugins to help your spam problem, link to older posts, auto-post to social media, or make sharing easier, I would highly encourage you to install these 6. I have found them to be reputable, without spam and without hassle. Amazing how a single plugin can change your blogging life!

Health Perils of Working on the Web

Web design and development can be fairly glamorous. You’re creating and maintaining tons of web pages and graphics that other users reference and link to, all with just a few key presses and clicks. (Or, if you’re a designer like me and have to use Backspace or Undo a lot, there’s quite a few more key presses and clicks involved. 😛 ). And it’s quite an ego boost to learn that your page is getting views from other people; suddenly, you feel like your 15 minutes of fame have started.

Most people who aren’t in the business think of it as an “easy” career or hobby. All you’re doing is sitting in front of the computer typing, right? Most of the work is in your mind–how hard can that be?

The Health Risks

But web designers and developers, along with all the other jobs that involve sitting for long periods of time working on a computer, are putting themselves at risk for several health problems, including the following:

  • Stiffness/muscle pain in the neck and back
  • Carpal tunnel syndrome
  • Arthritis in the hands and wrists
  • Eye strain
  • Sedentary lifestyle, leading to possible heart and joint problems, obesity, diabetes, etc.

Of these problems, carpal tunnel and eye strain are the most work-endangering; when you can no longer type or read your screen without pain or problems, you will not be able to work as a web designer or developer anymore. I remember my grandmother suffering arthritis and carpal tunnel when I was a child–her hands were literally gnarled up so badly she could barely hold anything, and to try to grip anything was agony. Typing was completely out of her range of motion. And eye strain is no better; it can lead to the need for new glasses much faster than normal, and it can also affect your long-distance sight whether you’re far-sighted, near-sighted, or blessedly 20/20.

I’ve suffered a number of these health problems ever since college, when my computer use went way up and my walking went way down because of injury. The amount of neck stiffness and eye strain I had, especially in college, led to bad headaches (and still does on occasion). Sitting for 10 straight hours coding a website–not the smartest thing I ever did, for several reasons. xD And these days, I find my wrists are more often achy than not. I worry I’ll end up just like my Nannie, unable to even uncurl my fingers or bend my wrists without wincing.

I’ve also seen how my imposed sedentary lifestyle (part choice, part necessity) actually contributed to loss of flexibility in my injured joints, especially my knees. Now that I’ve been doing weekly Zumba classes, doing physical activity, I notice that my knee joints are feeling just a bit easier to move. If I had not started doing more physical activity, who knows where my stiff and sore knees would have landed me?

Avoiding These Health Problems

Thankfully, there are ways we can avoid these types of problems without having to permanently stop doing the design and development we love. Just a few small changes to how we work, and where we work, can save us doctor visits and even later surgery!

Easing Tired Eyes

  • Set a timer for 20 minutes. For every 20 minutes of internet work, look away from your screen for 20 seconds at something 20 feet away (I usually try to look out a window if I can). This is the old “20-20-20” rule, taught for years in school.
  • Use a gel eye mask that can be chilled in cold water, especially after you’ve been staring at the screen for a while. I find that this helps the puffiness around my eyes as well as indirectly calming itching and irritation from long staring at screens. Plus, it forces you to shut your eyes and reduces the sense of ambient light, which might just make it easier to rest!
  • Turn down the brightness on your computer screen just a touch–I find that slightly dimmer computer screens are easier on my eyes than working with it on full brightness. Also work in a room that has an equal amount of light as your screen if you can. Working in complete darkness staring at a bright computer screen, for some reason, drives my eyes bonkers.

Helping Stiff Muscles

  • Add something to the 20-20-20 rule by standing up and stretching every 20 minutes, while you’re looking away from your computer screen. Be sure that when you stretch, you let your head go back so that you’re looking at the ceiling, and your arms are stretched up above your head and somewhat behind you. This gets some of that tension out of your neck, shoulders, and back (where most of mine ends up, at least).
  • If you can’t afford to stand up or don’t want to, at least let your head tilt back so that you’re looking at the ceiling for at least 20-30 seconds. Sometimes I even do this at stoplights. 🙂
  • Massage the sides of your neck and down into your shoulders, rubbing in circles, if those muscles are beginning to get sore. Anti-inflammatory medicines like Advil and Aleve are also good for helping soreness.

Avoiding Carpal Tunnel/Arthritis

  • Before starting work, and every 30 minutes during work, do the wrist and hand exercises which are so excellently detailed on eatonhand.com, a site for helping patients prepare for, recover from, and avoid surgery on the hands and wrists.
  • Design your office space, especially your keyboard and mouse setup, so that your wrists don’t have to be positioned at weird angles. And you might not need those ubiquitous wrist rests, either. Check this WebMD article on office ergonomics for more information.
  • Simply take breaks from typing. Visit a site that requires no typing and mostly browsing with the mouse (with one hand), and let the other hand rest. After about 10 minutes, let the mouse-using hand rest and switch the mouse control to the other hand. It might be a little awkward to use the mouse with your non-dominant hand, but your dominant hand will thank you.

Getting a Little Bit More Active

  • For every hour you work on the computer, try getting just 10 minutes of exercise. Walk around the office, do a bit of housekeeping (sweeping and picking up trash helps the most, with all the bending)–anything that gets you moving for 10 minutes. Your eyes and hands will also thank you for being away from the productivity machine for a little while.
  • If you’ve got the money and space, invest in a treadmill desk (a less costly DIY version plan can be found here). This ingenious invention combines a fairly sizable workspace with an actual treadmill underneath you, forcing you to walk to stay close enough to your desk. I don’t know if this would actually work for me, but at least I wouldn’t be walking for nothing!
  • Fidget while you sit. Even just wiggling your toes or trotting your leg can be good to just keep blood flowing around faster than glacier speed. Just make sure it doesn’t disturb anyone else working near you, of course

Summary

Working as a web designer/developer doesn’t mean you have to sacrifice your health. To be sure you can code happily ever after, you need to start now maintaining at least some healthy habits. After all, we webmasters don’t want to end up unable to type and unable to move from our chairs, right?

When and How to Use a Horizontal Drop-Down Menu

Before beginning this post, I thought I’d be all smart and helpful and write a tutorial on how to do a horizontal drop-down menu using CSS. That was before I Googled how to do it, and discovered that no less than five people had beaten me to the punch. 😀

I linked to those five tutorials (at the end of this article), and took a new tack: WHEN and HOW to use such a design. As with all styles of design, there are times where such a menu is appropriate and times where it completely breaks the look and functionality of your whole page.

Why Use a Horizontal Drop-Down Menu?

If you’re considering using a menu like this, you probably want to condense and simplify your navigation, or you want to use your sidebar space for something other than navigation (like ads, links, recent posts lists, etc.). Both are worthy goals–using as much screen space as you can closer to the top of your page ensures that more content can be displayed “above the fold,” so that the user does not have to scroll down.

Also, horizontal drop-down menus are great for decluttering a website’s look–somehow, it adds a sleekness that vertical navigation just never gives. If you’re looking for ways to neaten up the appearance of your site, such a menu design could be the very thing you need. And of course, if you already have a simple navigation (just a few pages in a couple of categories), then this look is perfect for your site.

When to Keep Away from This Menu Style

Just because you CAN do a horizontal menu with drop-down space doesn’t mean you SHOULD.

If you have just a few categories with lots of links in each one, you should not use this style–it will make your drop-down menu way too big and clunky on your page.

Also, if you have content high up on your page that you don’t want covered up at all (like sidebar widgets or important updates), I’d advise against this style, because your users will automatically be drawn to the menu and may never see your content.

How to Implement a Horizontal Menu Beautifully

  • Make your categories many and your links within each category few, so that your menu displays in a compact fashion.
  • Choose an easily-readable medium text size for your menu options (12-14 pixels for most fonts).
  • Make sure your link color and the menu’s background color are different enough from each other to be readable.
  • Don’t go crazy with link animations or graphics in your drop-down menu–just text links that match the colors of your site will be much more professional and usable.

Four Visual Degrees of Drop-Down Menus: From Worst to Best


#4. Not only is this menu HUGE, covering up much of the page underneath it, but its links are formatted in this weird, widely-spaced, almost tabular layout. It is visually confusing–everything looks the same, and it’s scattered all over the place.


#3. This menu is a little bit better–it’s big but doesn’t cover up the whole page underneath it. But its text formatting is strange; why all the space between each item, and why such huge font? Plus, the two top categories in bold are a bit vaguely worded, which means no one is going to click on them.


#2. This menu is more compact, with manageable font size and spacing, and a simple two-column link layout. But it still feels a bit “busy” with links.


#1. We have a winner! This menu is very compact, yet has big enough font size to read. Plus, it’s got high-contrast colors between the background and text colors, and its links are sorted alphabetically. Makes it very, very easy to find what you want, which is the point when designing a good navigation menu of any sort.

Learn How to Code and Design This Menu Type

AListApart (basics)
Onextrapixel (combines HTML, CSS, and JQuery)
CSSNewbie (VERY easy to understand–even I got it!)
Sperling.com (a little more jargon-heavy, but still a good reference)
MyCSSMenu (if you don’t want to fool with the code)

Font Series Wrapup: Fonts You Need for Your Toolbox

As an ending to this series of font-tastic posts, I am recapping some of the best fonts I discovered while doing font research. The five I have chosen for today’s post are, in my opinion, the most usable and easily-read of all the fonts in each category I wrote about (fancy fonts, sans-serif/serif body fonts, bitmap fonts, and symbol fonts). I hope you find them as useful and awesome as I have–I’ve already downloaded them all for use in my future designs!

(By the way, I provide links back to the articles I wrote for each category, so it’s easy to check through the articles and see if you agree with my picks. 😀 )

Best Fonts from This Article Series

Best Bitmap Font:

Ernest
Why? Because it provides the smallest and yet most readable text for itty-bitty graphics. I’ve long used it for link buttons, but it has a variety of uses around a website.
Best Symbol Font:

CD-Icons
Why? Because it has a ton of symbols–even symbols for special characters, like accented E’s, etc. It literally has a symbol for every character you can think of, and they are all useful in an icon-based design.
Best Fancy Font:

Dhe Mysterious
Why? Because it has a well-defined character set, and yet it has a beautiful wispy quality to it too…strong but soft. Great for titles and headings, but not too bold.
Best Sans-Serif Body Font:

Alido
Why? Because it’s not Arial, Verdana, or Helvetica, but it is still legible–it’s different without being tiring on the eyes after reading a page or two written in it.
Best Serif Body Font:

Timeless
Why? Graceful without being overpowering–and again, it looks different enough from Georgia, Garamond, and Times New Roman.

Summary

Fonts are, for me, one of the most important parts of web design, because a good font choice means that people can read your content (what they came for). Making a website beautiful AND easy to use/read is what webdesigners are all about, after all!

I hope that this font article series has helped you discover new fonts for your own site designs. It certainly has been fun for me to review all these different fonts (and find new favorites)!

Content Organization: Like Cleaning a Digital Room

Sometimes, when you’re developing a website, the sections of your website just fall into place. Say, if you’re creating a business site: you’d likely have a page called “About Us,” plus a page about each of your products and services, a page of affiliated businesses and links to their homepages, and a contact page. Fairly simple, straightforward page creation, which leads to simple, straightforward (and compact) navigation.

Unfortunately, dividing up your site’s content into pages and sections is not always that easy. Take my City of Heroes fansite–I’ve mucked around with the navigational sections for so long and tried so many different organizational styles, and I still haven’t gotten it where I want it. In my case, there are so many sections, and some of the sections kindasortamaybe overlap…not to mention that some pages that seemed like they’d be better as huge conglomerations of subject matter now seem like they need to be separated out into 4 or 5 different pages.

To try to fix this problem, I delved into the concepts of making individual pages and dividing up your navigation into understandable (and user-friendly) sections. Here is the step-by-step process I have come up with for fixing navigation and page division:

Look at Your Site as a User Would

This is very difficult for web developers and designers to do–looking at the site as if you’re not the one who made it is unsettling, at the least. But you need to have a fresh perspective on your site if you’re having trouble developing intuitive and understandable navigation for your users.

To gain some insight into this process, try browsing a site you’ve never been to. Doesn’t matter what it is, just browse it. While you do this, note any frustrations with the site’s organization. Does the navigation make sense? Is it easy to find individual pages just by clicking through the navigation, or have you already had to resort to the search box (if there is one provided)? Are the pages arranged into logical sections, or do the sections seem to have arbitrary labels?

Experiencing a new site like this forces you into a user’s perspective–for a short while, you have to navigate a site you’re not intimately familiar with. Now, go back to your own site, and explore the exact same way you just did. Does the navigation you’ve crafted, the sections you’ve devised, really make sense, or does it only make sense to you because you developed it? Be honest with yourself here.

In the case of my City of Heroes site, I have much of my navigation sorted by topic, but then I have a couple of non-topic labels (“New Players”, etc), which doesn’t fit the rest of the site’s organization. It makes it difficult to know which sections are most appropriate for pages to reside in–isn’t everything I publish more for new players, after all? If I want to fix this navigation problem, this content section problem, I need to take away the New Players section and make a more topical section (or sections) for all the pages that are currently within it. (This would be me practicin’ what I’m preachin’.)

Look at All Your Content, All Together

Sounds like a huge, time-consuming job, but trust me, it really, really works. Copy-paste all your written content into one large, simply-text file. (If you have photos as most of your content, congregate them all into one folder, and it works just as well–any place where you can look at all your content as a whole instead of in navigational pieces is the goal.)

Why do this? Because it will enable you to see what all your site encompasses in terms of content. In my case, even though I have 70+ pages of content on my City of Heroes fansite, copy-pasting it all into one file can show me where my articles for new players overlap themselves, and what articles don’t really fit the purpose of my site (like the “Humor” section, which, according to some users, isn’t very funny at all).

Doing this for your site can help you weed out what content doesn’t really “go” with the rest of your site, as well as figure out how it could be grouped better. Maybe those 3 tiny pages of useful links could be grouped together on one page instead; maybe that huge page featuring several novella-length articles could be broken apart and made into a section instead of a single page.

This exercise is especially helpful for figuring out where you have duplicated content on your site without realizing it. For instance, I had a fansite back in 2005 that I was trying to fix up, and I discovered during this very process of copy-pasting and scanning my content that I had 3 pages of almost exactly the same information. I don’t know how this escaped my attention, but it had, and so I could actually delete two of the pages and fix up the remaining one. Not only can this help you with your content, but it keeps you from doing unnecessary work later on pages that don’t need to exist!

Start Fixing

Combining pages together or breaking them apart can be time-consuming as well, but if you’ve got all your content in one file like the last step suggested, it makes this task a lot easier. Rearrange, rewrite, delete, or add content as necessary, and if you need to, break your content into totally-new sections. Yes, this will take some time, but if you can make your site better and more efficient by doing this, then you need to do it–better and more efficient sites are more visited and enjoyed sites.

For my City of Heroes site, breaking the New Player section into possibly two or three sections based on topics is the big concern. But along the way, I could also tighten up content that needs a rewrite, and delete some places where I’ve accidentally duplicated content. There are also some places in the site where I need to update my information to make it current with the game environment.

Upload Your New Content and Navigation

I’d advise not to debut your new content organization until you’ve warned your users about it. It would be very disconcerting for a user to be browsing and suddenly–whoops!–that page they were just viewing isn’t there anymore!

Instead, give notice a week ahead of time that you will be scheduling “site downtime” for the reorganization process, and make the site inaccessible for the time that you’re going to need to upload everything. You can put up a temporary index page that tells the users what’s going on and what date/time you expect to have everything done, without any links to any content yet. (Don’t forget to edit the index page back to the way it was at the end of the process!)

Summary

When you have a site, be it a large informational site, a small business site, or anything in-between, you need to have a good sense of how content is divided up and how it is accessed. If it’s too confusing for users, they won’t return. Reorganizing your site, just like reorganizing your room, is key to helping your site function better and be more welcoming!

WordPress: Doing Pages versus Posts

On a typical WordPress blog (and possibly other blogging software as well), you have the option of doing Posts or Pages for your content. But what’s the real difference?

Many beginning bloggers do not know, and I was confused when I first started using WordPress. “My posts are going to appear on web pages, so why do I need to bother using something called a ‘Page’ with a capital ‘P?'” I wondered.

So I set about learning the differences for myself. Here is what I discovered:

Pages

Pages are static–they occur outside “the Loop,” or the time-sensitive code that produces the Posts. Because they’re outside the normal blog post structure, they have to be accessed through the “Pages” links and sidebar modules instead of falling in chronological order with Posts.

Because they’re not in “the Loop,” Pages look kind of silly with a date on them. After all, you can’t find them by searching through the date-sensitive archive anyway. Also, Pages don’t usually have a need for the comments template, unlike Posts. If and when you design a custom blog theme, don’t just copy-paste your Posts template as your Page template–if you don’t want a date to show, and don’t want comments to be allowed on your Pages, remember to take out those bits of code before you publish.

I find that Pages are better for static information that isn’t time-sensitive like Posts tend to be. Content like your “About Me” page, a links page, an FAQ, or product information looks better on a Page and can be more easily accessed from anywhere on the site.

Posts

Unlike Pages, Posts happen within the time-sensitive framework of “the Loop,” at least in WordPress. Because they happen in “real time,” so to speak, having the date included as part of your Post template makes it possible to search for Posts through the Archives pages of your WordPress site. Apart from needing the date included, Posts also more than likely need a Comments template so that visitors can post replies.

Posts seem to be best for regular blog entries and time-sensitive information like site updates, rather than general site information like “About the Author,” or more static information like “Product Specs.” Also, since Posts are more searchable through the Archives pages, Posts are better for your main blog content.

Making the Choice

If you’re still confused about which format to put a certain block of content in, ask yourself the following questions about the content you’re working with:

“Does this content need to be readily available to users no matter how long it’s been since I published it?”
If yes, you likely need to put this content on a Page.

“Is this content only going to be relevant for a little while, and then fade into old news?”
If yes, you likely need to make it into a Post.

Summary

I hope this quick rundown of using Pages versus Posts has helped you figure out what type you need more of for your site. WordPress offers this diverse functionality as a way to help us bloggers and webmasters publish content–we just have to know how to make use of it!

Dress Your Page

I’m probably the last person who needs to write a blog article equating web design with fashion design, since my own fashion style isn’t exactly “runway” quality. I choose quality looks over trends any day. Who cares if something is “so last season,” if it fits and it looks good? I’m usually not “up” on new trends and don’t care to be.

But I do something similar with my web designs. I like “classic” web-design looks, but for me, “classic” means sometimes reverting back to tables instead of divided layers, and sometimes doing really small graphics in order to help the page load faster. As with my fashion sense, my web-design sense likes simple and fitting designs rather than designing to fit the latest trends.

The two fields are really quite similar, but web design is often seen as something too technical to understand, too detail-oriented and encrypted with strange code. This blog post seeks to show even the newest web designer how to truly “dress your page” as if you were dressing yourself.

The Role of Color in a Web Page

Color on a page, just like color in your outfit, draws attention or deflects it away. A black business suit paired with a white shirt underneath looks clean and trustworthy on both sexes; change that white shirt to a red shirt and you’ve instantly got a different vibe, of ambition and boldness. Wearing a brightly-colored shirt with a neutral-colored pair of slacks draws attention to your upper half and to your face, while wearing the neutral color on top and bright color on the bottom draws attention to your lower half instead.

In general, bright colors attract users’ attention, and muted colors fade into the background; you can use this to your advantage in a web page. Bright colors are best for accentuating new features on your site, such as a new article, a new page, or new functionality. They also infuse freshness into your site, like a fresh change of clothes.

But bright colors can also look too “young” and frivolous for a web page that needs a stable and solid look. Just like brown, deep green, navy, burgundy, black, ivory, and white lend solidarity to your look (and to doctors’ and lawyers’ offices), they can make your page look sufficiently important, sufficiently knowledgeable.

Using color on your site is partly about knowing where color needs to be placed, and which colors to use. If you have a personal site that needs to speak of your personality and your love of life, a selection of two or three bright colors, combined with one or two neutrals, might be just the spice and excitement the page needs. And if you have a business site that needs to maintain its professionalism, for instance, you can use a brighter version of one of the main colors to draw attention to new information without making the page look too colorful to be taken seriously.

Does Texture Matter? Surprisingly, Yes

Just like cotton, silk, and leather feel differently to the wearer, texture also appears on web pages, but not in a tactile sense. But don’t underestimate the subtle power of textures in a webpage.

For example: Ever visited a web site that only had solid blocks of color as its design? No patterns in the background, no patterns in the header or footer–just solid blocks of color? It might have looked neat, but it likely felt a little…bland. No visual interest existed except the play between colors. (Okay, okay, I admit it, my designs are like this more often than not. What can I say, it’s a “safe” way to design.)

Sadly, visually boring sites don’t get visited often because they seem like they’re old news; there’s nothing to set them apart from other sites, nothing to keep users returning. That’s what I struggle with in most of my sites, all in the pursuit of making a design that looks uncluttered and easy to read.

Then there’s the opposite problem: the “pattern overload.” Not only is there a tiling background pattern on the page that’s all zigzaggy, but there’s a pinstripe pattern on the header, and a crosshatched pattern behind the navigation. Add in some curlicues on the Links page and some polka dots on the footer and you have a very confused page. This is visually overwhelming to the user, and it makes it hard to enjoy the content when your eyes are swimming in patterns.

When you have a visually confusing page, users don’t even get to focus on the content because of your design, and it may turn them off from revisiting your page later. Having an interesting page is great, but does absolutely everything have to be sparkly or moving text?

So, how can we as designers use texture well? Do as the fashion designers do–put your most interesting pattern on your smallest feature. Ladies carrying snakeskin purses or wearing plaid shoes is a classic way to introduce pattern, because it’s just a “POP” of pattern rather than an oversized coat or dress screaming its pattern to the skies. Likewise, web designers can use pattern to draw attention to new features, to grace just the tops or sides of their pages, or to float lightly in the background, adding visual interest without overwhelming the content.

Also, if you’re nervous (like me) about using texture in your web page, just do a tone-on-tone pattern based on the background color of your page. Something I could do easily with Crooked Glasses’ background is to do a thin, diagonal pinstripe pattern with a lighter blue-green and a darker blue-green, alternated back and forth. It would be simple, possibly too subtle for most users to pick up on, but it would be just a little hint of pattern. It’s all about experimenting–if you don’t like the effect after all, there’s no harm in trying again!

Bejewel Your Page with Icons

As I’ve mentioned in a previous post, icons are great, but they can easily overwhelm a page, just like too much jewelry can literally and visually overwhelm a person wearing it. Too many bangles, rings, necklaces, earrings, ankle bracelets, belts, chains, and toe rings, and you end up looking like you robbed a jewelry store but forgot a bag to carry your loot in. Similarly, web pages with too many icons on them look busy and hard to read–who wants to hover over each of those icons trying to figure out what to click on?

One way web designers can display icons is to be selective about which icons they display. If you’ve got a link to every single social profile you’ve ever owned, that’s great, but you may not want to display them all on the main page. Such a list might be better if it was sorted into various categories and listed on a separate page instead. If you absolutely need to display some on the front page, have just a small, “most-important” icon list there, and then link to another page with more of them.

Also, you can arrange icons into a graphic shape (triangle, circle, diamond, or star pattern, for instance), and display them that way. (You could either make them all into one image and use an image map to do the links, or you could position them all using CSS–I much prefer the image map, though, since it’s static and won’t change with the different padding and margin “interpretations” between browsers. Looking at you, IE and Firefox. XD)

Whatever you do, be sure that at the end of your design process, your icons decorate but don’t over-decorate your page. You want your users to make sense of them, after all. And you might even remove an icon before you publish your page, just like moms used to teach their daughters to take off one item of jewelry before leaving the house.

Styling Your Webpage’s “Hair” — The Header

The header of a page is the first thing to load, and it’s the first impression of our site that users get. Yet, users don’t spend much time looking at the header while they’re on our site–they’re focusing more often on the content. It’s the same way with hairstyles–our hair makes an instant, initial impression on someone, and then that impression fades into the background as the person gets to know us better.

Hairstylists and web designers both spend a lot of time on making their creations give off a positive statement, and yet not too strong a statement that it is distracting. They also both work to make their designs memorable (though I’m not sure those crazy beehive ‘do’s should be that memorable). We as designers should work to make our headers just like good hairstyles–framing our content (the “face” of our site) rather than getting in the way.

To do this, we make headers that clearly state our site name and subject matter, but do it in a cool way (either through images or text). Whatever else your header has to offer (navigation, affiliate buttons, announcements, etc.), make that clear, as well, but don’t crowd it with information. Leave most of the information to your content area and sidebar(s) instead, and keep your header styled but not over-styled. Too many colors and too much text in your header is like too much hairspray and too many hairpins–it ends up being a mess atop what could be great content if people could get past the top of the page!

Fitting Your Footer Into Great Styles

Footers, like shoes, come in all sizes, all colors, all styles…and all heights. Some shoes are laughable because of the height of the heel; some websites’ footers are laughable because they seem to want to cram all the site’s information into a 300-pixel-tall space across the bottom of the page.

Now, I don’t have a footer fetish, but I like to see a well-designed end to a web page. I used to never pay attention to it, and I still style mine very simply, but I like to see what other people do with the footers on their web pages. A page without anything concrete at the bottom of the page to “anchor” it to its site feels a little naked, or unprotected–not even a “Back to Top” link? Sad!

Now, if it looks like an encyclopedia entry is included in the footer, it looks way too complicated for most users to mess with. If, instead, there is some author info and maybe a few pictures (or info feeds from other sites), it looks tidy while still being informative. If you can, try to avoid large blocks of text in your footer, and instead do a bulleted list or just provide a few links to pertinent information. Other content, like icons, thumbnails of relevant pictures, social media connections, or even comment boxes can be great in a footer.

Also, if a footer is jammed with colors and patterns that have nothing to do with the rest of the site, I’m often confused–“wait, what site am I visiting again?” You don’t want to confuse your users with a footer that doesn’t seem to match, even if all you’re putting in it is a couple of links. You want to make sure your footer blends in with the rest of the design.

A fashion example would be wearing red shoes with blue jeans, a green shirt, and a gold bracelet or watch–the shoes don’t match anything else in the outfit, so it looks strange. Instead, if you echoed the gold color of the jewelry in your shoe color, it looks a lot more cohesive. Echoing one of the colors of your site in the footer or one of the patterns from another part of the design pulls it all together without making the header and footer complete copies of each other.

Summary

Styling your web pages is not as difficult as some guides make it out to be–in fact, much of our graphic design skills are skills we practice every day when we stand in front of the closet piecing together an outfit. While it’s nice to stay informed on trends, really simple guidelines are about all you need to make a page look like a supermodel clothed in CSS.