James Royal-Lawson, webbstrateg, web manager och webbkonsultBeantin
Close
QR Code containing James Royal-Lawson's contact details as a MeCard.
RSS Feed, alternative webmaster centralSubscribe to the Beantin RSS Feed Google Profile for James Royal-Lawson View James Royal-Lawson's Google Profile+ LinkedIn Profile James Royal-Lawson, webbstrategView James Royal-Lawson's Linked in profile Twitter: web consultant James Royal-LawsonFollow James Royal-Lawson on Twitter Facebook Beantin fan pageBecome a Beantin fan on Facebook The Beantin Index, Swedish websites graded and rankedThe Beantin Index Beta blog, experiments, tests, investigationsBeantin Beta Blog YouTube Webbkommunikation videosBeantin videos on You Tube UXPodcast with James Royal-Lawson and Per AxbomUXPodcast with James Royal-Lawson and Per Axbom

Beantin

59.2799; 18.0899
Webbstrateg

Posts by James Royal-Lawson tagged with webdesign

Beantin Webbkommunikation is +46735931654, Stockholm-based digital strategist and web managerwebbkonsult, webbrådgivare

On this blog you can find articles that cover web strategy webbstrategi, intranets intranät, trends (often with a Swedish twist), analytics, and running an effective web presence. Check out my most popular posts.

7 Articles worth reading… (Spotted: Week 32-33, 2010)

Why Your Web Developer and SEO Keep Asking You For Content

Anyone involved in creating or managing a website has had “the content problem”. This excellent article lists all the reasons why we should keep on nagging for that content to appear as early in the process as possible.

Reductionism in Web Design

A smile-inducingly long blog post about reductionism and how it can make your web site more effective. Alex breaks down web site reductionism into three main areas; content, code and design.

Why Twitter is hard to use

Oscar takes the example of Twitter as a technically easy thing to use but perhaps conceptually not so easy and suggests you compare this with your social intranet experiences and draw parallels.

Intranet vs Enterprise 2.0 vs Social Software: an obvious case of terminological controversy

Dennis takes us though what he sees as the “real” down-to-earth definitions of Intranet, Enterprise 2.0 and Social (Intranet) Software.

Why Free Plans Don’t Work

Choosing the write pricing model. An age old problem. This case study takes us through the experiences of a web start-up who were using freemium pricing plan and the difficulties that came about.

Twifficiency: A hard lesson in how business news travels fast

One of the most irritating things of this week has been the Twifficiency application spreading around Twitter. The app itself is utterly useless, but it’s given us an excellent case study into how fast things on the real-time web develop and evolve.

Gartner Says Worldwide Mobile Device Sales Grew 13.8 Percent in Second Quarter of 2010, But Competition Drove Prices Down

One of the most striking things you can learn from this Gartner report is the rapid growth of Android. In a year the smartphone market share of Android has leaped from 1.8% to 17.2% and thereby flying past iOS (Apple) who only grew 1% to 14.2%. At this rate, Android with dominate the market by mid 2012. It’s not just the tipping point for the mobile web, but the tipping point for Android.

Search-engine friendly country site select boxes

Design often has the final say in a redesign project - or at best, a very powerful voice - which isn’t always a good, or acceptable, situation.

Recently I was part of a project where I needed to preserve an aspect of the old design for SEO reasons. The new design had included a select box, but I needed those “options” to be real links that would pass link-love. So, I offered this search-engine friendly solution.

Country links

Country links on the original website

To give a bit more background, the old site had a footer that contained links to every single country site within the organisation. This was about 26 links. On every page of the site. Most of those country sites had a similar footer, making most of the links reciprocal. That’s quite an international network of inter-linked international top level domains.

I obviously wanted to maintain that network of links after the redesign. It clearly wasn’t going to help the position of any of the sites in SERPs by removing them.

Country select box

Choose your country site select box

The design that was produced had “simplified” the list of countries in the footer to be a select box drop down menu. Although this is not unusual for companies with multiple country sites, it’s not always a good thing for usability (I like populating the select box using geolocation as a solution - but that would be another blog post!) and it’s really not a good thing for search engines.

No link-love for select boxes

Although Google has indexed text in select boxes for a number of years, and also indexes (new) URLs that is discovers within those lists, it doesn’t pass any pagerank to those links. Neither does it attribute the anchor text (or more correctly in this case: option text) to the destination link.

This obviously meant that the international network of inter-linked top level domains would come crashing down to the ground. Not really something that was on the list of requirements…

Country sites as a linked list

So in order to preserve the link network, and to honour the design decision, I decided to re-introduce the <a> link list of countries, and in order to not make this visible to (most) end-users, I set it to “display:none”.

Now hold on I can hear you say. Doesn’t Google (and other search engines) consider adding “display:none” to things as cloaking? Well, not necessarily. The key is whether there is a mechanism for making the content visible to visitors or not.

So in order to keep both the search engines and users happy what I did was add the “display:none” only if javascript is enabled. That way we are always serving the same HTML content to all visitors and search-engines, but making parts of it invisible when viewed in the browser by most visitors. Importantly, we are letting the search engines see and index all the links to the countries.

Adding a class

Add a js class to the country link list, or whatever element of the page you want to be hidden when javascript is enabled.

<div class="js">

Include an external js file

Add a link to an external script directly after your CSS styles (you may already have such an external file already)

<script type="text/javascript" src="/script/functions.js">

</script>

Document.write

in that script add a document write to write the additional css style link

document.write('<link rel="stylesheet" 

href="/styles/js-enabled.css"
type="text/css" media="screen" />');

Display:none

Finally, your js css file. Add the “js” class styling with display:none there.

.js {
display: none;
}

There are other ways you could achieve the same result; especially if you’re already using an Ajax library such as jquery, but I thought it was good to share with you an example that didn’t force the introduction of that overhead.

Cloaking

Yes, you could argue that this is technically cloaking, but it is better to say that we are offering enhanced content to those with javascript disabled. By doing this we are cloaking in a way that is helping Google and visitors who find long lists within select boxes difficult to use.

7 articles worth reading… (Spotted: Week 23 2010)

A twelve step process for a storming Social Media strategy

Straight-forward, practical stuff. A process that isn’t complicated to follow and will give results. The first comment to the post (by Jon Buscall) is also worth reading.

A Cross-cultural eye tracking study

A cross-cultural eye tracking study covering 6 countries (and 30 survey participants in each) shows that international websites can’t be successful ‘one size fits all’ sites due to statistically significant cultural differences in information needs. Would love to see more research into this.

Analytics Basics: Averages and Ratios

Highlighting the advantages of using median values for due to the non-normal distribution of visit lengths. Another article where it’s worth taking the time to read the comments. Brian Clifton and Neil bring up some good points regarding goals.

Designing with Behavioral Economics

Some family examples, nicely packaged in one article. It covers opt-in versus opt-out forms, problems of excessive choice, and Value judgements featuring the wonderful Economist subscription example.

No plans to redesign your site? Now is the time to hire a web design agency

Paul Boag talks a whole load of sense in this post of his. We really have got to break the “rebuild” cycle we’ve have ended up with for websites. My only criticism is that he keeps referring to “website” when he should be using “web presence” (or something similarly broad)

Varning: lyssna inte på ‘good enough’-profeterna

When good enough becomes the goal, when you choose to aim to do something competently, you will never do anything anything fantastic.

SEO site review session from Google I/O 2010

A man after my own heart, Matt Cutts (from Google) does a series of quick site reviews (from an SEO viewpoint). It’s an hour long video, but it gives some real-life examples of why certain things are important.

10 Articles worth reading… (Spotted: Week 21-22, 2010)

The need for speed on the Web

“Customers are highly highly impatient” - Page loading times aren’t just an search engine optimisaton factor, people know what they want, and they give your page very little time to deliver it before moving on…

Efficiently Rendering CSS

The art of optimising page speed is not confined to network requests and server configuration. How you construct your CSS styles also pays a significant role.

Button Color Test: Red beats Green

There’s a fair bit of data out there saying that green and red buttons generally work best for “calls to action”, with red being the better of the two. Here Performable present data saying that red is as much as 21% better.

Google Studies How Search Behavior Changes When Searchers Are Faced with Difficult Questions

Not only is the paper from Google a great read, you could lose yourself for weeks reading all the other interesting papers cited!

Web Safe Font Cheat Sheet v.2 – Including Google Font API

An updated Web Safe Font Cheat Sheet also including Google Fonts. As a bonus the article takes a look at the results (and problems) with using the Google Font API as it is…

Identifying staff tasks

Hands on advice from James at Step Two on how to identify and collect intranet tasks. Tasks, rather than structure, should be your focus when improving an intranet.

Web Execution (Web Team): A Definition

Lisa, as usual, has published a detailed and well thought out article. This time explaining her suggestion of how to structure your web-team into an operative part and a management part. Doesn’t sound too revolutionary when I write it like that, but in reality it is.

10 words I’d ban from all websites

Catherine Toole, CEO of UK-based firm Sticky Content, lists 10 works she’d ban from websites. I think she did very well to restrain herself to just 10…

Your website is not a project

We spend six figures on a new [site], but usually can’t justify a single full time editor.” A number of very good points in this post.

Eye Gaze Data and the Correlation With Mouse Movement

Mouse movement and eye movement bear very little relation to each other - Mouse tracking *without* eye tracking will give you a distorted impression of behaviour.

For your reading pleasure… (week 12, 2010)

Scrolling and Attention

Although many have said that Nielsen’s conclusion is obvious - “what’s most important for the users’ goals or your business goals should be above the fold” - there are also many who still claim that the fold doesn’t exist. It’s does, it’s just much more complicated than it used to be.

Eye Tracking: Best Way to Test Rich App Usability

A great overview of eye tracking and it’s benefits by three eye tracking and usability experts. It has a part to play in many different types of usability (and design) testing.

Conversation Manager vs. Community Manager

John discusses two different roles - that of a conversation manager and that of a community manager. It’s both interesting and useful to see these roles as separate. Arguably all companies need a conversation manager, but not all need a community one.

Why I don’t get SEO and A Beginners Guide to Keyword Research

Two posts under the same heading. Great fun to contrast the two posts. One is the view of an owner of a web design agency, the other a guide by someone with specific and in-depth experience of helping companies improve their bottom line by SEO. Paul is not wrong in all his post - I too believe in web standards and user experience - but, we live in a world full of humans and machines. The machines are also one of your target audiences. It’s not all about good content and making your site “accessible to search engines”. There’s a balance to be found.

the material that’s the most important for the users’ goals or your business goals should be above the fold http://www.useit.com/alertbox/scrolling-attention.html

This work by James Royal-Lawson
is licensed under a
Creative Commons Attribution 2.5 Sweden License