Subscribe to our RSS Feed

Category Archives: GA Guide

What is HTML5?

Today, while reading an interesting blog post, I was called a geek.  I was so upset by this shameless finger pointing (the blog brazenly suggested that because I was reading the article in the first place I must be a geek), that I left the site. OK, so I may have been specifically interested in using multiple CSS styles for different devices and configurations, but that’s beside the point!

Anyway, back to the matter at hand and I decided that while I might be a little bit geeky, that doesn’t mean I understand all tekkie jargon. So, I thought that once in a while, I would take some tekkie speak and translate it into plain English for those of you who like to read about geeky things but might not necessarily be a geek!

Today, I want to talk about HTML5. It’s being talked about a lot at the moment and if you read the post ‘Web design and the iPad’ you would have come across it.

To give you a bit of background, HTML ( which stands for HyperText Markup Language and is the predominant and universal markup language for web pages) was developed by the W3C  (the World Wide Web Consortium) until 2004, when members of the HTML working group became unhappy with the direction the W3C was going with HTML. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called Web Hypertext Application Technology Working Group (WHATWG) devoted to evolving the Web. They started by working on a new specification of HTML – HTML 5.

HTML5  incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. This is important because, as you may have heard, Apple is no longer compatible with Flash, choosing instead to adopt HTML5, CSS and Javascript.

Here is a brilliant explanation in the form of an infographic…

What is HTML5

Web design and the iPad

Designing for the iPad

Apple is currently soaring on the sales success of the iPad, and the consumer technology giant has smashed Wall Street expectations after profits surged on strong demand for new products – including the iPad.

The company, which sold almost as many of its new iPad tablets as Mac computers, said revenues jumped 61 per cent to $15.7 billion (£10.3bn) in its second quarter. Profits rose 78 per cent to $3.25bn. So far, it has sold about 3.3 million iPads during its first three months on the market.

While it remains to be seen if the iPad’s initial success can be maintained, it is possible that this nifty device has the potential to be a game changer in computing, and the way in which we browse and design for the web.

The launch of the iPad can be seen as a significant step towards the advancement of consumer computing, locking away the complexities of a powerful operating system beneath a streamlined, polished user interface. Although the iPad is a fully portable device, it’s totally different from a laptop, and boasts a large touch screen and 10 hour battery life. This makes it the ultimate tool for enjoying the web. So, with the iPad being different from everything that has come before, how should you approach designing for it?

Should conventional design for desktops apply? Or should designers draw on insight provided by mobile projects? We predict that from the launch of the iPad will emerge a new design hybrid, one which combines aspects of desktop and mobile design.

However, whether the iPad is able to change the world or not, is not the issue of this article. The fact of the matter is that the iPad is here and that, with 3.3 million of them already sold, we must design for the web whilst keeping it in mind. So, what do we need to consider?

Bright screen

The iPad is so bright that long term use can fatigue users. Therefore designers should consider colour contrast. Perhaps use light greys instead of white and dark greys instead of full on black. The backlit iPad screen is not ideal for long term textual consumption, so do your users a favour and mix up photos and video to make for a less strenuous experience.

Pixel density

The device’s pixel density, combined with screen dimensions that lie somewhere between a desktop and mobile phone, mean that neither downscaling desktop sites nor upscaling mobile sites is ideal.

The iPad

Links and Hover Effects

Most important is the fact that the iPad is a large touch screen device. This is a fundamental long term difference and a move from mouse to finger. Just think, there are a number of complexities in rendering an interface that defines hover and mouse in/mouse out features on a device that has no pointing mechanism!

As the primary method of user interaction with the iPad are the fingers, all those hover effects that were favourable for pointer-based devices will be a hurdle in user experience on the iPad. As, when using a finger and touching the screen, you loose the hover state.

Also the links can no longer be concealed in a text and left for the user to dexterously click upon. Therefore you might want to resize the links so that the user experience does not suffer. Also consider the concept of mousing (and Fitts’ Law). Will users be as accurate with their finger as a mouse cursor?

The Fold

The iPad changes the nature of the fold. The ability to change orientation makes the fold exist twice – and in two different places. Hopefully, this will stop people worrying about whether users will scroll because, if there ever was a device that makes people want to scroll, the iPad is it.

The iPad and the fold

Device orientation and fluid width design

As some iPad apps lack consistency between modes (sometimes only some features are available in landscape mode) it would not be advisable to have different designs for different orientations. Two designs may also confuse users when they switch modes. It’s also worth thinking about how a user might hold the device and the fingers they may use to navigate a site.

As the iPad has no right way of viewing websites, you can view pages either in landscape or in the portrait mode. But for the designer that means two completely different layouts for which to design. It is for this specific reason that the iPad highlights the need for smart fluid width design. Using a smart combination of CSS and Javascript the User Experience can be made to improve drastically.

HTML5

Every new Apple mobile device and every new Mac (along with the latest version of Apple’s Safari web browser) supports web standards including HTML5, CSS3, and JavaScript. The iPads strong support for web standards may also benefit designers in another way, especially with the release of the OS4. Apple’s iAd platform is based around HTML5, which offers opportunities to anyone well versed in the technology. Revealed by Jobs last April, iAd aims to provide media rich in-app mobile advertising that (according to Apple) will provide the emotion of TV with the interactivity of the web. With Google openly adopting HTML5 for Youtube, it is only a beginning of the things to come with HTML5.

Additional benefits

Although unconventional in interface terms, the iPad is a good citizen when it comes to webs standards. Safari for iPad is one of the most advanced, standard compliant browsers around. Also, WebKit (an open source web browser engine and also the name of the Mac OS X system framework version of the engine that’s used by Safari) is the only browser engine. WebKit is appealing to designers because they know exactly what they are designing for and don’t have to worry about how a design may appear on a range of different browsers. This allows for more focus when creating an iPad specific site.

Two sides of the argument

Designers are not united regarding optimisation for the iPad. Some say that there is no need unless iPad users are your core audience. However, if you can make something look good on the iPad, it is likely that it will look good on a desktop too.

Others say that designing specifically for the iPad will mean that users are not left in the lap of the Gods. Removing the need to zoom to read text, or ensuring that text links are large enough to be easily ‘clicked’ by a finger will remove a barrier between the users and your content. You don’t want uses to have to constantly adjust viewing behaviour because your content does not arrive formatted for easy consumption.

Nevertheless, it would be bad practice to develop a website specifically for the iPad platform – just as we no longer create sites specifically for the Mac or PC. Think of the iPad as another step in the evolution of the way in which we design for the web. As with every new device that comes out, we must take into account the subtle differences and play to its strengths and weaknesses.

The iPad - a beautiful piece of design too!

The GA guide to eating in Covent Garden

Covent Garden is a hive of activity, full of shopping, culture, history, entertainment and more. It’s also a great place for a bit of celeb spotting and “guess who I saw this lunchtime” is a first floor gaming staple! With so much to see and do in the area, many of our clients love to visit us here at GA HQ – especially those visiting from out of town. So, in case you find yourself with some time to spare and a hungry belly before or after stopping by to say hello,  we thought we’d put together a list of our favourite lunch spots in and around the area.

Chequers – 47 Bedford Street
A sandwich mecca. Buy a huge sandwich of the day and get a cup of soup for free. Watch out for the lunchtime queue that often stretches all the way down the road!

The Master’s Diner – 32 Henrietta Street
Sometimes, only a good old fashioned fry-up will hit the spot. This great little greasy spoon also makes a mean sandwich.

Food For Thought – 31 Neal Street
Something for the vegetarians. Food for Thought makes delicious veggie food – but be prepared to wait. Sharing tables is the norm and the service can be slow, but the flavoursome food is worth it, so try a take-away instead.

Wong Kei – 41-43 Wardour Street
Great food in generous portions. However, this little Chinese gem is famed for it’s rude staff and brash service! Take it all with a pinch of salt and you’ll eat a good, hearty meal.

The Mediterranean Salad Bar – Earlham Street Market
For £4 the friendly staff working behind the Mediterranean Salad bar will give you a big box stuffed full of delicious goodies – from salad to olives, sun dried tomatoes and hummus. You’ll also get a massive hunk of bread to go with it.

Rock & Sole Plaice – 47 Endell Sreet
Voted one of the best fish and chip shops in London, this establishment is always packed full of tourists, luvvies, suits and trendies – but no one cares when they’ve got chunky chips and crisply battered fish in front of them! Outdoor tables come into their own on a balmy summer’s evening.

Itsu – 41-44 Great Queen Street
Yes, it’s a chain, but they do do the best sushi, soups and salads. There’s also indoor and outdoor seating.

For sit down eating try Sophie’s Steakhouse and Joe Allen.

What is FourSquare?

foursquare

If you’ve been keeping on top of all thing digital, you may have come across something called Foursquare.

Well, if you’re wondering what Foursquare is, what it does and how to use it, then look no further, because our handy GA guide is here to explain (in plain and simple English!).

A bit of history

Foursquare is a location based social networking game co-founded by Dennis Crowley and Naveen Selvadurai. It was launched in 2009 at the South by Southwest Interactive festival in Austin, Texas.

Prior to the launch, both founders were heavily involved in geolocation based games and apps. In fact, Crowley even sold a Foursquare predecessor called ‘Dodgeball’ to Google for an undisclosed sum in 2006. Dodgeball sent text messages to friends when you checked into specific places and was described as “a networking service that helps co-ordinate location based social interactions between mobile users”. However, in 2007, Crowley quit Google and met Naveen shortly after.

What does it do?

Foursquare allows you to share your location with friends. So, when you walk into a bar, cafe, restaurant or shop, you “check-in” (Foursquare’s term) on your mobile device, and your friends will see where you are on a Foursquare map. It’s also a game too as you earn points and “badges” for checking-in frequently, or at a certain time. If you raise enough points you become “mayor” of a certain area.

How many people use it?

Foursquare has surpassed 500,000 registered users, and had its biggest day ever on March 11th, with more than 275,000 “check-ins.”

What do users get out of Foursquare?

Users can connect with friends, earn badges, and various perks from the places where they check in. Foursquare also gives you access to your check-in history, which gives you a snapshot of where you go, who you meet there, and what you’re spending money on.

How does it relate to other businesses?

Foursquare is being taken very seriously by big name brands. Starbucks is the latest and most prominent company to sign a deal with Foursquare — you can earn a “Barista badge” by checking in five times at the coffee retailer.  Starbucks is testing Foursquare as part of its customer-loyalty program, and other companies are also using it to reward frequent visitors. Foursquare is rolling out a free analytics program that will give participating businesses detailed information on who is checking-in to their locations, and give them the ability to communicate with the visitors.

Foursquare says it now has 1.4 million venues logged in its system, with 1, 200 businesses offering special deals to people who check-in via Foursquare.

Is anyone else doing something similar?

Yes. Geo-location based games are massive right now. Gowalla is foursquare biggest competitor and Yelp, Twitter and Facebook are also vying for a piece of the “checking in” market.

The Fold Phenomenon

The Fold

Recently, we’ve noticed our clients and potential clients talk a lot about ‘the fold’ and their anxieties regarding any information placed below it. In fact, it’s a topic that crops up in nearly every meeting regarding website design. However, for those of you who are uncertain as to what exactly the fold is in terms of web design, here is a little explanation:

The most common use of the term ‘fold’ is used in reference to newspaper layout. Due to the dimensions of a broadsheet paper, it is folded, and so the first page of a newspaper is where the big stories of the issue are – placed above the fold. Readers have to flip the paper over (or unfold it) to see what else is in the issue so there is a chance that someone might miss it. In web design, the term ‘fold’ means the line beyond which a user must scroll to see more contents of a page (if it exists) after the page displays within their browser. It is also referred to as a ‘scroll-line’.

So, anything above the fold is the part of the web page you can see before having to scroll. However, due to screen sizes and the height of toolbars and menus at the top of browser windows, the amount of information a user may see above the fold will vary.

History

The phenomenon of the fold, and many people’s obsession with cramming all information above it, stems from the early days of the internet, when users were not familiar with scrolling. Due to this, web designers would design web pages so that the most important content was placed ‘above the fold’. In fact, usability studies of this time (between 1994 and 1996) stated that sites failed if any important information was placed below the fold. So, it was common practice at the time to squeeze all content into the initial screen area. However, in 1997, Jakob Neilson (the “reigning guru of web usability”)  retracted the guideline to avoid scrolling pages (a rarity as 80% of guidelines created in the ‘90s still remain in place today).

Today, users WILL scroll

As users have become more familiar with the internet, web pages and the scrolling mouse, they know how to scroll, and today, users will. In fact, if you have a long article, it’s better to present it as one scrolling page, rather than split it into multiple pages (as it’s easier to scroll than decide whether to keep clicking).

Nevertheless, this does not mean that the fold can be completely ignored. Remember that users have a limited attention span – people prefer sites that get straight to the point and let them get things done quickly and efficiently (Forrester research has recently identified a mere 2 seconds as an acceptable amount of time to wait for a page to load). Also, despite the fact that users will scroll, the real estate above the fold is naturally more valuable for keeping and holding onto a users’ attention.

The most basic rule of thumb is that the user should be able to understand what the website is about from looking at the information presented to them above the fold.  If they have to scroll to find out what the site is about, then success is unlikely. When you have information that needs to be placed below the fold, think about ‘information foraging’ theory. This theory states that people decide whether to continue along a path (including scrolling path down a page) based on the content’s information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable (many designers deploy a “cut off” style layout to demonstrate to users that more lies beneath).

Studies, tools and tracking

Jakob Nielson recently conducted an eyetracking study which revealed that user viewing time was distributed as follows:

- Above the fold = 80.3%
- Below the fold = 19.7%

ClickTale states that 22% of pages with a scroll bar are scrolled all the way to the bottom.

Neilson also examined gaze plots to show where users fixed their gaze on a scrolling page with varied results depending on the placement of interesting, eye catching items.

To carry out this kind of research for yourself try ClickTale for mouse move heatmaps, attention heatmaps, scroll reach heatmaps and click heatmaps. Other alternatives include Attention Wizard and userfly.

In conclusion

- Although users will scroll, it’s clear that the material most important for the users’ goals or your business should be placed above the fold.

- Users will look very far down a page if the layout encourages scanning.  The initially viewable information must also make them believe that it will be worth their time to scroll.

- Finally, while placing the most important stuff on top, try placing a tasty little morsel of information at the very bottom of the page!

Landing Page Optimization – some hints and tips

With all this recent chatter regarding SEO for video, I thought it best to talk about the importance of landing pages and optimization. Landing page optimization (or LPO) is part of conversion optimization and is all about improving the percentage of visitors that result in a conversion (i.e. a lead or sale). And, just so we’re clear, a landing page is one which a potential customer will land on after clicking on a search engine results listing or online advertisement. Therefore, by participating in LPO, your page will not only look appealing to a potential customer entering your site, but also provide relevant page content which will appeal to this target audience.

Landing pages, and their purpose, should be identified as they are a critical part of your site – they are where you will convert visitors into customers.

While every landing page depends on overall strategy and past performance, I’ve put together a few hints and tips which may help get started on your LPO quest. Some may apply to your website, while others may not at all, so have a read and pick and choose the relevant tips to help you optimize your landing pages more effectively…

1. Display clear calls to action:
Think about exactly what it is that you want your visitors to do once they land on your website. If you don’t own an ecommerce site these may include things such as signing up to receive the newsletter, requesting a quote, downloading a brochure, or requesting a call back. Stick to the main objective at hand as too many options or unnecessary information will only confuse you visitor.

2. Remain focused:
As mentioned above, remember to stay focused on the task at hand. As an example, some website owners even go so far as to remove the page navigation so as not to divert attention. Although this is not necessarily something we would always recommend, just bear in mind how easily distracted we can become online, so don’t bombard your potential customer with additional company information – instead of helping them with their decision, you may unwittingly be distracting them.

3. Buttons:
When it comes to your call to action buttons, think big and think bold. The larger the button, the better it will perform. I know it sounds simple, but it’s an area of web design that is often overlooked. Also remember to think about button placement as your buttons will need to attract the attention of your visitors. Think about placing your buttons at the top of pages, in the centre of a layout or within a whitespace (or deadspace). Additionally, keep your button above the fold.

call to act

4. Contrast:
Contrast for call to action buttons is good, so you should take the time to decide what colours to use for your buttons. Use colours that have a high contrast relative to surrounding elements and background as this will hep it stand out.

5. Delivery:
Instead of just presenting the offer, why not email it instead? It’s a great way of harvesting data and validating an email address.

6. Thank You:
Say thank you to your customers. Not only is it good manners, but it is also an important part of the tracking stage (you can monitor the number of times a thank you page is displayed). It will also provide you with a place to ask for more information.

7. Tracking:
Use analytics tools to monitor how your visitors are interacting with the site. Use the funnel tool to help you understand where changes could be made to help increase conversions.

8. Testing:
Use A/B testing to measure the success of page variations against a control page. With this type of testing, significant improvements can be seen after changing elements such as copy text, layouts, images and colours. However, as not all elements will produce the same improvements, it will be possible to identify those elements that consistently tend to produce the greatest improvements by looking at the results from different tests.

Click here for more examples of clear call to actions buttons.

The question remains…

After my post last month on mobile apps and mobile websites, two recent related news articles caught my eye. The first is the announcement, from the co-founder of Ocado, that their iPhone app has generated 4.4% of its total orders since February this year.

After being downloaded 107,000 times since it’s launch last July, its use has equated to £15m of revenue per year and, unsurprisingly, Ocado are looking to develop onto further digital platforms in the future.

Meanwhile, on the other hand, news has been received that What Car? has launched a mobile site, optimized for smartphones.

What Car launches mobile friendly website

According to New Media Age, this news comes as media agency MPG Media Contacts published research indicating that internet use in the home was shifting from PC to mobile. This was supported by a survey of 100 UK households which indicated that 21% of respondents aged between 18 and 65 said they prefer to browse the internet on their phones. These findings are also supported by Facebook who say that more than 100m of it’s users regularly access the site via their mobile phones.

So, the question really still does remain… mobile app or mobile website? Nevertheless I’m still standing firm, sticking to the idea that, in the long run (or if you can only afford one) a mobile site is the way to go…

How will Google’s new site speed factor affect you?

Last week Google announced that it will use page load speed to help rank pages in its results. Just so you know, site speed reflects how quickly a website responds to web requests. The decision was made in response to feedback from users who (unsurprisingly) said that they preferred sites which loaded quickly. So, now that page load speed has been added to Google’s list of over 200 ranking factors, what should you do?

Well, not a lot to be honest. As it turns out, fewer than 1% of search queries will be affected by this change and, if you were going to be affected, then you would have been already. Nevertheless, with all this talk about site speed and page load times, why not use a free tool to evaluate the speed of your website…

  • Page Speed – an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
  • WebPagetest – allows you to provide the URL of a webpage to be tested. Provides a waterfall of your page load performance as well as a comparison against an optimization checklist.

And, on a final note, with the focus now firmly turning towards user experience (in that fast loading webpages = happy users) is the end of slow to load Flash websites on the horizon? Add this to the fact that plugin technology is on the way out (think of the devices that don’t support Flash – the old iPhone, iPad…) and it certainly is not looking good for Flash heavy sites. We’ll just have to wait and see…

Using video for SEO – a winning strategy (for the time being)

With over 1 billion views per day on YouTube alone, it is clear that internet video is on the rise. However, because most companies are ignoring video SEO (for the time being anyway), there is actually a relatively small amount of video content that is properly submitted to the search engines for inclusion in the search index.

Add to this that videos, when properly submitted, are just over 50 times more likely to generate a first page Google results ranking (according to Forrester research), and the case for using this medium to leverage your SEO efforts are clear.

But wait, there’s more! Because search engines also favour video content. This is because Google, and other search engines, aim to have a mix of content types displayed in the search results. Therefore, they give a higher ranking to video content to ensure mixed search results. For an example of this, try typing the word “eyeliner” into Google.

Using video for SEO

Using video for SEO

So, how do you ensure that your video content ranks high in the search engine?

Well, similar to traditional SEO, there are some best practice steps which you can follow in order to optimize your videos for search.

1. Keyword research:

Before even producing your video you should have performed a keyword audit to identify the top performing and most commonly searched for keywords and phrases.   Once identified, these can be embedded into your verbal script or commentary. They should also be placed within the title, description, file name and URL (wherever possible).

2. Video production:

When creating video for the web you can either hire someone to do it or, do it yourself. Try to think about your audience. Do they need a professionally created video, or will semi pro suffice? It is often said that videos which appear too polished can turn users away. So there’s something to be said about producing a more down to earth, behind the scenes type recording. Other things to consider include video length (the rule of thumb here is anywhere between 30 seconds to 3 minutes) and how to make your video stand out. Always keep in mind the possible viral nature of video content.

3. Landing pages:

Before uploading and publishing your video, have a think about where you would like to direct your viewers. You’ll need to think about the call to action that prompted them to click through, and then designate a suitable landing page that will provide the relevant information. This landing page could be a Facebook page, blog, or web page. Think about clear calls to action and how to turn that visitor into a conversion.

4. Distribution:

TubeMogul makes the process of uploading video to multiple sites a simple process. It also provides a number of tools and tracking options. However, remember to set up accounts on each video site first. Some of the most well know include: YouTube, MetaCafe and Vimeo. As you upload your video, you;ll have the option to add your keywords and phrases into the title, description and tags for each site. Top tip: Keep your titles and descriptions keyword rich whilst remaining readable (as having a long list of keywords will appear as spam).

5. Analytics and tracking:

As always, tracking and analytics are of the utmost importance, as these stats will tell you what works, and what doesn’t. Use your results to tweak your landing page optimization.

And that’s it! But be quick, because it won’t be long before best practice video SEO becomes common practice…

How to… Monetize your Facebook fanpage

We all know that a fanpage is a powerful tool for generating awareness of your product, brand or service. Put simply, it’s another means of communicating with your target audience every day (if you keep on top of your updates). However, a question which we’ve been asked a lot here at GA recently is this: How can we make money out of our fanpage?

Last week, it was announced that EasyJet will be one of the first brands to allow fans to buy directly from Facebook. To enable this, EasyJet are planning to add ecommerce functionality to its fanpage alongside a holiday planner which will let users plan their holidays with friends. Although this function is not yet available, EasyJet have latched onto the fact that Facebook users spend over three times the amount of time on the social networking site as they do on Google. In fact, only a couple of weeks ago in the U.S., Facebook received more traffic than Google. (Facebook’s homepage recorded 7.07 per cent of all traffic, while Google received 7.03 per cent).

EasyJet's holiday planner

Although Facebook claims that brands do not currently have direct ecommerce functionality from their Facebook pages (transactions must be made on the destination site) the airline’s newly launched ‘Holiday Planner’ tool will eventually let users purchase flights without leaving Facebook – and this would be industry first.

However, in the meantime, let’s look at some of the other ways in which brands are making money from Facebook…

One of the more successful examples of a company making money from Facebook is Burger King. Their Facebook campaign involved the creation of a ‘Whopper Sacrifice’ app that gave you a voucher for a free hamburger – if you deleted 10 people from your friends list. Not only did this activity poke fun at our obsession with social media (sacrifices showed up on activity feeds!) but it also brought people into the restaurant who ordered fries and drinks with their free Whopper. In fact, this Facebook strategy was so successful that Facebook promptly shut it down.

A whopper sacrifice!

Other food chains (such as Dunkin Donuts) attempted a similar social media strategy where it sent vouchers to its fan base. This encouraged users to come to the restaurant to redeem their voucher. So, provided you can upsell to a customer once they are in your store or restaurant, offering discounted or free product to reward desired Facebook user behaviour is an effective method of bringing your customers to you.

Another successful social media strategy used to monetize Facebook is to create an application to sell your product within Facebook itself. For example, Pizza Hut’s strategy was an ‘Order App’.  This app allows users to order pizza to be delivered to them, directly from their Facebook account. By selling your product directly on Facebook via an application, your social media strategy will be much more successful than if you ask users to leave and then visit your website to place an order.

And lastly, let’s not forget Facebook’s targeted advertising functionality. This social media strategy allows you to show your ad to a specified, market audience. With ads relevant to the people viewing them, this strategy can generate real demand for your product or service. Additionally, Facebook’s tools allow you to see exactly who is viewing and clicking on your ads so, as always, be sure to regularly measure your progress, analyse which are the more successful ads, and make any necessary modifications to maximise your results.

12»
Graphic Alliance