Kyle Schaeffer - Web Design and SharePoint Branding » Images

10 Things a Website Should Never, Ever Do

Kyle — Thu, 22 Sep 2011 21:19:15 +0000

As a designer of the world wide web, you are armed with the power to amaze, enlighten, entice, and captivate. The web is an easel for your creative aspirations, and the content you design for is the foundation of your creativity. With so much power at the tips of your fingers, you also possess the ability to deter, annoy, anger, and infuriate. Your users are yours to command, their emotions yours to pluck like the strings of a harp.

It’s the latter of these powers that we discuss today: your ability to destroy the desire for users to stay on your site. We’ll examine the causes of user strife on the web, and see clear examples of common mistakes that designers and developers all-too-often seem to make.

1. Never interfere with the ability to scroll

The browser window is a fairly simple application: an address/search bar, a few buttons, and a big window where users read, scroll, and click. Sure, most browsers have other bells and whistles, but it really boils down to these essential elements of the browsing experience. Rule number one: never, ever (ever, ever) interfere with these most basic features of the browser window.

Example: Microsoft SharePoint 2010

One of the most preposterous features of an interface that I’ve seen is SharePoint 2010′s new ribbon interface. The default SharePoint 2010 interface includes a simple CSS style that disables the scrollbar on the element. Microsoft chooses to remedy this by adding a scrollbar to other division elements in the interface instead. This results in a fairly impressive “fixed” ribbon, but it has some infuriating side-effects.

When a SharePoint 2010 page loads, users will not be able to scroll until all JavaScript has loaded. On slow servers or on large pages, this can take up to 2-3 seconds, which can be quite infuriating.
Some devices don’t execute the JavaScript in the expected fashion, resulting in the complete inability to scroll on mobile devices and tablets.

An easy solution

The truth is, creating a “fixed” element is a fairly simple CSS technique that has become extremely popular in the last few months. The complexity of Microsoft’s interface is it’s downfall. Always practice in simplicity, because fewer things can go wrong in the end. Build simple interfaces, and never disable the scroll bar. Do this, and you’ll know at least one person who doesn’t hate your guts.

2. Never allow form resubmissions

Forms are a fairly standard feature of the web. Users see them and use them all the time: to sign up, sign in, order, update, and the like. With so much familiarity, it’s a wonder that forms are one of the largest sources of frustration to users. Between data, validation, formatting, handling errors, and all the auxiliary things that seem to surround web forms, things can get pretty complex for designers and developers. All the while, you try to keep it simple for your users. It’s a tall order, to be sure, but there is at least one thing that you can do to help users stay calm.

Example: The Form Resubmission Prompt

This is Google Chrome’s form resubmission prompt. Most browsers have something very similar. This appears when users click on the “Back” and “Forward” buttons in the browser, or when they “Refresh” a page on which they have submitted a form. As web junkies, we might know what this means, but it has a more elusive meaning to your every-day internet users. Most of the time, you’ll find that users simply click the default option (in this case, “Continue”), which can lead to duplication of orders, data, requests, and all sorts of things that would be better off if avoided. Also, it’s just another annoying prompt that users encounter while they’re using your site.

A Simple Solution

The solution to form resubmissions really depends on the platform your website runs on. In most cases, a simple fix is to separate the script that submits the form data, and the script that receives and processes that data. For example, if you’re using a PHP-based platform, you might have a form that looks like this:

To avoid the resubmission prompt, your submit.php script would forward to another page, rather than displaying a page in the browser.

if(isset($_POST['user']) && isset($_POST['pass'])){
  // do something with the form data
  header('Location:/login/form.php?success=true');
}

This receiving script never actually displays anything in the browser window. Instead, it receives the form data, does something with it, and then forwards the user somewhere else. Using this technique, when users click on the “Back” or “Forward” button, the browser will skip the submit.php page completely, and never see the annoying form resubmission prompt.

3. Never disable keyboard support

While we’re on the topic of forms, let’s look at another deviation from web standards you’ll want to avoid. To the right, you’ll see a screenshot of the login form at mysprint.sprint.com. I have a Sprint mobile phone, and I occasionally use this login form to sign in and review my account, see my bill, or (more commonly) daydream about all the fancy new mobile phones that I don’t have.

What went wrong

The font sizes are a little small for my taste, but the appearance of this form is not the worst I’ve seen (yes, that was a compliment). Design and aesthetics aside, there’s one feature of this form that drives me absolutely crazy. It’s an extremely simple form, one that I’ve encountered on countless other websites before. As usual, I would expect to enter my username and password to sign in without a fuss.

Unfortunately, this is not the case. While focusing in either the username or password textbox, pressing the ENTER key does absolutely nothing. I’m not the type of user that wastes time after filling out a form by lifting my hand from the keyboard and finding the submit button with my mouse cursor. I’m all about speed: on most websites, it’s type, type, ENTER, and the form has been submitted. On Sprint’s website, however, they’ve removed this behavior, and thus they’ve earned a place on my list of don’t-do’s.

4. Never fail to give feedback

Feedback is important, especially if you’re working with the awesomeness of AJAX. Traditionally, you knew what was going on in a web page, because any time you clicked on something, you had to wait while the next page loaded. There was a very apparent interaction period, and very obvious feedback from that interaction. With the introduction of new technology like AJAX, however, that feedback is not always so obvious. Today’s websites are much more interactive, and the result of those interactions (whether successful or not) needs to be communicated to the user.

Example: Facebook

There’s an easy way to test this: visit a web page, turn off your wireless adapter, and then click on things and see what happens. Obviously, because you’re not online, anything you do should be very obviously followed by a “no connection” message or some sort of indication that you’ve failed to do something. Facebook, a website that makes gratuitous use of AJAX for interaction, is not so good about warning users when things have failed.

Editor’s note: yes, I am using pirate Facebook.

One particular example is the new “lists” feature that allows you to mark a list as “favorite.” Even when you’re offline, Facebook gives you no indication that the action has failed. Never assume that users will have a fast connection, or that AJAX requests will complete. You should always provide feedback if something fails, especially when no page loads are involved.

5. Never disable keyboard navigation

Different strokes for different folks. That’s a saying that I like to spew off at random times, usually in a failed attempt at humor, but the lesson of this silly quip is tried and true: everyone has their own way of doing things. This can also be applied to navigation on the internet. Some people prefer to use their cursor for absolutely everything, and only resort to keyboard use when absolutely necessary. Others use the keyboard almost entirely, tabbing, backspacing, and scrolling their way through the world of the world wide web. Others, still, use gestures and touch screens to flick and fly their way through the internet. As a crafter of the interactive, you must adhere to all of these people. Never detract from your users’ ability to navigate in whatever way they damn well please.

Example: No, I don’t want to search

I’m going to use eBay as an example, just because they’re so big, but many websites out there are guilty of this annoyance. Upon arriving at eBay’s website, they use JavaScript to auto-focus on the search bar. I guess they’ve already decided, before you even visit, that you want to search their website. For some users, however, this can be incredibly annoying. A common and simple way to scroll down the page, in all browsers, is to press the space key. Pressing this key will advance the screen about one page, so you can continue reading without having to worry about scroll bars and the like. If you’re auto-focused on a search box, however, it disables your ability to do this. Even if it’s only a minor annoyance, it can be incredibly frustrating to users who like to navigate in this fashion. Likewise, I often use the backspace key instead of the back button to go back when I didn’t find what I was looking for. With the focus on a search field, backspace navigation simply doesn’t work.

The fix for this one is easy: don’t do it. It’s annoying.

6. Never move content without user interaction

Websites can be so damn sneaky. I guess they need to make a buck, but who doesn’t? One thing that will drive your users bonkers is anything that moves without a prompt from the user. Yes, I’m talking about you, “auto-expanding-advertisement-that-plays-a-stupid-video-of-a-guy-who-walks-across-my-screen-when-I-just-want-to-read-the-damn-article” guy. I also dislike anything that happens on hover (including drop-down menus). Hover is so 2000′s, get with the times, people. The only time your website should “move” or “do something” is when users tell it to. Most simply, any time they click, drag, or scroll. That sounds simple and obvious, but not everyone adheres to this most basic of principles.

Example: Digg.com

While the quality of Digg’s content is another concern, one thing that does drive me crazy is the sponsored links that appear in the rollup. Notice the promotion from NewEgg.com. This link does not actually appear on page load, but rather when users hover their mouse cursor into the rollup of popular stories. This means that if you’re a fast clicker (aren’t we all?), you will often accidentally click on the advertisement instead of the story you’re interested in. Good for Digg, bad for users. Stop being so shifty, internet.

7. Never use fixed position without a fallback

A “fixed” element in the browser window is one that stays on the screen, even as you scroll down the page. It’s a simple CSS technique, but it’s been amazingly popular in recent months. One thing I’ve noticed in all these fixed designs is the failure to provide a fallback for users who are on smaller screens. The truth of the matter is that the web isn’t just for desktops any more. Internet connectivity is coming in all sorts of shapes and sizes: desktops, laptops, mobiles, tablets, e-readers, gaming consoles, and even refrigerators (yes, even refrigerators). The future promises only more diversity in internet-connected devices, and that means you can’t assume users will have a large viewing area on which to see your website.

Example: Pandora.com

This is a screenshot of Pandora’s fancy new HTML5/CSS3 design. First of all, I’ll say that I love Pandora. Maybe too much. It’s pretty awesome, and it even lets me give all of my radio stations quirky little names like “Harmonizatorasaurous” (eat that, spell-check).

Pandora’s new design includes a fixed header, like many new designs, but it seems the header does not provide a fallback for users on a smaller screen. When reducing the window width, it clips the player controls off the edge of the screen. If a fixed element is clipped, users can’t see it, even if they try to scroll to see more, which can be a huge problem.

A simple solution

An easy solution to this problem is to make the default behavior of your site’s header to maintain a static position, but when users have a large enough screen, you can make things fixed for a more impressive presentation. The following jQuery snippet does the trick quite nicely:

$(window).resize(function(){
  resizeUI();
}); 
$(document).ready(function(){
  resizeUI();
});

// resize on page load AND window resize
function resizeUI(){
 if($(window).width() > 500){
 $('#header').css('position', 'fixed');
 }
 else{
 $('#header').css('position', 'static');
 }
}

This script runs both on page load AND as users resize the window, so no matter what happens, you can decide whether or not to use fixed elements. You’ll have to mess with the values that the script looks at (width and height) to determine what works best for your site’s design, but it’s a useful technique to use.

8. Never use pop-up windows

Do I really even have to mention this one? I thought that pop-ups were notorious for the infuriating behavior that have on users, but I still see them “pop up” from time to time (pun intended).

Example: TinyMCE

I never use pop-ups. I always recommend against them. A common excuse is that your site should stay open, in it’s own tab, even if users click a link that takes them away from your site. I’ve got a simple response to that: wrong! Don’t let your head grow so big that you think your website is god’s gift to the internet. Users have gotten pretty comfortable with the idea of tabbed browsing, and they know how to manage their windows. Unless you’re Google, you’re not allowed to use pop-ups. It’s that simple.

Imagine my surprise when I attempted to implement the TinyMCE JavaScript editor into a web application I was building, and realized it still used pop-up windows for things like links and images. I am building a PHP application, and I have had stars in my eyes for WordPress the entire time, so TinyMCE was the obvious choice. I was so taken aback by this behavior that I ended up switching to CKEditor, another popular editor that has recognized the need to rid the world of these annoying little boxes, and I’m all the happier for it.

9. Never get quirky (well, not too quirky)

I love websites that are different, but not too different. There’s a fine balance to be made between adhering to expectations, and getting so weird that users have no idea what’s going on. As with most users, if I visit a website and am prompted to “explore this insanely huge image of nonsense to learn how to navigate our site,” I’m going to leave and never return. I’ve never been a proponent of Flash, for this very reason, but I also recognize that it has it’s place. Flash can enhance a website’s content with some awesome features, but it should never be used to present content in its entirety.

Example: Sony.com

Check out Sony.com, and you’ll realize that a full 5-8 seconds will go by before you actually see anything on the screen that you can click on. Almost the entire site is in Flash, and it breaks about five of the ten “don’t do’s” that I’ve described in this article. All that aside, Sony has provided a non-Flash version of their site, which also subsequently presents a loading spinner for about 2-3 seconds that covers all of the content on the page. I’m not entirely sure why the designer who created the Sony website was so fond of things that come between users and consuming the content they came to read, but I do know this: it’s annoying. Don’t do it.

10. Never do THIS…

Okay, this last one is really just for fun, but never do THIS…

body * {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
body *:hover {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

Try it out by clicking on this button (you’ve been warned):

Image Buttons and Accessibility

Kyle — Thu, 19 Nov 2009 21:29:32 +0000

Image buttons are a fairly common occurrence in web media. As with everything else in web design, you have a dizzying arsenal of methods from which you can choose to create this type of design element, and choosing the right method can greatly aid in your design’s accessibility, performance, and SEO-friendliness.

Concerning Accessibility

Accessibility is chiefly important for a web designer (or at least, it should be). When you create your HTML, keep things as simple as possible. Assume that every single user who visits your site will (1) not have CSS support, (2) will disable all images on your page, and (3) will not have JavaScript enabled. If you design your HTML in this fashion, you’ll find that creating accessible content is much easier to do. Once you have an accessible document that works on all systems, you can use the fantastic features of CSS and client-side scripting to really bring your site to life. These “nice to have” features (style, scripting, etc.) are not essential to the structure of your document or the content that’s contained within. When it comes down to it, users are after your content, so that’s priority number one.

A Simple Example

With that in mind, let’s say we wanted to create an image that links to another page (this is so very simple, but it serves as a great example of this technique). Because we’re assuming that users have disabled all images, we certainly don’t want to use the tag for our link, because those users without image support simply won’t see it. For that reason, our link will look like any other link on the site.

Learn Guitar

I know…this is really simple, but stay with me; I promise we’re going somewhere with this. Our very simple HTML has passed our criteria: users with CSS disabled will see the link, as will users without images or script. It’s very simply an accessible link on our page, read as easily by normal users as it is by search engines or even people using screen readers. Next, for users who can utilize our “nice to have” features, we’ll add a bit of CSS to make our image appear.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png');
	text-indent: -9999em;
}

As you can see, we’re using the text-indent CSS property to bump our text out of the way, and in it’s place, we’re using background to set an image for our link. All you have to do for your own image is adjust the width, height, and background URL to match. What you get when you’re all done is this:

Learn Guitar

Adding a Hover Image

Easy and accessible CSS image replacement! It looks great, but let’s take it one more level to really make sure users know that our button DESERVES to be clicked. Let’s add a hover style. I’m going to use an image “sprite” for the hover image, which means that both our static and hover states are contained within the same image. Here’s my *single* image that’s used for this type of style:

We’ll adjust our CSS to account for our new hover image. Note that the height and width attributes will not change! The hover-state image will be “clipped,” so that it’s only visible when users move their mouse cursor over our image button.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png') top;
	text-indent: -9999em;
}
.learnGuitar:hover {
	background-position: 0 -50px;
}

Now, when users move their mouse cursor over our image button, the CSS will “slide” the background image so that the hover state is displayed instead of the static state.

Learn Guitar

Crafting your image buttons in this fashion can really save on performance and download times. Perhaps more importantly, your site will be much more “friendly” to visually impaired users using screen readers, and you’ll find that search engines will have an easier time understanding what your links and other content are all about.

Let me know if you have any questions or comments!

Pure CSS Image Hover

Kyle — Mon, 05 Jan 2009 14:14:17 +0000

Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the tag and display the image as a the background-image of an (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

Leaf

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links,

tags, and just about anything else you can imagine in your site’s design. Happy styling!

Best Practices: Images on the Web

Kyle — Fri, 05 Dec 2008 16:09:48 +0000

Web design is about much more than HTML and CSS. In many cases, the quality of a website lies just as much in its code and functionality as it does in the quality and optimization of its images and other graphical information. The amount of choices in image format, quality, and optimization is dazzling to say the least. What format should you use? Is there a end-all format for the web that trumps all other formats?

Connections, Not Size

As internet connections increase in bandwidth and online content becomes increasingly available, image size is becoming less important. It’s still very important to optimize your images in order to minimize the download times for your pages, as it always will be, but there is no denying that image size is becoming less of a factor. One important element of internet connectivity to understand is the battle between image size and total number of images. On many high-speed internet connections, it’s actually faster to download one large image than it is to download many smaller images. The time it takes to make a server request factors in to every file the client must download when viewing a web page, so combining multiple smaller images into one larger file can greatly increase site performance. Dave Shea has written a great blog post about this technique, known as HTML Sprites, which can be found here.

Diversity

So, which image format is best? The answer lies in diversity. Each web-friendly image format has its own unique set of advantages and disadvantages that make it suitable in certain situations. While it would be nice to create all your images in the same format, pragmatism requires that you deviate from this formula in certain situations.

The Amazing PNG

In almost every case, 24-bit PNG images are superior to all other formats. The unique and most important benefit of PNG images is alpha transparency. In a nutshell, this allows you to create semi-transparent images that will display on top of any background color or image in a web page. The images I use in the header section of my site’s theme, for instance, are transparent PNG images. If you click on the clock at the top of this page, you’ll notice the background color of the page changes, but the images do not.

Advantages

Alpha Transparency: Semi-transparent images that do not have to be updated, even when your site design changes.
File Size: Small images with few colors are stored in extremely small file sizes.
Quality: Images are indexed with 24-bit color, saving only the color information that you need for that particular image.

Disadvantages

Compatability: Older internet browsers (such as Internet Explorer 6) do not support alpha transparency. This problem can be fixed with a simple javascript function, but CSS background images require a bit of a more complex solution in order to remedy.
File Size: Large images with many colors (i.e. photos) can be very large in size.

JPEG for Photos

JPEG images are the defacto standard for photos in many applications, including the world wide web. JPEG files are unsurpassed when it comes to files that contain many colors (sometimes millions of colors) and files that are very large in canvas size.

Advantages

File Size: When working with large files that contain many colors, the JPEG is the only choice.
Quality Optimization: JPEG files can be optimized in quality to even further reduce file size.

Disadvantages

No Transparency: JPEG images do not support transparency.
File Overhead: Every image file has a certain amount of “overhead,” meaning that even when you save a 1×1 pixel image, certain file attributes are still saved to that file. JPEG images have the largest overhead, somewhere around 300 bytes, which means that they aren’t well-suited for smaller images that do not have many colors.

The Tiny GIF

GIF files are probably used more than any other format on the web (most likely due to their file size). The file overhead on a GIF file is under 50 bytes, meaning it’s well suited for small images that do not utilize a lot of colors.

Advantages

File Size: GIF files are great for images with a small canvas and very few colors because of an extremely small file size and similarly small download time.
Transparency: GIF files support transparency, allowing you to layer images on other page elements. The transparency is not alpha-based, meaning you can’t have semi-transparent pixels, so transparent elements must have hard edges in order to display correctly on top of other elements.
Animation: GIF files support animation, although file size quickly becomes a factor when using many different frames.

Disadvantages

Limited Colors: A standard GIF file cannot contain more than 256 colors, meaning they aren’t well suited for photos or smooth gradients, which contain more color data.

Conclusion

As you can see, there are a lot of choices when it comes to images on the web, and there is no end-all image format that should always be used. The truth of the matter is that your website visitors don’t care what format your images are in, they only care that they are downloaded in a timely fashion. In that spirit, images should be optimized for both speed and usability, regardless of the format.