October’s Lightening Talks

Each month, London Web Standards tries to get a few quick talks from attendees on web projects or thoughts that are most current in their minds. The talks are 5 minutes long and aim to get a get conversation started around any web standards related topic. No slideshow required! If you feel you could present something at the next event, get in touch with us. Email: ORGANISERS at LONDONWEBSTANDARDS dot ORG.

Postcode Data, Jeff Van Campen

Earnest Marples have had their postcode data service closed by legal action from Royal Mail. Whatever the morality, this is having an affect on sites such as Jobcentre ProPlus and The Straight Choice. Jeff encourages the group to sign a petition to the Prime Minister to make this data free to not-for-profit organisations.

He also takes issue with the postal service charging for information in the first place as, at around £4000, it effectively puts a tax on innovation, pricing smaller developers out. Royal Mail’s copyright doesn’t appear to be in any danger of expiring since it’s protected by Crown Copyright. See more at Jeff’s blog.

Location Based Games, Ben Dodson

Ben’s been playing with GPS based gaming on the iPhone. Two major apps in this area were released recently for the UK, Gowalla and Foursquare. They’re both available on Android and iPhone. Because they’re location based he’s been going out to parts of the capital that he wouldn’t normally. Games that cause exercise! He’s also been working with the developers at Gowalla and made an iPhone web app that uses UIUIKit. This is an HTML and CSS framework that allows you to easily build custom web apps. Using this was simple and it took Ben half an hour to make a web app. His app also takes advantage of the geolocation data support in Safari mobile on the iPhone using HTML5.

Mobile Web Best Practises, with Phil Archer

Phil’s presentation (slides) is a flavour of the course he runs (with the same title) for the W3C. It was good to have him speak as he missed his regular Mobile Monday meet-up for us.

Mobile Web Best Practises 1.0 was a W3C recommendation originally put together in June 2006 by (among others) Phil, dotMobi, Vodafone and Opera. Despite it’s age and a constantly advancing industry, the content is still mostly relevant to today’s mobile web since it focused on the activity rather than the technology.

Challenges of the Mobile Web

When designing for the mobile web it’s important to think about people on the move. Different to designing for the desktop, you’re encouraged to design for the person first and the technology second. Ask questions like: why/where/when are they using my site? Understand the situation they may be in. There are some serious challenges to designing for handheld devices that must be faced:

• The screen is not very big. Yes it’s a limitation, but it’s important to meet this challenge and not make the user have to scroll from left the right.
• Input methods are different. Most phones have a numerical keyboard. You also might be walking whilst using it, or have other things on your mind. Think about the input paradigm.
• Pay As You Go customers. Data usage is important to keep low since not everyone is on a flat rate data plan.
• Latency. The mobile network is normally slow and patchy, it can cost time and money to your visitor if you have them download several stylesheets and large JavaScript libraries.
• Advertising. It’s a small screen, respect your visitor, don’t allow your marketing department to take up all the space.

If you’re in the web industry, you may well have a decent smart phone. Remember, not every user has the latest and greatest gadget.

Things you must never do

• Pop-ups and target=”_blank”. Don’t spawn new windows on the mobile platform ever. If you do you risk leaving the user out of control.
• Graphics for spacing. Using graphics for part of your design is OK, but CSS was designed to describe spacing.
• Frames. Even if your mobile device supports frames, you can’t predict what they’re going to do.
• Image maps. Older devices don’t support these on the client side, some don’t even support it on the server side. Also, input elements of type “image” cause problems on handhelds because they’re too close to image maps. There are also associated accessibility issues.
• Tables for layout. A bad idea for accessible web design as well.
• Nested tables (for layout). These make a website a thousand times worse.

Things you are encouraged to do

• Design using a single column
• Create sites that don’t require zoom
• Provide basic navigation in one simple line at the top of the page
• Put other navigation at the bottom of the screen
• Dont obscure the content with an image
• Use progressive enhancement instead of graceful degradation
• Think accessibly, since there is a very close relationship between this and mobile

Progressive Enhancement

The concept of writing a website to suit every device, then extending it for those that can access extra features. Just as relevant on the mobile web as it is in accessibility. Phil’s advice:

• Fonts and colour - don’t use these to convey meaning.
• Tables - use sparingly, it’s better if you can get away with using an Unordered (ul) or Definition List (dl).
• Cookies/JavaScript - great to use, but relying on them for dynamically generated pages could exclude visitors. See Phil’s example of a page with and without Javascript support. Phil’s experience is that some developers forget that JS can be switched off.
• Flash - which even the latest iPhone doesn’t support. Always have an alternative way to access this content. Also, use video but don’t rely on it. Again, bandwidth is a premium.

Can we have one web?

Is it possible to make a website that works on both desktop and mobile? Well, yes. And there are several ways to do it. Using the ‘media’ attribute you can use different CSS files to style for mobile and desktop. But you can also design your site to work for mobiles my default. See Phil’s examples of web pages that are friendly and unfriendly to mobile browsers.

If, as is his preference, you decide to stick to one stylesheet for all, his advice is to have the two most important links at the top left of the page and to focus the document’s content into one column. Phil has organised his site to prove that what he’s recommending is not purely theoretical.

CSS device detection

Even though CSS was designed to be able to deliver specific stylesheets to mobile browsers, they’ve had to handle lots of bad code and many mobile browsers are instructed to ignore it. Surprisingly… “The marketing departments of the device manufacturers don’t want to talk about the Mobile Web, they are keen to offer the ‘full Web’ and so top end devices ignore @media=”handheld” completely.”. See Dominique Hazaël-Massieux’s article on the importance of preserving the mobile experience.

Currently most mobile coding is lazy. For example, instructions like “display: none;” in your stylesheet only hide content and don’t prevent it being downloaded to the browser. This creates latency. But if you want CSS stylesheet switching without most of the worry of devices ignoring the ‘handheld’ declaration then you might try the Bushido Method. Developed by Dean Hamack at BushidoDesigns.net, it gives mobile device detection without using user agent detection or server side scripting (it doesn’t cover every device, but it’s good).

Device detection, going further than CSS

Although not 100% accurate, device sniffing is needed if you’ve decided to generate specific HTML. For this you can use a number of services including:

• DeviceAtlas Database from dotMobi (http://deviceatlas.com/)
• The W3C’s Device Description Repository Simple API

Thematic Consistency

We’ve discussed changing style and content to suit the mobile context, but the guiding principle behind all of these tools is thematic consistency. For example your website may offer screen savers for desktop and ring tones for mobile. So thematic consistency and content are seperate, since content doesn’t need to be the same on the desktop and the mobile.

A good example of thematic consistency is the BBC News website. Like other good mobile sites, the BBC doesn’t split its mobile and desktop URIs. As has already been mentioned (link back to Linked Data), this is bad for search engine rankings. If you do need two URIs, only ever use one as a link and the other as a redirect (you could even use the REL attribute).

Validating

While checking content for consistency is down to the human, you can go some way to at least make sure that machines are happy with your code by using services like the mobileOK validator. As it says, to “check a web page for mobile-friendliness”. For example, Facebook currently gets a 70% score on this. The tool does 23 tests which are pretty smart – for example it warns if you have more than 20 resources requested by your web page. You can even display the mobileOK scheme logo if your pages validate (link and image). Additionally, there is now a BETA version of the new validator called Unicorn, pitched as one validator for web, this is meant to be a very good developer tool.

POWDER is a form of XML which shows that the whole of one website is mobileOK. There is a POWDER processor which converts the data into RDF. This then signifies that the given website is mobileOK and puts your site into the Linked Data ‘sphere’. This is the way to make that data available and mash it up with other data available for mobile web.

Q&A session

How can you justify any type of device detection (because it cannot be linked to, etc.)?

This is because you are designing for a user
You can’t make a mobile version of every page
Device detection can get you so far, as long as you don’t remove the control from the user

Is MobileOK testing similar to WCAG1.0 testing?

WCAG1.0 testing is similar to MobileOK testing (23 / 60 are machine testable cases)
There is a need for human testing just like with accessibility
Definition of widget from Opera evangelist – ‘mobile magic packed with web standards goodness’

Is there a page of arguments for and against various standards?

People have issues with mobile detection approach
There is a public mailing list
Everything is done in public with Mobile Web Best Practices

Will the mobile best practices be superseded?

Noone’s going to make a standard without being paid to do so
Our members support the standards by donating through their membership
‘W3C does not claim to be be-all and end-all’
If you want to influence any of the organisations you need to become a member of it

Various comments from the audience

‘I really wish that W3C was an open source group like Linux project’
You can use Opera Mini emulator that works pretty well to test designs in it
Ultimately you need to test on an actual phone
Yahoo have made a system called ‘Blueprint’ – you can write one mobile version which can be deployed to various devices – you write one language and it gets translated to relevant implementations
W3C has tried very hard to come up with ‘Content Transformation Guidelines’, but that has been very controversial indeed

Linked Data

On Monday 7 September London Web Standards was pleased to host the BBC’s Michael Smethurst, Information Architect and Yves Raimond, Software Engineer. See their presentation slides and the following is a recap of the key points.

Some background

Some think that the web is simply the internet plus links. In fact, it’s the internet plus HTTP (Hypertext Transfer Protocol). It’s an important distinction and something that gets forgotten. For example, discussions on accessibility often focus on documents. HTTP and URIs (Uniform Resource Identifiers) don’t get mentioned, they are the other side of the web that gets ignored. Where HTML has been through many revisions, HTTP is still at version 1.1, this standard has stood the test of time.

The web is the Internet, HTTP and HTML (to a lesser extent)

Everything that’s good about the web is linking. People need and want to share content, therefore they need handles, or links, to use. In Search Engine Optimisation (SEO), Google PageRank holds HTTP and the URI as more important than the HTML of the page. By definition, a page of HTML is not a web page until it’s linked to something else.

Crucially, we need to get from a web of documents to a web of things. Linked Data allows for this further level of abstraction. Where humans can make meaning out of the content of a web page, the web needs to progress to a stage where machines can understand it.

Now for the talk

Some types of Linked Data:

• RDF. This was described more than ten years ago. It’s very easy as it’s just data. It works in an Object > Predicate > Object fashion for example: <sky> <has colour> <blue>. This information forms a graph.
• FOAF (Friend of a Friend). When it was first described, people focused on this because it was the only spec that had traction.
• REST (Representational State Transfer). This explains proper use of HTTP. Separation of resources and representations of it. For example, browsers such as Safari and Firefox have a list of preferences such as your preferred language or context (e.g. mobile). When you request a document from a URI you are getting a representation of the resource that matches your headers. The browser and server work together to understand what version of the document you want. Your browser searches for the correct MIME types that suit these preferences. The copy of the document you see is only a representation that best matches your requirements. So, sometimes if the server can’t find a version that fits, it could return a “406 not acceptable” error. This concept is important when combating the ghettoisation of mobile content. The device you use and your language are all important, the same URI could serve to any context. This is important if you don’t want to split your “Google Juice”, as Michael puts it. AKA, your Google PageRank.

Linked Data = Links + HTTP + RDF

Between the development of FOAF and about 2006, there have been lots of new ideas for Linked Data, but all have been too complex. By extension, people thought the semantic web was too complex. Linked Data still uses RDF, but the difference is that now it’s about things not documents. Example, the Eastenders website may have a file that you’ll be able to ask for in several flavours. Linked Data is about giving information that you can’t get “down the wires”.

Using Linked Data you can describe the relationship between different aspects of the same resource. E.g. you can describe the relationship between a website and its creator. Moustaki.org was created by Yves, but not the other way around. You can use Linked Data to make claims about documents and about things.

What’s the difference between Linked Data and Microformats?

Linked Data provides another level of abstraction. Instead of relating two documents (e.g. with a REL statement), you relate two things. Also, with Linked Data there are lots of ways to publish these relationships:

• Hashes. Resources are defined relatively to a document. If you’re concerned about the number of GET requests, this is a good option because you don’t need a 303 error page.
• Slashes. A very popular option, but also the hardest to convey information. Michael and Yves show an example of content negotiation where often with this system two GET requests are needed. On the plus side, the server doesn’t care about anything after the hash.
• RDFa. The cheapest to set up.

Find out more about hashes versus slashes.

What’s the point of Linked Data?

Seperate individuals may host different content about the same thing. The English band The Fall, was used as an example of the power of this abstraction. Linked Data can be used to aggregate information specifically about this band. Linked Data is a web scale database. The OWL:sameAs statement is a prime example of this kind of functionality.

But how do we handle conflicts? As with any web browsing, you must keep track of where you get any data from. Also anyone can make a claim on a URI. Your weighting could be based on PageRank. Spam is also a problem and OWL:sameAs can go wrong with the language eg, there are two bands called ‘U2′ (one Japanese, one Irish). There are sixteen bands called ‘Arora’ etc.

What are the pitfalls, how is it being used and developed?

FRBR (Functional Requirements for Bibliographic Records) is still being developed, lots of work is being done on its different classes. But music ontology is still an area that needs development. There is an need to make a distinction between composer, performances, signal etc.

A recent example of the problems of this web database came when researchers at the BFI discovered the history of a famous actor who had acted in a porn film. They added this to his record. Despite it being true, the actor didn’t want this to be known and the BFI were deemed to be in the wrong.

Search engines are already using Linked Data. For example, Google is publishing content from Bestbuy. Also, social media is already using Linked Data in their activity feeds. RDF is mostly populated by social data. US porn websites are obliged to use RDF. To find out more about the whereabouts of RDF, go to: http://pingthesemanticweb.com/

Important changes to London Web Standards

Dear London Web Standardistas,

We have a number of important updates to share with the community today.

Our beloved Jeff Van Campen is moving on to become a father for the first time and has handed over the important activity of organising London Web Standards to a new group of enthusiasts. We would like to wish Jeff the best of luck in future and look forward to seeing him sneak out of from the clutches to parenthood every now and then to discuss the important matters of properly formed HTML5, rounded corners with CSS3, linked data, RDFa and so on!

London Web Standards is moving from strength to strength. We have now set up our own dedicated web site at http://www.londonwebstandards.org and have our own professional logo. This megalithic structure will require looking after by a team of well rounded individuals who know a thing or two about these matters. At our handover meeting, we decided the following team structure:

Ben Dodson (@bendodson) will be the main organiser of events and the venue
Nick Smith (@twitrnick) and Jason Grant (@flexewebs) shall be documenting decisions and maintain the content on the web site
Rob Enslin (@robenslin) will be taking care of the social network engagement aspects of LWS
Joe Lanman (@joelanman) will be in charge of back end technical infrastructure for LWS web site

Our last two meetings have been held at ‘The Square Pig’ near Holborn and we will be continuing to use this venue for the foreseeable future. It’s a great central venue with projection facilities and good beer…

Now our website is up and running, we would like to grow the group further in a very open manner and have therefore decided to move over to Upcoming for event organisation as well as Yahoo Groups for various discussions. Our Twitter channel (@webstandards) is still open as usual. We’ll be running a website design competition shortly (more details at the meetup) and hopefully all of the above changes will become a lot clearer then!

Please make sure to signup to the new Yahoo Group as we will be sending all future emails from there. We will no longer be using meetup.com after this months meeting.

We will go over all of these changes at the next meeting which is on 7th September at 7pm at The Square Pig in Holborn and will feature Michael Smethurst (BBC Information Architect) and Yves Raimond (BBC Software Engineer) who will be leading a discussion on Linked Data. They will be covering the basics of Linked Data, and will then be taking any questions or comments. We will also be running some quick-fire 5 minute warm up speeches at the beginning of the meeting covering a wide ranging number of topics. In our October meeting, Phil Archer will be giving a presentation on Mobile Web Best Practices and we have a presentation around web based typography planned for November. If you know of anybody who may want to present in the future, then please email Ben via ben.dodson@londonwebstandards.org

It’s going to be a busy time for us whilst we make the changes listed above but if you have any suggestions on how we can do things better then please let us know by emailing organisers@londonwebstandards.org – we look forward to seeing you on 7th September.

London Web Standards Team

Logo Competition: And the winner is…

Andrea Tamboroni’s logo was the clear winner with almost 50% of the vote. In his original submission, Andrea said he “worked around the idea of people (mouse cursors) getting together to discuss in order to make the web better (idea of a sun shining).” I think that is a pretty fair description of what we do at London Web Standards.

Read the rest of this entry »

Logo Competition: Voting Now Open

We’re pleased to present the London Web Standards Logo Competition entries.

Read the rest of this entry »

LWS July: JavaScript Best Practices

London Web Standards July is nearly upon us. We’ll be meeting on the 13th of July at the Square Pig in Holborn (see the previous post).

This month Ben Dodson will be discussing JavaScript Best Practices.

Read the rest of this entry »

New venue: The Square Pig

After an exhaustive search of central London pubs with function room and many, many beers, we’ve finally found a new venue.

The new venue is The Square Pig in Holborn. We’ll be meeting there for the next meetup on the 13th of July, where Ben Dodson will be giving a presentation on JavaScript Best Practices.

Read the rest of this entry »

Logo Competition

You may have noticed that we’ve replaced the London Web Standards logo on the Meetup page. It’s not a very good logo. I can say that because I designed it, and it took me all of 10 minutes.

Think you can do better? So do I!

Announcing the London Web Standards logo competition.

Read the rest of this entry »

W3C Mobile Web: London Study Group

A few London Web Standards members are taking the W3C’s Introduction to Mobile Web Best Practices. Between twitter and the mailing list, we’ve organised a study group.

We’ll be meeting on Mondays, when the new course materials are posted. The course starts tomorrow, and we’ll be having our first study group.

• What: W3C Mobile Web Best Practices: London Study Group (Week 1)
• When: 1 June 2009 @ 6:00pm - 8:00pm
• Where: The Cafe at Foyles on Charing Cross Road