Just a quick post today to cover a bit of Font 101 for you. You might be surprised to see this...
Hard to believe those are both size 12, eh? Different fonts, especially serif (e.g., Times New Roman) vs. sans serif (e.g., Arial) can look to be different sizes even when they're the same. But it's really an optical illusion.
So, what's the lesson here? Make sure to test your fonts at different sizes to get the look you want.
Posted by Nathaniel Richman on June 12, 2007 at 10:50 AM | Permalink | Comments (0) | TrackBack
Quick tip: When linking to a PDF file, either within a web page's copy or from a menu button, it's a good idea to make some kind of note that the link will open a PDF file (and you may also want to note the approximate size of that file) — e.g., "Annual Report (PDF - 100KB)". So many people hate PDFs that, if they knew the link was going to open one, they wouldn't click it. In fact, I get frustrated myself when I'm just quickly perusing a site, flipping from page to page, and then, all of the sudden, I've hit a link to a PDF and the dreaded Acrobat loading delay begins, without an easy way out. Patience is at a premium these days. Let people know if they're going to have to wait beforehand and you'll tick a lot fewer people off.
Posted by Nathaniel Richman on April 24, 2007 at 10:50 AM | Permalink | Comments (0) | TrackBack
Ever thought about how the colors on your computer's monitor affect the amount of energy it uses? Of course it makes sense that white uses more energy than black, since more light is needed to display lighter colors. Check out the "Emergy-C" low wattage palette on ecoIron's blog to see what colors go relatively easy on wattage. Not too hard to design a nice looking web site with that palette.
You can see the differences in wattage used for various colors at http://www.microtech.doe.gov/EnergyStar/info.htm. There's also info there about which popular screensavers are best for energy savings. Interesting stuff.
Posted by Nathaniel Richman on April 3, 2007 at 09:48 AM | Permalink | Comments (0) | TrackBack
Okay, the second part of that title is one of my favorite all-time movie quotes, from... anyone? Joe Pesci in Goodfellas.
Anyway, just a quick note on font usage here, in particular the use of Comic Sans. Why do so many people like this font? It's the most casual of the "web safe" fonts. Stay away from it, unless you really don't want to be taken seriously.
Stick with the more accepted and more conservative fonts on your web site, such as Verdana, Arial, Times New Roman. Spice things up a bit with Georgia and Trebuchet. But, if you want your site to look at all professional, no Comic Sans. Ever.
Posted by Nathaniel Richman on November 28, 2006 at 09:49 AM | Permalink | Comments (1) | TrackBack
Jakob Nielsen of useit.com has an interesting article discussing an eye-tracking study, which shows reading patterns of web page viewers. Turns out to be a F-shaped pattern: Readers' eyes start at the top, in a horizontal motion, then move down the page and do a second horizontal movement, then scan the left side of the page, in a vertical motion.
What does this mean in terms of designing a web page?
Posted by Nathaniel Richman on June 7, 2006 at 09:19 AM | Permalink | Comments (1) | TrackBack
No, not moron domain names... ;)
For those who find statistics interesting (okay, I do), check out Dennis Forbes' post on The Search for a Domain Name.
He's studied stats for registered .com domain names and discovered that all 2- and 3- letter combinations are taken as are nearly 80% of all 4-letter combos. And, the 5-letter ones are starting to fill up. So, don't expect to miraculously find a very short acronym type domain name, at least not of the .com variety. You might get lucky with a 4-5 letter one.
Mostly it's just a fun read and might give you some good trivia to share with your friends. For example, did you know that the most common beginning letter for domain names is... S?
Okay, maybe this guy has too much time on his hands! :)
Posted by Nathaniel Richman on April 6, 2006 at 08:25 AM | Permalink | Comments (0) | TrackBack
The winner of our free website review is: Barbara Babkirk. Congratulations, Barbara! And, thanks to everyone who entered our draw.
So, we begin reviewing Barbara's website — www.barbarababkirk.com — with today's focus on the design of the home page:
On the right is Barbara's home page. Of course, if you're following along at home, you might want to actually open up her site in a new browser window.
Colors
Overall, I like the color scheme. The scarlet red / burgundy /yellow combination is quite nice, in my opinion. However, I find some of the smaller yellow text difficult to read on the home page — e.g., the "learn more" under the ribbon at the top left and the text underneath Barbara's name. Same goes for the khaki colored font in the bottom text menu. I would suggest that she use a font that is lighter in color (or white) and/or sans serif, such as Arial or Verdana, for easier readability at a small size.
Menu Bar
The main menu is easy to find, right in the middle of the page. This is good. You can quickly get into the rest of the site. There are a couple of suggestions I would make about it, though:
Misc.
One other minor thing I'd fix on the home page is the overall page width. For some reason, I'm getting a horizontal scroll bar (at the bottom of my browser window). This isn't the end of the world, but it shouldn't be there. A quick look at the page's source shows me the table used for this page is set to 103% — meaning wider than the screen. There's no reason it should ever be set to higher than 100% (unless you're an artist, wanting to show your portfolio in a different way). For the most part people hate horizontal scroll bars. Luckily, here, there's no need to use it to see anything to the right, so I'm guessing that was just a typo that should be fixed.
Overall, there are nice elements to the home page and it's obvious thought was put into the design, which is appealing, but could use a bit of tweaking.
More to come in the next few weeks...
Posted by Nathaniel Richman on February 17, 2006 at 10:48 AM | Permalink | Comments (4) | TrackBack
I've been hearing/reading a lot of debate about CSS vs. tables layout. Particularly in favor of CSS is the CSS Zen Garden website and book. Both show many wonderful examples of very nicely designed sites, amazingly all done from the same HTML code, but just using a different style sheet.
On the flip side, however, as KillerSite.com's Stefan Mischook points out, to get the layout you want, using CSS, you often need to incorporate "hacks" which don't work on all browsers, namely IE7.
I agree with Stefan that many CSS advocates have a bit of a "holier than thou" attitude in that if you use tables, rather than CSS to create a website, you're just like soooooo 2002. Bottom line is it doesn't really matter how you create the site, as long as it looks good and works (on all recent browsers). Not once has a client of mine complimented me on the coding I did in creating their website.
CSS most definitely has its place — in fact, I use it all the time, mostly for fonts and other things. But, if your site works best using good ol' HTML tables, then don't feel bad using them!
Posted by Nathaniel Richman on February 7, 2006 at 12:49 PM | Permalink | Comments (0) | TrackBack
Before I start... Last chance to enter our FREE draw to win a professional review of your web site.
Okay, what's the deal with site maps? I'm not talking about Google Sitemaps, but having a "table of contents" type of page on your site. No, you don't NEED one, but they can be useful for a couple of reasons:
1. The obvious reason - it can help your visitors find a page, without having to dig around too much (especially if your site map is somewhat organized). And, it can be an easy way to have a quick glance at all that's available on your site.
2. Google likes 'em. It places importance on your site's pages (partially) based on how many clicks it takes to get there from your home page. If you have a page that's buried within a section within a section within a section, Google figures that's not an overly important page. But, if it's within a click or two from your home page, it's probably worth something. If your site map is linked from your home page, then it's only 2 clicks to each page listed. Not too bad.
Posted by Nathaniel Richman on January 27, 2006 at 02:36 PM | Permalink | Comments (0) | TrackBack
We are offering a FREE DRAW to win a professional review of your existing website. The review will point out what's working and what's not in your website and will be an invaluable tool in helping your site to get the results you’re looking for — more visitors, more clients, more sales. We will provide suggestions to help improve the site's design, navigation, copy (text) from a marketing perspective, and make your site search engine friendly so that your site will be better indexed in the search engines.
The lucky winner will have their site reviewed on our blog, which will also provide you with some additional exposure for your services.
To be automatically entered in the draw to have your website reviewed, simply subscribe to our newsletter, Net Results (at the top left of this page). Note: We will never share your contact information with any third party. You may unsubscribe at any time.
Deadline for contest entry is January 27, 2006. Get your entry in soon!
Posted by Nathaniel Richman on January 17, 2006 at 12:45 PM | Permalink | Comments (0) | TrackBack
Funny thing I notice in some websites, particularly "newbie" websites: too many links. But how can you have too many links? Isn't that the whole point of the Web? Well, yes it is, in a way, but anything can be overdone.
The idea of a website is that it is interactive, meaning you're reading something and then you see that you can click on a link to get more information about something. And, from there, you can get more information about something else. And on and on... Until you've gone off on such a tangent that you can't remember what the original page/site was that you were looking at.
You really don't want people leaving your site before they've read what you've got to say. So, be careful with having too many links, especially to external sites. Even internal links should, for the most part, be placed so that there is a natural flow for the reader — i.e., they've read most or all of a page (or a news snippet) and then at the end see a "more" type of link to continue to the next logical page (or rest of the news article).
Remember, you're writing and designing your site so that your visitors will read through and stay on your site — and then take a step of action towards contacting your or giving you business. It's easy to lose 'em by pointing them elsewhere. You've got to do their best to guide them within your site, not to someone else's.
Posted by Nathaniel Richman on January 10, 2006 at 09:57 AM | Permalink | Comments (0) | TrackBack
Might seem a bit strange to commit a whole post on the 'Buy Now' button, but after reading "Does your buy button suck? How to make a buy button that customers will love to click" in the WebmasterWorld Forum, I have to admit it's worth discussing. If your business sells green products, you need to consider all the details of your online marketing strategies.
The author stresses the importance of making your buy button work for you and covers the following aspects (and manages to relate them to Einstein's theory of relativity):
Posted by Nathaniel Richman on December 27, 2005 at 10:49 AM | Permalink | Comments (2) | TrackBack
For all you out there starting up your own blog, here's a good primer: Blog Design Checklist, posted on Successful Blog.
Really, in designing a blog for your socially responsible business, you want to follow pretty much the same advice we're always preaching here for designing and effective website — i.e., keep it simple and easy to read, well organized, easy to navigate, quick to download, etc. With a blog, even more emphasis goes on readability (not that that should be overlooked on your website!). And in the checklist, they emphasize being able to easily find the author's bio/contact info.
Posted by Nathaniel Richman on December 13, 2005 at 10:17 AM | Permalink | Comments (0) | TrackBack
A rather simple — and obvious to some — tip: when you're including an image on your website, size it down to the dimensions you want, in your image editing software, not in the HTML code. What this means is if you have a photo that is 400x600 pixels and you want it to show at 100x150 pixels on your page, use Photoshop, or whatever image editing software you use, to scale it down. The file size will be much lower and the image will download so much faster than if you leave the image large and rely on the browser to scale it down for you.
If you're using thumbnails of images and then asking viewers to click on those thumbnails for a larger view, I recommend creating two versions of the image — one for the thumbnail and one for the larger version. Most people don't mind waiting a bit longer for the larger version to download if it was their choice, rather than having to wait for a page to load simply because the creator was lazy.
Posted by Nathaniel Richman on December 9, 2005 at 09:11 AM | Permalink | Comments (0) | TrackBack
Michael McLaughlin's got a useful article in which he gives his 11 principles for a great websites for consultants. Can't say I disagree with any of them — not too different from what we've been preaching here.
Some of his points include:
Follow these and the other guidelines and your socially responsible business' web presence will be a success.
Posted by Nathaniel Richman on November 22, 2005 at 10:10 AM | Permalink | Comments (0) | TrackBack
Ever notice how some web pages take forever to load? Often, especially if the page was created by someone without much/any web development experience, it's because the images haven't been optimized for the web. I always laugh when I see an in-house designed site, with corporate bios, the small headshots are around 1MB each! That's ridiculous for on-screen presentation. Those images should be around 10-20KB each. It's so easy to optimize for the web in Photoshop. Just take your image, choose jpeg or gif format, and basically set the "quality" as low as possible while keeping the image looking as good as it should. That's a pretty simplified explanation, but, really, it's not that difficult.
A quick note on the difference between jpeg and gif format: In general, jpegs are used for photos or images with gradients/shadows. Gifs are meant for line drawings. Keep that rule of thumb in mind and you should get good quality images without the huge file sizes.
Posted by Nathaniel Richman on November 9, 2005 at 09:23 AM | Permalink | Comments (0) | TrackBack
Nothing ever stays the same, especially in the world of the Internet. New browsers (or new versions of existing browsers) are popping up on a regular basis, computers (and their connections) are getting faster and better, monitors are getting bigger... you get the point.
If you're designing a website (or having one designed for you) it's good to know what the trends are so that most of your visitors will see what you want them to see. A great source of stats is at www.w3schools.com/browsers/browsers_stats.asp. It's pretty clear that Internet Explorer is still the browser of choice for most people. But, it's interesting to note that, while IE6 has hovered around 65-70% for 2½ years, IE5 has dropped from around 25% to around 6%. Not surprising that its usage has gone down, but the percentage hasn't been made up by IE6, rather mostly Firefox (around 20%). Opera's always got its following (around 1%), but that's not worth worrying about.
Bottom line is approximately 95% of Internet users these days are using IE or Firefox. So, make sure your website looks good in both of these browsers and you're pretty much covered (you can't please everyone all the time... 95% is about as good as it gets on the Web). There are some minor differences in the way the two browsers display pages (generally IE is more forgiving about certain coding) — such as some CSS elements — so you'll want to make sure everything looks okay in both (if necessary, you can have two versions of some pages).
As for other stats, such as resolution, color depth, etc., we're still moving up, which means the lowest common denominator is getting better all the time. But, it's always important to consider who your specific audience will be. If they're mostly going to be computer savvy and owning fast, newer machines, you can go big; otherwise you'll still want to cater to those with lower resolutions, slower connections, etc., to make everybody happy.
Posted by Nathaniel Richman on October 11, 2005 at 10:34 AM | Permalink | Comments (0) | TrackBack
One of (if not the) best examples of the power of CSS (cascading style sheets) is the CSS Zen Garden. If you take some time and look through the submitted designs, you'll see the incredible variety that can be applied to a website (theoretically of any number of pages) simply by changing one single file - the stylesheet.
At their most basic, CSS stylesheets allow you to apply global changes to all of the fonts used on your site. e.g., if you decide that having your paragraph text size is one point too high, you can lower its setting in the stylesheet and, voila, all paragraphs will have the smaller font.
To learn more about CSS, have a look at www.w3.org/Style/CSS/.
Even if you're not interested in the concept of CSS, the Zen Garden sure is a great place to get inspiration for different designs.
Posted by Nathaniel Richman on October 4, 2005 at 10:41 AM | Permalink | Comments (0) | TrackBack
An interesting thread in WebmasterWorld.com about "writing the perfect home page." Although, as often happens in such forums, there are digressions, there are also some good tips and findings.
One point that I found interesting is that having a human face on your home page (and, I suspect on other pages of your site) is something that compels viewers. Apparently there's research to prove this and I don't doubt it for one second. Having a human face on your home page adds an element of personalness (Is that a word?), especially if you're offering a service and that face is yours. If you're not in the service industry (or not a sole practitioner), you can always use a stock photo of a person on your home page to give the sense that there are human beings behind the website and also include photos of your staff, board members, etc. in the About Us page.
Having designed websites for several therapists and healing professionals, I know their clients have felt that they've had the chance to "get to know them" before actually calling or meeting them in person. Of course, well written web copy is a huge factor in this, but having your photo also plays an important role.
A lot of us are shy about putting our picture for the "whole world to see." But, as long as it's a good photo (preferably professionally taken), nobody's going to laugh at it.
Many Internet surfers feel that being on the computer and looking at websites can be a very impersonal experience. Help visitors to your site feel more comfortable by having a human face to look at.
Posted by Nathaniel Richman on September 27, 2005 at 10:22 AM | Permalink | Comments (0) | TrackBack
One thing that's important to keep in mind when designing your website (or having it designed), is to try to keep things flexible for future upgrades. Is it possible/likely that a year from now you'll need to add a new section or two? If so, is there room in your menu to add an new button to get to that section? Or will that mess up the whole design?
Vertical menus that run down the left or right side of the page generally are easier to add to (or subtract from) without effecting the overall design. Horizontal menus running along the top (or bottom) of the page can be a lot trickier, especially if you're wanting to keep the width constant from page to page (and that's a huge pet peeve of mine — seeing sites in which the page widths vary). (See my old post on page dimensions for more on this.)
Might not be a really big deal for a small website, but if you've got an expanding business, you'll want your website to be able to grow with you!
Posted by Nathaniel Richman on September 20, 2005 at 10:40 AM | Permalink | Comments (0) | TrackBack
Frames allow you to split your web page (frameset) up into rectangular panels (frames). A common example of their use would be to have the menu bar on the left, the logo and contact info up top, and the remaining space the content. Possibly another bar would appear at the bottom of the page with the copyright and disclaimer. Something like this...
In this common example, all frames except the content would be of fixed width and height. The content frame would be the only one with a scroll bar - i.e., it would fill in whatever space is left in the browser window. The advantage of this setup is that no matter how far you scroll through the content, all of the other relevant information is always visible and accessible. So you don't have to scroll all the way back to the top of the page to find the menu bar and go to another page. Sounds great, right?
So what's the problem? Each frame is its own page (in this example, we have 4 pages). Google indexes each page separately, based on their content. Then, when one shows up in Google's search results, it is linked only to that frame, not to the entire frameset. So, if someone clicks on that link, they only see the single frame. If that happens to be the content frame, at least they can read that part, but then have no way to get to the rest of the pages on your site. If that page that they reach is one of the other frames, it's even more useless. Basically, if being picked up by search engines is important to you, I'd highly recommend not using frames. (For more info on why Google dislikes frames, see http://www.google.com/intl/en/webmasters/2.html, point #2, last bullet.)
The solution? If you do want the same look/functionality of the frameset above, I'd suggest using layers - i.e., have a small page with a scrollable content layer on top. Works nicely and Google reads it all as one page - no problemo!
The other, simpler, idea is to skip the idea of having only the content scrollable and making sure to put a duplicate (perhaps smaller, text version) of the menu, logo, and contact info at the bottom of your page. That makes it very easy to get from page to page.
Posted by Nathaniel Richman on August 23, 2005 at 10:19 AM | Permalink | Comments (2) | TrackBack
From personal experience, I've found that if you want visitors to your site to contact you — specifically to get a quote on your services — you'll get better results by including a contact form as opposed to only a "mailto" link (i.e., a link that opens up a new message window in the user's email program).
By all means, do include an easily visible mailto link on each page of your website so that people can send you a regular email, if they'd like (beware of spam, of course). But, it seems that, to get the ball rolling for prospective clients to contact you, they're generally happy to fill out an online form where, instead of typing a full message, they can simply check a few boxes, fill in their name and email address, maybe a comment/question, press Submit and off it goes to you. Quick, easy, and painless! Now the next step in the new client relationship is up to you...
Posted by Nathaniel Richman on August 9, 2005 at 10:24 AM | Permalink | Comments (0) | TrackBack
Two reasons why I don't recommend using an 'entry' page to your site - i.e., one that says, "Click here to enter":
The only types of 'enter' pages that I think are somewhat useful are when your site is split into two - e.g., English and French. Still, in that case, I'd make sure to have at least a couple of paragraphs of good copy in addition to the two entry choices.
Posted by Nathaniel Richman on July 26, 2005 at 09:48 AM | Permalink | Comments (0) | TrackBack
It's funny how topics for articles come to you (well, to me, anyway). I was in yoga class the other day, trying to relax in shavasana (for non-yogis, it's basically the final pose of the practice, where you lie still on the floor for a few minutes), but kept hearing a banging on the door next door. It was, needless to say, very distracting. But, it did give me the idea for a blog post: sound in web sites. As you might guess, I'm generally opposed to it.
One thing that really annoys me is when I go to a site and all of the sudden I hear a blast of music, an ad for a movie, or someone saying, "Hello, welcome to my web site." To me, it's like my radio coming on automatically — it jilts me. And, having worked in outside offices before (as opposed to at home, where I usually work), I know how potentially embarrassing it can be when your boss walks by the instant that blast comes on!
Sure, I could keep my speakers off, but I like to hear that little ding when I get new mail (makes me feel important) or the beep when I try to do something without closing a dialog box first. And, I do like to hear some music or movie clips, but at my choosing.
The only time I really expect to hear sound, without OK'ing it, is when I go to a musician's site. In fact, I recently checked out Gavin DeGraw's site (www.gavindegraw.com) and was pleasantly surprised to hear the acoustic version of Chariot (sent shivers down my spine!). But, that's it. Otherwise I don't like to be bombarded with noise and have to fumble for the volume control or the Back button.
So, I implore all web developers out there — please only place audio on your site if there is some sort of "click here to listen" button. And, if it is on a music site, definitely have an easily located "off" button. Some of us are supposed to be "working" (nudge nudge wink wink).
Posted by Nathaniel Richman on July 12, 2005 at 09:34 AM | Permalink | Comments (1) | TrackBack
Ever wonder why some web pages fill your whole screen while others don’t? Many people have the same question: What’s with all the white (or other plain color or background pattern) around the main part of the page?
There are 3 basic design styles when it comes to dimensions relative to the screen:
Types 1 and 2 have the advantage of allowing for greater control of design elements – i.e., you can pretty accurately decide where all images will sit in relation to the text. If you can control the font size/type using CSS style sheets, the page should look pretty much the same on every monitor. The reason for limiting the dimensions to around 700x400 has to do with two things:
So, after we take these into consideration we're left with around 700x400 pixels to play with.
Most sites these days go with the approx. 700 pixel width and let the height fill the screen vertically. A great solution, in my opinion, as it gives you control over image placement, but also allows for a large amount of copy.
Type 3 has the "advantage" of no white space, but the cost is little control of the spacing of images relative to the text. And, you often get a lot of white space within the page if you don't have much content. I usually only recommend this type if the page is copy-heavy and exact placing of images within the content is not essential.
Posted by Nathaniel Richman on July 5, 2005 at 10:27 AM | Permalink | Comments (1) | TrackBack
Flash is one of the most useful and versatile tools available for inclusion on your website. I'm sure everyone, by now, has seen it in action - from cute animations to cool menu systems. And, because of that, I have many clients that want it on their websites. So, should you have it on your site?
This is one of those "well, it depends" type of answers. I maintain that there's no point having something just for the sake of having it. So, if you do decide to use Flash on your site, make sure it serves some sort of purpose.
Now, by all means, if that purpose is to add a coolness factor to your site so that it will attract more visitors, an animated intro (or "splash") page may be worth considering. Just keep in mind that, in general, the longer and more complex it is, the longer it will take to download, therefore the greater the chance that a visitor will get impatient and leave your site. So, if it does take a long time to load it had better be worth the wait! Regardless, give visitors the option of skipping the intro. And, you might want to give a quick teaser so that they have a sense of what's coming and then they can decide whether to wait or not.
The other thing, of course, is that the more complex the animation is, the longer it'll take you or your designer/developer to create = higher cost to you in time and/or money.
Another major disadvantage to using a Flash intro is that it doesn't get picked up very well by search engines. This may or may not be of concern to you. If it is, I'd suggest skipping it or...
Go for the best of both worlds: use an animated Flash banner at the top of your home page, while keeping the rest of the page (text and all) intact. This will still get picked up by Google et al and you have your coolness factor added in too.
Or, you might want to think of using Flash to create a unique menu system. This might cost you in terms of search engines ranking, so I would strongly recommend also having a text menu somewhere - most likely at the bottom of each page (generally a good idea anyway).
So, yes Flash can be a great tool to add interest to your site, but make sure you weigh its benefits with how important search engine rankings are to you and then make your decision.
Posted by Nathaniel Richman on June 14, 2005 at 06:09 PM | Permalink | Comments (1)
Perhaps it's easiest to talk about what isn't good design. If you're looking at a web page and wondering why there are all sorts of flashing items and the colors are hurting your eyes, it's probably not well designed.
Everything on a web page should be there for a reason, and not because the designer/programmer just learned how to use Flash and thought it would be fun to put a little animated dog on the page.
Your website should have the visitor (i.e., person viewing the site) in mind, not the designer! Of course it should look nice and be easy on the eyes. And, it should fit with the purpose and audience of the site - which will be different for a skateboarding shop than for a financial institution.
But, it should also be easy to get around. Links (buttons) to the various pages in the site should be simple to find and in a logical order. The main content should be easy to read (no green text on a blue background!). All other relevant information (contact info, etc.) should be readily available.
You probably want a unique site that stands out from the rest. But, keep in mind you can have that while still impressing your visitors. Remember your website (like any other promotional material you put out) says a lot about your business or organization. If you want to present a professional image, your website must look professional!
Posted by Nathaniel Richman on June 8, 2005 at 01:53 PM | Permalink | Comments (0)