Visit Site

Stuart’s site is a “network” (multi-blog) WordPress installation, which makes linking separate blogs together a snap!

So, see this error?

All you’ve gotta do is open up Terminal.app (click Spotlight menu at the top right of your screen and type in terminal, press enter), and type in the following:
sudo rm -rf

Make sure you type a space after the “-rf”, and then click and drag the files in the trash INTO the terminal window. The path to the file will automatically be added. Press enter. The files are now deleted!

Please comment below if this solution worked for you!

Rather than writing a complex tutorial for how to create a print-ready wireframe for your cards, I thought I’d be nice and just give you the files. So, without further adieu, here are Adobe Illustrator, Adobe Photoshop, and PDF versions of the wireframe I used:

Download Business Card Wireframe Templates

If you use these templates, or they help you in any way, please comment below and let me know what you used them for! Sharing is caring!

Visit Site

We took a completely new approach to CapriMD’s website, and redesigned it from the ground up.

SEO is a complicated, intangible bit of web design that can really get novices and developers alike quite a headache. It is very important not to get caught off-guard by SEO companies who claim to be able to position you at the first page of Google or other search engines for any keyword of your choice. Rest assured that if someone guarantees you ANYTHING SEO-related, that they are ultimately full of shit.

SEO is not guarantee-able mainly due to the fact that Google and other search engines do not explain how their ranking algorithms work, and therefore, no one really knows what the best tactics are for getting your site ranked.

That being said, there are many things we do know, since Google offers an SEO starters guide, and this particularly useful webpage and many people have performed experiments to help back up claims that Google tends to avoid discussing.

The following is a bullet list of two major facets of SEO — on-site, and off-site optimization.

On Site SEO

On-site optimization refers to anything that can be altered in your actual HTML markup or other code on the website in question.

• Submit websites to search engines – This one may seem to be a “duh” item in the list, but you’d be surprised how often even seasoned developers neglect this simple step.
  • Google
  • Bing
  • Yahoo
• Doctype – Declaring a doctype helps browsers render your webpage in standards mode, and can keep legacy browsers (*COUGH IE COUGH*) out of quirksmode. If your browser isn’t rendering your page as you expect, the first thing you should always check is if you have declared a doctype or not. For more info about doctypes, check out W3.org. If you ever have any question, a good route is to start by using the HTML5 standard doctype:
• Page Title – ensure it contains 10-70 characters, is explicit, and contains your most important keywords. Also be sure each page has a unique title
• Meta description – ensure it contains beteween 70-160 characters, is explicit, and contains your most important keywords. Be sure each page has a unique meta description.
• Meta keywords – while this bit of meta information has been proven to have very little effect on your rankings, it is still a good idea to place your most important keywords here, separated by commas.
• Meta Language – Using the meta language tag you can specify what the default language of the website is. Generally a good idea, especially if you have a multi-language website. For more information on meta language tags, click here.
• Encoding – It is a good idea to declare what type of encoding is using in your file — this can help with issues rendering special characters. Example:
• Heading tags – H1 tags should always contain the most important information on a page, so ensure these contain relevant keywords as well. Never use the same heading tag when it is subordinate to itself — in other words, there should never be an H1 tag nested below another H1 tag.
• Images – Ensure all images have an “alt” attribute, and that this attribute contains keywords that describe the image. Remember that search engines view your source code, and cannot see your images — this is the only place (other than the image title) where you can describe the contents of the image. On a similar note, try not to use too many images as a general rule of thumb.
• Text to HTML ratio – General rule of thumb is to keep this over 15%.
• Frames and Flash – It’s best to avoid both iFrames and Flash, as they will not be counted towards your SEO rankings. Much like images, iFrames and Flash content cannot be read by a search engine.
• WWW Resolve – set up a redirect using your web server’s .htaccess file. You can do this with the following code:

  RewriteEngine On
  RewriteCond %{HTTP_HOST} ^mydomain.com
  RewriteRule (.*) http://www.mydomain.com/$1 [R=301,L]

• Robots.txt – generate a robots.txt file (Web Robots Pages) which tells search engine bots, crawlers and spiders which directories it should not index. This can be useful in hiding duplicate content (beta versions of your website), or other directories that you generally don’t want showing up in search engine results. For more information on how to generate a robots.txt file, visit http://robotstxt.org
• XML Sitemap – always create and update an XML sitemap. Sitemap contains a list of all pages you want indexed on your website (sort of like the opposite of robots.txt), and can provide additional information to the spiders such as when the last changes were made or how important each page is. This information helps search engines rank you more accurately. Your XML sitemap should reside in the root directory of your website, and should be automatically submitted to Google and Yahoo!/Bing. You will need to set up webmaster tools and site explorer accounts for this. You can do that here:
  • Google Webmaster Tools
  • Bing Webmaster Tools
  • Yahoo Site Explorer

  Keep in mind that some content management systems like WordPress have plugins that automatically generate sitemaps and submit them to search engines.

• W3C Validity – You should be doing this already, but having less or no errors in your markup can improve SEO as well. Be sure to check your websites in the W3C Markup Validator.

Off Site SEO

Off site optimization can prove to be a bit trickier, since it is less in your control. Essentially, one might think about off-site SEO as a popularity contest — the more links (or friends) you have pointing to your website, the more popular you are when a search engine goes to look for relevant webpages.

• PageRank – though its effectiveness is widely questioned, PageRank is still an important factor — it is a link analysis algorithm used primarily by Google in determining the authority of websites over one another. For more information about the way pagerank works, read the PageRank Wikipedia page. To check the pagerank of a specific page, you can use a PageRank checker such as prchecker.info.
• Last Crawl Date – the last date crawled is generally a good indicator of how useful your site appears to search engines. You want to make sure your site is being indexed frequently (because you’re posting unique content at least a few times a month already, right?). You can set custom page crawler rates on the search engine’s Webmaster Tools (Google or Bing) or Site Explorer (Yahoo).
• Backlinks – backlinks are of utmost importance. As explained above, the more backlinks you have pointing to your website, the more authority your website has for that keyword. Keep this in mind when forming tags. Most importantly is to consider the QUALITY of these backlinks. You don’t want overtly spammy-looking pages, or pages with thousands of other links on them creating backlinks to your website. In fact, you can rest assured if you generate spammy backlinks, Google will recognize this as bad in your favor. Try to generate a diverse set of backlinks to your site — some from .edu/.gov, some normal links from other bloggers, corporate sites, Wikipedia, Twitter, Facebook, Linked In, forums, groups, etc. You get the idea.
  • .edu backlinks – .edu backlinks are generally only obtainable by an educational institution. As a result, any backlinks pointing from .edu domains are given extra authority for a keyword.
  • .gov backlinks – same as with .edu domains.
• Directories – You should submit your website to relevant, up-to-date directories. Dmoz (directory.mozilla.org) is a good place to begin.
• Social Media – Your presence on social media sites, and the impact of your postings there are now acknowledged directly by Matt Cutts as having more effect on SEO rankings.

Other Interesting Links

• Hubspot Website Grader – Get an arbitrary but useful SEO score for your site.
• Backlinkwatch.com – Check the number of backlinks to your site.
• SpyFu.com – See keywords you organically rank for.
• Compete.com – See statistics about hits and traffic to websites.

However, as a web developer, there are times when you absolutely have to write specific CSS styles for certain browsers. In this article, I will cover two different methods of doing this.

Useragent Detection using PHP

This first method requires that your website is built using PHP technology. I am testing this on PHP5, but the same idea should apply to PHP4. The code that I use here is documented originally on php.net if you want more information, but my example will take you through everything you need to know. Keep in mind that my examples deal mainly with CSS, but this code can be re-factored to work in a great many scenarios, such as when you want different functionality (can anyone say replacing flash elements with pure HTML/JS on iPad/iPhone?!).

First, let’s look at the $_SERVER variable. $_SERVER is a global array that contains a wealth of information created by the web server, such as headers, paths, and script locations. Keep in mind that there is no guarantee that any old server will have any data in this variable, so be careful with this! The bit of data we care about in this array is $_SERVER['HTTP_USER_AGENT']. Below is an example of what a useragent looks like:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_6; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.102 Safari/534.13

As you can see, there is a great deal of information contained in the useragent string that can be parsed to determine what browser and operating system combination is being used by your visitor. The way I go about parsing the useragent is using the strpos() function.

For example, if you wanted to see if the visitor was using a Mac, you could write:

<?php
$theUA = strtolower($_SERVER['HTTP_USER_AGENT']);
if(strpos($theUA,'macintosh')) { ?>
	<link rel='stylesheet' id='mac-css'  href='css/mac.css' type='text/css' media='screen' />
<?php } ?>

A more complex example might be to differentiate between Internet Explorer, Chrome, Firefox, and Safari. Keep in mind you can combine these using the && and || (AND and OR) operators:

<?php
$theUA = strtolower($_SERVER['HTTP_USER_AGENT']);
if(strpos($theUA,'msie')) { ?>
	<link rel='stylesheet' id='ie-css'  href='css/ie.css' type='text/css' media='screen' />
<?php } else if(strpos($theUA,'chrome')) { ?>
	<link rel='stylesheet' id='chrome-css'  href='css/chrome.css' type='text/css' media='screen' />
<?php } else if(strpos($theUA,'firefox') && strpos($theUA,'macintosh')) { ?>
	<link rel='stylesheet' id='firefox-macintosh-css'  href='css/firefox-macintosh.css' type='text/css' media='screen' />
<?php } else if(strpos($theUA,'firefox') && strpos($theUA,'windows')) { ?>
	<link rel='stylesheet' id='firefox-windows-css'  href='css/firefox-window.css' type='text/css' media='screen' />
<?php } else if(strpos($theUA,'safari')) { ?>
	<link rel='stylesheet' id='safari-css'  href='css/safari.css' type='text/css' media='screen' />
<?php } ?>

You can even go further and do mobile browser detection to send mobile phone users to a completely different, mobile-optimized website! Sorry for the long code, you can copy this same bit from detectmobilebrowser.com

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: m.yoursite.com');
?>

Internet Explorer Conditional Comments

The second method of writing browser-specific CSS styles will only work in Internet Explorer, but is more widely used than the useragent scraping from the previous example as it will work no matter what version of Internet Explorer the visitor is using (and since MOST of these issues tend to occur in IE anyways!). Microsoft has documented conditional comments in detail here.

For a crash course, IE conditional comments are comprised of a feature, operator, and/or a value. For feature, you can match use IE to match any version of IE, IE 7 to match a specific version of IE, or even an edition of Windows. For operators, greater than (or equal to) is gt or gte, and less than (or equal to) operators is lt or lte. You can also use and (&) or (|) and not (!) operators if necessary. If you want to match a specific version you don’t need to specify an operator. If you wanted to target IE6 and IE7 specifically, you would use the following:

<!--[if (IE 7)|(IE6) ]>
<link rel='stylesheet' id='ie-css' href='css/ie.css' type='text/css' media='screen' />
<![endif]-->

I hope this information was useful! Click the Tweet or Like buttons below to share the knowledge with others! Have you used useragent detection or IE conditional comments in your websites? Have you improved on my methods, or had questions about anything I said? Ask or tell me about it in the comments below

Okay, let’s say we’re marking up a contact form where visitors enter a bit of personal information, such as their name, sex, and which products they’re interested in. I’ll keep this stupid simple: when you’re creating this form, there is a proper place to put the labels for each input element. It’s called the label element. Be sure to use the label element’s “for” property, that way the label knows which input element it refers to.

The reason for going through this trouble rather than just using a div or a span element, is because the browser knows that if a label element with a for property is clicked that the corresponding input element should receive focus. Having the label AND the input element clickable makes for a much larger target to click on. Heck, I’m a web developer, and I can’t even click on radio buttons and checkboxes to save my life! Imagine how my grandma feels!

Here’s an example:

<input id="name" type="text" /><label for="name">Your Name</label>

SO SIMPLE! Here’s an entire form, with a demo of it below:

<form>
<input id="name" type="text" /><label for="name">Your Name </label>
<input id="gender-male" name="gender" type="radio" /><label for="gender-male">Male</label>
<input id="gender-female" name="gender" type="radio" /><label for="gender-female">Female</label>
<input id="web-development" name="products" type="checkbox" /><label for="web-development">Web Development</label>
<input id="graphic-design" name="products" type="checkbox" /><label for="graphic-design">Graphic Design</label>
<input id="video-editing" name="products" type="checkbox" /><label for="video-editing">Video Editing</label>
<input id="logo-design" name="products" type="checkbox" /><label for="logo-design">Logo Design</label>
</form>

In this example, try clicking on the text label next to any of the checkboxes, radio buttons, or text fields. You will see that the appropriate input element is focused!

Have you used this technique, or something similar to help improve usability on your websites?  Tell me about it in the comments!