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!
Good thing most people ditched IE 6.0, ive heard some bad things about the combination IE 6.0 + CSS.
ReplyDeleteBut image maps are so much easier in the short term! Eagerly awaiting part 2.
ReplyDeleteGreat tips, text is really needed if you want the full impact.
ReplyDelete"But image maps are so much easier in the short term!"
ReplyDeleteTrue. Image maps are what I usually use but I believe I should use text instead of image maps.
Nice tutorial!
ReplyDeleteThis brings back bad memories from my web design class at school :p
ReplyDeleteI'm so wisihng they get HTML5 full implemented... everything will be so more elegant
ReplyDeleteGood tips, will keep them in mind.
ReplyDeleteThanks for the info. May come in handy in the future.
ReplyDeleteNice.
ReplyDeleteI'm a sucker for images though XD
ReplyDeletethis is really useful imma try these out and see how it turns out thanks man.
ReplyDeleteVery useful!
ReplyDeleteNice tips! Thanks.
ReplyDeletegreat tips
ReplyDeletesome good tips
ReplyDeletewaiting for more :)
ReplyDeleteCool blog following ;) Followed your other blog aswell
ReplyDeletenice tutorial man it really helped i followed both your blogs!
ReplyDeleteThis post could prove valuable.
ReplyDeleteCheers 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
ReplyDeletevery useful information
ReplyDeletealways wondered that. seriously, i'm thinking about using more text than images.
ReplyDelete