Remember CSS Resets? They haven't gone anywhere, but they've gotten way smaller!

Okay if you don't know what CSS resets are, I'll explain them in this paragraph, which you can skip if you do know what they are: You know how every browser under the sun has a somewhat different interpretation of how things should look? You say "make this thing go this far away from that thing" and some browsers go "ok I'll make the middle of the edge of this thing this far away from the middle of the edge of that thing" and another one goes "ok I'll make the outside of the edge this far away from the outside of the other edge" and so on. Maybe you do know, maybe you don't know, but if you're making layouts with HTML and CSS, you probably have noticed that. And you're either not required to be precise enough to have to care about it (that's awesome, you lucky, evil designer) or you do have to care (you poor, unfortunate soul). CSS resets tell every single browser to shut up about all those little variations, by neutralizing everything out, so that nothing looks like anything. Everything has no style. Which is great. It's not great if you want to not really do much in the way of CSS work, but if you want you CSS work to be what you think it's going to be, and be the same everywhere, and your boss/client/broke friend to be happy about their site, then it's wonderful. It's totally wonderful.

The old Eric Meyer reset was massively long. It was like... you'd have to explain it to your person who pays you, type long. The "minified" version, these days, is super short. Here it is:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

So what you do with this is, you put it at the beginning of your <style> tag. Or in your first imported/linked .css file. Or, hey, as a prank, put it right at the end, or in your last import. Great prank.

So obviously, nothing has style. So you have to write in every single aspect of style that you want for every single type of element. Don't muck about in Dreamweaver with it. Don't grab your silly list of what's what, just open up your Dom Inspector (sounds kinky, I know) that's built into your web browser. You can invoke it by right-clicking on something, or on a mac it's in some developer menu, maybe hitting "inspect element" will do it, they each have their own silly word for it. But in there, somewhere, probably on the right, you'll be able to find which HTML elements you want to mess with, and you'll be able to try adding different characteristics to their CSS, and then you just copy the code back into your authoring program. Then open it up in a different browser, and see whether that evil monster interpreted things in the same way. If you need two different versions of the same code, like you do for some esoteric, not-yet-integrated selectors or whatever they're called, then go ahead. Use two or three different repetitions of the same thing. Sure, we're all supposed to be using CSS frameworks now, so none of that is necessary, and our lives are rosy and perfect and of course nothing ever goes wrong with those frameworks, so knowing anything about actual CSS is perfectly useless and embarrassing. In the magical, mystical world of proposals, and inside the minds of creative directors. There are whole universes of beautiful impossibilities locked in there along with your imaginary day. In your actual day as a web designer, this is all a total lifesaver.

Love you, have a good one!

-Dorian

Why our civilization needs better typography in email and websites

It's no wonder people don't want to do a lot of reading on the web. Of course, LCD screens are bright and exhausting for the eyes to look into, and we'll go down as the generation who lost its eyesight and reading habits to those weird old monitors (the ones we use now, I mean) that couldn't have colour without glowing. We're just starting to see e-readers (and their great screens that you actually have to illuminate with a light or something), gaining popularity, but people still read their emails in their web browsers, on their computers, and we'll keep doing it for awhile.

That's why it'd be nice if Google did something about this:

That shouldn't be what my emails look like. I used to use Firefox for my emails just because it let me tell it to use fonts that I specify, so I could specify something nice. But that's a browser-wide setting that screws up every website, including gmail.

We need settings inside Gmail that let us say "look, I'm not into Arial as a paragraph font" - hey, it's a sound objection, from a typography theory standpoint.

I just want to sigh, because this comes from a problem that's been on the 'web for far too long: we are using sans-serif fonts for paragraphs because they used to look better on computers. And we're using point sizes that are too small. We as in web designers. Because it's hard to stand up to a creative director who doesn't ever have to read the text that they are making styling decisions about. I get that. But as designers, I feel like we have have an obligation to whip out a typography book here and there and say "look guys, let's think about readability." Not even legibility, but readability.

I don't even know what Hotmail looks like at this point, but if someone wants to link up a screenshot of what their email looks like, comment it up.

The little details... like search engine listings text

This is why it's a good idea to Google your own business... you might end up noticing some embarrassing details like this one:


Unless you're deliberate about which text gets added to your URL in a Google search result, it could end up grabbing the worst possible thing off the page: the text that's not about your business.

Here's another example of the same problem in a different spot:

This happens to so many newsletters. The first piece of text the browser sees is the thing about images. Everybody knows about this, and the email should communicate effectively and look great without images loading. Watch out for this.

"Will Be Added Soon..."

Just don't do it. Don't make someone think something's there, then try to open it, and revise their idea of its status. If it's not there, just let it be not there.

This is the backwards way that many people add content to a site:

1. Make the section.
2. Make the content.
3. Add the content to the section.
4. Adjust the section to match the content.
5. Rewrite the content.

Do this instead:

1. Write all the content and get the pictures together, and do it on a page that's hidden from public view.
2. Publish the page and content.
3. Link to the page and content.

If it really needs to be expressed that something is in the works, then it warrants a blog/news post.

Web Links from Non-Web Apps

When a link on a website takes the user to another site, or opens a new window or tab or something, it's best practice to mark that link, so that users understand that it's different from other links on the site.

The same is true for desktop applications. When a menu item opens a web browser, it's doing something that other menu items don't do, and that users should know about before clicking on the item:

• it switches programs unexpectedly
• this initially makes the user think they accidentally switched programs
• so they'll usually try to switch back to it from the blank page or loading browser
• they'll often try the command again
• it can take several tries before the user realizes the program is operating as expected
• they may also think that the program they were in just has crashed or experienced an error
• if the web browser isn't active, it gets launched
• this can look like the beginnings of a crash report, reinforcing the user's suspicion of a program error
• the first thing a user thinks is "I have accidentally launched my browser" or "some browser window just spontaneously spawned another window, which is always a bad sign"
• a new browser tab or window is created, obscuring what was there before
• if users switch back to the browser, they won't immediately recognize it as the browser window they had open
• they tend to keep looking for the now-hidden tab in other browser windows
• this may seem like a stretch, but users are blind to details which they don't think have changed, and especially things that they didn't initiate

The new one is slower!

Here's an easy usability mistake to make: you upgrade a thing, but the new version is a bit slower to load or use, and so you see a decrease in usage and people wondering how to switch back!

This is why realistic speed measurements need to be built into each round of testing, and a round of testing with each revision cycle. It's the kind of research you have to be able to do quickly to get away with.

How the PC Industry Saved Us (from too many slashes and capitals)

Yes, other people have a problem with this too:

Beware of the bilingual Canadian keyboard layout
Who’s the IDIOT screwing up Canadian laptops?!

A couple of years ago, it happened to me. I lost my ability to easily make capital letters or hit return. Backslashes haunted their space.

It wasn't because of an injury, a computer bug or a broken keyboard. It's because I got myself a brand new Toshiba laptop.


I was used to the shift and enter keys being a bit larger than they were in IBM's old keyboards. IBM used to care about us getting pinky exercise, and they understood the positive benefits of stretching:




During my entire computer usage experience, I'd used keyboards that put the left shift and enter keys within easy reach of the pinkies:

 

My new Toshiba laptop stuck with IBM's specs. Here's what it gave me:

 

The Toshiba didn't last long in my house. I traded it in for a Dell Vostro, with a normal keyboard. It was also favorable in other old-school vs. new-school ways: it had a matte LCD screen instead of a glossy one, a trackpad that worked, and could run Windows XP or Vista instead of just Vista. And it didn't come with as much extra software installed.

Now I'm starting to notice other friends who've been affected by this! Both my girlfriend and my roommate at the moment have these kinds of keyboards on their laptops. One of them has an HP and the other one has a Compaq, but they are the same laptop. Exactly the same.

This isn't just a problem in Canada. Most keyboard layouts around the world have this problem. Perhaps anti-American sentiment allowed the problem to spread here.

The best way to avoid getting one of these layouts is to try your laptop out in the store before buying it. And if you're buying your laptop online, somehow verify that it's not a bilingual Canadian layout. But you can never trust a picture attached to a laptop order.

If you're ordering online, you might as well buy your laptop from the United States and have somebody sent it to you across the border.

Of course, Apple would never implement a design blunder like this, so sticking to Macs should also keep you safe. They also have a totally different (and logical) means for typing special characters, so anybody who wants to type in French should, unfortunately, stick to Macs.

When IBM introduced their PC/XT keyboard pictured above, they got a lot of complaints from users trying to make the switch from their typewriters. This was their big chance to introduce the Simplified American Standard (aka "Dvorak") keyboard layout, but they kept QWERTY instead to aid in adoption of their computers by administrative staff all over the world.


"IBM made the <Shift> keys rather small, and even worse, placed an extra key (backslash and vertical bar) between "Z" and the left <Shift> key, causing touch typists fits when attempting to use the keyboard."

Restoring Underlines to Links in Your Blog's Body Without Affecting "Button" links, titles, etc

Add this to your Blogger Blog's Custom CSS to have underlined links in the body without affecting other links:

.post-body a {text-decoration: underline;}

Why NOT to Have a Website

For small business people and artists, maintaining a website, especially a traditional website, and especially a really slick one, is a big task to add to the to-do list. And even with a lot of initial effort and the regular content updates that make a site worthwhile, it's still not enough - in order to stay fresh and functional as things change, it'll need to be changed and redesigned from time to time. Most people have an easier time changing their signage and business cards than their website, and they end up wondering whether it's helping or hurting their goals.

For users who clearly don't need a custom site, I recommend blogging instead, because it serves most people's needs and doesn't cost them much. Web designers (like me) who previously had a hard time offering good value to small businesses are now finding ways to visibly re-brand Wordpress, Blogger and Tumblr accounts, making them more appealing to clients who don't like the idea of geeky logos appearing on their sites.

Most people, however, don't need to do any web publishing. They just need the equivalent of a business card and a sign - online. They need to communicate the basic format of what they're offering, whether it's great sandwitches or great dog photos, and how they can be contacted.

For people using the internet to find products and services, what matters most is being able to find the information they're looking for, and assess how fresh and accurate it is. They'll do a search, check whichever sources of information look promising, and then choose among them depending on which seems most accurate.

Let's examine a typical internet task:

1. Search for store name + city name
2. Scan the top results that look related, and open the official site, as well as a community business listing, in new tabs.
3. Since the business listing and the official site list different hours, get phone number off official site, as it's more likely to be accurate.
   At this point, having to make a phone call for information that should be available online may derail the task, especially if a competing business offers information with a recent date on the content.
4. The business has to deal with another extra phone call.

This is pretty typical on the internet. This business could improve their initial interaction with the customer in three ways:

1. Maintaining awareness of their own online presence, so they knew where their information would need to be updated, and take control over their third-party community listing, and
2. Indicating when the information was last changed, assuring web users that the information has been recently approved by management.
3. Providing a calendar of any closure dates - statutory and bank holidays for example.

Here are some advantages of using 3rd-party listings, social networking and media sharing sites instead of or in addition to an official website.

• Users trust and understand them already.
• It's easy to make it clear that the information is official and up-to-date.
• They're maintained by large companies with research & development budgets, so they can worry about keeping them up-to-date, on their dime.
• Even if their site is tacky, it only reflects on them, not your business.
• Listings sites index very well in search engines - usually better than private websites.
• They usually allow for user comments, which enhances credibility.
• They're well-supported because of their size, so if you need help with something, it's easy to find the answers.
• It's more reliable - less likely to go offline, get attacked, be accidentally blocked by Google, or suffer from traffic overload.
• Businesses benefit by being listed together, providing a context of competitive representation that attracts people's attention, just like stores benefit from themed districts in a city.
• It's much easier to prepare and present the content, because each listings or sharing site has a format that's easy to follow.
• Maintaining several different listings and accounts might seem like a repetitive hassle, but each of them serves a different kind of community in a way that suits them. Each site is an opportunity to present information in a way that maximizes that format and engages that audience.

Some online directories, such as online yellow pages, are open-ended, and some are specific to an industry or a niche, like TripAdvisor.

The real meat of engaging with one's online presence is researching these opportunities, and they're different for everyone and every business. With a little research, anyone can find out where they belong online - and then it's just a matter of keeping things up-to-date, responding to comments, and continuing the research as the landscape changes in reaction to their efforts.

So as usual, the message is, you don't need to spend a bunch of money or waste a bunch of time to look good and get things done on the 'net. It just takes a bit of patience, like everything else about doing business.

Even if you are maintaining profiles on 3rd-party sites, it's nice to have an official site to "anchor" and connect all the online profiles. And it's a good reason to develop an internet presence before creating a private website. But if it takes time away from responding to comments and keeping your profiles and listings fresh, and especially if it doesn't contain content that's not available elsewhere and couldn't be presented better elsewhere, then it's slowing things down.

Setting up a proper web development testing environment using VirtualBox and Windows on Linux or Mac

First off, it's best to be able to do your web development on a Mac because

• Coda, by Panic Software, is a great app and it's not for Windows or Linux
• It's harder (maybe impossible) to set up a Mac emulator on Windows or Linux than it is to emulate those operating systems on a Mac. So if you want it all, get a Mac. What I personally prefer is to have a physical computer for each of the main user groups in your target market.

I do my development on Ubuntu Linux, and have Macs around for testing. I need to be able to test with all the popular web browsers on Mac and Windows. That means:

• Chrome for Linux and Windows
• Safari for Mac and Windows
• Firefox for Linux, Mac and Windows
• Internet Explorer for Windows

So on my Linux computer, I use VirtualBox, a great free emulator from Sun Microsystems, and I have a Windows XP install that I use in a 1024 x 768 window. I have Chrome, Firefox, Internet Explorer, and Safari installed on it.

Because Chrome has the best DOM Inspector (the "Inspect this element" function in the right-click menu), and because Chrome uses the Webkit engine which also powers Safari, and because those are the two fastest-growing browsers in terms of active user base, I use Chrome as my main development and testing environment. Once I get something working in Chrome, I verify that it works in Firefox and Internet Explorer. I try to do this verification as frequently as is convenient, so that I don't end up having to backtrack and use Firebug in Firefox, which is kind of clunky, or Internet Explorer's absolutely hellish DOM inspector, to debug a webpage.

In Internet Explorer 8, you can use the Compatibility View and Developer Tools to inspect how a page would perform in earlier versions of the browser, but it's a good idea to have a Windows2000 install with IE6 as one of your VirtualBox machines, if IE6 compatibility is a requirement for your projects. As a side-note about IE6: I exercise due diligence in using industry-standard best-practices, which dictate that, at the very least, the site should work in all browsers, and look as good as it can in each, even if that means looking different in each. If a client demands that their site be identical in all browsers, and especially if there's anything even somewhat cool about the site, it can double or even triple the budget. Web Designers rarely present this information to potential clients, because we're embarrassed about how helpless we are to accomplish this task efficiently. We all blame the software.

Anyway, here's how to actually look at your files in emulated Windows without having to post them online:

In VirtualBox, you can set up shared folders to bridge the gap between your Windows browsers and your Linux or Mac filesystems. Your shared folders are accessed through your Windows network places, and function like mounted network folders. Sometimes I have to copy files over in order to get them to work properly, because of network permissions problems created by my Linux host. Host means the OS on which I'm running the emulator.

Setting up a Windows install in VirtualBox on a Mac is very similar to setting it up on Linux, and it's also an easy way to access Linux development tools on your Mac desktop.

tl;dr (Making pages that you'd read yourself)

Tl;dr means "too long, didn't read."

But it means something else too. It means "you'd expect me to read the page you wrote differently from the way you'd read it yourself, which is insulting."

People approach making websites as if everybody else who uses the internet wants to read as much as they can about as much as they can find. Nobody does. Everybody is like you. You go to a page on the internet thinking:

1. Does it have the text I need?
2. What would the text I'm looking for look like on this page?
3. Within the text I've found, where are the important bits?
4. Have I skimmed it right or did I get mixed up on context and complicated sentences?
5. Can I leave the page now?

If all of those questions don't get answered a very, very short time, whatever a very short time is for the viewer (10sec - 2min maybe), they will return to their google results and, bang, your page, instead of giving them the answers they needed, was just a roadblock in front of them finding what they wanted, making it not only useless, but better off never having been designed.

That's a harsh fate for a webpage!

So keep in mind what else is out there, write your sentences carefully like an essay, and most importantly,

expect itchy back-button fingers.

The Mars exploration site's got problems? Holy moly!

It's hard to believe that somebody would make this kind of mistake on the Mars Exploration website, but yeah, the flash thing totally doesn't do anything when you click one of the "click to view" something links. This shows how even when loads of money is thrown at a web design job, massive problems can still slip through the cracks, without proper testing. In this case, the cheapest of usability tests or a heuristic audit would have revealed the problem.

The moral of the story? Don't make it slick if you can't make it click.

UPDATE: Sometime between 2011 and 2013, this problem was solved, because the interactive thing I was referring to was removed. It was replaced with a virtual tour that's so ghetto, you'd have to travel with it back in time at least a decade to find someone who'd be impressed by it. But it does seem to work.