Archive for the ‘web design’ Category

h1

super quick tip: stop erasing, use a mask instead

April 13, 2007

When your trying to edit a picture with Photoshop, before doing anything, duplicate the layer to preserve the original copy. Then when your ready to edit the duplicate, use a mask:mask with photoshop
found at the bottom of the layers palette to erase any unwanted pixels. This way while your adding your’re effects and whatnot’s, you’ll have the original as well as a copy that hasn’t been erased.

Advertisements
h1

tiny fonts are best with Verdana

April 3, 2007

People loooove having small fonts on their websites. Have you seen this? I still don’t understand the trend, but it’s everywhere. Not only do they love having these super tiny fonts, but they pick the most dreadful fonts to go with.

I think people think that it looks all super cool and stylish. “Oh, look at me; bust out my super fine font, how vogue of me”. Cut the crap.

I’m not against having small fonts, they are good when used properly (legal stuff, footer links, etc). But come on, if the main content is written in these god awful sizes, you can’t read a damn thing.

There are sites that, for instance, are displaying code within their article. That’s cool, but why make the font so impossible to read? I’m sure you’ve seen this:

<script language=”javascript”>
function thisFontSucks(){
alert(“Please stop using these tiny fonts.\nDo it for the children.”);
}
</script>

Maybe it looks good with your resolution, but with mine at 1280×1024, it can be annoying. If your going to go with a small font on your website, go with Verdana. It’s simple, clean, and legible. Compare the following standard web fonts and you be the judge:

Arial: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Times New Roman: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Courier New: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Georgia: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Verdana: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva and Arial are also a good picks, but don’t you see how clearly Verdana stands out? If you want to follow the tiny font trend, be my guest. Just please do it with a legible font.

Now if you make the mistake of using a crappy small font and a horrible color scheme between text and background, then you are setting yourself up for design hell. Stay away from tiny fonts with serifs. Please, do it for the children.

h1

What is so special about a title tag?

March 13, 2007

HTML <title>title</title> tags are responsible for the words that show up on the top of your browser. Have you ever visited a web-page and found the title said “untitled document”? If not, this can give you an idea of how many people are out there making such a horrible mistake: ?intitle:untitled.document?.

(By the way, the link above is a Google query that asks the search engine to look only at the title of the page. In this case, it’s searching for the string “untitled.document”; the dot represents a space. Experiment with this people!)

Most people aren’t even aware of the power of what title tags can do for a web-page. It can dramatically help your page with search engines. Title your pages with phrases and keywords that you want people to find your page with. It helps to do some research on title tags and how they work, as well as overture’s [free] keyword selector tool.

I remember when I first started learning HTML…
[cue the harp] I thought that a title tag was just good for putting the domain name of the website and that’s it. Sometimes, I didn’t even give the page a title. ;(

Think about it; when you are surfing the net and looking through pages and pages of search engines, the first thing you look at are the titles of the pages. Search results often display the title of a page in bold for a reason.

Three simple tips to get started:

  1. Think about how you would want someone to search for your site and brainstorm some keywords and phrases.
  2. Do your homework within your niche and find out what other sites are doing with their titles.
  3. Test your titles and track your pages. The winner stays. The loser has to pack it’s crap and go home.