Tag Archives: user interface

Monday in the HTMLab

Spellcheck Your Graphics!

1 Comment

It never fails: I come across a website with really beautiful site graphics (like a site header), only to see that the site name or description is misspelled on the graphic. (Either that, or I catch an error in my own graphics. LOL) A couple of examples, below:

amazingnatuer
visitmywebstie

Errors like these pop up all the time across the Internet, usually because we get caught up in the throes of website creation, or we’re in a hurry. Thus, letter reversals (like the above) and other misspellings can slip through the cracks and end up posted for everyone to see.

This IS a Problem!

The Internet these days is chock-full of such errors. But, unfortunately, misspellings (especially in site graphics) make your site look unprofessional, and therefore less likely to be trustworthy. It’s not just English majors and English teachers who have a problem with misspellings, either; many users will be turned off by such errors, because it makes one’s whole site look amateurish or ill-made.

Thus, it’s worth taking a little extra time to spellcheck first–after all, we don’t want to turn visitors away from our sites because of a few little errors!

How to Spellcheck Graphics (Don’t Worry, It’s Easy)

Most image editing programs do not have a spellcheck function built in, so you’ll have to do it yourself. Don’t worry, though, it’s not a hard process!

  1. Before you save your image, read the text on it aloud–this alone will help you catch 90% of your errors, because you’re taking the time to look at each word while you read it.
  2. If you are unsure of a word’s spelling, search for it using a search engine, or look it up through Dictionary.com.

Just these two simple steps can remove most errors–it just takes a little more effort. Additionally, if you don’t trust your own spelling, have a friend or colleague who is good with spelling check your image before you publish it. A second pair of eyes always helps!

Spelling’s Not the Only Thing that Counts

Next week, I’ll demonstrate another important language point in web design–grammar! (It’s not just for school anymore–it’s for communicating your ideas correctly!)

Monday in the HTMLab

Make SURE You Test Your Site in All Browsers! A Cautionary Tale

Leave a comment

As a self-taught designer, I’ve learned the hard way that sometimes our best-designed layouts don’t always look right in all browsers. I’ve gotten used to testing everything I build in at least IE, Firefox, and Chrome, and occasionally I’ll even use sites like BrowserShots to help me test in many, many other browsers/versions of browsers as well.

However, this point newly hit home with me just this week, as I shopped online for a new bra from LaneBryant.com.

The Problem: A Missing “Add To Cart” Button

I browsed and quickly found what I was looking for–the rest of the site was designed very well. Then I went directly to the merchandise page…but for love or money I could not find the “Add to Shopping Cart” button. I must have hunted for about 10 minutes, going over the page in what felt like pixel-by-pixel increments. “Either I’m just ignorant, or the button ain’t here,” I found myself thinking after a while.

bra-page-firefox
I knew by looking at this part of the page (and being a webdesigner myself) that the button should be right below the sizing chart. But, as you see in this screenshot, it was nowhere to be found. Below this lay only the footer of the site, nothing else.

Finally I went to the brand’s Facebook page and asked about it; the person running the Facebook page got back to me very quickly and courteously, and suggested either clearing my browser cache or switching browsers. I cleared the cache with no luck, so reluctantly I switched from my beloved Firefox (newly updated to v.19) over to Google Chrome.

bra-page-chrome
Sound the triumphant fanfare! There the button was, right where I thought it would be, just below the sizing chart! In moments, what I thought was a digital impasse was resolved, simply by switching my browser. I completed my order and was happy.

…But, if I had been an ordinary user unused to “browser display issues” like this one, I would have just thought you couldn’t order anything from the site, and closed the window. Therein lies the danger for sites that don’t display right in certain browsers–they can lock out crucial functions of your site without you knowing until someone reports them!

Moral of the Story: REALLY Check Your Site in All Browsers

Seriously. Don’t just do a cursory layout check to make sure the layout displays right–make sure all your scripts and functions work the same in all browsers, too. This is important; otherwise, our sites won’t work for everyone, and we can easily lose viewers and business!

Monday in the HTMLab

Easy-to-Code Navigation that Scrolls With You: It’s Possible!

6 Comments

These days, navigation that follows a user down the page is a very attractive and user-friendly design. When a user doesn’t have to scroll all the way back to the top of the page to get to the navigation, and doesn’t even have to fool with clicking a “back to top” link, it’s a wonderful thing.

But it’s a little challenging for us web designers to get it done, as I discovered while researching for this blog post; there are plenty of designers looking for ways to make this happen in their own layouts, and there are just as many solutions in various programming languages.

Eventually, I just opened my trusty Notepad++ and started knocking together some code myself–and I accidentally found a very, very simple CSS solution.

Robin’s Sticky Nav Bar: The (Code) Recipe

stickynavbar

Click to see my simple “sticky nav bar” demo! (opens in new window)

To make the above page navigation work, it took about an hour of experimenting with HTML and CSS, creating a dummy layout and the like. But finally, on a whim, I stuck the following bits of code into my navbar div:

#navbar {width: 900px; height: 40px; padding: 0px; position: fixed; top: 0px; background-color: #0f00a1; box-shadow: 2px 5px #000555;}

The code in bold above is the important bit to see here; this was the magic wand that transformed my plain ol’ horizontal navbar. Once you style your own navbar the way you want it, all it takes is two code bits–“position: fixed;” and “top: 0px;”–to make it stick to the top of the page.

And, to make it centered like the rest of my layout, I made sure to put my navbar div within a container div called “wrap,” styled like so:

#wrap {width: 900px; margin: 0px auto; padding: 0px;}

The following HTML code is what I mean by “putting the ‘navbar’ div within the ‘wrap’ div:”

<div id=”wrap”>
<div id=”navbar”>
<span id=”sitename”>my dummy site name</span> <a href=”#”>about</a><a href=”#”>faq</a><a href=”#”>products</a><a href=”#”>services</a><a href=”#”>support</a><a href=”#”>home</a>
</div>
<div id=”sidebar”>
more code here, etc…
</div> (this ends the “wrap” div)

That’s really all the magic there is to it! (This design works in Firefox, IE, and Chrome; I have not tested it in any other browsers, but it seems that these three handle it identically, so I have hope that it works with all browsers similarly. If you find that this code doesn’t work in a browser I haven’t tested, let me know!)

One Small Caveat:

Fixing your navbar to the top of the page with “position: fixed” works great–but only if you don’t mind your navbar being the very topmost thing to display on your layout. If your ideal navbar is located beneath your header image to begin with, but then sticks to the top of the page when your user scrolls down, then just using “position: fixed” with a different pixel value in “top:” won’t make that happen. (Believe me, I tried–it was fail. I ended up with a navbar just stuck randomly in the middle of the page blocking the content. :/)

So, what to do if you want a navbar that will stick to the top of the page, even if it’s not at the tip-top of the layout to begin with? Well, from what I found in my research, you’re likely going to have to use Javascript/jQuery to make this more complex navbar. Here are two forum/discussion sites which explain these methods much better than I ever could.

jQuery and Javascript Methods for Sticky Nav Bars

Summary

“Sticky” nav bars are sleek, clean, user-friendly–and fairly easy to achieve with these three methods presented here. I hope at least one of these helps you with your next layout!

Monday in the HTMLab

A Crash Course on Modal Windows

Leave a comment

Up until I read the book on webdesign I reviewed a couple of weeks ago, I had no idea what to call those new pop-up windows that dim the screen behind them so you have to deal with them before you can get back to browsing. Through that book, I learned that they are called “modal windows,” and I was intrigued. I did some research on them, and I found that they are kind of all the rage these days in webdesign.

But what constitutes a modal window, and when should you use them? And, most importantly, when shouldn’t you use them?

Modal Windows: Basically, The Internet Version of a Dialog Box

According to the Wikipedia entry on modal windows, a modal window is any small pop-up box (or “child window”) that a user must interact with before they can carry on with their normal browsing of a website.

You have likely seen these kinds of windows on modern websites before. They can be used to alert users to something they need to fix on a form, allow users to sign up or log in, or to display a gallery of videos or images in larger format. (Most often, I’ve seen them used to report updates to a site, or to advertise a site’s newsletter, social media links, etc.)

How to Make Modal Windows

There are two main ways to create a modal window for your website; WebDesignerDepot shows the HTML5 and CSS3 method, while Queness.com shows the jQuery method. Both are perfectly valid, though the Queness example requires more detailed Javascript/jQuery code knowledge, and the WDD example is on the bleeding edge of code standards at the moment.

Alternatively, you can have a modal window coded for you; here’s a DHTML modal window script/plugin from DynamicDrive, and here’s the TinyBox Javascript modal window script.

When Should You Implement Modal Windows In Your Designs?

According to Smashing Magazine’s article on modal windows, a modal window is great for signup and login forms, as well as site alerts (such as a form being improperly filled out), and enlarged display of images or videos. All of these site functions don’t necessarily need a separate webpage, as this article’s author points out, and so putting the information on an appearing and disappearing window can declutter your page. (Additionally, using modal windows for search functionality is presented as an idea.)

I would add that modal windows could be used quite effectively as part of an online teaching system, i.e., making a one-question-per-window question & answer test, which requires the user to type in an answer and submit it before moving on to the next question, without leaving the screen you’re on. Also, modal windows could be helpful with visual or auditory assistance settings on a webpage, such as increasing font size, adjusting visual contrast, translating the text to another language, or allowing the text to be read aloud.

When Should You Choose Not to Use Modal Windows?

As both the referenced Wikipedia article and the Smashing Magazine article point out, modal windows have faced a good bit of criticism for blocking regular browsing. I know I find it annoying when I’m just surfing along, minding my own business, and then the page suddenly goes dark except for a little window in the middle of the screen that begs for my attention. (That’s one reason I drafted the post about intrusive page alerts.)

The general consensus seems to be that unless your information is absolutely critical to the user, there should not be an unexpected pop-up on your page. (Those of us who came of age in the “drive-by spyware download” age of popups are especially trained to hit the “X” button on any popup they see, so restricting the amount of popups on your page is a good thing.) Thus, modal windows would best be used in user-generated events, such as a user clicking on a “signup/login” link, or a user clicking to “Enlarge Image” or “View Video”, etc.

I would add also that if you’re building a mobile version of your site, you’ll probably want to avoid modal windows on the mobile version. When I’m browsing the Internet on my iPhone, I notice that modal windows either don’t open properly or don’t dismiss properly. (It might be just my big fat fingertips, but I’d wager I’m not the only Internet user with that problem! LOL!)

Summary

While not as annoying as the traditional “popup window,” modal windows should still be used with care; it’s easy to go overboard and risk your users avoiding your site because of all the screen-darkening dialog boxes. However, when properly implemented, they can make site processes easier on you, the designer, as well as sleeker and quicker for the user–a win-win!

Monday in the HTMLab

Stop Coding This Right Now, part 6: Intrusive Page Alerts

1 Comment

I personally find it very annoying when I first land on a webpage, only to be greeted with the following pop-up announcement, called a “page alert.” They appear right when you load the page and look something like the following images:

newsletter

offers

chat

4thmessage

contentfail

omgjustread

Okay, all kidding aside, these page alerts can get mighty annoying for people trying to use websites. They feel like a needless grab for attention, and they can even drive away visitors who would otherwise have stayed on your page to get information.

Why are Page Alerts Annoying?

These days, we all surf the Internet generally looking for information, as quickly as possible. But page alerts slow browsing down–they are a visual shock to the user, because it’s not something most websites do. Shocking websites can be fun, but in this case, the shock is unpleasant.

Not only is this alert disconcerting, but it’s also an inconvenience. Usually, page alerts dim the page behind them and make everything else unclickable until you do something with the alert box itself, either clicking the Close button, filling out the offered form, or clicking “yes/no.” When you put this kind of alert on your website, you’re essentially blocking the user’s ability to access your site until they do what you tell them to. A little bossy and controlling, methinks?

How to Get Your User’s Attention Without Being Annoying

  • Use social media updates. Whatever you have to announce, post it to your Facebook page, tweet about it, etc.–make sure you use all the social media channels you can to get your announcement out there. And put something about it on the main page of your site, too, preferably with differently-formatted text or a small eye-catching graphic.
  • Put short updates as near to the top of the page as possible. Keeping your updates succinct and as visible as possible makes it more likely that people will read them and get the information they need from them.

Simply put, you don’t have to resort to annoying “OMG-look-at-me!!!” tactics to get your visitors’ attention. Actually, the best thing you can do is to provide information clearly, in an easy-to-read format, and make that information accessible in as many ways as possible. Your users will thank you!

Monday in the HTMLab

Stop Coding This Right Now, part 2: Nonsense Navigation

1 Comment

It used to be all the rage–it used to be part of every webmaster’s toolbox. To have an uncluttered, sleek-looking layout, we all used to make our layouts look something like this:


Looks pretty cool, right? It’s easy on the eyes, if a little amateurish (because this was one of my first attempts at doing a design like this).

But there’s a big problem with this layout, and it’s staring us in the face.


There are no descriptive words in the navigation. None at all. It’s just Roman numerals. Tidy and clean it may be, but it makes no sense to the user upon first landing on the page. What do you click on to get to the page you want? There are no hints.

Why Sensible Navigation Matters

More and more, our sites are being used for informational purposes rather than just places to display our skill at Photoshop and coding. To meet that need, we as designers and developers need to make our site as easy and quick to use as possible.

The problem? When we’re busily designing and coding a layout, we might not think that having to hover over an image-mapped navigation (like the example above) to find out what you’re about to click on is a pain. But to our users, it’s one more obstacle in getting to the information they need.

Think about how we ourselves use websites. We don’t like it when a site doesn’t “make sense” logically or doesn’t make content clear and available. So why should we inflict that on our users just for the sake of making our navigation “pretty” or “uncluttered?”

Making Navigation Both Logical and Tidy

Here are two ways to make navigation look good AND easy to understand:

  • Choose explanatory icons where possible; there are many great symbol/icon fonts out there that can make wordless navigation still understandable. My current favorites are Socialico and Modern Pictograms.
  • Simplify and shorten the text of your navigation links as much as possible without losing the meaning. For instance, instead of labeling a link as “back to home page”, just simply label it “home”.

You can even combine icons with a simple text label underneath them if you so choose–that can look just as clean as the icon by itself. Whatever style of simple and elegant navigation you choose, you’ll definitely have happier users!

Monday in the HTMLab

Stop Coding This Right Now, part 1: Autoplaying Music

Leave a comment

When you’re first building a website, you usually want to make it an experience for your user. You want it to be awe-inspiring, enveloping, amazing. You want the user to browse your site for hours, enjoying every moment.

How do you achieve that encompassing web experience, you ask?

Definitely NOT by having music autoplay as soon as the user loads your page, the same song looping forever, un-mute-able, un-pause-able.

Why is This an Issue?

Autoplaying music might be a great addition to webpages, except for the following three truths about Internet users.

Users generally…

  • Have their own music going while they surf
  • Have more than one tab open at any given time
  • Want to be able to customize their web experience, i.e., with pause buttons, links to change font size, etc.

Autoplaying music, with no pause/stop buttons visible anywhere on the page, thus offends users on three levels. Not only is there mysterious music playing, usually at an ungodly volume, clashing with the music you’ve got going, but you’ve got to hunt through all your tabs to find and eradicate the source of the annoying sound. And when you finally find the maddening site, you can’t pause the music, stop it, or even lower the volume–it’s just THERE.

The only cure for autoplaying music is to leave the site entirely, and most users will be all too happy to click that Close button. Thus, autoplaying music loses your visitors almost as soon as they hit your page–not what you want, as a designer and developer!

Are There Any Ways to Gently Incorporate Music into Your Webpage?

There is a trusted way to make music on a webpage infinitely more bearable–make sure you have a visible audio player (complete with pause, volume, and stop buttons), and make sure the music doesn’t autostart when the user loads the page.

Draw attention to this little audio module with special formatting, and leave it at that. Your users will find it and use it if they so choose–all you have to do is leave the choice up to them. That, my friends, will make your visitors so much happier than an uncontrollable loop of tinny music drilling its way into their brains.

Monday in the HTMLab

Design Around Your Content

Leave a comment

We’ve likely all seen examples of websites that could hang in a museum, as visually appealing as they are. Such feats of graphic strength amaze both users and other webdesigners, who may wish to imitate or pay homage to what they see.

But, at least in my experience as a designer, it IS possible to go overboard with the “visual art” part of the design, and forget all about what those graphics are supposed to do–frame the website’s content. In a way, we webdesigners are creating usable art, with heavy emphasis on the “usable.”

Today’s post focuses primarily on designing around text, images, and social connectivity, as these are the three major types of content on the Web these days. Each type of content must be handled differently, as you’ll see below!

Designing for a Text-Heavy Site

For a site with lots of text (ahem, this blog and others like it), you want to make sure your header, footer, and sidebar are as unobtrusive as possible, while still making your site easy to navigate. Having a fairly thin header, possibly with across-the-top navigation included, and well-organized but uncrowded sidebar and footer is a good idea–it keeps the rest of the site simple while letting the text content shine.


Larger pic of GeekyPosh.com

This design on GeekyPosh does a great job of combining the header and navigation into one seamless whole, making the latest post visible without the user having to scroll down at all. The blue ribbon running across the page neatly divides “content” from navigation, without making it look blocky. Additionally, the background texture is also subtle enough to lie behind the text without any visual confusion.


Larger pic of Jenn.nu

While the header image on Jenn.nu is larger, the thin strip of navigation below the header makes up for it–combining not only navigation but social media links into one easy-to-read, accessible “bar” below the image. In this case, the large header image does not detract from the site’s purpose, as it’s still easy to scroll down a little and begin reading.

When designing for text-heavy sites, you also want to make sure your text and background colors contrast strongly (like white and black) so that your text is easy to read. (Nothing’s worse, for instance, than having to squint at the text or highlight it just because the designer thought taupe text on a tan background looked good.) Both GeekyPosh and Jenn.nu do a great job of making their text colors highly readable against their background colors.

Designing for an Image-Heavy Site

A site with mainly images as its content needs plenty of visual space around each image–maybe not a full page of space, but a good amount of space so that separate images don’t run together.


Larger pic of Hark! A Vagrant

Hark! A Vagrant, with its emphasis on visual webcomics, uses both plenty of white space in its layout, and a few samples of the artist’s embellishment on its navigation links. The white space makes it easy to take in each individual comic; the navigation images give the site its own personal, memorable stamp.


Larger pic of Pinterest

Alternatively, image-heavy sites can make the sidebar and footer utterly unnecessary, and combine header and navigation into one bar, a la Pinterest. This kind of site also benefits most from neutral site colors that don’t take attention away from the images themselves–hence, Pinterest’s beige/gray/occasional pinkish-red color scheme.

Designing for Social Connections/Conversations

Since social connections and conversations are part of many sites these days, we all want to make it easy for our users to connect with us and our sites.

The best thing we can do? Make our comment forms, tagboards, social media links, guestbooks, etc. very easy to find. We need to feature any important conversation links or social media buttons at the top of the page or as close to the top as possible. (Alternatively, we can put such links on a scrolling sidebar/header bar that makes it clear how to connect and converse with the site owner and other users.)


Larger pic of Whimsical.nu

Whimsical.nu’s comment form gets it very right–a big, easy-to-read form that doesn’t force all the text to be 8pt tall and squished together. (A personal pet peeve of mine is too-tiny text in a form space–you end up unable to read what you’ve typed in!) Plus, the visual space is used well, and the form is actually designed to blend in with the site instead of looking like a cookie-cutter afterthought.


Larger pic of PopURLs.com

Upon hovering over links on PopURLs, not only does a content preview show up, but you also get a little box out to the left or right of each link that reads “Share | Clip.” You can then choose either of those options easily with just a move of your mouse (or a tap of your finger). This makes it so much easier to spread the site’s content across the Web, and interact with other users who have shared or clipped the particular item of content as well.

Summary

Beautiful, visually attractive designs are wonderful–but what’s even more beautiful to the user is a well-designed and usable site. Taking into account readability, page organization, and convenience for the user is perhaps the most important part of designing a page; our designs should frame the content rather than overpower it.

Monday in the HTMLab

Break Out of Web Design Cliches

Leave a comment

We’ve all fallen victim to them, as web designers. After a while, a certain style or structure of site layout becomes second nature, and you just begin to design every site the same way regardless of content. Either because it’s easier or because it’s familiar, we can all fall into the “web design cliche” trap…but we don’t have to be trapped by it forever!

Common Webdesign Cliches, Illustrated


Full-size screenshot

While the above image I’ve made is rather tongue-in-cheek, this fairly well describes several of the design cliches I’ve seen in the last few years. (Sadly, some of these are the same ones I find myself relying on, so I’m kind of preaching to myself today, too. :P)

For instance:

900-Pixel Two-Column Layout with Floated Divided Layers

As you see in the above screenshot, the old faithful 900px two-column layout looks sharp and clean, but somehow…a little bland and overly confined, too. In this age of mobile screens and bigger screen resolutions, should we be confined by this limited-width design anymore?

I will admit it’s an easy design to make and it’s very familiar…I almost want to say “if it ain’t broke, don’t fix it.” But then again, it might BE a little broken for our tablet and smartphone age, when it can’t shrink and grow with our various screen sizes.

Blue, Gray, or Black Layout Colors…but Mostly Blue

Don’t get me wrong, I absolutely love blue, and I love using it in layout designs. It’s just that about 70 million other designers apparently love blue, too, and think that it’s a great color for their websites as well.

Along with gray and black, blue is generally overused on the Internet because it’s a “safe” color, a “sleek”-looking color. There are definitely instances where blue, gray, or black may be called for in design, but these days a “safe” color choice can make an otherwise awesomely-structured layout look less than original.

Huge Header Image


I’m as guilty of this as anybody–making a wide, occasionally awesome header image for the top of many of my layouts. I got used to doing this in webdesign about six years ago, and it’s been just plain hard for me to imagine a site which doesn’t use a header image of some sort.

But when you have this much visual space at the top of a layout, even if you’ve got a fairly eye-catching image, you’re not really drawing any attention to your content. Nor is it giving your site a good first impression, graphically speaking. (This has been a very hard lesson to learn for me, but it’s a necessary one from a user’s standpoint.)

Huge, Empty Footer


Footers are great little page-enders. They give your users ways to navigate your page without scrolling all the way back up to the top, as well as including extra links and info that don’t need to be front and center on your page.

Yet many of us web designers have gone a wee bit overboard when it comes to footers, trying to make everything BIG and important-looking, and usually ending up with the above result: a very spacey, empty-looking end to a page. If you’ve got a small site and don’t really have a lot of info that needs to be in a footer, it can even look like an unintended space at the bottom.

Gradient Background Image

Ah, gradients! I love them, so much…and yet they, too, can look generic. We designers have often used gradients to give a slightly dimensional effect to our websites, but they can very easily become a design crutch, too. We can begin to depend on them for backgrounds, when perhaps another kind of background effect might look better.

Simpler is better, most of the time, but in this case, it’s almost too simple–it doesn’t brand your site or add much visual interest. And, in the case of mobile browsers, it might never even be seen, not in the way you intended; spacing issues can throw off a gradient background image and make it render strangely behind the text.

Left-Aligned, Spaced Out Navigation

This style of navigation began life, most likely, as an “ease of use” design choice. It still is very easy to use and easy to look at, especially when you have a lot of links in your main navigation, but you still need your navigation area to look organized.

But what about sites that might not have that much navigation, like this example? For smaller sites, the left-aligned navigation adds almost too much white space, and takes away from the space that the content could expand into as well. You end up with a large dead space in the middle of the layout, if you’re not careful.

Moving Away from These Cliches

Making different design choices doesn’t mean you have to completely rethink everything about the cliches I’ve mentioned. Instead, you can make small or medium-sized changes to the cliches themselves, like the ones I describe below:

Instead of A Two-Column Layout…

…Think about a three-column layout (two sidebars, either flanking the content or both out to one side of your content), or even a one-column layout with all your regular sidebar stuff in the footer or across the top. A three-column layout could work well for a big, media/content-driven site; a one-column layout would likely work best for a small personal site.

Instead of Left-Aligned, Spaced-Out Navigation…

…You could try a series of icons for navigation on the right side of the page, or text navigation strung across the top of the page. Maybe even try a navigation bar that scrolls along with the user as they move down the page, especially if you have long pages. You still want to make sure your navigation is very easy to find and use, but making it neater and more tightly-organized can only help the process.

Instead of Blue, Gray, or Black Layout Colors…

…Try other colors, possibly used alongside blue, gray, or black to make it a little less jarring. A dark burgundy could give subtle punch to an otherwise gray layout; a bright splash of pale yellow or green could liven up a black layout.

And if you really want to break out of the color cliche, try “strange” color combinations; recently on my main domain and its subsites, I’ve tried combinations like navy and peach, deep red and bright periwinkle blue, pale green and deep purple, etc., with success. (It all hinges on how much or how little you use each color; using a bright or vibrant color is great for drawing attention to new or featured content, for instance, but it’s not great for dousing the whole layout.)

Instead of a Huge Empty Header or Footer…

…Make your header or footer retractable (with jQuery or a similar language), where the user can “fold” it up out of the way with a click when they don’t need to view it. Or you can use your header as an advertising space for your most accessed/favorited content, and your footer as ad space for other webmasters’ sites. Anything that uses that space as a content holder rather than dead space!

Instead of a Gradient Background Image…

…Check out what kinds of subtle, site-branding patterns you can use instead. You don’t have to have an animated GIF background image (God forbid!); you can try a small tiling symbol that represents your site, done in subtle shades that blend nicely with your overall layout’s colors. (For instance, for my main domain, I could use the stylized sun icon as a small tiling image in a slightly deeper or lighter shade of burgundy than the background color, adding a little design texture but not too much.)

Summary

Safe and familiar designs don’t have to trap us, as designers; sometimes, we just have to be willing to step outside our design “box,” just a little, changing the cliche just enough. Even the tiniest of changes can get our design Muses going again!

Monday in the HTMLab

The Dumbest Thing I Have EVER Done in Webdesign

Leave a comment

I’ve been prone to a few boneheaded design/development decisions since I began teaching myself HTML in the fall of 2003. We all have those moments, as webdesigners and as human beings–we all have huge foul-ups that we look back on later and laugh.

But this one, as you’ll see, takes the cake for “dumbest design ever;” it was July 2005, a scant year and a half after I had begun webdesign, and I attempted something I’d never done before (and haven’t done since).

The Infamous “Pink Layout”


This was my fourth layout for my domain, WithinMyWorld.org. Yes, yes, I know, you’re probably recoiling from your screen in horror right now. xD

Why might I consider this the “dumbest” design choice I’ve ever made? There are actually a few reasons:

  1. This layout used a color I absolutely abhor. I have hated pink, especially this Barbie shade, since I was a little girl, and I think my hatred for the color bled into the layout.
  2. I put in several images on this layout, but they were used in strange places (even underneath the content), which ultimately distracted user attention from the important bits of the site and made content difficult to read.
  3. I flung the navigation far to the left in this layout, as if it was in “Time-Out” or something. Users ended up having to hunt for the navigation instead of easily being able to click around my site.
  4. The largest text on the screen (specifically, “Within My World” and “Navigation”) used Scriptina, which is a gorgeous font. Unfortunately, I made it very difficult to read, especially the way I have it formatted with drop shadows and the like. Combined with the images and eye-searing color choices, the layout became just too “much.”

Basically, I went overboard with this layout in every way–I tried to stretch my designing wings and ended up about knocking the nest out of the tree, it seems. xD

How Can We Learn from This?

Acknowledging a foul-up is the first step to learning from it. Now that I’ve used this as a negative example, how can we learn better design from this?

Choose colors carefully.

When trying to choose a thematic color for your site, make sure the color fits your site and doesn’t detract from your content. In my case, the pink of this layout was not only an unfavorite color, but was also an overpowering color, taking away the attention that my content deserved.

It also didn’t fit the purpose of my site–this color belongs more on a fashion and beauty site/blog, or a breast-cancer awareness site. Color does more than just sit on a page; it symbolizes your content in ways you may not even be aware of. Making the most of those color associations can help your users categorize and enjoy your site more.

Use layout images to highlight content.

In this layout, I put images everywhere but where they needed to be. Nothing draws the user’s eye to the content–instead, your eye roams all over the place, not finding anywhere to really settle.

Instead, place detailed, eye-catching images within your content to further explain it, or place a few symbolic images in your header to make your site’s purpose clear without being distracting.

Put navigation in a highly-visible spot.

Don’t do what I did and push your site navigation out to the middle of nowhere. Navigation, like content, needs to be readily available so that users can actually USE your site. I kinda forgot about that when I was designing this page, and my site suffered as a result.

Ensure that your fonts are readable (even the decorative ones).

Beautiful fonts are awesome, but only when wisely used and formatted. Like I described earlier, Scriptina looks lovely, but I didn’t format it and use it to the best of its potential. What could have been graceful and light ended up chunky and almost illegible in parts.

When you’re choosing fonts for your site, whether it’s part of a decorative header or part of your page’s font selection, make sure your users can read them and that they won’t detract from the words those fonts are printing on screen. Those fonts are meant to communicate, not just look pretty!