scripflipper.com

my name is michael ciccarelli and i'm a web designer & developer out of buffalo, ny. currently available for freelance and other opportunities.

Archive for 2009

SEO Tip: Use Of Keywords

| 1 comment

article

One of the the most important parts of optimizing your website for search engines is to target a select few keywords that you would like to rank well for and sprinkle these terms throughout your pages and domain. A great tool to use when optimizing your site is seo-browser.com, this will allow you to view your site from a robot’s point of view and allow you to control how your site is recognized by search engines.

Domain, Page Titles & Permalinks

If you haven’t decided on a domain yet, keep in mind that having your keywords inside your domain is very good for SEO. For example if I’m a photographer living in New York city and would like to rank well for the term: nyc photography then having the domain name http://www.nycphotography.com would be perfect. Unfortunately many if not every popular/competitive term’s .com has already been registered, alternatively we can use the keywords within the domain by adding in other words (IE. qualitynycphotography.com) or use other available extensions than .com.

If you already have a domain you’ve been using or just want to stick with your business or own name within the domain for your website, then what I recommend is to build an interior page using your keywords as the permalink. For example on my own site I made the interior page http://michaelciccarelli.com/las-vegas-web-design/ since I would like to rank for the search term las vegas web design.

pagetitle_permalink

Since I use WordPress to power my websites/blogs there is a plugin that controls the Page Title and permalink of each page on your site called All In One SEO Pack. This plugin dynamically writes the Page Titles and permalink for each post/page your publish based on the title you assign to it within the Post/Page Editor.

Use of Headers (H1 tags)

If you’ve used the seo-browser tool I mentioned above you should now have a good understanding of what a “bare-bone” version of your website minus all images and styling looks to a robot/spider, who cannot see these items. The only significant different in the appearance of your content would be the different sizes in type. Although the report isn’t using any styling H1 tags are still the largest text seen and most prominent, while other headers, ordered lists, paragraphs and other basic text styling is still some-what supported.

Since H1 tags are viewed as ‘more important’ than the other content on your page to the bots, the text within your H1 tags should most definitely contain your desired keywords. This way you know your website is being associated in some way with your desired keywords and actually related to the search term. I like to have an H1 tag on each website I make containing the keywords I am targeting, followed by another heading (h2 or h3) containing a brief paragraph describing what the website is about and to use more keywords.

Maintaining your design while bettering it’s search engine presence.

If you’re design doesn’t call for it to have type displayed at the top of your website there are many styling tricks you can use so the mentioned headers and content still load first on your site while it might not appear so for the end-user. Some methods I’ve used in the past are:

The use of the Absolute position
Using relative and absolute positioning within your stylesheet gives you the ability to set the order of items within the code of your website to load an item first on the page but have it displayed at the bottom of your site, when loaded within a browser. The benefit of this is to maintain the look and design of your website while ensuring the important content is rendered first when spiders and bots crawl your page for search engines.

Javacript that will give the user ability to toggle between the visibility of content
Using a pretty simple jQuery drawer script you can include content to be loaded at the very top of your page, but not visible to a user browsing your site with a javascript enabled browser. This way the user has the option of clicking an “about us” link somewhere in the header that will display the once hidden content from the site. Since bots and spiders do not support javascript the content is not hidden from them and since the content is loaded at the top of the page this content is consider important and assuming your keywords are included should be very beneficial for SEO.

Anchor Text

Robots tend to look at hyperlinks as prominent content and from my experience I know it is important to use proper anchor text and populate the title tag. The following is a good example of a hyperlink you should have on each page of your website (and others) if you are trying to rank for the keywords las vegas photography:

<a href="http://somelasvegasphotograper.com" title="Las Vegas Photography">Las Vegas Photography</a>

Remember to use ALT and TITLE tags

Bots and spiders cannot read images therefor if you’re using images to display titles and headers on your site, it’s important to use the ALT and TITLE tags to images, so the bots know what the image is. Here’s an example of how a banner image, that includes the text We provide quality graphic design services, should be included on your page (so bots can pick up on what message the image is suppose to give):

<img src="http://yourdomain.com/banner.jpg" alt="We provide quality graphic design services" title="Graphic design services" />

Conclusion

In brief, some very basic optimizing can be done by simply including your keywords throughout the content of your website pages. Although you should not completely saturate your website with your keywords, since search engines may penalize you if they think you are trying to manipulate the bots, however a strong presence of your keywords can be proven very beneficial to your page rank.

The Art Of Font Embedding

| no comments

article

Soon after launching of my latest redesign I’ve spent a great deal of time on the use of typography throughout the site. I’ve been teaching myself different font embedding technologies in order to use a specific font of my choice, rather then the standard web safe fonts you see everyday all over the web. In this article I’d like to share these methods and give my brief thoughts on each.

@Font-face

The @font-face rule will allow you to embed a font on your server, just as you would link to images within a stylesheet. The biggest problem with @font-face, besides the issue of browser compatibility, is that most font licenses do not allow you to serve the fonts over the web. Being a web designer and all, I felt achieving identical cross-platform appearance throughout my site was important, so I decided not to use this method and to try something else.

Web Fonts Embedding Support Matrix

Web Fonts Embedding Support Matrix

Installation of @font-face

1. First you need to embed the font of your choice using the following CSS syntax:


@font-face {font-family: "Axel";src: url("font/Axel-Regular.ttf") format("TrueType");}
@font-face {font-family: "Axel";font-weight: bold;src: url("font/Axel-Bold.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";src: url("font/AxelSC-Regular.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";font-weight: bold;src: url("font/AxelSC-Bold.ttf") format("TrueType");}

2. Next you will reference the font to be used and declare the use of alternative fonts.


h1,h2,h3,h4,h5 {font-family: AxelSC,Georgia,Times,'Times New Roman',serif;font-weight: normal;color: #333;line-height: 22px;}

Following those small steps above you’re website’s headings (h1,h2,etc.) will all use the font specified and embedded on the server, regardless of the fonts installed on the users computer. Of course as I already mentioned this method just simply is not support by all browsers, so I decided to take a different approach.

Cufon

Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon loads very fast, since it is all JS and nothing more and the only real problem with it is that the font cannot be selected. Since I was only really interested in using rich typography on my headings and not the main content of my site, i decided this was the best solution for me. If you run a commercial website, I wouldn’t recommend using Cufon, since as far as I know it violates EULA and copyrights due the fonts being embedded.

Installation

Here is a very good tutorial on how to get Cufon installed on your site: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/

Following the article above I was able to get Cufon up and running on my site within 30 minutes or so and am pleasantly surprised with it’s results on all platforms I’ve tested in.

Conclusion

Until recently, web designers were limited to working with the fonts of their end-users computer. Image replacement tricks and clever technologies such as sIFR have opened up new possibilities, but none of these are terribly easy to work with. We’ve recently made good progress in what is possible for type on the web because of the growing support for CSS 3′s @font-face property, as well as new technologies like Cufón and Typekit.

Marriage Can Be Murder

| no comments

work

Marriage Can Be Murder is a Las Vegas dinner murder/mystery show. It can be seen at The Fitz Casino & Hotel in Downtown Las Vegas.

How I Killed My iPhone

| 1 comment

article

With the recent hype about iPhone 3.0 OS, I decided to jump the gun and try installing 3.0 in it’s beta stages on my own iPhone, which resulted in the death of my iPhone.

First, I downloaded the iPhone 3.0 restore file (iPhone1,2_3.0_7A238j_Restore.ipsw) via bit torrent and attempted to manually restore my iPhone from iTunes with the 3.0 file which was located on my desktop. Everything was going smoothly, it took a couple of minutes for the update to install on my iPhone then my phone restarts and I see this lovely screen in iTunes.

unable-to-activate-30

After doing some research I learned that in order to use the 3.0 beta OS you must be apart of the Apple Developers Program which came along with a price of $99/year for the standard package and $299/year for the enterprise. At this point I figured I’d just wait a couple months for the 3.0 OS to be released to the public and decided to restore my iPhone to latest backup which was that day, before I attempted the 3.0 upgrade. Unfortinuately there was no way to restore my iPhone from iTunes, so after a bit more research, I learned that by a specific key stroke I can reboot my iPhone in something called “Restore Mode” which will give me the option to restore my iPhone from iTunes from a file on my computer.

I was able to successfully restore the 2.2.1 OS on my iPhone but after the completion of the software update my phone would reboot as always and iTunes would give me the error below (1013). Apparently the baseband that comes with OS 3.0 won’t downgrade using any method on either the 2st Gen or iPhone 3G. There is no unlock for the new baseband (or the current one for that matter).

When you DFU restore to 2.2.1 iTunes will give you an error at the end (most likely 1015 or 1013) indicating a baseband/firmware mismatch.

So feeling pretty frustrated at this point, I decided I would just put 3.0 back on my iPhone and purchase the Developers Program from Apple. I filled out the application and at the end was notified that the Application has been submitted and I will be contacted by a representative within 5-7 business days. Meanwhile I have no phone, so I figured the best thing to do at this point would be to bring it in to the Apple Store and have them take a shot at recovering it.

Of course the Apple Store in the Fashion Show mall was busy and had no openings to see me until the following day. I was without my phone for over 24hours and it was pretty bad, but when I finally got it into the Apple Store, they attempted the same restore I did, failing as I did and ended up just replacing the device with a new one.

So all is well again and I guess I’ll just have to wait like everyone else for MMS, Landscape texts, Internet Tethering and copy & paste.

Better Anchor Text On WordPress Post Excerpts

| no comments

article

I tend to use post excerpts (the_excerpt) on the home page and archive views of a blog rather than full posts (the_content). Using the excerpt controls the size of each post and provides a clean interface for readers to scan content. However, I think it’s better to have a permalink with custom anchor text trailing each post excerpt rather than the default [...] text providing no usability.

There are plugins for this, such as The Excerpt Reloaded. I for one always try to keep plugin usage to a minimum and this can be done very easily by adding a small function to your theme files.

Open your theme’s functions file or functions.php in your themes directory, if you doen’t see a functions.php file you can create it, and add the following code:

//function to replace trailing text on the_excerpt
function customtrail_excerpt($text)
{
return str_replace('[...]', '<a href="'. get_permalink($post->ID) . '">' . 'Continue Reading &hellip;' . '</a>', $text);
}
add_filter('the_excerpt', 'customtrail_excerpt');

Your post excerpts should now look something like this..

making the trailing text S.E.O. friendly anchor text

Making the anchor text dynamic instead of a default “Read Now” or “Continue Reading” is great for Search Engine Optimization. First we need to add another function to our theme files (functions.php) that will go out and get the content of a custom field from our posts meta data. This custom field should be named “anchor” and if you populate this field while writing a post, your custom anchor text will display at the end of each post excerpt as anchor text linking to the permalink of the post, otherwise a default “Read More…” will display in the brackets.

Below is the updated code featuring the additional custom fields function and also some changes to the original Custom Trailing Text function I posted above. Instead of just returning static text it will look for the custom field of “anchor” and display this text, otherwise display the default “Read More…” trailing each post excerpt.

//function to get custom fields outside the loop
function get_custom_field($key, $echo = FALSE) {
  global $post;
  $custom_field = get_post_meta($post->ID, $key, true);
  if ($echo == FALSE) return $custom_field;
  echo $custom_field;
}
//function to replace trailing text on the_excerpt
function customtrail_excerpt($text)  {
  $customanchor = get_custom_field('anchor', false);
    if(!empty($customanchor)):
      $anchortext = $customanchor;
    endif;
    if(empty($customanchor)):
      $anchortext = 'Continue Reading &hellip;';
    endif;

  return str_replace('[...]', '[<a href="'. get_permalink($post->ID) . '">' .  $anchortext . '</a>]', $text);
    }

    add_filter('the_excerpt', 'customtrail_excerpt');
 ?>

Your post excerpts should now look something like this…

Discount Tee Times

| no comments

work

A golf course review website I put together for an Arizona company that provides coupons and discounted rates for a number of popular golf courses.

How Apple TV will replace my digital cable

| no comments

article

appletv I picked up a new toy at the Apple Store the other day. I was skeptical about it at first, since it doesn’t get the best reviews, nor is it the most popular Apple product, but so far I think it’s the perfect solution for me. I don’t watch much TV but when I do it’s usually pretty late at night and nothing actually good is on. For example I use to watch The Office every week, which airs at like 8/9PM on NBC problem is I’m never watching TV around that time to catch the new episodes. I know there are solutions, such as TiVO and DVR to accommodate me, but they come with monthly service fees and hardware rentals.

One of the first things I did after unpacking the Apple TV was hacked it using the following tutorial: Hack Your Apple TV With Boxee. It was a painless process and only took me 20 minutes to do. Now that I have installed the patch I can now watch any type of DRM free multimedia (e.g., DIVX, AVI, MKV, ISO and BIN) from any computer connected to my network. I can even play multimedia through internet streams (e.g. hulu, YouTube, podcast videos) which consist of a large collection of movies as well as many popular TV series. As long as you have a good internet connection, the video streaming works flawlessly and it’s nice to be able to browser through all the episodes of your favorite TV series and watch the latest episode from the series when you’re ready to watch it.

Even without hacking the Apple TV you can still rent or buy all new DVD titles and TV series for a reasonable price, but with the Boxee Patch you aren’t required to purchase anything, really. Another feature that comes with the Apple TV is the ability to share iTunes libraries on your network. So if you have a desktop computer on your network with all your music and videos, the Apple TV will make all the media available to you, similar to the Remote iPhone application. The Apple TV also makes it easy to stay up to date with your favorite Podcasts, if you enjoy a specific podcast, you can set it in your favorites and watch the latest episode as soon as it comes out.

Now I just need to find a good Home Theatre system and I’ll be set up nicely in my home office.

Web Hosting and Online Gambling Links

| 1 comment

link

I doubt that I will ever understand the laws with online gambling, but I do not see how having an educational website that does not take any kind of wagers itself but may link directly to sites that do, such as FullTilt.com or PokerStars.com could be considered illegal or against any Acceptable Use Policy (AUP) for a United States hosting company.

I mean I’m not mad about the situation at all, just a little surprised. I started looking around for a new host after my current hosting provider told me they couldn’t provide me with any unique C Class IP address for SEO reasons. I started asking around and got the following email from Rackspace.

Hello Michael,

This is Amie Naber from Rackspace Hosting. We had a chat last night on the website regarding a potential hosting project. I just wanted to let you know that I have received a reply from our AUP department. They said that if there is any direct links that point from your site to gambling link then we will be unable to host your site. So your site would not be able to send any customers directly to any gambling sites. If this is something that your site complies with, we can certainly host your site for you. Please do not hesitate to email or call me if you have any questions at all.

Thank You,

Amie Naber

This makes me a little nervous about my current hosting provider, what if they realize I have direct links to gambling sites and this violates their AUP as well. Can they just shut me down ? That would not be good. I better do some research and if necessary seek hosting outside of the US.