Monday, August 20th, 2007
at 3:23am
If you’re at all a common browser on the internet, you probably have come across a website mentioning this thing called “Web 2.0.” What is this exactly, and how does it work? There has been much confusion going on surrounding Web 2.0, a lot of fallacies, and a lot of debate among website designers as to its true definition. Hopefully I’ll clear some of these up.
Firstly, let me tell you what Web 2.0 certainly is not. As the name would imply, Web 2.0 is supposedly the successor of Web 1.0. In some ways this is true. However, it definitely does not mean there is some brand new version of the “internet” coming out or that you’ll need to “download” a Web 2.0 browser or anything. We’re still dealing with the same exact internet. Don’t let the so-called version number fool you.
Web 2.0, as I personally as a web designer and technology advocate would define it, is redefining how we look at the way websites work. For example, for the past 15 or so years, the World Wide Web has been nothing but static pages with text, maybe a few pictures, and within the last few years, possibly some Adobe Flash animations or interactive navigations. Still though, for the most part, every website you browse is simply for the display of information, page by page, site by site, everything works by itself and for itself.
Web 2.0, on the other hand, is redefining static web design concept. For example, instead of coding a website to simply display information, how about updating this information in real-time without requiring any Flash, Java, or the user manually refreshing the page? Even moreso, how about allowing users to instantly add information or make changes? Ultimately, Web 2.0 is defining the convergence of internet technology and websites on a global, standard, and non-proprietary level. Everything just works together. Every website isn’t just its own anymore, it’s able to interact with others as well.
I found it very interesting that Steve Jobs recently announced at an Apple conference when presenting iLife ‘08 that iPhoto was “officially Web 2.0 compatible.” I seriously had to laugh at this. Not only did he miss the mark completely, he has a completely warped idea of what Web 2.0 is really trying to accomplish. What Jobs supposedly meant by saying this was that you are now able to upload your photos directly to your .Mac account. Keyword, there. .Mac. Nothing else. You have to use Apple’s services. For iPhoto to truely be able to take advantage of Web 2.0 technologies, it would have to be able to work with (or work with after installing a simple addon or putting in an API key) other online photos services such as Flickr, or Sony’s PhotoStation, and many others at the mercy of the API’s developers.
The whole point of Web 2.0 is making every website work together and connect with each other seamlessly. It’s not just flashy AJAX programming, live updating, or cool rounded edges. It’s about the convergence of all internet technology into one collective memory. Microsoft gets it (with things such as Microsoft Windows Surface and Microsoft Research’s Photosynth), the open-source community gets it. The mainstream and “talented” web designers get it, but apparently Apple doesn’t. Going off in a slight tangent, Apple will seriously be hurting in the next 5-10 years if they don’t back off of their proprietary mindset and realize everything is going online to the collective memory.
What’s even funnier is people are starting to talk about Web 3.0 when 90% of people don’t even know or give a wooden nickle about what truely is Web 2.0.
Thursday, August 2nd, 2007
at 3:12pm
This question was brought up awhile back when I wrote my Standards of Web Design article. The question comes from Greenweaver
Anyhow, get your own off site links to use a (target=”_blank”) and open any links in a new browser window instead of people having to leave your site, DOh!!
The answer to this, while in technical terms is simple, turns out to be a bit complicated at this point in time. As Greenweaver correctly points out, in order to open up a hyperlink as a new window instead of in the same window, traditionally you would use similar code to the following:
<a href=”http://www.google.com” target=”_blank”>link</a>
In this code example, the target attribute tells the browser where the new link should be opened, whether it be the same window (default if left out entirely), a new window (_blank), or even another frame on the same page. However, in XHTML 1.0 Strict, the target attribute has been removed completely from the standards. So how exactly do we get a new window to open up when clicking a link?
The answer, in short, is two parted. While a new standard hasn’t been put in place yet (which I would very much like to see), the rel attribute has been added in XHTML 1.0 Strict. This is the relationship attribute and describes what this object is or how it should behave in relationship to everything around it. The accepted standard at this point is to use rel=”external” in order to create a link relationship that will cause the page to open in a new window. However, by itself, this will not happen. This just describes the relationship.
In order for the new window to actually open, JavaScript must be used. This is where things get somewhat complicated. In the past, JavaScript use on pages was strictly prohibited, mainly because back in 2000/2001, a majority of browsers barely supported it, let alone few users actually had it turned on for security reasons. Times have changed. Not only do all major browsers thoroughly support JavaScript, an extreme minority of users switch it off purposely. So in effect, JavaScript is perfectly acceptable to use in small quantities.
However, the complications arise mainly with popup blockers. Built in blockers, such as those in Firefox, IE7, Opera, or Safari, do a perfectly fine job at being able to understand when a link was physically clicked by the user and to allow that popup. Other third-party vendors are a different story. Sometimes they won’t allow any form of a popup to show. The good news is these are few at this point, so again, I wouldn’t worry too much about those users.
Anyway, the JavaScript code to grab the rel=”external” attribute and open it in a new window should look similar to this:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(”a”);
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(”href”) &&
anchor.getAttribute(”rel”) == “external”)
anchor.target = “_blank”;
}
}
window.onload = externalLinks;
Put this code in a file and name it something like rel_external.js
In order to load this, put the following code in your head section.
<script type=”text/javascript” src=”/rel_external.js”>
</script>
All in all though, the question arises, why should the web designer dictate how a hyperlink to an entirely different page opens? With modern browsers which have tabbed interfaces, it should be up to the user how the new window opens. I would very much advocate not using this method and having all external hyperlinks open in the same window if even if they have to navigate away from the site. And indeed, on this site, you’ll notice no links open in a new window.
Why? Those are the standards without having to resort to JavaScript, and ultimately, it’s the user’s decision, not mine.
Sunday, January 28th, 2007
at 8:30pm
Let’s be brutally honest: there are thousands upon thousands of websites out there which look horrific. They’re just flat out bad. Now, different websites serve different purposes. It’s perfectly okay to have flashy graphics on, let’s say, a gaming site. It’s perfectly acceptable to have pink text on, let’s say, a site about flowers. But there is a point where it has its limits.
Let’s dissect this a bit more by giving a few examples of a bad site, and a good site. Hopefully the people who own the bad sites don’t see this post! Actually, I hope they do so they can use my points to clean them up a bit.
First off, this website is an absolutely horrible site. Just look at it and be honest. Now, granted, the purpose of the site is to provide straightforward information and not have a lot of hoopla surrounding it. While it accomplishes getting that information on the page, what it doesn’t accomplish is giving that information in an organized and somewhat easy to read fashion. The page in question fails on all counts and in all aspects miserably.
So let’s tear it apart. And I’ll do so with a large set of web design guidelines. Now, I don’t claim to be an expert at web design. I know people who are absolute gods compared to me with what they know and can pull off. But I do know a fair share, and I certainly know what looks good, or rather, what absolutely doesn’t look good.
Here we go:
1) Never ever use Times New Roman as the page’s font
In the realm of fonts, there are two main types of font categories: print fonts, and display fonts. Times New Roman (TNR) falls in the print font category. When you pick up your average text book or even novel, what you see is TNR or some variant of it. The purpose of TNR is to be printed out. Quite simply, it looks good on paper and is easy to read.
So why do we see it so often on websites with bad designs? The reason for this is, at least on Windows systems, TNR is the default font in most browsers and in the operating system itself (MS Word, Wordpad, etc). When someone puts text into an HTML document and slaps it up on the web, if they don’t define a font, it 95% of the time will show up on a browser’s computer as TNR. Other print fonts include Arial and Courier (New). Windows Vista (primarily Office 2007) will release a new default print font, Calibri, which, in my opinion, is one of the most beautiful print fonts I’ve ever seen. Never use it on a website, though.
On the other hand, there are what we call display fonts. Again, quite simply, most of these fonts were designed with a screen in mind. They’re easy to read on screens, simple, straight forward, and blend well with virtually any site design. The most popular font in this category is Verdana, which happens to be the default font on this site (and most well designed sites for that matter). Other choices include Helvetica and Tahoma.
Font choice is a must. Use what’s proper and I won’t trash your site. And remember … never EVER use print fonts on a site unless it is absolutely essential to that particular design. A few exceptions to this rule will come out in following points.
2) Please don’t use font sizes larger than necessary
On a well designed site, most often you will see Verdana being used, and the font size of the main content will be 11px. 10px makes you have to strain to read, and 12px screws everything up. 11px is perfect. Use it.
For headings, using a larger font size is perfectly acceptable. But remember, keep heading wordiness to a minimum, and never let the font size go above 20px. Usually 16-19px is standard, depending on the site’s design. It also depends on the font choice for headers. With Verdana, I wouldn’t push it past 16px. With other fonts, such as Georgia or Lucida Grande, 19px is usually the best choice.
Now, let me hold it right there for a second because I know someone is going to say “But wait! Georgia is a print font.” And this person would be 100% correct. Georgia is, indeed, considered a print font. However, remember the exceptions I mentioned above? This is one of them. When creating headers, occasionally using print fonts is okay. But again, the rule of keeping the wordiness applies as this is what tends to cause your eyes to bug out when reading print fonts on a screen for an extended period of time. However, as per the first rule never, ever use TNR on your site. Header or no header. Don’t do it! Georgia and Lucida Grande are perfectly acceptable as header fonts.
Second point on headers: They don’t always need to be a larger font size. In many cases (indeed, in this very article), headers can be accomplished simply by making the text stand out on its own, such as bolding (as in this article) or underlining it. However, as you can see from the title of this article, it is, infact, a larger size as it is the main header (not sub header).
3) We’re tired of the standard straight blue link text. Stop it.
It’s true. I cringe whenever I see the standard blue text on a site. Especially if said site is in TNR font and is more than 11px, like our friendly example site.
I read an article a while back that suggested to use this link color for the very reason that people have become accustomed to it, so they can easily recognize a link. And while he brought up a good point, there is one other thing I believe he missed. People are not necessarily used to looking for that particular font color. What they are, in fact, accustomed to looking for is text that significantly stands out from the rest of the page. It doesn’t have to be underlined. It doesn’t have to be that straightforward blue.
On this site, my link colors are blue. However, they are not the blue that is standard. What they are is a color that stands out from the background and the rest of the text so it can easily be distinguished as a link. As long as it flows with the sites design and stands out greater than anything else on the page, you have free reign here.
Also, some type of hovering effect is essential to link text as it confirms to a browser that, indeed, it is a link. On this site, I chose to darken the color and add a dotted underline. Plain underlining is just too blah!
4)Clashing color text is a no-no
I’m sorry. Puke-green text on a pink background is not a good design. Period. When designing a site, the colors you choose are vital to the appeal and organization of said site. At most, 3 colors are to be used. You may have up to 6 total (ie, slight variations of those 3 colors). On this site, there are a total of 5 colors: red, black, and blue, and 2 shades of gray. That’s it. White typically doesn’t count. I’ll be brutally honest with myself, here. I actually used a bit too much color variation on this site. It clashes a bit too much for my tastes. It is what it is, though.
Point being: Use as few colors as you can get away with, and please be sure said colors do not clash! And stay away from the reddest of reds, the greenest of greens, and the bluest of blues as color choices.
5) Tables are a thing of the past. Please move on to block-level elements such as div layers
I won’t pound this point too much since it’s not an absolute and requires a significantly greater knowledge of (X)HTML and especially CSS to pull it off successfully. Case in point, tables are not supposed to be use for aligning page elements. While this can work, it in a lot of cases doesn’t work well, especially cross-browser/platform and on different screen resolutions.
However, using tables like on the site I linked is an absolute no-go. It’s ugly. It’s too big. It requires your eyes to move too much. The borders are too big and distracting. It’s horrific. End of story.
6) Place items on a page where they can be easily seen, read, and accessed
Multiple studies have shown that you have under 2 seconds from the time someone sees your site until they have made their decision of whether or not it’s a viable source of information. Reasons it could fail this time-test are many. The main one is content placement; where is the information on the page?
You want to make the most important information the first thing a visitor sees when browsing the site. This, in the past, meant it was dead center on the page. And while this was, indeed, very true on lower screen resolutions (ie, 800×600 and below), it is most certainly not true on 1024×768 and above. For primarily text sites, this needs to be about 1/3 of the way towards the center of the screen. An example would be this very site. The content is not dead center, but it’s not all the way to the left. It’s closer to the left than centered, though.
However, there are exceptions to this rule. The point is to get the visitor to see that all-important text. If there is something else, for example, a header image or picture above that text that will instantly draw the visitor’s eyes to that section of the page, it’s alright.
Case in point: The visitor must not have to do more than 2 seconds (primarily less than 1 second) worth of searching to find the important content.
7) Simple is beautiful
Again, every individual site has its own purpose. Gaming sites need lots of pictures. Sites on why you shouldn’t take that new prescription are mainly text based and the goal should be to make that text content extremely easy to read. However, when designing sites that need pictures, please do so with care. Never over-do it. And said pictures need to be placed in an organized manor. One site that does this really well is Gamespot. It’s very crowded, but it is, indeed, organized!
In the past, every web designer was competing by seeing who could make their site the coolest in terms of flashiness and graphics. This was the big boom of entirely Flash-based websites. In recent years, web designers (at least the good and respected ones) have stepped back and realized all this stuff was only hurting the visitors. People want a nice, clean, organized, and appealing design that they can read without having to physically strain their eyes.
Now days, “Simple is beautiful” is the motto of web designers. Keep it as simple and clean as possible, but balance it with just enough graphics and color to keep it interesting and appealing to the eye.
And now for the conclusion. The one site that has stood out to me for the past 3 years as the best designed site I have ever seen is that of the 2004 PGA Tour Championship.
It’s beautiful. Absolutely beautiful. The colors flow so perfectly. The font choices are wonderful. There is just enough graphics to appeal to the visitor and give words in pictures. The content is so organized you can find exactly what you want immediately. The 2005, 2007, and 2008 sites are just as wonderful, perhaps even better in some areas (2006 was a bit lacking, in my opinion).
I go back to those sites almost nonstop when I need an example of how to do things right. They’re almost perfect.
In summary, my 7 standards:
1) Never ever use Times New Roman as the page’s font - Verdana and Tahoma are standard
2) Please don’t use font sizes larger than necessary - content should generally be 11px, headers no more than 16-19px
3) We’re tired of the standard straight blue link text. Stop it - All it needs to do is stand out from the rest of the text
4) Clashing color text is a no-no - Choose colors that go nicely with each other. No more than 3 primary colors on a site, no more than 6 total (including shades)
5) Tables are a thing of the past. Please move on to block-level elements such as div layers - Tables are made for information, not layouts.
6) Place items on a page where they can be easily seen, read, and accessed - Remember, you’ve got 2 seconds before someone decides your site is useless
7) Simple is beautiful - Flashiness is so 2001. We’re in 2007. Live like it. Make simple websites.
Have more standards? Please feel free to add them. I’m sure I’ll think of some others myself…
