Stop Coding This Right Now, part 3: Horizontal Scrolling

December 10th, 2012 by , in Monday in the HTMLab
Tags: , ,

We all want to design unique and memorable websites; it’s a worthy aspiration for any web developer/designer. But you don’t need to stoop to horizontal page scrolling to make your website stand out from the rest. In fact, it’s much better for your visitors if you stay as far away from horizontal scrolling as possible!

Horizontal Scrolling, Defined

When the scrollbar that should be on the right side of the browser window appears at the bottom of the window instead, that is horizontal scrolling. The content expands out to the right or left instead of flowing down the page like most webpages do today. See the following examples I made:


Looks like a normal webpage…except that the scrollbar is below the content!


The content scrolls to the right, rather awkwardly; it’s almost like the site didn’t display correctly. Very confusing for information reading, too!

Why This is So Annoying to Users

The reason horizontal scrolling is a designing no-no: it’s not how most websites operate. Most content runs vertically down the page. Thus, your users are momentarily confused about how to navigate your site, and if they get fed up enough, they’ll most likely leave. It’s simply not worth it, from a user’s standpoint, to try navigating around a weird site that doesn’t even have its scrollbar in the “right” place.

This is Tempting, but Don’t Do It

I know we all want our content to be easily seen “above the fold,” where the user doesn’t have to scroll at all. But trust me, having a little vertical scrolling is infinitely better than trying to implement strange horizontal scrolling. Not only does it look weird, it’s more work for the designer to code, and it’s more confusion for the user to try to adapt their browsing style.

Bottom line: We as designers should not force the user to work harder just because we want to be “different” and “trendy!”

Try This Instead: Content Modules

Instead of having your content stretch horizontally forever and ever, try a 2- or 3-column content design with several boxes of content arranged in a grid pattern, like the following samples:


This is an example of a two-column grid layout…

…and this is an example of a three-column grid layout.

You don’t have to go completely Pinterest-esque, but at least this would get more of your content up above the “fold.” Just make sure to keep that page free of horizontal scrollbars!

no comments

Itty-Bitty Bitmappy Fonts

February 6th, 2012 by , in Monday in the HTMLab
Tags: , , ,

Big, beautiful, fancy fonts are awesome for making huge first impressions on a user. They’re like wearing a bold-patterned coat or a brightly-colored dress–they instantly grab attention. But the itty-bitty details on a website design help “finish” the site, just like jewelry or shined shoes give an outfit a more polished and put-together look.

Today, we’ll be looking at several itty-bitty fonts, called “bitmap fonts,” that can help do all sorts of small decorative tasks around your website. Labeling link buttons, crafting social media graphics, doing copyright text or watermarks, and even making up parts of hovered navigation can all be done using one or more of the fonts I’ll cover today.

Bitmap fonts are generally best used at smaller sizes, so today’s previews will have two sizes of each font. The larger font is more to show you what the font looks like. Also, bitmap fonts are usually best used without anti-aliasing–the harder edge gives the bitmap font its shape.

With the exception of Baby Blocks, all fonts were tested with the text “crooked glasses” in lowercase letters.

Squarish & Space-Agey


Aansa

Bit 1
no custom preview available

Ernest

Hilogin

Micro N56

Small and Graceful


BF Mnemonik

Chixat 8

Venice Classic

Outlined/Shadowed Letters


Bit Out
no custom preview available

Fipps

Half Life
(un-outlined also available)
no custom preview available

M04 Fatal Fury
(un-outlined also available)

Fun, Blocky Effects


Baby Blocks
(blocks appear for capital letters only)

V5 Bloques

Summary

I find that bitmap fonts are some of the best little tools in my font toolbox. Where other fonts are illegible at small sizes, bitmap fonts are perfectly legible; where other fonts would be too busy or too elaborate, bitmap fonts are just decorative enough without struggling to read them.

But what do you think? Might there be a place on your site for a few itty-bitty fonts?

comments (2)

Getting Your Body Font in Shape

January 30th, 2012 by , in Monday in the HTMLab
Tags: , ,

Last week I covered fancy fonts, primarily used for headings, images, logos, and special text. But what about body fonts in web design, those used for all the rest of your text content?

With body fonts, I’ve always felt just a little stuck in a rut–a rut called “I can only use Arial, Verdana, Helvetica, Georgia,” etc. And I would be willing to say that many designers are wary of using specialized fonts in our body text. It’s one more thing for our users to download, and possibly one more thing that won’t display correctly.

But in fact, we now CAN use special fonts for our body text designs, using the @font-face declaration in our CSS. (More about how to use that here–this article from SixRevisions explains it so much better than I ever could.) Using @font-face is a way we can include slightly different body fonts that help brand our sites. Not only that, we can better match body fonts to our special fancy fonts–always a nice way to pull a site together!

As part of my own research for new fonts, I began hunting through DaFont again, looking for lovely sans-serif and serif fonts that were readable and basic enough for body text–i.e., nothing too hard on the eyes at small pixel sizes. I came up with the following list of body fonts that are just different enough. Check through this list of sans-serif and serif fonts, all chosen for legibility and coolness–download links are below each image.

Each font below is previewed with the text “crooked glasses” (all in lowercase), and the display size was set to “Tiny” on dafont.com.

12 “Just Different Enough” Sans-Serif Body Fonts


Ageone

Alido

Bird Cherry

Cuprum

Existence Light

Forgotten Futurist

Lintel

Myndraine

Passion Sans

Print Clearly

Susanna

Tin Birdhouse

12 “Just Different Enough” Serif Body Fonts


Angleterre Book

Berylium

Day Roman

Dualis Lite

Gentium

Happy Phantom

Just Old Fashion

Mary Jane

OldStyle

Sanford

Springsteel Serif

Timeless
comment (1)

Fancy Fonts Your Users Can Still Read

January 23rd, 2012 by , in Monday in the HTMLab
Tags: , , ,

Designing a beautiful layout is not just about choosing the right color/style or picking the most fitting image format. It’s also about choosing fonts that work well for your website’s topic (and are readable to users’ eyes).

To elaborate more about the important role of fonts in web design, I’m beginning a series on fonts this week, tackling the chief issue I have with modern fancy fonts: legibility. What’s the use of using a pretty or nifty font if no one can read what it says, after all?

Why Focus on Legibility?

  1. A site’s logo should be easily read and understood
  2. Content and navigation should be easily distinguished
  3. Headings and subheadings should be emphasized, but not overdone

If we want users to stay on our sites and enjoy the text content we’ve written, we need to make it easy to read our sites. Thus, legible fancy fonts, fonts that are decorative and yet still readable, should be at the top of our design list.

Where ARE Some Fancy Legible Fonts?

After doing a thorough search on my favorite font resource, DaFont.com, I found five fonts each in several fancier categories that meet my criteria for legibility, which is the following:

Each font has been previewed using the text “crooked glasses” in lowercase letters, set to “medium” size. Some previews have had to be shrunk to fit in the content space.

Cartoony Fonts


Andrea Karime


Witches’ Magic


Jinx


Lounge Bait


Skinny Jeans

Groovy Fonts


Finesse (has been shrunk slightly to fit)


Delusion


Rollergirls


Keep On Truckin’


Neon 80s

Curly Fonts


One Starry Night


Seasons Spring


Boingo


Daisy Mae (has been shrunk slightly to fit)


Dirty Lady

Barely-There Fonts


Awakening


White Tie Affair (has been shrunk slightly to fit)


Seraphim (has been shrunk slightly to fit)


Dhe Mysterious


Fluid Light

Retro Fonts


Odalisque (has been shrunk slightly to fit)


Chocolate Box


Galeria Coruna 2008


Bellerose


Stripes Caps (has been shrunk to fit)

Odd Fonts


Ground Round (has been shrunk to fit)


Angelic War


Where Is The Rest?


Inflammable Age


Botanic

comments (2)

Professional Web Writing

January 9th, 2012 by , in Monday in the HTMLab
Tags: , , ,

Drawing on my experience as an English major in college as well as my short time in Language Arts education, I have written the following article about sharpening and improving your writing for a businesslike Web environment.

Writing for a Business? Make It Look and Sound Like It!

Many online writers, including myself on a fair number of occasions, write in a more conversational style, much more casual and open. This is great for a personal blog or website, and is much more relatable for an anecdotal site.

However, if you’re writing for business, writing for advertising, or anything else that involves the need for clear and quick communication, you want to be as concise and correct as possible. Users who visit a business site are there to get info as quickly as possible, and you need to make that info-gathering process easy.

The three main issues I see with many amateur business communications are that there are too many misspellings and grammar mistakes, too many texting and Internet abbreviations, and lack of attention to phrasing and sentence construction.

Misspellings and Grammar Mistakes

Reading a well-written text is a delight to the eyes and the brain–the content enters your brain easily and quickly, and you feel like you’re truly learning something and making progress.

Trying to read a horribly-misspelled text with grammar mistakes all over it, on the other hand, is a mess; every sentence, or even every word, has to be paused over to decipher its meaning. It’s as if you’re not fluent in the language anymore.

Just as no one would go to a job interview without dressing, smelling, and speaking their best, no one should present a professional communication of any sort that has misspellings and grammar errors. Every error is like a tear in your suit jacket, a stain on your pants–it detracts from the text’s meaning, and others not only won’t be able to make sense of what you’ve written, but they’ll also have a lower opinion of you for writing that way.

If you are unsure of how to spell a word, here are several ways you can get help:

Sound-Alike/Spelled-Different Examples
Incorrect: I’m sitting over their. (you’re sitting over their what? Whoever you’re talking about might not appreciate you sitting over their possessions.)

Correct: I’m sitting over there. (“there” as opposed to “here”…a location. Remember that there and here both end in “-re”, if nothing else reminds you of which form to use.)

Incorrect: There going to the store. (There are no people mentioned in this sentence at all. “There” references a location, or perhaps a pointed-out object.)

Correct: They’re going to the store. (“They are going to the store.” Whoever “they” are, they are going as a group to the store.)

Incorrect: You’re hair looks good today. (literally translated, “You are hair looks good today.” Is that really what you meant to say?)

Correct: Your hair looks good today. (Just like the word “their”, “your” ends in an “r”–both words indicate possession of the noun following it. At last, you finally possess the complimented hair follicles in question!)

Texting Abbreviations and Emoticons

Using texting/Internet abbreviations and emoticons is fine for personal communications or blogs, but for business websites or other professional sites, these two writing features give your work an adolescent, too-casual feel.

Examples
Txtspeak: Oh, lol, this sounds so stupid, but…
Real English: I feel silly saying this, but…

Txtspeak: So I completely failed at that, too, xD
Real English: Yet another hilarious failure on my part

Txtspeak: omg, this gets on my nerves
Real English: This annoys me greatly/This bothers me too much to be silent

Txtspeak: do u undrstnd wht i’m tryin 2 tell u?
Real English: Do you understand what I’m trying to tell you?

If you want your communication to be taken seriously, you have to omit the textspeak. Not only will this make your writing look and sound more mature, it will also make it clearer for all users to understand.

Bad Phrasing/Sentence Construction

If every sentence. On your blog. Is broken up into. Parts like this. With lots of unnecessary punctuation…it makes it very hard to follow what’s being said.

On the other hand if your blog contains absolutely no punctuation whatsoever and you have lots of “and”s and “but”s and “or”s everywhere you have no periods to show where one thought ends and the next begins…it’s also very hard to follow what you just said.

Good sentence/paragraph construction not only makes a better story, but it makes for a clearer read, too. And clearer reads mean that more users will read what you have written, because it’s easier.

Using punctuation like verbal pauses is the best way to remember how to use them. Commas are for small pauses, just grabbing a breath before you continue on with your thought. Periods are for big pauses, where you’re about to transition to another thought. And semicolons are great for joining two small (but complete) thoughts together into a bigger sentence; usually, the two little sentences need to be at least related for the semicolon to work, though.

Directly related to sentence structure is paragraph structure. If you build your paragraphs so that your first sentence introduces your topic, the middle sentences expound on the topic, and the last sentence sums up and transitions into the next paragraph, your audience can better understand. Not only is this a good way to write for school, but it also helps fully explain your topic for business site purposes, too.

Lastly: PLEASE don’t type everything in one huge paragraph. “Walls of text” are not attractive to users who are looking for information quickly; a huge paragraph puts them right off of reading. (Preaching to myself here…I’m infamous for unintentional walls of text!) A good rule of thumb is to break for a new paragraph when you either get to a new topic you want to discuss, or when your paragraph is at least five typed lines long on your page.

This structure is beneficial for memory, because we generally remember information in “chunks.” When you’re writing for information purposes, you group like information together in the same paragraph, and you break up large portions of information into small, “bite-size” pieces so that people can take it in better.

Summary

Making your writing as professional as possible for the Web is like dressing your writing in its best for an interview–you want to make your writing give off the most sparkling first impression it can. Watching your spelling, grammar, Internet abbreviations, and writing structure is key!

no comments

Top 10 Web Design Pet Peeves

December 19th, 2011 by , in Monday in the HTMLab
Tags: , , ,

As a designer of web pages, I admit that I sometimes lose track of HOW a page should work in the pursuit of design innovation, and I’ve spoken before about how web design affects the user on a more abstract level. But as a user of pages, I find myself very sensitive to those page details that just drive me nuts when I have to work with them.

If we as designers want to make great pages, we first have to be aware of our own design pet peeves when we visit sites. The more aware we are, the more likely we are to fix them whenever they pop up (and the more likely we’ll have repeat visitors!).

Here is my list of top 10 web design pet peeves–and yes, I have offended some of my own rules over the years. (Don’t forget to read the addendum at the bottom; there’s a blog post idea for fellow web designers!)

Garish, Overly-Bright Colors

I don’t mind a little shot of bright teal or light yellow to showcase a new addition or featured content. But when the whole page is bright orange and electric purple, eye-searing green and migraine-inducing yellow, my eyes go boggly trying to even look at the page, much less try to read and understand it. When designing our pages, well-thought-out color schemes and page styles are very, very important.

Have I Ever Broken This Rule? – Yes, sadly, with one of my first gaming sites back in 2004. Bright red background got a lot of complaints from visitors… :/

Background Color and Text Color Too Similar

Dark blue background + very slightly lighter blue text = I don’t come back to your site because I can’t see the content. Yes, I know, CSS and hexadecimal codes are fun to play with, but text contrast is REALLY important, otherwise no one will visit your site because it looks empty or too hard to read. You don’t need complete “black and white,” but make sure your colors are fairly opposite each other on the brightness scale.

Have I Ever Broken This Rule? – Not to my knowledge; I usually use a wide background/text color contrast, like the white background and deep teal text on this blog.

Misaligned or Overflowing Text

Drives me nuts to see a divided layer not doing its job, letting a line of text flow unbounded across the screen (and even way off to the side, making me scroll horizontally). Not only does it make it 10x harder to concentrate on the meaning of the text, it usually pushes other page elements out of the way, making the page look disorganized and amateurish.

Have I Ever Broken This Rule? – Yes, because I was a newb in 2003 and didn’t know any better…note to self: huge divs without ending tags do not equal awesome layout automatically.

Button or Text that LOOKS Clickable, But Isn’t

Underlined text? Yep. Decorations on a sidebar that look suspiciously like navigation buttons or submit buttons? Yep. If you want to thoroughly confuse your users, this is the tactic you want to adopt, making ordinary body text look like links or buttons look like menus waiting to be opened. Of course, if you want to keep visitors, you’ll stay away from these oopsies, otherwise your users will not return.

Have I Ever Broken This Rule? – Yes, on one of my early, early self-run blogs–I used underlines as purely an emphasis mark rather than just for links. People kept wondering why all my links in my posts were broken. Sad. XD

Menus that Completely Cover Up Content/Won’t Go Away

Several news sites do this with drop-down menus–either the menus are so huge that they cover up a whole lot of content, or they won’t fade away after you’ve clicked on a page title/category. The worst offenders are the ones who both cover up content and won’t be put away. I spend much of my time on the page wrestling with the designer’s conviction that menus are to be SEEN and the content is much less important.

Have I Ever Broken This Rule? – Nope, ’cause I don’t use menus that go across the top of the page if I can help it. (That’s how much I hate this design trend. LOL)

Popup Surveys that Keep Coming Up with Every Page Load

“For the last time, I’m not interested in leaving my [expletive] comments! Dang, take a hint!” –This is what I usually end up thinking when a popup survey (or any popup, really) keeps loading no matter how many times I close it. Every time I navigate to a new page on a site that uses this survey style, the whole page is grayed out except for the annoying little box which I’ve seen many times over. We can really, really irritate our users with these kind of tactics; no user’s comments are worth driving them away from the site!

Have I Ever Broken This Rule? – Nope, because I don’t use popup feedback surveys.

Info Overload

Whether it’s tons of little content boxes or multiple sidebars, when there is simply too much information on a page, my mind scatters and dashes itself against the wall of info on the screen. I just can’t concentrate on any one object without being distracted by other content, and I’m sure I’m not the only user who has felt that way. (Many news and entertainment sites use this kind of layout design, and it bugs me, not to mention makes me feel like I’ve got a sudden onset of adult A.D.D.)

Have I Ever Broken This Rule? – Yes, with one of my first CSS layouts–I did three columns, but I filled the two side columns with a WHOLE BUNCH of text, which kinda overflowed into the middle column because there wasn’t enough padding and margin space.

Flashing Graphics/Animations, Including Ads

When a graphic on the sidebar is flashing rapidly between several different colors, I’m more likely to ignore it as a spammy ad. And I know I’m not alone in that. Animated ads are not usually controllable by those who use them on their pages, but we can do something to make them a little less obtrusive into the design, like not putting them directly beside our content where they will distract users. But we can control what types of web animations we use, if any at all.

Also, more importantly, flashing graphics of any sort can trigger those who are Photo-Sensitive Epileptic, or PSE, to have a seizure. I didn’t know about this until I began dating my wonderful boyfriend, who has epilepsy easily triggered by stuff like strobe lights, and he mentioned how sometimes even flashing web graphics mess with his eyes.

Have I Ever Broken This Rule? – …*hides in shame from all the flashing animated web graphics I did in my newbie days*

Itty Bitty Body Text

Size 8 font is never appropriate for main body text, mmkay? We as web designers should not be holding contests to see which user’s eyes are better than everyone else’s. If we want people to read the content we have so lovingly crafted, we have to make it readable. I’ve spoken about this issue before in context with site bugs, but it’s worth repeating here, since text size is a major bone of contention with me.

Have I Ever Broken This Rule? – Nope, because I like not straining my eyes when I’m proofreading my content.

Sneaky Layout and Navigation Changes that Change the Way Users Access the Site

How many times have I heard my boyfriend’s mother express frustration over paying bills online, mainly because the webmaster of a site thought it would be cool to move the “Customer Login” page to a completely new navigation area, or completely eliminate it altogether? (Seriously, I spent 45 minutes trying to find the “Pay Bills” page on one of the websites she was needing help with, and to this day, I have no idea where they moved the page. I’m guessing they ended up with a lot of late payments!)

When we make big layout changes to our website, especially if we’ve got a large customer or user base, we need to make sure of one of the following things:

  • We keep to the same basic content organization and presentation, so that things are generally where users remember them being;
  • We tell the users explicitly WHAT has changed, WHERE new pages and content have moved, etc.

Doing one of the above will help users dramatically when we decide to change our site’s look and feel!

Have I Ever Broken This Rule? – YEP :C Forgot to tell my users where I moved one of the basic tutorials on my City of Heroes site, which led to some user frustration.

Addendum for Fellow Web Designers

Make your own list of your top 10 web design peeves, and see if your designs offend your own list…you might be surprised like I was!

no comments

The Shadowy Side of CSS

December 12th, 2011 by , in Monday in the HTMLab
Tags: , , ,

For years, when webdesigners wanted to do shadowed effects with text or content boxes, they had to do so through the use of images. Either the text had to be saved in an image format, having been edited with an image program to make the text shadowed, or the content box had to be created with several slices of images to create the illusion of a whole box with a shadow slightly behind it. There were usually a good number of invisible tables behind the scenes setting up all these images so that the text and/or content boxes looked “natural” on the page, too. It was all a very convoluted process.

But thanks to the advent of CSS3 (and its wider browser support), we webdesigners can now add a little bit of shadow to our text and to our content boxes, with the box-shadow and text-shadow properties!

Shading Content Boxes with Box-Shadow

Any divided layer ID or class you create can have a box-shadow property added to it. Say, if I wanted to give a little pop of slightly-blurred gray shadow to my sidebar boxes, I could add something like this to the CSS class:

.sidebar {box-shadow: 5px 5px 5px #CCCCCC;}

What this means to the browser is: “I want a shadow that is positioned 5px to the right and 5px below this sidebar class, wherever it appears. I want that shadow to be blurred just around the edges (about 5 pixels around the edge). And I want the color to be #CCCCCC, or medium gray.”

Now, shadows don’t have to be gray or black, or even neutral colors. You can edit them to be any color, positioned as far away or as close to your content box as possible, and blurred/spread out as far as you like.

.sidebar {box-shadow: 30px 30px 5px 5px #0000FF;}

This shadow is positioned 30px to the right and 30px below the box it’s shading; it’s also bright, bright default-web-color blue. Another measurement is the “spread” of the shadow, how far it seems to be blended out into the background color of the website. The spread is the fourth pixel measurement (the second “5px” item). In this case, the shadow is blurred within itself 5px, and is blurred outward 5 more pixels.

You can choose any color shading and any size of shadow–experiment with this and see what you’d like to try with it. I’d also suggest visiting W3Schools’ Box-Shadow sandbox, where you can see different values and properties played out before your eyes. It’s a great way to see what you’d like for your design without having to hand-code it all first.

A Word about Browser Compatibility: Other Methods of Box-Shadow

For most new browsers, the above method (box-shadow) should work. However, if you want to completely cover your bases when it comes to browser compatibility, you’ll want to add the following lines of code to your shadowed box’s CSS id or class:

-webkit-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
-moz-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=Hexadecimal Code Of Your Choice, offX=Horizontal measurement, offY=Vertical Measurement, positive=true);

Many thanks to DynamicDrive.com for explaining this!

These three items are coded in very similar ways to the box-shadow property, but they are understandable to browsers requiring these specialized CSS codes. You’ll just need to make sure that you’re adding in the same pixel measurements and color codes as your box-shadow property, and you’ll be all set.

Making Text Pretty with Text-Shadow

At last, at last! I found a way to make my text shadowed without having to open Photoshop. My webdesigning soul is content. :)

Adding this property to any CSS (whether you’re stipulating body text, classes or ids of text) will make your text shadowed. For instance, I could make headings on my blog stand out a bit by doing the following code, making them shadowed with light gray just a bit below and to the right:

.heading {text-shadow: 1px 1px #EEEEEE;}

This would give me a very sharp light gray shadow, just to the right and just below my text. If, instead, I wanted a more diffuse text shadow, I could add the “blur” pixel measurement to my text-shadow property:

.heading {text-shadow: 1px 1px 10px #EEEEEE;}

The “10px” measurement in this example is how much the shadow is blurred beneath the text, and in this case 10px creates a very vague, misty appearance of any color underneath the text.

If you want to see more examples of text-shadow’s basic abilities, I like the W3Schools.com’s Text-Shadow Sandbox. Also, if you want to see some really crazy, funky effects that just a little finagling with text-shadow can create, I would suggest Zachstronaut’s article on text-shadow–you can do some awesome architectural, animation-like looks with just a few lines of code!

Alert: Internet Explorer Thinks Text-Shadow Has Cooties

As of this writing, Internet Explorer does not support text-shadow at all. Party poopers. (Just because Firefox got invited to the prom and IE didn’t… LOL). If you want text shadows to show up in IE, there are several fixes available across the web–these are some of the best and most understandable:

Full CSS3 Text Shadows–Even in IE (detailed, image- and example-filled, and BEAUTIFUL–requires a downloaded script, though)
Text-Shadow @ HowToCreate (simple tutorial taking you through several different steps of adding text-shadow)
CSS3 Text Shadow in IE @ ImpressiveWebs (how browsers compare in displaying shadows; using filter: glow for IE-only shadows)
IE Text Shadows @ WhatTheHeadSaid (CSS-heavy explanation of how to hack in text shadows for IE)

When Should I Even USE Shadows in CSS?

Shadows on a webpage are like makeup on a woman: just enough enhances natural beauty, but too much detracts from natural beauty.

To avoid your page looking like it’s been attacked and left bruised, only put shadows on special parts of your page. A lovely text-shadow on the main logo of your page, for instance, can look classy; adding a shadow underneath your “Latest Updates” box can help it “pop out” from the page enough to be noticed. You can also add shadows underneath every big heading on your page, or beneath featured images to help them look a little more 3-D.

Also, do not depend on text-shadows and box-shadows to make your page intelligible. White text on a light-gray background, no matter how shadowed you make the text, is still going to be illegible to most readers. By the same token, don’t make shadows and glow effects so bright behind the text that readers can’t focus on the text. Both of these mistakes will send your readers running for the hills. (And don’t let box shadows trail down on top of text below them…very annoying to try to read through!)

Use shadows as a lightly-placed accent, in other words, and your site will look great.

Summary

Shadows, when used as accents on your webpage, can provide some wonderful image-like effects without ever having to set foot in Photoshop or any other image-editing program. Try them out for your site, experiment with how they look, and see what elements on your page you’d like to shadow!

comment (1)

X Marks the Sitemap

December 5th, 2011 by , in Monday in the HTMLab
Tags: , ,

We’ve probably all visited a site that was hard to navigate. You got down into the categories and mini-categories and couldn’t find your way back up to other categories…quite frustrating.

As site designers, we may think our site does not need any sort of overarching structure, but that’s where our intimate knowledge of our creation does us no good. We have to remember that our site must be navigable to those who do not know its ins and outs, all its nuanced pages. An easily-navigable site is a user-friendly site.

What’s one way we can make users’ lives a lot easier? By building a sitemap–one page that lists all the site’s individual pages, organized by whatever system makes the most sense for your site (monthly archives, categorical archives, etc.).

Why Make a Sitemap?

Sitemaps are beautiful things–they make it easier for users to:

To Make a Sitemap:

  1. Go to your site’s directory, OR visit your live website.
  2. Write down all the filenames for your content files, OR copy and paste each address from the address bar as you visit each page of your site.
  3. Associate each page’s title with its filename.

    Example: If you have a page called “aboutme.html,” but it’s called “Learn More about the Webmaster”, then you’d title it “Learn More about the Webmaster” instead of “aboutme.html”.

  4. Make all these addresses and titles into working links, and link to them all in one big list, organized by content type, category, month it was posted, or however else you choose. Just make sure it’s sorted!
  5. Format this sitemap into a table (yes, a table–this is tabular data, after all), with headings and subheadings to show users clearly which sections are which in your sitemap. See examples of formatting a sitemap in the next section.

And you’re done! All you’ll need to do at this point is upload it, and every time you add a page, delete a page, or edit a title, edit the sitemap as necessary.

Some Examples of Sitemaps

The following pictures show some of the sitemaps I’ve created for my sites:


This is for Skies over Atlas, my City of Heroes site–as such, it is sorted by content category rather than by post date or by length of article, so that people can navigate to what they want to learn about quickly and easily.


This one is for The Gamer’s Repose, my gaming site, and it is sorted by game name and content type.


For my main site, WithinMyWorld.org, I didn’t need to sort it by content category so much since I had a lot of single pages that stood alone. So I just divided it up into “single pages” and “sections,” and then further delineated from there.

Automatic Sitemap Creators

Since my sites are small, making sitemaps manually is not much of a problem for me. But if you’ve got too large or too dynamic a site to do the manual sitemap (or you don’t want to be bothered with keeping it updated all the time), you can also use some of the following automatic sitemap generators, listed below:

XML-Sitemaps.com (need Google Webmaster account)
Codeplex.com’s Sitemap Generator (is software that needs to be uploaded to your server)
Doing an Automatic Sitemap in WordPress: Tutorial
BuildASiteBookmarks.com’s Sitemap Generator

Summary

To keep users of our websites happy, a sitemap can be just the thing to pull all of our content together in one place, where it’s easy to find that one page they’re looking for. It’s one way we can make browsing our sites easier, which means repeat visitors for us and a positive browsing experience for users. A true win-win!

no comments

A:Link, A:Visited, and A:Hover: Jumping Links through Hoops

November 28th, 2011 by , in Monday in the HTMLab
Tags: , ,

CSS pseudo-classes (ones like :link, :visited, and :hover) have been in use for quite a while in web designs. After all, it helps the user to know which links they’ve already visited, what parts of text are actually links, and so forth–it’s one of the ways we webdesigners make our sites interactive.

However, just because we can write CSS code for these classes doesn’t mean that there aren’t best practices for how to implement them. The following short write-up takes you through the ways we can make links work better in our designs.

  1. Using Different Colors for :Link, :Visited, and :Hover
    This is the first and simplest edit you can make–making the unclicked, clicked, and hovered links look different from the surrounding text and from each other.This was one of the mistakes I made early on in web design; in one of my earliest layouts, I made the body text and link color the exact same without realizing it. This is what the CSS code looked like:body {color: #000000;
    background-color: #FFFFFF;}

    a:link {color: #000000; text-decoration: none;}
    a:visited {color: #BBBBBB; text-decoration: none;}
    a:hover {color: #BCBCBC; text-decoration: none;}

    And, since I had removed the underlines from the links by using the “text-decoration: none;” declaration in my CSS, nobody could tell there were links within the text unless they hovered over them and saw the text change from black to gray. Thus, people were confused, and rightly so!

    If, instead, I had used a vastly different color (or a brighter color that tied in with my overall design’s theme), links would have been much easier to see. The following code is excerpted from one of my more recent designs:

    body {color: #000000;
    background-color: #FFFFFF;}

    a:link {color: #0090ff; text-decoration: none;}
    a:visited {color: #bbbbbb; text-decoration: none;}
    a:hover {color: #6aa6d5;}

    In this example, the text is black and the background is white; the unclicked links are bright, vibrant blue to match with the more colorful parts of my design. Clicked links turn gray, and when any link is hovered over, it turns a little bit lighter blue.

  2. To Use Underlines or Not to Use Underlines?
    It is Internet default to underline links, but for the most part, web designers of the past few years have eschewed underlining their links when designing their sites. It does look a bit clunky, almost like you couldn’t be bothered to mess with the default settings. So when is underlining a link ever appropriate?In fact, there are a few ways you can still incorporate underlining in your links–for sure, it sets off your links as different from the rest of your text.

    a:link {color: #0090ff; text-decoration: none;}
    a:visited {color: #bbbbbb; text-decoration: none;}
    a:hover {color: #6aa6d5;}

    In this code from the previous example, I showed some code where I took underlines off the a:link and a:visited class, and left underlines on for the a:hover class. This will introduce an underline only when the link is hovered over, to give it extra emphasis.

    You could also do the opposite: put underlines on the a:link and/or a:visited class, and take them off the a:hover class, so that your links stand out on the page, and change only slightly in format when they’re hovered over.

    a:link {color: #0090ff;}
    a:visited {color: #bbbbbb;}
    a:hover {color: #6aa6d5; text-decoration: none;}

    One other thing you can do is to use the “border-bottom” declaration within your link classes. This enables you to have one color for your link text and another color for the underline underneath it; you can also vary the width of the underline as well. This can lend a styled but not-too-elaborate look to your page. The following code is an example:

    a:link {color: #63af88; text-decoration: none;}
    a:visited {color: #2bab69; text-decoration: none;}
    a:hover {color: #63af88; text-decoration: none; border-bottom: 1px solid #b19d47;}

    Here, the link text is pale teal-green, and the border-bottom is one pixel thick and deep gold. This creates an unexpected but pretty contrast that still lets the user know he or she is hovering over a link.

  3. Bolding or Unbolding Links When Hovered Over
    For a while in web design (probably around 2005-2006), making links bold when hovered over was the main trend; a counter-trend was making links bold all the time EXCEPT when hovered over.Bolding hovered-over links was accomplished in the following way:a:link {color: #FF0000;}
    a:visited {color: #000000;}
    a:hover {color: #000000; font-weight: bold;}

    And to create the “unbolded” effect, you would do something like this:

    a:link {color: #FF0000; font-weight: bold;}
    a:visited {color: #000000; font-weight: bold;}
    a:hover {color: #000000;}

    Personally, this always made the rest of the page text jump around on the page a little too much for my liking–when link text suddenly became bold, normal text beside it or otherwise around it would be nudged out of the way, sometimes even bumping words to the next line. Not a really professional look, though I will give it credit for being an inventive way to make links different without having to change their color all that much. I feel at this point in web design that bold-on-hover is best for navigation links, which won’t knock normal text out of the way.

  4. Quick-Cursor-Change when Links are Hovered Over
    I had to do a little research on this one, because while I saw it in use quite a bit back in the day, I never knew enough about it to implement it in my own designs. W3Schools.com has a full CSS reference and a sandbox to test cursors in, for your further knowledge.  

    The basic premise of using this declaration is to change the cursor to something different when the user hovers over a link on your page. Generally, the default is to change the cursor from the arrow to the little hand-with-index-finger-extended icon when you move over a link, but webdesigners when I first started out liked to change the hover cursor to other options, like these:

    a:link {cursor: ne-resize;} (two-ended arrow going up from left to right)
    a:link {cursor: help;} (regular arrow with a question-mark out beside it)
    a:link {cursor: crosshair;} {black crosshairs}You can even change the cursor to a specific file you link to, using the “cursor:url” property, like so:

    a:link {cursor: url(‘sunshine.gif’);} (if you had an image called “sunshine.gif”, it would make it into the user’s cursor image when they hovered over a link)

    This can still be useful in today’s design if you’ve got certain types of links that give a user needed information.  The following example shows such a CSS class declaration, and usage of the class within a link in your document:

    .helpful {cursor: help; text-decoration: underline;}

    <a href=”helpfulresources.html” class=”helpful”>See a list of helpful resources here</a>

    Other than that, though, having different cursors in this day and age may only confuse users when you visit your page. You want your user interface to be as simple and uncluttered as possible; even though that ne-resize cursor may look cute with your page, it might be annoying to your users.

Summary

Links can be styled a variety of ways, ranging from the uber-sleek to the super-cute, and everything in-between. Experiment and play with how you’d like your links to look, and find the style that best suits your site’s design and your users’ needs; remember, if you end up not liking it, the Backspace key is your best buddy!

no comments

The Renaissance of Web Animations

August 22nd, 2011 by , in Monday in the HTMLab
Tags: , , , , , ,

renaissance_webanimations
Moving images on the Web have now come full-circle–first fashionable in the early 2000s, becoming passé in the mid- to late 2000s, and now back in style thanks to sites like Tumblr and BuzzFeed. Not only that, but a new format has arisen to possibly challenge the GIF format for its animation crown. The WebM Project describes a new compressed video format, much smaller than typical videos and yet still delivering higher-quality picture than GIFs, with audio to boot.

Because of this, the temptation to overuse animated image formats is again going to soar. But let’s not throw ourselves back into the “bad ole days” of pages so crowded with Flash movies and GIFs that they load slower than molasses. Here are some ideas for (carefully) using animations in your web design:

Feature Just a Few Large Animations Per Page

Since GIFs especially can be large files, don’t clump them all on one page; even super-fast connections will balk trying to load these heavy pages. Instead, have only a few animations load at a time, using separate pages.

If Animations Are Your Main Content, Let Them Shine Alone

When you’re working with animations as your main attraction, make sure the rest of your site doesn’t distract from them. Too many animations (even lots of small ones) equals a busy page!

Subtler Ways to Use Animations

Link Rollovers

Links with subtle movement when the user hovers over them, like a gradient of color washing from left to right behind the text, can give your site a little boost. It’s also fairly easy to incorporate using GIFs and CSS–here’s the W3Schools post on :hover, and a tutorial on hover animations for image links.

New Content Alert

When you have new content, a little animated graphic pointing your users to the updated content can be a cute way to draw their attention without having to write out “Hey, I updated this and this, go check it out.” A simple arrow moving back and forth beside your updated content can be all it takes, for example.

A Site Brand

Since you want to make sure your site sticks out in users’ minds (so they return), you could have a little bit of animation in your site’s symbol, like an animated avatar that you use for all your social media sites connected to your website. That way, when users see that animation, they know they’re on a page that’s associated with your site, and they’ll remember it. Just don’t make it too gaudy or overpowering!

Summary

Web animations are back, but we still have to look out for common pitfalls. Try a few of these tips and see what works for your site!

comment (1)