How to control how your site looks on Facebook

by Arra Derderian 25. September 2011 02:57

Every site out there now ends up being shared on Facebook. If you want your site to look good on a person's wall or in the news feed when it is shared you need to include Open Graph protocol tags. 

The first step to seeing how your site appears is going to Facebook's URL Linter tool. Here you can enter in your site's URL and it will tell you how it will appear on Facebook. You will notice there are tags such as "og:title", "og:image", etc that you can include on your page that will allow you to control how Facebook displays the text and icon associated with your site when someone pastes it into Facebook.

For example:

<meta property="og:title" content="The Cloud Construct Blog" />

<meta property="og:description" content="The Cloud Team's Thoughts, Ideas, and Expressions." />

<meta property="og:type" content="blog" />

<meta property="og:url" content="http://blog.cloudconstruct.com" />

<meta property="og:image" content="http://blog.cloudconstruct.com/images/fb-image.png" />

These would be great properties to include on the homepage of my blog site so when people linked to it on Facebook it appeared correctly and served up a nice image with it. If Facebook decides to display pages of type=blog different than a website it also can do that too. Basically, you are conforming to the Open Graph standards so all sites who choose to dispay your site can do it in the best way possible. The image has specific standards such as being 50x50 and certain file types. After you place the above tags in your page, you will want to read this Facebook Tutorial about adding the appropriate html namespace tags as well:

 

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:og="http://ogp.me/ns#"

      xmlns:fb="http://www.facebook.com/2008/fbml">

 

There are tons of tags you can add to make your site even more inline with the OG protocol. See the Social Graph options on the Facebook site.

Lastly, when you run the URL Linter on your site it will update your site in the Facebook cache. So if you are not properly indexed now, run the tool after you update your site and it will update Facebook's cache.

 

NOTE: Although I am writing this article and the Cloud team places these tags in all of our newly developed sites. We still have not had time to put it on our own site. Please don't hold that against us :)

 

Tags: , ,

SEO & Online Marketing | Technology | User Experience

Google Adds PageSpeedOnline to Labs for Checking Site Performance

by Arra Derderian 2. April 2011 00:20

Google has released a new tool called Page Speed Online that allows users to instantly get a report detailing the performance of their website. Simply enter a URL and you will get information on how your pages ranks on a scale of 1-100. Also you can get a mobile report as well. This is nice because when writing mobile apps many developers forget that compression and minifcation are very important. I have used tools in the past like YSlow to get a very detailed report of my site, but this tool by Google is much more lightweight and easier to interpret.

Page Speed Online does a decent job of quickly analyzing your site, but it does not tell you any of the load times of all the elements of your page. YSlow does do this and it is helpful to see what is actually taking so long to load on your page. Both tools tell you the obvious things, like set expires headers on images and minify JS/CSS.

Overall, I think it is a fast way to get an analysis of your site. But the suggestions are things you probably already know anyways and just decided not to do. Also I got two different scores that differed by 10 points within the same day which was strange.

Tags: , , ,

SEO & Online Marketing | Technology | User Experience

Restaurant websites stink

by gbertoni 3. March 2011 05:30

 

Boston.com has an interesting article today that really struck a chord with me.  What was long an inside joke among seasoned web users (nerds) and website development folks has apparently now gone mainstream.

Restaurant websites are uniformly horrible

When bad websites happen to good restaurants

As evidence for this supposition, the author (Devra First) offers up a few examples:

 

  1. “User unfriendly”
  2. PDF downloads
  3. Out of date content
  4. Flash animation
  5. Techno music

 

Hard to argue with any of these points, but let’s expand on them a bit.

User unfriendly

When creating a website, we like to think of the scenarios that users would be visiting for, and architect the site such that accomplishing any of these major tasks will be intuitive and quick.  For restaurants there are a couple reasons that a user will want to visit.

1. To determine if they want to try the restaurant

2. To find out how to eat at the restaurant

As an eater no doubt in the target range of restaurant websites (Young, Urban, and Professional) I often find myself frustrated with the websites of restaurants that I may or definitely wish to visit.  When I want to determine if I will try a restaurant, I look for the following information: menu, location, price range, chef, and of course: reviews.  When I know I want to eat at a restaurant I look for the following information: do I need a reservation, how do I make a reservation.

Obviously third party sites can help accomplish both of these tasks (Yelp, OpenTable) but relying on social media sites does take a lot of the control from the restaurant.  There is still a benefit and a valuable use case for a dedicated website for the restaurant that outweighs the cost.  Namely, it allows the website to reliable provide information and promote its service in the appropriate light.

PDF downloads and out of date content obscuring desired information

The author implies that PDFs are used because they are easier for the restaurant to update, but then cites examples of PDF menus from 2006 (7 years!).  With free open source content management systems available, why would anyone think it is easier to scan a menu and upload it to their website than copy and paste what you sent to the print shop?  Likely no one has informed these poor souls what a CMS is and how it can help their website.  A CMS also makes it possible to update the content on the website regularly with a simple (relatively) user interface that even a hostess could understand.

Flash Animation, TechnoMusic

Also noted is that basic information is obscured by bells and whistles (sometimes literally) that were exciting at one point (2001) but are now considered an annoyance.  Music playing in the background is a major pet peeve of mine.  Flash video site openings?  Don’t people know that I only look at websites at work, on my blackberry, or on my iPad?  Keep it simple and to the point.  I am not going to go to your restaurant because of a cool flying video through your empty restaurant.  Especially when that video does not work on my blackberry, my iPad, or the 50 Million+ iPhones http://techcrunch.com/2010/04/08/apple-has-sold-450000-ipads-50-million-iphones-to-date/

Devra is even bold enough to call out a few restaurant websites directly as examples for some of these internet faux pas

Bergamot 

Coppa 

Any Todd English Restaurant: Olives, Figs, Bonfire, Kingfish Hall, Etc.

My guess is that these restaurateurs were willing to talk to her, and also had a clear plan to get off that list.  However, Jamie Bissonnette from Coppa is apparently trying to figure out how to get rid of some of the flash.  Why?  I don’t try to figure out how to do Charcuterie; I leave it to the experts that can do it well at a reasonable price - drop us an email!

Recommendations

Keep it simple

Display the critical information up front and easy to find.  The homepage should display this, and if you do not have a mobile optimized site (why not, easier than you think), it should be placed in a location that is not impossible to scroll to on a smartphone.

Keep it updated

Update the content regularly.  This will ensure that people know your restaurant is still open, as well as allow you to promote new menu items or other crucial information.

Keep it open platform

Flash is dead.  Everyone uses an iPhone, an iPad, or other smartphone and hates flash.  The rumors of its resurgence are overstated; it is a CPU hog that helps drain your precious battery faster.  HTML 5 will allow you to do anything on a website that you should.

Of course, here at Cloud Construct, we can help you identify your website challenges, architect a new information layout, design a brand new site, and implement it with HTML 5, OpenTable, or anything else you want.  But for everyone’s sake, at least take a look and consider talking to someone about an update.


 

Tags:

Technology | User Experience | Visual Design

Make it easy for the spiders to crawl what you provide...

by Arra Derderian 17. November 2010 03:34

This guy knows what he is talking about: Designing Code Right Thanks to Matt Stowe for this link.

Tags:

User Experience | Visual Design

Firebug brings us Pixel Perfect

by Rebecca Pleshaw 1. November 2010 19:28

If you're a developer like me, you're a big fan of Firebug. It's a quick/light/easy debugging savior. I've just recently come across a similar tool that works in addition to Firebug as an Add-On extension. It's called Pixel Perfect and it allows you to upload and overlay a design composition to a web page to check pixel for pixel exactly your progress in development. You can toggle the comp visibility, making the Firebug experience that much more useful. This is great solution that keeps you on track and ensures you deliver your clients the exact design they are expecting. Check it out!...

https://addons.mozilla.org/en-US/firefox/addon/7943/

Tags: , , , ,

User Experience | Visual Design

Upcoming Events

by Arra Derderian 20. October 2010 23:41
10/21/2010 - Boston Azure is hosting an event at the NERD in Cambridge. The event starts at 6:30pm and will detail using Silverlight with Windows Azure.

10/21/2010 - Boston WebSiteSpark Group is hosting an event at the NERD in Cambridge. The event starts at 6:00pm and will detail developing iPhone applications using ASP.NET.

Tags:

Azure | Cloud Computing | Engineering | MVC | User Experience

Upcoming Events!

by Arra Derderian 4. September 2010 22:55

HTML 5 - 9/27/2010 - HTML 5 Discussion on new Features

F# - 9/13/2010 - New Web Technology Discussion

Cloud Computing Camp - 10/11/2010 - Cloud Camp

Search Engine Optimization - 9/13/2010 - SEO Information

 

I am going to try and hit all of these events. They seem really interesting and are all FREE!

Tags:

Cloud Computing | User Experience

iAd on IOS4

by emckeown 15. June 2010 00:52

So what is iAd and what makes it so different than a regular online ad? iAd is a key feature of the new IOS (IOS4) by Apple and what makes it interesting is that iAd is integrated into the operating system of the new mobile device. This allows for a better user experience and a more seamless transition between the ad and the app that the user is on.

Lets say you are a 3G network and there is an ad that you click on. One of the problems with the current app is that  when you click on it, it will take you to another site. However, before that happens it will stop the current app you are in, launch a new app, and then load the site at a snails pace. All of this has the potential to annoy the user and not really entice them to buy the product. Apple has answered this problem by creating its own ad service, iAd, which would make the user experience seamless. If a user clicks on an ad the app then navigates them to the ad in the app they are in. And if they quit out of it they will be right back to where they originally were, making the entire process seamless.

Currently, there are only large firms advertising with iAd as the cost is very high. However, I suspect that more and more small businesses will join that group once it is a bit more affordable. iAd will start serving ads on the first of July.

Tags:

Cloud Computing | User Experience