Design Oahu

Web design blog from the middle of the pacific.

Radials, Rays, and Bursts

Whether you call them radials, rays, or bursts this technique is a great way to make your design pop. Unlike the sun which you are not suppose to stare at, you cannot help but focus on the center of a radial which makes radials a great addition to a design. Radials can range from mild to wild. If you want a subtle addition to your website header perhaps a burst that uses transparent gradients can help you add depth. If you want to draw attention to a specific element such as a logo, or a product for an advertisement you can use a brightly colored radial in the background with the product in the center. This adds depth and provides a faux 3D look.

Before you start to create your radial, plan out the colors, gradients, thickness, center, and shape you wish to achieve. The radial will be created in Photoshop by defining a pattern, filling a canvas with the pattern, then adding a Polar Coordinates distortion filter. Before applying the Polar Coordinates filter your canvas should be filled with vertical stripes. The top of your vertical stripes will become the center of the burst.

Read the rest of this entry »

Dog Ear Tutorial

Dog EarI’ve been seeing a lot of the dog ear element lately. The dog ear looks as if a page is being curled up or peeled back. If used correctly it can add depth to a flat design. The best ones I have seen are usually really subtle. They are applied to boxed elements or headers to make it look as if it is slightly peeling off the page. This element has been used in flash advertisements to make it look as if the website is being peeled back. I have also seen sights that use this in a corner of the site with text such as “Designed in Photoshop” or something similar. Here is a quick and dirty way to create this effect with Photoshop in 5 easy steps. Read the rest of this entry »

WordPress Plugin – Obfuscate

What does obfuscate mean?

According to dictionary.com:

ob•fus•cate

  1. to confuse, bewilder, or stupefy.
  2. to make obscure or unclear: to obfuscate a problem with extraneous information.

What is it used for?

Obfuscate is a WordPress Plugin that obfuscates email addresses in your posts and pages reducing the chance of your email address getting picked up by an evil web crawler or bot and used as a spam target.

What will the email address look like?

Readers of your WordPress blog will not notice that anything has been changed. If the email is a link, it will still open up your reader’s mail client.

How does it work?

Each character in the email address is converted to its ASCII equivalent. For example the letter ‘j’ is converted into ‘j ‘. If you take a look at the source of this page in your browser you will see the difference which looks quite normal on the screen, but is in fact much different in the source.

Is this 100% effective?

No. Obfuscation as the definition states, just makes it more confusing. If an evil spammer was willing to invest the energy into checking all ASCII characters for an email address, then they would be able to get the one you added. However, with the ease of collecting the non-obfuscated email addresses, the vast majority of spam bots will likely not bother. To put everything into perspective, think of the obfuscate plugin as a condom, perhaps not 100% effective against the spread of STDs and unplanned pregnancy, but much safer than unprotected sex.

How do I install Obfuscate?

Download the Obfuscate Version 1.2 ZIP file, unzip it, then upload the obfuscate folder into you wp-content/plugins directory. Now login to your blog and Select Plugins, find Obfuscate and click Activate. WordPress makes it pretty simple.

What if I still have questions?

If you have any question send me an email at jeremy@designoahu.com or just add a comment below.

Update:
Obfuscate Version 1.2 is now available. If you are using an older version, please upgrade. Upgrading is simple, just unzip and overwrite the obfuscate.php file.

Change Log:
Version 1.2 created a str_split function for compatibility with PHP4.
Version 1.1 has added a higher priority which should solve some compatibility issues when using obfuscate with other plugins. Obfuscate Version 1.1 now obfuscates email address in the content, excerpt, comments, and rss feeds.

Top 50 Websites – Disappointing Validation Report

I found out today that my web site did not validate as valid (x)html markup (I had mistakently left out a closing “a” tag). I fixed the issue and am now validating properly. I then started to get curious about how many other bigger websites fail in validation. I went over to the Alexa Global Top Sites list and took notes on how many of the top 50 sites validate. Granted Google dominates a large portion of this list with their sites for specific countries, however I noticed that different errors were presenting themselves on different sites, so I just played along. So, how were the results? Extremely disappointing! Only five out of the top fifty site’s home pages were valid html or valid xhtml (that is just 10%). Sina, Imageshack, and Dailymotion.com were not even able to report how many errors there were to complete the test as some of the characters used were not even found in their specified text encoding. The sites that passed are MSN, Wikipedia, Skyrocket, Yandex, and Craigslist.

  1. Yahoo! – Failed validation, 34 Errors
  2. Google – Failed validation, 30 Errors
  3. YouTube – Failed validation, 78 Errors
  4. Windows Live – Failed validation, 64 Errors
  5. MSN – Passed validation
  6. Myspace – Failed validation, 123 Errors
  7. Facebook – Failed validation, 37 Errors
  8. Wikipedia – Passed validation
  9. Hi5 – Failed validation, 297 Errors
  10. Orkut – Failed validation, 16 Errors
  11. Rapidshare.com – Failed validation, 122 Errors
  12. Blogger.com – Failed validation, 19 Errors
  13. Megaupload – Failed validation, 86 Errors
  14. Baidu.com – Failed validation, 38 Errors
  15. Friendster – Failed validation, 93 Errors
  16. Yahoo! Japan – Failed validation, 457 Errors
  17. Microsoft – Failed validation, 31 Errors
  18. Fotolog.com – Failed validation, 95 Errors
  19. QQ.com – Failed validation, 345 Errors
  20. Google France – Failed validation, 41 Errors
  21. Ebay – Failed validation, 181 Errors
  22. @Mail.ru – Failed validation, 525 Errors
  23. Google Brazil – Failed validation, 39 Errors
  24. Skyrock – Passed validation
  25. Sina – Failed validation (Unable to complete test due to character encoding issue)
  26. Google Germany – Failed validation, 43 Errors
  27. Google Chile – Failed validation, 44 Errors
  28. Google UK – Failed validation, 45 Errors
  29. Google Spain – Failed validation, 49 Errors
  30. Flickr – Failed validation, 30 Errors
  31. Seznam – Failed validation, 1 Error
  32. Google Poland – Failed validation, 45 Errors
  33. Amazon.com – Failed validation, 1588 Errors
  34. IMDB – Failed validation, 211 Errors
  35. Photobucket – Failed validation, 122 Errors
  36. Megarotic.com – Failed validation, 6 Errors
  37. Imageshack – Failed validation (Unable to complete test due to character encoding issue)
  38. Wretch – Failed validation, 541 Errors
  39. Google Mexico – Failed validation, 39 Errors
  40. Youporn.com – Failed validation, 4 Errors
  41. Yandex – Passed validation, 3 warnings
  42. Onet.pl – Failed validation, 302 Errors
  43. Dailymotion.com – Failed validation (Unable to complete test due to character encoding issue)
  44. Go.com – Failed validation, 172 Errors
  45. Universo Online – Failed validation, 1276 Errors
  46. Imagevenue.com – Failed validation, 32 Errors
  47. BBC – Failed validation, 35 Errors
  48. Megavideo.com – Failed validation, 224 Errors
  49. Allegro – Failed validation, 61 Errors
  50. Craigslist – Passed validation

WordPress Tutorial: How to style author comments

I have seen several wordpress blogs recently that uniquely style the author’s comments. This is a great usability technique, so that you can easily distinguish their posts. This comes in handy when visiting a new blog that perhaps you do not know the author’s name. All you do is simply compare the comment author’s email address with your own. This little snippet of code does just that, and specifies a class of “authorcomment” within the opening list item tag of the comment. You will want to place this code in your comments.php file. The code should go within the foreach comment loop and just before the end of the opening list item tag. If you have the default unmodified WordPress theme this will be on line 29. The finished product should like something like this:

<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”

<?php if($comment->comment_author_email == ‘email@example.com’) : ?>

class=”authorcomment”

<?php endif; ?>>

Now all you have to do is add the look you want for your comments. I currently modified my style to have a light gray background by adding this to my style.css file:

.authorcomment{
background-color:#f5edd6;
}

You can now make your posts stand out from the crowd. To make it even easier to read the comments try moving the trackbacks out of the comments.