Gritfish Blog

• IE / Non-IE CSS
• Basic Metadata for SEO
• Metadata for Facebook Like Buttons
• iOS and Mobile CSS
• Icons

IE / Non-IE CSS

Let’s face it, if you’re making websites, you’ve dealt with it. Your page looks fine in every other browser, and then along comes IE. Each version comes with it’s own quirks, and if things like CSS Resets and IE Tester aren’t part of your toolbox, they really should be. But how do you fix a problem in one IE while making sure you don’t cause another one somewhere else?

Conditional comments let you load a CSS file for each version, and only that version. No crazy hacks, no messy code. Just clean, separate files, that anyone can come across and understand the purpose of.

<link rel="stylesheet" type="text/css" href="all_browsers.css" />
<!--[if !IE]><!--><link rel="stylesheet" type="text/css" href="not_ie.css" /><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="ie6.css" /><![endif]-->

Basic Metadata for SEO

It’s easy to forget the basics. If your page doesn’t have these, it should.

<meta name="description" content="This is a description of the page and can be fairly long." />
<meta name="author" content="Your Name" />
<meta name="keywords" content="keywords,comma,separated" />

Metadata for Facebook Like Buttons

Social sharing is a requirement for a lot of sites these days, and if you want to get the most out of your Like buttons, you’ll give it as much data as possible, so the button doesn’t grab the wrong info by mistake.

Once you’ve got at least the required data in your head section, you can go to http://developers.facebook.com/tools/lint/ to see how it looks to Facebook.

The list of options for “type” is quite specific, so check out http://developers.facebook.com/docs/opengraph/#types if you’re not sure

<!-- REQUIRED FOR LIKE BUTTON -->
<meta property="og:title" content="The Page Title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.example.com/page.html"/>
<meta property="og:image" content="http://www.example.com/image.jpg"/>
<meta property="og:site_name" content="The Example Site"/>
<meta property="fb:admins" content="YOUR_FACEBOOK_ID"/>
<meta property="og:description" content="An example page description that probably matches the meta description tag."/>

<!-- OPTIONAL -->
<meta property="og:latitude" content="-33.852343"/>
<meta property="og:longitude" content="151.210923"/>
<meta property="og:street-address" content="The Harbour Bridge"/>
<meta property="og:locality" content="Sydney"/>
<meta property="og:region" content="NSW"/>
<meta property="og:postal-code" content="2000"/>
<meta property="og:country-name" content="AU"/>

<meta property="og:email" content="you@example.com"/>
<meta property="og:phone_number" content="1234-5678"/>
<meta property="og:fax_number" content="9101-1121"/>

<!-- IF THE PAGES MAIN CONTENT IS A VIDEO -->
<meta property="og:video" content="http://example.com/flash.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

iOS and Mobile CSS

If you’re developing a site for mobile, it’s important to have all the bases covered. Your CSS should be scaling to whatever screen size is viewing it, but you can target specific iOS sizes/orientations with the below, and have a generic “mobile” fallback stylesheet.

<!-- iPHONE 4 PORTRAIT -->
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 400px) and (orientation:portrait)" href="iphone_portrait.css">

<!-- iPHONE 4 LANDSCAPE -->
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 400px) and (orientation:landscape)" href="iphone_landscape.css">

<!-- iPAD PORTRAIT -->
<link rel="stylesheet" type="text/css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad_portrait.css">

<!-- iPAD LANDSCAPE -->
<link rel="stylesheet" type="text/css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad_landscape.css">

<!-- MOBILE PHONE AND OLDER iPHONES -->
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 400px)" href="mobile.css">

Bonus – for smaller screens (but bigger than 800×600) you can use the below:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 959px) and (min-device-width: 800px)" href="css/site_mod_smallscreen.css" />

Icons

Favicons can be amazing little touches if done right. There’s plenty of online generators out there (http://tools.dynamicdrive.com/favicon/ being pretty popular, but the iOS home-screen icon can be a little confusing, as the size has to be exactly 57×57 pixels and must be a png file.

<!-- IOS ICON -->
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png"/>

<!-- FAVICON -->
<link rel="shortcut icon" href="favicon.ico" />