Tag Archives: user interface

Monday in the HTMLab

Cleaning Up Layout Clutter

Leave a comment

Just as I seem to be a severe pack rat in real life, I’m also a hoarder online…but I’m not the only one out there. There are many examples of cluttered layouts floating about on the internet these days (mine are likely prime examples).

What do I mean by “cluttered” layouts? Any site design that makes it hard for users to find what they need could be classified as cluttered. After all, in a cluttered room it’s difficult to find the items you need (as I know from laughable personal experience).

Today, I’ll share with you the four major ways we webdesigners and developers accidentally clutter up our layouts, and how to declutter them.

Extremely Busy Background Images

Background images are just that–they are meant to create a fitting backdrop for the main attraction, our websites’ content. But it’s very easy to overdo a background image and make it a dizzying sight. For example:


This doesn’t look too busy when it’s on a page by itself…


…but when it’s tiled and used as a page background, it looks more like one of those 3D images than a webpage background.

This kind of background image can make browsing your site difficult to do–your text-based content can be hard to read, or even impossible to read, and any images you’ve posted won’t attract the same kind of positive attention.

How to Fix This

You don’t have to sacrifice interesting design to make your backgrounds easier to take. These design strategies can help:

  • Use colors that are closer together in shade so patterns are subtler.
  • Try a soft gradient just along the top or sides of the page.
  • Use a larger, low-contrast pattern instead of a small, high-contrast pattern (sounds counter-intuitive, but works!).

Content, Content, Everywhere!

I’ll admit it–I cram my pages full of content. *cough* sidebar *cough* I’m a content hoarder, and I almost need an intervention. 😛

Content is wonderful; it’s the reason we all make webpages in the first place. But when we overload our users with tons of content crowded onto one page, whether it’s images, links, text, or anything else, we make our pages about ten times more cluttered.

Just like a cluttered room with too many items to look at, a page cluttered with content makes it hard for users to know where to focus first. If there are sidebar links, footer paragraphs, dozens of images, etc., all on one page, how can a user easily find what he or she is specifically searching for?

You could argue that this shot of my own sidebar on this blog is a bit cluttered–and I would agree with you.

For one thing, the text of each content box is really small; for another, the small headings don’t attract the eye as well as they might. Thirdly, the one social media link looks a bit lost, even at the top of the page.

Though at first I thought this design looked very tidy, now I see that the text looks a little haphazard and it’s hard to determine what to look at. And, as I’ve noted on the image itself, the Twitter feed is very low on the page, and the “most recent posts” box is overflowing with the titles of each blog entry. My inner pack rat strikes again! LOL

How to Fix This

Thankfully, you don’t need to take all the content off your page to declutter it. These tips can help:

  • If your sidebar is overflowing with content, try moving a section or two to its own page, and simply link to the new page on your sidebar.
  • Use icons instead of text links (where possible) on your header, sidebar, and footer.
  • Shorten text link descriptions to as few words as possible.
  • Halve the number of content items displayed per page (i.e., if you have 20 content items per page now, try 10 and see how that changes the page look).
  • Enlarge the font size of your remaining content items/sections. (Again, sounds counter-intuitive, but larger text will command more attention and not look quite so messy.)

Unnecessary Information On Your Main Page

On your index page, do your users need to have the full-text version of your site’s history in the sidebar? Or do they need to see every single image you have in your site’s archives? It’s important to think about the purpose of your site, and what information the users are visiting your site for.

I’ve made the “unnecessary information” mistake dozens of times over, especially when I’m first crafting a site. I always start thinking, “But wait, I’ve got to put [this random piece of information] over here, and what about [this other bit of randomness]? I’ve got to find places for them all on the main page!”

To snap myself out of this mindset, I had to think about what was most important to my users–and this self-check could work for you, too. Think about what your user really needs to see when he or she first hits your page. What is most important to them? What do they need to click on or view first?

These items, whether they’re welcome/mission statements, Twitter updates, your most recent post, etc., need to be the only things to view on your landing page. Anything else needs to be put on a separate page, or hidden in some way unless the user clicks on it to open a section up.

How to Fix This

Your landing page doesn’t have to be bare, but a little information goes a long way–try these changes:

  • Determine the 3 most important things your user needs to see/interact with when they first come to your site. These 3 things need to be showcased; other information can be put on other pages or relegated to less prominent locations on your landing page.
  • Use clear text headings on your landing page so it’s easier for users to find information they need.
  • Divide up the information visually (images or CSS formatting) to make visual searching of your page easier.

Scattered Social Media Icons

It is important, if you’re making any kind of website, to make sure your users can interact with you and your site on social networks–you don’t want to skimp on that. But it’s equally as important to make sure those social network links don’t take over the rest of your page.

I found this out when I designed my 11th layout for WithinMyWorld.org–I carried over some social media icons from Version 10 and put them on the main page. Little did I know that unlike Version 10, Version 11 did not really have a good place to display icons. What looked crisp and clean on Version 10 looked like misplaced clutter on Version 11; it looked so bad, in fact, that I took the icons down within hours of changing over the layout.


This screenshot from Version 10 shows a nice, neat place for icons to live, right above the navigation.
Version 11, however, has no real place for icons to live on the page, because it creates a bad contrast with the background image.

How to Fix This

These all-important icons don’t have to be banished from your page altogether; some of these hints may help you figure out where they belong.

  • Think about where you’d like your social media icons to be BEFORE you design your layout. Design around them rather than sticking them on as an afterthought. (This really helps–trust me!)
  • Make the icons larger rather than smaller. This helps them stand out more on your page, so they’ll look less like clutter and more like a vital part of your site (which they are).
  • If the original icons’ colors clash with your layout, you can always make icons to match your layout, with a font like Socialico. Either include it as a custom font in your CSS, or make them into images–both ways work!

Summary

Making the extra effort to declutter our pages can make a huge difference to our users–it can positively affect the way your user views your content, and could even ensure return visits or new visitors via word-of-mouth. Thus, a tidier site can make for happier viewers and a happier webmaster, too! 🙂

Monday in the HTMLab

Making a “Good” Layout Better

Leave a comment

Web design is not always a simple matter of knocking something together in Notepad, putting pretty pics with it, and uploading it. Sometimes, as we well know, layouts just end up looking…blah on the page.

Take the following layout, which I was trying to craft for my upcoming webdesign tutorials page.


(click for larger size image)

This, in terms of a layout’s pure functionality, works. It displays what it’s supposed to; nothing’s out of place, misspelled, or obviously buggy. And yet it just looks…blah. The icons look too small, being dwarfed by the text and the header image. Not to mention there’s a lot of open, unfilled green space. It’s just…empty.


(click for larger size image)

This was my first attempt at fixing the emptiness and too-small icons of the first layout. I resized the icons and tried to reposition them where they wouldn’t just be hanging out in the middle of nowhere…and yet, again, I ended up with a problem. This time, the issue is that the layout looks cluttered–there is nowhere for the visitor’s eye to rest, because the icons stick out like sore thumbs and the header image looks off-center. And again, the layout has a bunch of empty space, especially on the left side. Sigh…


(click for larger size image)

Third time is the charm, I believe! This time, I centered the header image over the two-column layout below, leading to a more symmetrical look. I also included the navigation icons WITHIN the image div itself, and, After much tussling with HTML and CSS, got them to be positioned where I wanted them. (Who would have thought margins and padding would kick up such a fuss?) But the result is a much cleaner and more understandable look. It might not be “the BEST LAYOUT EVAR OMG,” but it’s much better than the one I had when I started out!

Sprucing Up a “Blah” Layout

If you’re having similar difficulties with a layout of yours, you might not need to go back to the drawing board completely. Instead, you might benefit from just reworking a section or two, as I did with my troublesome layout. Here are some general tips:

Change the Positioning of Graphic Elements

If the visual balance of your layout looks off, or it feels cluttered with graphics, try moving some of your images/icons around a bit. Try them positioned in a completely different place on the page, or even going a different direction (like vertically instead of horizontally, or vice-versa). You’d be surprised how much a little strip of icons can affect a page, as I found out!

Take Away Text, Add Icons

If, however, your layout feels heavy with text, you may be able to transform some of those words (especially textual navigation) into iconic navigation. (In my example layout, I challenged myself not to use text links in my navigation unless it was absolutely necessary, so that it wouldn’t detract from my content.) It may not seem like text is overwhelming your page, but it can easily swamp your visitor with information overload. An icon, by contrast, looks simple and neat.

Experiment with Content Positioning

Does that old left-aligned sidebar look dated and tired? Then maybe all it needs to do is flip over to the right side! Placing content in slightly-unexpected areas can change the look of the whole layout; moving smaller blocks of content around within your layout can also affect your users’ experience. Keep this thought in mind every time you design: “What do I want my users to see/click first?” This should be closest to the top of the page, and your header should “point” toward it, drawing their eyes to it.

Work With Your Fonts

Sometimes, a layout can seem too crowded simply with a too-small font, or a font that isn’t very clear. If you’re having difficulty displaying content attractively, as I was, a font change may be in order. Trying a bigger point size, a clearer font, or even a different class of font altogether may help clear away the “text-cluttered” look.

Summary

You may feel like scrapping a layout that you feel is too ugly to save, but don’t be so hasty! Experimenting and reworking just bits and pieces may just save you a lot of time and hassle designing a totally new look. I was about to give up on that example layout of mine, till I experimented around and found a clean, simple new way to put the same elements together.

Monday in the HTMLab

Does Your Site Suffer from “Interaction Overload?”

Leave a comment


See complete post @ TheOatmeal.com

As this hilarious comic from TheOatmeal makes clear, there’s a difference between making your site available for social media interaction, and spamming your visitor with a bunch of social media requests. These days, it seems, we as Internet users all want to be so interactive with the sites we visit, and we as webmasters want to make sure we’re connecting with our users as much as humanly possible.

However, we as designers can easily overdo it. If we try to push too much interaction on our sites, we may end up pushing away more visitors than we bring in. It’s great to be interconnected–don’t get me wrong–but we can’t afford to let “interaction” and the pursuit of it overshadow the content. We want our users to enjoy our content, not be driven away by dozens of popup forms and social media sharing opportunities.

A Quick Interaction Checklist

  1. Do you have social media buttons on your navigation, every post, sidebar, AND footer?
  2. Do pop-up boxes appear after users do or click anything on your site, asking if they want to be added to feeds/like you on Facebook/follow you on Twitter/etc.?
  3. Do you have tons of flyout content that randomly appears from the sides of the page, covering up actual page content while demanding that your user interact with the flyout?
  4. Can your user not even scroll down a little without being visually assaulted by images for all the social media networks you control are a part of?
  5. If your user clicks to exit your site, does a final warning message pop up saying something like “Wait! You haven’t liked us yet!!!”

If any of these sound familiar (maybe even the tongue-in-cheek ones)…your site might have “interaction overload.”

Fixing Interaction Overload

It is possible to tone down the amount of interaction opportunities on your site without losing visitors’ feedback. Here are a few ideas:

  • Instead of having large social media links scattered all over the place, include just one or two instances, in common-sense, highly-visible places (main navigation or header is always a good spot).
  • Alternatively, if you need to have social media buttons on every post (like most blogs these days), make the icons as unobtrusive as possible–big enough to click on, but small enough not to detract from content.
  • Make sure that pop-up information, like newsletter alerts, optional forms, etc., do not restrict access to the rest of the site’s content. (The notable exception here is if you want your users to sign up for an account with your site before they access any content.)
  • Above all, do not force interaction between users and the site, but make it readily available–make forms, social media sharing, and alerts highly visible on the page itself, so that users are free to click what they want.

Summary

Getting more users to follow, like, and use your site doesn’t mean begging in the form of several thousand social media requests. Provide ways to interact without looking desperate, and you’ll attract more users who will get more honest value out of your content. It’s kind of like dating, in a way–act too desperate, and you drive everyone away, but being comfortable in your own skin draws everyone near.

Monday in the HTMLab

Looking at Our Sites with Fresh Eyes

Leave a comment

In this age of service websites and apps popping up all over the place, inevitably we as Internet users find that services duplicate each other. (Take the social-bookmarking sites Stumbleupon and Del.icio.us; they are pretty much identical in function.)

When this happens, we tend to weed out which service we’d prefer to use with something that seems more like an instinct than a conscious thought process. We evaluate identical sites, and indeed every site we choose to visit, based on their usability, available community, site structure, and design, and from there we choose whether we want to stay on that page or visit another site.

What we might not realize, as web designers/developers, is that our own sites are constantly being evaluated in the same manner, whether we offer an identical service as another site or not. Our users are often just as discerning as we are (and sometimes more so); if we’re having a harder time with receiving and keeping visitors to our sites, we may need to reevaluate how our sites look, function, and serve in users’ online lives.

In this article, I’ll compare and contrast StumbleUpon and Del.icio.us, studying their virtues as well as issues, and how we can learn from their individual troubles and successes as web designers and developers.

The Identical-Service Conundrum

I’ve had accounts at both Stumbleupon and Del.icio.us for ages, because both places used to be pretty good at saving my bookmarks socially, and I used to have different buddies on both sites’ networks. Now…well, I’m looking at getting rid of one of them. It’s not just because it’s annoying to sign into two sites and keep bookmark lists the same across two sites. It’s also because of the QUALITY of the service I’m getting from each site.

For me, it’s pretty easy to choose one to drop, because the usability of one of the sites (Del.icio.us) has gone downhill sharply, while the other one (Stumbleupon) has stayed pretty much the same. These are the issues I experience with Del.icio.us:

Del.icio.us Problems

  • Takes forever to load, even on fast connections–and you might as well not even try on dialup. (I waited FORTY-FIVE MINUTES for it to load on dialup, with nothing showing up at all and nothing else trying to load at the same time.)
  • Login process works about 40% of the time; otherwise, it either throws you to an error screen which doesn’t help you, or just hangs until you finally get tired of waiting and refresh the page.
  • No real way to connect with people on there–you can “follow” them, but it doesn’t really provide a good way to interact, not like it used to.
  • Useless feature: “stacks,” which basically do the same thing as tags. Why bother?

Stumbleupon, however, is not free of issues itself, as you’ll see below:

StumbleUpon Problems

  • Instead of saving the “real” address of a page, it saves a “StumbleUpon”-shortened link address that tells you nothing about what you’re visiting.
  • When you click on a “StumbleUpon”-ified link, an annoying black bar across top of the page tells you everything about StumbleUpon and its service, but takes away from the content you were looking at.
  • It’s very hard to add bookmarks if you don’t want to use the black bar–the “Add a New Page” feature is buried at the bottom of the left column on your profile page

When I compare and contrast the two services, this is the full list of pros and cons:

Del.icio.us

Pros

Can save “real” links
Not hard to add links, once you can finally login
Doesn’t have a browser-wide feature that detracts from your Internet usage

Cons

Can’t even login at all sometimes
Text-based link format, which should load easier but doesn’t
Networking/community is pretty much nonexistent
Useless feature: “stacks”
Does not offer a way to randomly browse Internet sites
Tag system can get unwieldy and hard to manage if you have a lot of links
Link-saving process sometimes hangs the whole browser

StumbleUpon

Pros

Can login easily, even on dialup
Pictorial link list, so you know more of what to expect from each link
Better ways to network with others
No useless features
“Stumble!” button easily browses your interests
Categorizing takes a little longer, but helps other users as well as yourself
Link-saving process takes seconds, even on dialup

Cons

Not easy to save “real” links
Hard to find how to save links, but once you do, it’s easy
Takes over your browser window with the black bar when you’re logged in

Given this compare-and-contrast table, there are a lot more pros for using Stumbleupon than Del.icio.us, and the pros are very important structural and design features rather than surface-level perks. The cons, while measurable, are bearable. Meanwhile, Del.icio.us seems to have serious issues with the login and link scripts hanging up, which kills the effectiveness and utility of the site itself. Why would anybody use a service that won’t even let you login most of the time?

What Can We Learn from These Pros and Cons?

As web designers and developers, there are several important lessons we can learn from this compare/contrast example:

  1. Make sure all the scripts that make your page function actually work, as close to 100% of the time as possible.
  2. Do not accidentally “hide” important/useful features or info from your users, either by putting links to them on obscure pages or making the links appear in small text.
  3. Do not take over a user’s whole internet experience with your service/app, without an easy option to opt-out.
  4. Make sure that all the features you’re developing for your site actually need to be developed for better functionality.
  5. Don’t make changes to your service/app and not let your users know.

The main takeaway is this: we always need to be mindful of the user’s experience when we design and maintain our sites. It’s hard for me, as the Internet mommy to withinmyworld.org, to step back and see my electronic baby objectively–but that is exactly what I must do, and what we must do as purveyors of Internet content. We must be prepared to judge our sites as our users will be judging them, looking critically at how we’ve designed our sites’ layout, graphics, code/scripts, and content to see if there are places we should make it more efficient, elegant, and easy to browse.

Think of it this way–if we don’t take the time to evaluate our sites objectively, then we will never know if our users are having difficulties with our sites, because we won’t have any users!

Monday in the HTMLab

10 Ways to Make Your Page Look Professional

Leave a comment

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!

Monday in the HTMLab

10 Newbie Design Mistakes

1 Comment

We’ve all done it, at one point or another. Out of ignorance or out of a need to hurry up and get a page published, questionable design choices slip out onto the Internet.

Most of what I’m going to reference in this article is stuff I’ve done knowingly and willingly, either because I didn’t know any better or because I thought it “looked cool.” (Animated GIFs…oh, so very cool. *cough cough cough*) In either case, I didn’t research my design choices well enough; I should have been going to other people’s websites to see what they were doing, or at least reading web design articles to find out best practices.

To best show off these problematic design choices, I decided to combine them all in a terrific cacophony of web design. I call it…the “Really Bad Page.”. Click the link, and try not to wail with despair.

The Bad Page’s Features

“Times New Roman” font style

Times New Roman, especially in this web 2.0 age, is very “default” and uninteresting on a webpage, since it is the default font when no font is specified in a CSS style. This makes the website look uncared for and un-updated.

All centered text

Centered text does not always “balance out” how your text looks. In this case and in many others I’ve seen across the internet, centered text is just hard to read and looks awkward on the page.

Thick borders around your tables

I used to love how thick-bordered tables looked on a page…but then again, that was back in 2001. 😛 The bordered table might be okay for true tabular data, but not for random information; it now just looks junky.

Animated GIFs (especially for an “Email Me” link)

Animated anything on a page these days tends to make your page look too young and kiddy. It can really de-professionalize a look. (If that ain’t a word yet, I’m making it one, because it works. 😛 )

No padding/margins in your divs

See how the table runs right up against the links? This is caused by no padding or margins used in the divs. Everything within the div expands out as far as it can go, and when there’s no padding there, it just makes your content look messy and harder to read.

Narrow left-aligned layout

Most users are used to seeing wide center-aligned layouts nowadays–itty-bitty left-aligned layouts are a visual shock, and may not display well on larger-resolution monitors (i.e., they will look too small).

Too much white used in the background

I’ve been guilty of this from time to time, but using white as a background color can look too “empty” if there’s not a lot of content on the page, like my sample page.

Using low-quality images (especially JPGs)

A JPG, or any image, that’s of this low quality looks unprofessional and makes it hard to tell what the picture’s subject even is. See other examples of low-quality JPGs on SixRevisions, Ransen.com, and PanoHelp.com.

Too-wordy link descriptions

Who wants to click on a link that takes several lines to describe? When you have a lot of words in your link text, it makes it look very messy and unkempt.

2-dimensional and square design

A website isn’t printed on paper, but this design looks like it could be printed out very easily. There’s very little visual interest at all, and no deviation from the invisible straight-sided square/rectangle box.

Next Week: Turning the Look from Newbie to Pro

Next week, we’ll be looking at 10 ways to make your page look professional. Never be tormented by centered Times New Roman text again! 😛

Monday in the HTMLab

When and How to Use a Horizontal Drop-Down Menu

Leave a comment

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)

Monday in the HTMLab

Font Series Wrapup: Fonts You Need for Your Toolbox

1 Comment

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)!

Monday in the HTMLab

Content Organization: Like Cleaning a Digital Room

1 Comment

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!

Monday in the HTMLab

WordPress: Doing Pages versus Posts

1 Comment

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!