Random but Handy Website Tools

Code Validation

I like to check my work. (Especially when code does not display the result I tell it to display. :) You’ve been there. )

  1. HTML Validator
  2. CSS Validator – If you find that your code ends up with a bunch of issues, don’t worry, even MSN’s website stylesheet came back with 2 errors and 916 warnings. However, that doesn’t excuse us from fixing ours.

Creating Web Ready Images

Tools I’ve used to add a little color to my website.

  1. HTML RGB color code converter – Know the RGB of a color but don’t exactly know the HTML version of the code? This will help.
  2. Gradient Image Maker – Just need to make a gradient image for a background or something? There are two things you must remember when using this. 1. you can make the height pretty much any length, but the width should stay at 100 or less might be better. Number 2. If you want to save the gradient image from the preview section, this does work. However, when you save it make sure you save it with the right extension. It defaults to try to save as gradient.php… that probably won’t help you. So save it as gradient.png or gradient.jpg.
  3. Also see three other posts about getting/editing graphics for websites and social network sites: WebSite Graphics, Ultimate Collection of Free Stock Photo Sites, Fun with Photos

Miscellaneous Website Tools

  1. Convert Your Spreadsheets into HTML Tables. I don’t really love using tables, but I have found them to be handy in some cases.
  2. Convert Your Web Page into a PDF

SEO

What’s the point in having a great site with great content if you can’t get found? I’ve shared 70+ very good SEO tools and tips in this blog. Here are the links to those articles about the tools I’ve been using.

  1. Tag Clutter – 2-14-2011 Don’t overload your posts or pages with keywords and phrases.
  2. Optimize Webpage Response Time – 12-13-2010
  3. 4 SEO Rules that Are Here to Stay – 11-29-2010
  4. 15 Easy Free DoFollow Backlinks to Your Website – 10-18-2010
  5. Website Backlink Popularity Tools – 3-1-2010
  6. Google PageRank – 2-23-2010
  7. How is Your Business Measuring Up? – 2-22-2010 <- I should have titled this how is your website and social media network measuring up.
  8. Use Social Bookmarks to Your Business Site’s Advantage – 2-8-2010
  9. Domain Life Expectancy – 8-9-2009
  10. FREE Inbound Link Checkers – 2-4-2009
  11. SEO Power Tools – 7-14-2009, updated August 6, 2010

Hmm, I think I should go ahead and change my SEO tag into a subcategory of website tips. It’s definitely something I’ve written extensively about.

Optimize Webpage Response Time

How fast does your website load? Here is a webpage load speed test from Pingdom Tools that you can use to see about where your site stands and get a good overview of all of the files that are actually being loaded by your visitor’s browser. Click the image on the right to view the screenshot of all the junk I have loading on my homepage.) Google also has a collection of page speed tools.

I am really noticing this more lately because I have been cleaning up darkbluesun.com and struggling with my page loading speeds. GoDaddy.com is a decent host at times. Yet, some days I have had nothing but problems due to how slowly WordPress runs (probably due to how long takes to connect to the Godaddy server “grid” and retrieve info from the MySQL database service needed to run WordPress).

Other than switching web hosting providers, here are 2 ways to test and 3 steps to speed up your web page load speed.

  1. Correct HTML or Other Code Errors

    I went to W3C’s Markup Validation tool online to test my website for errors and discovered I had 37 Errors, 3 warning(s) to sort out for my webpages.

    I fixed a few of these errors. I knocked the number down to 23 Errors, 2 warning(s). This really isn’t much except you can consider the fact that your browser is now going to throw 14 fewer errors when opening my page.

  2. Reorganize (Maybe Even *Gasp!* Delete) Content

    I am a strong believer in this rule: Never Delete Old Content. I always advise bloggers to update the information in a new post and then link to the updated version from the old post.

    Unfortunately there are some things that are simply necessary to get rid of. For example: it is perfectly okay to leave a few of those bells and whistles out of your site. If you never use the chat widgets or java-based plugins that wind up taking up space, bandwidth and precious time… then get rid of them immediately.

    Some of the WordPress plugins I am using for different functions on my website are causing the rest of those errors I was talking about earlier and I am not going to take the time to debug all of that before I post this. However, if I really needed to dramatically, instantly change the page speed of my site, I would uninstall the WP Cumulus and Sociable plugins on my site.

    Break up large posts into separate smaller posts.
    Yep, this tip is self explanatory. If you have lots and lots of data in one post, then that page will obviously take longer to load. If you divide the information into smaller amounts it will help both your readers if they are looking for a quick answer to their question and it will help the search engines index you more efficiently.

  3. Know How to Insert Images

    • Get in the habit of using relative links to your img src’s than absolute links. E.G.:
      instead of:  img src=”http://www.darkbluesun.com/logoDBS.png
      use this:   img src=”/logoDBS.png
      Relative URLs are obviously shorter than absolute URLs, as a result the file size of the web page would be a bit smaller as well.
    • Give images height and width attributes. This way, browsers can load the page completely giving a space for the image without having to wait for the images to load first.
    • Resize larger images to “web-friendly” sizes. Microsoft Office Picture Manager uses 2 defaults for standard website image sizes:
      large: 640 x 480 px
      small: 448 x 336 px
      With modern digital cameras and larger megapixel abled phone cams, the resolution of the pictures you are posting could be huge! Even if you give a large photo a smaller height and width attributes the browser still has to load the entire picture.

Please Note: Some of these changes will only help your pages load a few seconds earlier.

Every little bit counts when according to the September 14, 2009 press release, published by Akamai: users will only wait 2 seconds for a page to load before clicking (or pressing that dreadful back button) out of your webpage… never to return again?

Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times
September 14, 2009 – Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times

Fun with Photos

In class, we were assigned to find an image editor for a website project, and if we couldn’t find one then we are to use Microsoft paint. (Ew.)

Well, I already had two websites lunapic and picnik I previously posted about that are online photo editors where you could do all kinds of nifty edits and special effects.

I decided to look up other free online/no download photo editors and I found two more fun sites for profile pics and what not.

Be on the cover of a magazine!



fakemagazinecover.com

Upload your photo and play with the Photo Trix.


fototrix.com

Photo Trix aren’t just for kids. :D Even grownups can have fun with these photo special effects.

These could be fun for

  • Facebook
  • Myspace
  • Twitter Avatars
  • Blogs
  • Websites
  • Fansites

Just thought I’d share. Have fun!

Ultimate Collection of Free Stock Photo Sites

See the bottom of this post to read about why I am reposting it here.
Originaly Posted by Softalize . com, originally titled: “16 Ultimate Collection of Free Stock Photo Sites”
April 14, 2009
Today I bring a fabulous collection of sites where you can get nice images and photos. I have made a list of sites where to search for amazing and quality photos and images. So no need to waste your time with old images and photo sites that do not work properly. Just have a look at these sites, and do not forget to share your comments with us.
Some of the sites listed offer free stock photos only for personal use, All photos are the property of their respective authors check their policy before using their collection.

Everystockphoto

Everystockphoto

 

Photobucket

 

Onexposure.1X

Onexposure.1X

 

EyeFetch

EyeFetch

 

Stock.Xchng

Stock.Xchng

 

Stockvault

Stockvault

 

Photo.net

Photo.net

 

Life

Life

 

PopPhotos

PopPhotos

 

PBase

PBase

 

Openphoto

Openphoto

 

Freerange

Freerange

 

Free digital photos

Free digital photos


Please NOTE: I do not own this post. I copied this information from another blog that has been down for a while now. I had it bookmarked in my browser because I would often search for free or cheap photo stock for blog posts. For reasons unknown, the Softalize site suddenly became unavailable since early this year. So I decided to go ahead and quote word for word the entire post and share it with you since I had found it so helpful.

This is Google’s cache of http://www.softalize.com/2009/04/14/16-ultimate-collection-of-free-stock-photo-sites/. It is a snapshot of the page as it appeared on Jan 27, 2010 21:10:51 GMT. These terms only appear in links pointing to this page: http www softalize com 2009 04 14 16 ultimate collection of free stock photo sites

PLEASE READ the disclaimers before downloading and using anyone’s images on anything for your business!

WebSite Graphics

Add a Splash of Color

Pretty PhotoStock
Does your site need graphics?

YES. Colors get noticed. Pictures makes sites more attractive, they’re stimulating and inspiring. Simple as that. :)

Where can you get these free images?

Ultimate Collection of
Free Stock & Photo Sites

How do you customize them for your site?

Try this nifty online picture editor!

lunapic

And picnik is a new favorite for sharpening images!

picnik logo

Plan on creating your own snap shots to add life to your website?
If you need a few tips for taking your own digi cam photos with a touch of pro quality, check out this digital camera photography tutorial.

BONUS!  Free graphic editing tutorials @
Developer Tutorials provides a vast array of online resources to help web developers and designers with their website development projects including tutorials, scripts, questions & answers and more.

Philosophe – the main tools focused on here are GIMP (which is free / open source) and PhotoShop. FYI – they do require you to register.

Edited JPG Files to GIF Animation

The three photos (labeled “before”) of this fabulous little monkey cake were sent to me. I then brightened and animated the pictures to make them more appealing for the xtremebaking blog site.


These photos were edited by Microsoft Office Picture Manager and Lunapic.com.