Mobile web best practices with Phil Archer

On Monday 12 October 2009 London Web Standards was pleased to host W3C’s Phil Archer, a co-author of Mobile Web Best Practices who was kind enough to run us through the basics and answer some of our (pretty intense) questions on the subject. Following are the highlight notes from the event.

Lightning talks

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.

W3C Mobile Web Best Practices, Phil Archer

• ‘Linked data used to be called Semantic web until Tuesday last week’
• Delivering training course on Mobile Web Best Practices
• Will cover some of the aspects covered within his course on W3C which some people present are currently attending
• ‘These are real people who write these specifications and they are fallible and the specifications are fallible’
• Opera is very active in web standards and have very many evangelists around the world
• There is a long list of people who contributed to this document
• Mobile Web Best Practices 1.0 became a recommendation over a year ago
• ‘Some bits of is are clearly showing age, but some other bits are going to stay relevant for a long time to come’
• ‘You are developing for people on the move’ – one of the key concepts
• Way of thinking for mobile user is totally different
• Encourages you to think about the people first, technology second
• You cannot fit everything from the big screen to the small screen
• Think about what the user is doing
• There are serious challenges to any kind of mobile web development
• The screen is not very big is an obvious challenge
• Sometimes you forget your mobile phone
• ‘Give it to them on that small screen’
• ‘You might be walking – you might not be necessarily concentrating on your phone’
• ‘The input paradigm matters’
• ‘The cost is less of an issue – there are many flat tariffs now’
• If there are many files to load in, it takes time to do that, and that’s the function of the network and not something to do with your web design
• Your need to find the way to include advertising into what you are doing and find some sort of a compromise between advertising and content
• Most of your users don’t have the fancy equipment that we are used to having (like iPhones and Blackberries)

Definite nos

Do not use popups and new windows
Graphics for spacing
Frames
Image maps
Do not also use <input type="image" /> either – they are closely related to image maps
Tables for layout
Nested tables

Do’s of mobile web design

Work in a single column!
If it’s mobile friendly you should not have to zoom
If you don’t have to zoom you have a clever web site
Provide a basic navigation in one simple line on the top
Other navigation goes at the bottom of the screen
Dont obscure the content with an image

‘Once you are thinking mobile, it’s not that hard at all’
Use progressive enhancement instead of graceful degradation
There is a very close relationship between doing mobile and accessible

Desktop and mobile in one

Is it possible to have one web site that works on both desktop and mobile?
Yes, but mostly just using CSS
Split up the navigation into the really, really important links that you always want, and other navigation which is secondary
One uses a mobile style sheet, one uses a screen style sheet

CSS

@media=”handheld” does not work across different browsers
This is because of various reasons
The problem is explained in an article by Dominique Hazael-Massieux called ‘Return to mobile style sheets’
You can do display=”none” for desktop, but don’t push out unnecessary material into the mobile space to send extra bytes for no reason
You can use Device Description Repository Simple API form W3C which can recognise which device the user is using – this is a simple piece of PHP which returns the phone type

Thematic consistency is important

Your web site may offer screen savers for desktop and ring tones for mobile – that is considered as thematic consistency
GIVE ME ONE URI TO LINK TO!
Do redirection to your mobile site – but do not point me to a different URL to link to

Use W3C MobileOK checker to check whether the site is mobile friendly
Facebook does 70% well on this
This tool does 23 types of tests which are pretty smart – for example you should not have more than 20 resources that you are pulling into your web page
There is now a BETA version of Unicorn – one validator for web – this is meant to be a very good developer tool

POWDER – Protocol for Web Description Resources

POWDER is a form of XML which shows that the whole of one web site is mobile OK
There is a POWDER processor which converts the data into RDF
This then signifies that the given web site is MobileOK and you can display that onto your web site which then 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

Summary

Design for mobile people not technology
Remember device and network limitations
Simple adaptation is possible using CSS
Thematic consistency and One Web are important for users
MobileOK provides a machine-testable guide
POWDER

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

May Meetup: Structuring CSS

How do you keep your CSS files from exploding as your site grows? How do you prevent the creation of new CSS rules for every new page? How can you structure CSS to facilitate reuse?

Justin Cormack of Squiz UK will be addressing these questions, using Squiz’s Mashable Design, Nicole Sullivan’s Object Oriented CSS and SASS as examples.

If you’d like to join us, please RSVP on the meetup site.