Today Twitter announced @anywhere which is a new set of methods that were typically reserved for twitter.com that can now be used on your own website. In the video below I show how easy it is to implement one of the new pieces of functionality called Hovercards. Hovercards allow you to associate a little more information to twitter ids on your own site, for example if I put our id @logicbydesign you can now rollover it to follow us or get some more information. This is a great way to allow visitors to your site connect with you by following you on twitter without having to take them away from your site.

Hovercards using @anywhere from Pete Bernardo on Vimeo.

Just a quick video showing you how to implement one of the many new features of @anywhere from Twitter.

Here is a close up view of the code used in the example, visit @anywhere’s documentation to see more examples.

1
2
3
4
5
6
7

<script src="http://platform.twitter.com/anywhere.js?id=APPKEY&v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>

If you have any questions about implementing hovercards or @anywhere feel free to leave a comment below or follow us on twitter @logicbydesign (see how useful =) )

Update

Thanks for everyone who came to my talk. Hopefully I was able to share some tips that you had not heard before. For the slides of my talk: Plugins for your next client Project. For photos from Wordcamp Miami, Alex Harris has some awesome ones on his flickr account.

Tomorrow is Wordcamp Miami, the event is sold out and I’m very excited to be giving a talk. I’ll be showing a few of the plugins we use to keep WordPress as our central platform. We’ll be looking at how we handle web forms, content management, custom layouts, and ecommerce projects.

Registration starts at 8am and there is going to be some awesome speakers at the event. Hopefully you were able to get a ticket and I’ll see you there.

Lately advertising has tended to shock rather than simply focus on the product. This ad from Google and intro video for Square are refreshing for how simple they are and how well they tell a story to the viewer.

Google

Square

Here are a few tips to deal with the different ways your site will be viewed:

Background Size

Make sure your background repeats properly or is big enough so it fills most of the screen of the higher-end displays.

There are a couple different techniques to handle backgrounds. The two we most commonly use would be to create a repeatable background along the x-axis with a solid color that sits below for the longer pages. The alternate to this that is becoming more common is to use a large non-repeatable image that takes up most of the screen.

Page Fold

Don’t forget that, as a designer, just because you have a 30″ monitor doesn’t mean the site’s audience does; more likely they don’t, so consider the page fold. It has become fairly popular to build sites with large marketing headers. On large monitors these sites look beautiful, but small, mobile laptops are becoming increasingly popular, and these large header typically take up most of the vertical space, the page fold. A friend of ours, Mike Gowen, recently commented about this. I thought Mike summed it up best with the following: “Content that is not in immediate view is always going to be viewed less than content in immediate view especially if an extra action is needed to view it, such as scrolling.” Our advice is to keep your goals in mind when you are designing your site. If your goal is to get users to book a stay at your resort, it is a good idea to make sure the call out to book is visible while they are looking at the beautiful images of the resort in the header.

Mobile Version

Have a mobile version of your site. The mobile market is exploding, and assuming no one is going to be viewing your site on their mobile device is silly. Visitors could be looking up an address to your store, a telephone number to call, or the time of an event. Having a mobile version can be as simple as a single page that shows contact information. Here is one way to handle it: include a this php script, and then the following code.

include('mobile_device_detect.php');
$mobile = mobile_device_detect();
 
if ($mobile) {
header( 'Location: http://yourdomain.com/mobile' ) ;
}

Apps

An app is a small, custom application users install to have quick access to functionality they want to use often. So, if you like using Kayak.com to compare ticket prices, you can install its app to quickly to check prices while on the go. Same goes for Bank of America, eBay, Fandango, and many many more.

Mobile Web Sites

A mobile version of your web site is where you build a custom site that only shows up when a person is using a mobile device to browse your site. These custom versions are styled to better fit the mobile displays with larger text, larger buttons, simpler layout, etc. The goal is to identity what tasks the visitor might be trying to accomplish. For example, they might look for your phone number, get the time of an event, or seek the address of a store.

Don’t Ignore Mobile

Whether you build a custom app or create a mobile version of your site, the important thing is not to ignore this user group. While a mobile app is not for every business, there are really only a few cases where a mobile version would not be necessary. Consider what your users might be trying to accomplish by visiting your site while on the go, and start your mobile site around presenting that information easily and quickly.