Entries from April 2009 ↓

Apparently it’s embrace the developer community day at Facebook. In addition to the news that they are making activity stream data available to third party developers, they’ll also be making an announcement around OpenID, we’ve heard. And importantly, the announcement is that they’ll become what’s called a relying party, meaning anyone with an OpenID (Yahoo, Google, AOL, MySpace are all issuers, and Microsoft is in beta) can create and log into a Facebook account using those credentials.

Let me take a step back. OpenID is a distributed single sign on solution that allows people to sign into different services with the same login credentials. There are two ways companies/websites can participate in the OpenID framework – as “issuing parties” or as “relying parties.” Issuing parties make their user accounts OpenID compatible. Relying parties are websites that allow users to sign into their sites with credentials from Issuing parties. Of course, sites can also be both. In fact, if they aren’t both it can be confusing and isn’t a good user experience.

All the big guys are now Issuing Parties, which allow their users logging in all over the Internet with those credentials. But none of them accept IDs from anywhere else, so anyone that uses their services has to create new credentials with them. It’s all gain, no pain. There are two exceptions – AOL Mapquest and Google’s Blogger – but for the most part the big guys are issuers, not relying parties. And that has led us in the past to accuse them of exploiting OpenID for their own benefit without giving back to the community. See our post Is OpenID Being Exploited By The Big Internet Companies?

Facebook has been a wild card with OpenID. They’ve talked about adopting it eventually, but their Facebook Connect product has actually muddled the situation – Facebook actually competes directly with OpenID when allowing users to sign in to third party sites via Facebook Connect.

Now that’s going to change, and we’ll soon see users have the ability to sign in to Facebook using, say, their MySpace credentials if they choose to. I like the thought of that.

But it still may be a while before we see the other major players take similar steps. Facebook has never really had notion of a user ID – you’ve always logged in with your Email address, which could have come from any number of other services, so Facebook isn’t really sacrificing much here. Instead of a user name, Facebook members are assigned a meaningless user ID number (though they’re experimenting with vanity pages).

Contrast that with Yahoo and Google, both of which have built up their own login systems, which can be used across multiple services using a single persistent account name. Users benefit because they can seamlessly jump between services, and Yahoo and Google get their users to stay within their own suite of products. There’s a good chance they’re not going to give that up so readily.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

The record industry has approached Apple’s App store with a somewhat amusing amount of hesitation. When the App Store first launched last summer, a few major artists tested the waters with some obnoxiously basic apps, sometimes consisting of little more than a splash screen and a handful of their songs. But things are beginning to change. Leading the charge has been Nine Inch Nails, which partnered with Tapulous last fall to release a special NIN version of Tap Tap Revenge and more recently launched a robust ‘NIN Access’ app that offers fans a library of rich media, news, and social features. The app’s reception has been overwhelmingly positive, with over 75% of reviewers giving it five stars.

Now the major record labels (and countless indie bands) are looking to get in on the action. Enter Mobile Roadie, a new application platform that allows bands to quickly deploy their own custom applications to the App Store. For a relatively small fee, bands can use Mobile Roadie’s mostly-automated system to build their apps and have them posted to Apple’s App Store in as little as a week (and the majority of the wait is from Apple’s still-mysterious approval process).

The application supports a wide range of content, including photo galleries, streaming music (which can be linked to songs for purchase on iTunes), YouTube videos, a list of upcoming shows, and interactive features, like a ‘fan wall’ where users can post comments and photos in real time for all to see. On the backend, bands will have access to an intuitive CMS, where they’ll be able to update photos and video, manage comments, and post news stories. They can also choose what price they’d like their app to sell for on the App Store.

CEO Michael Schneider acknowledges that there are other media platforms available, like Kyte, but says that these can run thousands of dollars apiece. Mobile Roadie is substantially cheaper, running $399 for intitial setup and then $29 a month after that. For larger bands that receive over 1000 installs, there’s an additional 1 cent per month, per install charge. The company is currently in talks with every major record label (some of which are already testing the app), and has forged an exclusive partnership with The Orchard, a leading indie distributor.

I’ve tried out a few of Mobile Roadie’s apps, and for the most part they seem to work quite well (though if a band doesn’t upload many media assets the app feels a bit barren). The company has positioned itself well in a space that is about to really take off, especially once the iPhone 3.0 software hits and users will be able to see updates in realtime from their favorite bands without having to open the application manually.

If you’d like to check out a band’s app built on the Mobile Roadie platform, you can see a directory of their apps here.

Crunch Network: CrunchGear drool over the sexiest new gadgets and hardware.

Did you know that this kind of thing was even possible? The video shows Danny MacAskill. who rides for UK trials bike company Inspired Bicycles, shredding it in Edinburgh. As our own Danny Dumas says on Twitter*, “From what I gather this is parkour…done with bicycles.”

Keep watching. If you think it’s all over after the first couple of minutes, it isn’t. The video just gets bigger and better as it goes on.

Inspired Bicycles – Danny MacAskill April 2009 [YouTube via Danny Doom]

Product page [Inspired Bikes]

*Normally, of course, Danny’s answer to the Twitter question “What are you doing?” is “Styling my hair. My beautiful hair. In the mirror.”

The noble Samurai has found his role in Japanese society reduced over the decades from a fearsome fighting warrior to a skilled cutter of vegetables and BBs that’s paraded on TV shows for our amusement.

Granted, this video illustrates Samurai Isao Machii’s impressive skill and hand-eye coordination, but until he can slice actual flying bullets instead of BBs, he will be nearly useless in battle (although he is still great for ratings). [Tokyomango via Neatorama]

One of the reasons people love WordPress so much is its great flexibility. You can change the software’s appearance with themes. You can enhance its functionality with plug-ins. And, last but not least, you can totally unleash WordPress’ power with hacks. Some time ago, we wrote a post showing 10 Killer WordPress Hacks.

Today, let’s do it again with 10 new and totally killer WordPress hacks to make your blog stand out from the crowd. As usual, we won’t just list the hacks alone. In each entry, you’ll find an explanation of the code as well as the kinds of problems that the hack solves.

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

1. Create TinyURLs On The Fly

The problem. Because Twitter has become a social media revolution, many bloggers and Twitter users enjoy sharing blog posts they have found and liked on Twitter. However, manually creating a TinyURL before tweeting can get a little tedious. As you probably know, Twitter can bring a lot of traffic to your blog, so it is in your interest to consistently provide short URLs to your readers.

The solution. To use this recipe, follow the simple steps below:

1. Open your functions.php file.
2. Paste the following code in the file:

   function getTinyUrl($url) {
       $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
       return $tinyurl;
   }

3. Open your single.php file and paste the following in the loop:

   <?php
   $turl = getTinyUrl(get_permalink($post->ID));
   echo 'Tiny Url for this post: <a href="'.$turl.'">'.$turl.'</a>'
   ?>

4. That’s all you need. Each of your posts now has its own TinyURL, ready for tweeting!

Code explanation. The popular URL shortening service TinyURL provides a quick API that creates TinyURLs on the fly. When you pass a URL to http://tinyurl.com/api-create.php, the API immediately prints the related TinyURL on the screen.

Using the PHP function file_get_contents(), we can get it and assign it to the $tinyurl variable. The last part of the code retrieves the post’s permalink and passes it as a parameter to the getTinyUrl() function previously created.

Source:

• How to: Automatically provide TinyURLs for your WordPress blog posts

2. List Upcoming Posts

The problem. If you often schedule posts to be published, how about displaying them in a list? This will make your readers look forward to what you’re going to publish in a few days and can help you reach new RSS subscribers. Implementing this functionality on your WordPress blog isn’t hard at all.

The solution. Nothing hard here. Just copy this code and paste it anywhere in your theme files.

<div id="zukunft">
	<div id="zukunft_header"><p>Future events</p></div>

	<?php query_posts('showposts=10&post_status=future'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div >
			<p class><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?><br />

			<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
		</div>
	<?php endwhile; else: ?><p>No future events scheduled.</p><?php endif; ?>

</div>

Once you’ve saved the file, your upcoming posts will be displayed on your blog.

Code explanation. This code use the super-powerful query_posts() WordPress function, which allows you to take control of the WordPress loop.

The parameter used is post_status, which allows you to get posts according to their status (published, draft, pending or future). The showposts parameter is also used to define how many items you’d like to get. You can change the value of this parameter on line 4 to retrieve more or less than ten posts.

Source:

• How to: List future posts

3. Create A “Send To Facebook” Button

The problem. In the first hack, we noted that Twitter can bring a lot traffic to your blog. Another website that can boost your traffic stats easily is Facebook. In this hack, let’s see how we can create a “Send to Facebook” button for your WordPress blog.

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

3. Alternatively, you could use the getTinyUrl() function to send a short URL to Facebook:

   <?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
   <a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=<?php the_title(); ?>" target="blank">Share on Facebook</a>

4. That’s all. Your readers will now be able to share your blog post on Facebook with their friends!

Code explanation. This useful hack is very easy to understand: the only thing we do here is retrieve the post’s permalink and title and send them as parameters to http://www.facebook.com/sharer.php.

In the alternative method, we used the getTinyUrl() function (created in the previous hack) to send a short URL instead of the post’s permalink.

Source:

• How to: Add a “Share on Facebook” link to your WordPress blog

4. Create A Maintenance Page For Your WordPress Blog

The problem. One thing I really like about Drupal is the option to temporarily redirect visitors to a maintenance page. Sadly, WordPress doesn’t have this feature. When you upgrade your blog, switch themes or make design changes, you may not want your visitors to see your blog as it is being tweaked, especially if it has design or code problems or, even worse, security gaps.

The solution. To solve this problem, we use the power of the .htaccess file. Just follow the steps below to get started.

1. Create your maintenance page. A simple WordPress page is generally sufficient.
2. Find your .htaccess file (located at the root of your WordPress installation) and create a back-up.
3. Open your .htaccess file for editing.
4. Paste the following code:

   RewriteEngine on
   RewriteCond %{REQUEST_URI} !/maintenance.html$
   RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
   RewriteRule $ /maintenance.html [R=302,L]

5. Replace 123\.123\.123\.123 on line 3 with your IP address (Don’t know it?). Make sure to use the same syntax.
6. Now, all visitors except you will be redirected to your maintenance page.
7. Once you’re done tweaking, upgrading, theme switching or whatever, re-open your .htaccess file and remove (or comment out) the redirection code.

Code explanation. The .htaccess file, which controls the Apache Web server, is very useful for these kinds of tasks.

In this example, we state that any visitor who has an IP different from 123.123.123.123 (which doesn’t request maintenance.html) should be redirected to maintenance.html.

By replacing 123.123.123.123 with your own IP address, you make sure you’re still allowed to browse your blog normally, while others are redirected to maintenance.html.

Source:

• 10 awesome .htaccess hacks for WordPress

5. Display Related Posts Without A Plug-In

The problem. One well-known way of keeping visitors on your blog longer and helping them discover news posts is to display, usually at the end of the article, a list of related content.

Many plug-ins will do this job, but why not super-charge your theme by integrating this functionality by default?

The solution.

1. Open the single.php file in your theme.
2. Paste the following code in the loop:

   <?php
   $tags = wp_get_post_tags($post->ID);
   if ($tags) {
     echo 'Related Posts';
     $first_tag = $tags[0]->term_id;
     $args=array(
       'tag__in' => array($first_tag),
       'post__not_in' => array($post->ID),
       'showposts'=>5,
       'caller_get_posts'=>1
      );
     $my_query = new WP_Query($args);
     if( $my_query->have_posts() ) { ?>
   <ul>
   
   </ul>
   

3. Save the file, and then have a look at your blog: related posts are automatically displayed!

Code explanation. This hack uses tags to retrieve related posts. The first thing it does is get the post’s tags. If a post has tags, the first one is extracted and used in a query that retrieves posts with the same tag.

By default, this code displays up to five related posts. To change this number, simply edit line 9 of the code.

Source:

• How to: Show related posts without a plug-in

6. Automatically Retrieve The First Image From Posts On Your Home Page

The problem. Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution. This hack is quite easy to implement:

1. Open the functions.php file in your theme.
2. Paste this code in. Don’t forget to specify a default image on line 10 (in case a post of yours does not have an image).

   function catch_that_image() {
     global $post, $posts;
     $first_img = '';
     ob_start();
     ob_end_clean();
     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
     $first_img = $matches [1] [0];
   
     if(empty($first_img)){ //Defines a default image
       $first_img = "/images/default.jpg";
     }
     return $first_img;
   }

3. Save the functions.php file.
4. On your blog home page (index.php), call the function this way to get the URL of the first image from the post:

   <?php echo catch_that_image() ?>

Code explanation. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

Source:

• How to: Get the first image from the post and display it
• Retreive first image from post

7. Resize Images On The Fly

The problem. When you use thumbnails on your blog’s home page or even images in posts, having to manually resize them is boring and wastes a lot of time. So, why not use the power of PHP to do it?

The solution. To achieve this hack, just follow these simple steps:

1. Get this script and save it on your computer (I’ll assume you’ve named it timthumb.php).
2. Use an FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file to it.
3. Once done, you can display images like so:

   <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="Screenshot" />

   In other words, you just call the timthumb.php file and pass your image as a parameter. The same goes for your desired width and height.

Code explanation. The timthumb.php script use the PHP GD library, which allows you to manipulate images dynamically with PHP. GD is installed by default on all servers running PHP5. If you’re not running PHP5, you’ll have to check if GD is installed before using this script.

The timthumb.php file gets the parameters you’ve passed to it (image URL, width and height) and uses it to create a new image with your stated dimensions. Once that’s done, the image is returned to you.

Source:

• TimThumb PHP script released
• How to: Resize images on the fly

8. Get Your Most Popular Posts Without A Plug-In

The problem. Displaying your most popular posts is a good way to make visitors stay longer on your blog, as is displaying related posts. Many great plug-ins can list your most popular posts, but again, why use a plug-in when you can simply hack your WordPress theme to do it automatically?

The solution. Just paste the following code anywhere in your theme files (for example, in sidebar.php). To change the number of displayed posts, simply change the “5″ on line 3 to your desired number.

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>

<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>

</ul>

Code explanation. This code executes an SQL query to the WordPress database, using the $wpdb object, to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.

Source:

• Create your own popular posts page

9. Highlight Searched Text In Search Results

The problem. The WordPress search engine system is often criticized for not being powerful enough. One of its weakest points in my opinion is that searched text is not easily distinguishable from the rest of the text. Let’s solve that!

The solution.

1. Open your search.php file and find the the_title() function.
2. Replace it with the following:

   echo $title;

3. Now, just before the modified line, add this code:

   <?php
   	$title 	= get_the_title();
   	$keys= explode(" ",$s);
   	$title 	= preg_replace('/('.implode('|', $keys) .')/iu',
   		'<strong class="search-excerpt">\0</strong>',
   		$title);
   ?>

4. Save the search.php file and open style.css. Add the following line to it:

   strong.search-excerpt { background: yellow; }

That’s all. Better, isn’t it?

Code explanation. Once again, regular expressions are a lifesaver. The regexp parses the $s content ($s is the variable containing the searched text) and automatically adds a <strong class=”search-excerpt”> element around any occurrences of $s.

Then, you simply modify your style.css file to give searched text a special style and make it more visible to your readers.

Sources:

• Make WordPress’ search function suck less.
• How to: Highlight searched text in search results

10. Disable Widgetized Areas Without Editing Theme Files

The problem. Widgets are very useful, but sometimes you don’t need them on a particular page or post. Sure, you can create a page template for a particular page or even remove the widgetized zone from the code, but a much better and more elegant solution exists.

The solution. To do this, simply add the following code to your functions.php file:

<?php
add_filter( 'sidebars_widgets', 'disable_all_widgets' );

function disable_all_widgets( $sidebars_widgets ) {
	if ( is_home() )
		$sidebars_widgets = array( false );
	return $sidebars_widgets;
}
?>

Code explanation. This code first adds a filter to the sidebars_widgets WordPress function. Now every time WordPress tries to execute this function, it will execute the disable_all_widgets function we just created.

The disable_all_widgets function uses WordPress conditional tags (in this example, is_home(), but you can use any conditional tag) to disable all widgets if a visitor is on a particular page or post.

Source:

• Disable widget areas (sidebars) without touching theme templates

Related posts

You may be interested in the following related posts:

• 15 Useful Twitter Hacks and Plug-Ins For WordPress
• Mastering WordPress Shortcodes
• 10 Steps To Protect The Admin Area In WordPress
• 8 Useful WordPress SQL Hacks
• 10 Useful RSS-Tricks and Hacks For WordPress

About the author

This post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about Photoshop at PsdRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
104 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: facebook, hacks, maintenance, related, techniques, tinyurl, upcoming, wordpress

The Gadget: Ideative’s Socket Sense surge protector that expands in order to fit more bulky AC adapters all on one strip.

The Price: $29.99

The Verdict: One of the best expandable surge protectors we’ve used yet. It’s incredibly useful on road trips (CES) as well as at home, and beats even the Power Squid in our eyes in a general comparison.

The special thing about Socket Sense is that it can be expanded from 13 to 18 inches and has 6 angled outlets, allowing you to fit more adapters on one strip. Because of this, the Socket Sense is significantly bigger than a lot of other power protectors—fully extended, it is the length of a 5'4'' female's arm—and weighs a lot more too.

However, compared to squid outlets, the design and size of the Socket Sense gives it a heavy, flat bottom, which makes it easier to use without having to deal with bundled up cords and cables all over the place. Moreover, surge protector allows you to individually extend each outlet when needed, allowing you to adjust how much space it takes up to some extent. Also, there is enough tension on extender so that the strip doesn’t flimsily slide open or close, but it doesn’t give off so much resistance that a relatively weak girl can’t extend it easily.

Overall, Socket Sense is a reliable piece of hardware for those who need a power strip that offers more space between each adapter. It has 2160 joules of surge protection, compared to the 540 joules of the $30 power squid (the $50 squid offers 1080 joules and the $70 squid offers 3240 joules). For $30, it’s hard to find a better overall surge protector with this amount of space per socket, although the EZSpace UFO is pretty good as well. [Ideative]

Large enough to allow you to plug in six of just about anything in the strip

Slightly larger than a normal power strip

Slightly pricier than a normal strip at $30

What it does

In a nutshell, this is a new service that will enable you to share and edit both estimates and invoices over the web. There are many apps out there that let you create an invoice, and that is certainly useful. The only thing is that creating the invoice is just the start of the process. From that point onwards, it is not uncommon to have to send and receive a wealth of mails to clients and collaborators alike. This new app gets around this problem by creating a centralized platform that lets anybody connect with each other on the spot.

This is done by compressing the disparate e-mail threads into one conversation that will let anybody keep track of everything, and see where the project is headed and recall how it all started.

At the end of the day, this tool will be of use to freelancers and established agencies alike. If you want to figure out the ways it can best help you out, simply pay the site a visit and sign up for the 30-day free trial that is available.

In their own words

“Let’s face it, there’s a glut of invoicing apps out there. While there are some that come close to hitting the mark, they all manage to ignore the most important part of doing business: communication. Creating the invoice itself is only the first step – it’s invariably followed by days of back and forth email, corralling payments, haggling, and worst of all, a constant stream of CC’d emails updating your team. Ballpark is made for the real world: it centralizes communication with your team and clients into an easy use system that simplifies the process for everyone.”

Why it might be a killer

Such a tool caters both for small startups and those that already have more mileage, and it will let them maximize efficiency in a cost-friendly way.

Some questions

Are there different plans available? How can I find out which one will be the right one for me?

Link: http://www.getballpark.com
Our Review: http://www.killerstartups.com/Web-App-Tools/getballpark-com-send-estimates-invoices

 

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world.

This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

Favicon

A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

And if you have an iPhone favicon:

<link rel="apple-touch-icon" href="/favicon.png" />

Titles And Meta Data

Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.

<title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title>

Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

<meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />

Cross-Browser Checks

Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

• Cross-Browser Checks: Services and Test Suites
• 7 fresh and simple ways to test cross-browser compatibility

Proofread

Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

• Writing for the web

Links

Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention.

Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

• W3C Link Checker

Functionality Check

Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

• Silverback – guerrilla usability testing

Graceful Degradation

Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation

You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&amp;” for ampersands.

• 10 reasons your code won’t validate (and how to fix it)
• W3C validator

RSS Link

If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar.

Put this code between your <head> tags.

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

Analytics

Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap

Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is www.mydomain.com/sitemap.xml.

If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design

The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.

Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

• 404 error pages reloaded

Optimize

You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.

Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

• Best practices for speeding up your website
• Web page analyzer

Back Up

If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet

If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.

To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

• Printing The Web: Solutions and Techniques
• A List Apart: Going to print

Download the Ultimate Website Launch Checklist!

Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released.

You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list?

Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments!

About the author

Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter.

(al)

© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
181 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: checks, design, launching, release, usability

I have been very impressed with Andrew Sutherland of the Mozilla Messaging team (which is one reason that I have faith that I will dump Gmail for something he and the Messaging team come up with one day ;) and the visualizations that he is playing with are quite cool indeed. Seeing your email in different ways (not just in a table) can open the eyes.

Andrew is using Protovis “a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.”

There are some cool examples such as:

which produces .

Very cool indeed!