Tuesday, January 3, 2012

Putting Two and Two Together (part 1)

Hey, guys. I'd just like to give you all a brief tutorial on making some awesome buttons for your website, but first, lets go over a little bit of background.

Here are a few things to keep in mind when doing this:
1) Keep images to a minimum.
2) Use text on your website.
3) Avoid image maps.

Keeping images to a minimum helps clean up your website, giving it a more tidy appearance. Using CSS buttons instead of images actually helps load time. If you go into paint to make a button, a small JPEG file needs to be rendered on the screen, where you could have one line of code to say "background: #000;" instead. When you break down the load time of your website, you want it to run as efficiently as possible. I've been in locations trying to look for things on my phone, and the 3G sucked. It took forever for certain websites to load up, so you'll have to keep in mind that not everyone is running on high speed.

Using text on your website optimizes it for search engines. If you have a really cool image instead of a cool CSS button, then chances are it won't be found as often. It's better to have both. The image for its appeal, and the text and tags for it to be found by search engines.

Image maps are great, but they're getting outdated... An image map allows you to take one image, and partition it, or split it into separate links. This is a great shortcut. Instead of using two separate images, you can use one... But will that really optimize your website? Image maps aren't the best for search engines either. There are some times where you must use an image map, but if you can go without it, try to.

Stay tuned for part two!

23 comments:

  1. Good thing most people ditched IE 6.0, ive heard some bad things about the combination IE 6.0 + CSS.

    ReplyDelete
  2. But image maps are so much easier in the short term! Eagerly awaiting part 2.

    ReplyDelete
  3. Great tips, text is really needed if you want the full impact.

    ReplyDelete
  4. "But image maps are so much easier in the short term!"

    True. Image maps are what I usually use but I believe I should use text instead of image maps.

    ReplyDelete
  5. This brings back bad memories from my web design class at school :p

    ReplyDelete
  6. I'm so wisihng they get HTML5 full implemented... everything will be so more elegant

    ReplyDelete
  7. Good tips, will keep them in mind.

    ReplyDelete
  8. Thanks for the info. May come in handy in the future.

    ReplyDelete
  9. this is really useful imma try these out and see how it turns out thanks man.

    ReplyDelete
  10. Nice tips! Thanks.

    ReplyDelete
  11. Cool blog following ;) Followed your other blog aswell

    ReplyDelete
  12. nice tutorial man it really helped i followed both your blogs!

    ReplyDelete
  13. This post could prove valuable.

    ReplyDelete
  14. Cheers man, posts like these are very useful for bloggers. If possible, could you post a tutorial about backgrounds, for example making an image a background that follows as your scroll

    ReplyDelete
  15. always wondered that. seriously, i'm thinking about using more text than images.

    ReplyDelete