Design Competition

At London Web Standards last night we announced a website design competition. London Web Standards is getting organised, we’re getting passionate presenters and an amazing group of new and regular attendees. We want the website to reflect this. If you’re interested in helping out, read on.

Aims of the site

• To be a focal point for all of London Web Standards (LWS) online activities
• To take the discussion online
• To promote London Web Standards
• To promote web standards
• To be a focal point that collects all London Web Standards related materials (video, blog posts, photos, events, presentations and speaker bios), linked from the site

Content

Check out the current website (this is it) for an idea of the information we currently have. We’re going to be adding to this. We thought about drawing you an IA diagram, but then realised you’re one of the talented designer/IA or UXD professionals who come to LWS. So here’s the content we need somewhere in the site:

• The exisiting LWS logo (we like the design and were hoping to complement it with a new site design)
• Aim paragraph for LWS (still being written)
• Links (and/or content) to services that LWS uses: Flickr, Vimeo, Twitter, LWS Yahoo Group
• Eventbrite booking page (yep, right there within the London Web Standards site)
• Blog posts, including embedded videos and slides, as well as links to video, slides, comments, pictures and tweets from events
• A prominent place for sponsor logos
• Public calendar of upcoming events (fed from Google Calendar)
• Information about the venue
• Contact information, LWS and organisers twitter names, email address, web form
• Promote up coming speakers – a bios page with relevant links to their work

Our technical bits and UI requirements

• Our site is based on WordPress so whatever you produce will be applied to a theme
• We need your designs to be accessible, for example – think of colour blind users (of course it’s not limited to this).

What do you get out of it?

Kudos? Satisfaction that you’ve made the site look less boring? A high value item in your portfolio for a cutting edge community group website.

You’ll get a link of the type “Site designed by X” at the bottom of every page and a link back to your personal site. Plus, between competition close and Monday 5 April, every entry will be displayed in a voting section of the current site with a link back to your website.

What we need from you

We need the graphic and UI design from you. Initially we’d like 3 templates:

1. The homepage
2. A blog page
3. A generic template page

We can work around what you produce (creating the Eventbrite and calendar pages), but if you want to design more templates please feel free.

We’d prefer graphic design files in any format openable in one of the Adobe Creative Suite applications (things like Fireworks and Photoshop). For speed, you can send through a .JPEG, .GIF or .PNG file in the first instance, but we’ll need access to a layered (.PSD or Fireworks .PNG) version of the designs when converting your designs into a working theme. We’ll also accept code-based designs (if you prefer to design in the browser) and other supporting documents (things like IA and design justifications). However, we must make it clear we’re looking for graphic and UI design, not fully formed code (we can do that). If we have trouble opening your work we’ll get back to you.

What, where and when to submit

Entries can be submitted via email attachment to competition@londonwebstandards.org. We can receive messages of up to 25Mb in size. We don’t mind you putting them in a compressed file (such as a Zip), in fact it’s probably easier that way.

You will get confirmation of your submission within 24 hours. If you’d like to arrange another way to give us your work, get in touch with us at organisers@londonwebstandards.org, but please give plenty of time before the deadline.

The competition will start on Monday 15 February, it will be announced at the meetup and you’ll be able to submit entries until Monday 15 March 2010, entries will need to be received on or before 12 midnight.

Deciding the winner

The winner will be announced on Tuesday 6 April 2010. They will be decided in an open public vote. Each entry is guaranteed to be displayed (along with a link back to your site) on the LWS site between competition close and when the winner is announced.

The LWS Organisers reserve the right to update this information as clarifications become necessary. If there are any major changes that will significantly affect your entry we will email the LWS email list with an update. If you’d like to sign up for these emails please register with our Yahoo Group. It’s also worthwhile periodically checking back here if you can. If you have any general questions please put them in the comments below.

LWS February: Move over Web Accessibility, inclusivity is heading straight at you! (Live blog)

Update: You can now download the Keynote Presentation used at this event.  There is also a companion Word Document or PDF.

Introduction

Ben Dodson is talking about how London Web Standards is now family entertainment.

Past Presentations: Web Fonts, YQL / Flickr API, HTML5, Mobile Web Best Practices, jQuery.

Future presentations: Speed / Unit Testing, JavaScript Optimisation, User Experience, Web to App.

Gowalla Spot for London Web Standards.

@media discount for LWS members to be emailed.

Jobs

• Ben Dodson is looking for PHP Web Developers
• Jam is looking for a Mid-senior Web Developer, fulltime roll
• ORM are looking for a front-end web developer, talk to Gavin or Lisa.

Design Competition

The website will be a focal point for London Web Standards. We’ll be sending details to the mailing list tomorrow.

Sandi Wassmer

She’s here to convince us that inclusive design is the way to go.

Accessibility is an overused word. It’s “just not working.” People think that it’s something they just have to do. To be a little politically incorrect: it’s what you have to do to make disabled folks happy.

She wants to give it better PR.

People think of accessiblity as somethign you do after you build a website. It’s something you do when you “get out the checklist.”

Accessiblity as it currently stands is currently very misunderstood.

Understanding the aims of Accessiblity

“It creates an unobstructed bridge between me and the world.”

“But I went to art school and I see things visually, albeit at 10 centimeters.”

Stats

90% of people registered blind have some risidual vision

3% of people registerd blind are completely blind.

Purchasing power is 80 million pounds a year.

What is Inclusive Design?

Same as Universal Design and Design for All.

Seven Principles of Inclusive Design

These are the Sandi-ised, plain English version of these principles (with the original version in brackets).

1. Unbiased – everybody’s welcome (Equitable use)
2. Flexible (Flexibility in use)
3. Straight-forward (Simple and intuitive use)
4. Clear, no ambiguity (Perceptible information)
5. Sensible when dealing with errors (Tolerance for error)
6. Minimises physical effort (Low physical effort)
7. Doesn’t stop you from being able to use it (Appropriate size and shape)

You have to know and understand the users that use the product or website.

“We can create different experiences for different users with one website.”

There is no right or wrong. In an ideal world there would be no client, no budget. In a real world we have clients, and we have to make compromises.

It’s a learning process. Someone always comes up with a better solution. We have lots of knowledge and lots of people sharing it.

“We want people who think. We want people who create and user their minds.”

How does the process differ when you’re creating an inclusive website?

The Brief should include a mention of inclusive design.

The Process should use real people . Have an Inclusion Leader on your team, who makes sure the principles of inclusive design are adhered to.

Technical Scoping – backend and frontend people should understand what eachoterh do and how it imacts ont he other. Talk, talk and talk some more.

Testing – even people who “get it right the first time” need to test.

More Testing – you need to make sure the whole thing works together.

The G in WCAG

They are guidelines not rules. They make you think, but don’t restrict you. Allows you to think about what you’re doing and think about the users who will be using your website.

Usability

Different from accessibility.

It’s about specific users with specific goals in specfiic context.

Three key areas

• effectiveness
• efficiency
• satisfaction

Tends to go together because there are so many overlaps.

It Begins With Web Standards

Progressive Enhancement is an extension of Inclusive Design.

Progressive Enhancement is a strategy. Graceful Degradation is an afterthought.

Internet Users are people and people come in all shapes and sizes

Marketers and Analyitics specialists should be listened to, but they don’t really understand human nature.

Peter, George and John

Same to marketers: same demographic, except:

Peter – internet lover. Firefox with all the extension. Loves JavaScript and Flash.

George is a luddite. Has JavaScript turned off.

John – Like Peter, technially savvy, but he’s visually impaired.

One last thought

Inclusive Design brings people together

Q & A

Q: I have a website that runs well on the desktop, but doesn’t run on mobile. Would you class that as non-accessible, non-inclusive?

A: Yes. Technology moves forward. Two ways to look at mobile: mobile style sheets (existing content) or repurpose the existing content for a mobile browser. It’s a difficult thing. 65% of people are using mobile to surf the Internet in the UK. In third world countries many people don’t have desktop computers they only have mobiles. Try your best. If that’s a market you want to server, you need to think about that.

Q: How can I test if my website is actully accessible?

A: Use real people to test it.

Q: Where can I find them?

A: You’ve got a couple blind folk here. It’s about budget. If you client doesn’t have budget, you won’t be albe to do it. The British Computer Association for the Blind has a list of 300 people who will test.

Q: You’re preaching to the convereted here. How do we get the message of inclusivity to the “boring banks.”

A: It needs to be brought to the mainstream. Accessiblity talk to another, but we need to mainstream it. The whole point is not having specialised thing, but including everybody. It’s social change. It’s time. Chalenge what blind it. Challenge norms and steotypes. “I’m not what you think blind is.”

Q: What is the best way develop an accessible website: write the best semantic code or… ?

A: If you get underneath the WCAG. The solution isn’t technical. You need to understand the people using the website. It’s not technical, it’s about structure. There isn’t one solution.

Q: Have you ever pushed for exclusive design?

A: I don’t like exclusivity. I find it difficult to think about that sort of thing. I’m a “human rights marketer.” Exclusive feels wrong philosophically.

Q: The statistics that you gave at the beginning. Where can we get more information? Your website?

A: Lots of places. I’m giving the presentation to Ben, so you’ll be able to track that down. W3C. WebAim. London Accessibility Camp.

A: (Jim) Mike Davies redesigned the Legal & General website. He did a presentation on the business case for usability at London Web Standards in 2007.

A: (From the audience) We built a better website because the vice-president of BP couldn’t see our website. We’re trying to reach old people. They’re the decision makers. They have visual impairments, but don’t like to admit it.

Q: As a vision impaired user, what is your experience of the internet like?

A: Most websites are frustrating. I have frustrations with pretty much every single website I use.

Q: Contrary to what has been said here, I’ve found that big companies are hell-bent to have their websites “accessible,” but often go over the top. Example: adding access keys to every link.

A: We do have nice clean, semantic markup, etc. What people think accessibilty is and what it really is are two different things at the moment. HTML 5 comes along with landmarks and ARIA. You have to understand the directions things are going (even if you don’t want to use HTML5 because it won’t validate right now). A lot of people who think about accessibility think it’s a checklist, but if you really look under the hood, it’s not logical. Don’t look at it as a list, as a rule. This is why I’m saying “Inclusive Design.” It’s about including as many people as possible.

Q: Make it usable by a 10 year old. Average reading age in the UK is 9. WCAG, the C is content…?

A: Yes, part of the guidelines is that text should be clear. Plain English. It’s about thinking abou the user’s. Not everyone has English as a first language. Be as simple as possible. People scan. People don’t read the Intenet like they’re reading a book.

Tickets now available for “Move over Web Accessibility, inclusivity is heading straight at you!”

You can sign up for our event on 15th February, “Move over Web Accessibility, inclusivity is heading straight at you!” via Eventbrite at http://lwsaccessibility.eventbrite.com/.

Event Details

Sandi Wassmer, Web Accessibility Enthusiast, Inclusivity Advocate, Action for Blind People Blogger and MD of digital agency, Copious, will be talking about why she is rooting for Inclusive Design to lead Accessibility.

We’ll be starting with a couple of lightning talks (please contact Ben Dodson via ben.dodson@londonwebstandards.org if you have something you’d like to present for 5 minutes) at 7pm before moving on to our main presentation at 7:30pm.  There will then be a Q&A session followed by informal discussions.

We look forward to seeing you there!

January 2010 Roundup

Hi Everyone,

First of all a big thank you to Ben Weiner for his presentation on Web Fonts and for all of you who attended. There is a writeup of the event available on our blog.

Next Meeting

I’m happy to announce that our next talk at London Web Standards will be on the topic “Move over Web Accessibility, inclusivity is heading straight at you!” presented by Sandi Wassmer (@SandiWassmer). The event will take place at 7pm at the Square Pig in Holborn on Monday 15th February – tickets will be available on EventBrite at 3pm this Friday (29th Jan).

Sandi is a Web Accessibility Enthusiast, Inclusivity Advocate, Action for Blind People Blogger and MD of digital agency, Copious, and will be talking about why she is rooting for Inclusive Design to lead Accessibility.

Attendance

Over the past couple of meetups we have had record numbers of people signup for our events which has led to us having to create and administer waiting lists. Unfortunately, a large number of people become unable to attend and don’t notify me leading to empty places at the event which could have been filled by people who weren’t quick enough to get a ticket. If I could remind everybody to be courteous to our presenters and other members and let me know in advance if you are unable to attend as otherwise we will need to introduce a more vigilant registration process which I don’t think should be necessary.

Design Competition

We’re planning on overhauling our website shortly and so will be running a design competition so you can show off your creative sides – the winning design will be used for the new londonwebstandards.org website! We’ll be releasing further details shortly.

Job Vacancies

We are hoping to launch a job board at some point in the future but for the time being I’ll be adding any relevant job vacancies to these monthly emails. If you are interested in a vacancy or have one you would like to add then let me know.

* Unboxed Consulting build Ruby on Rails web solutions and iphone apps for the media and creative industries. We’re passionate about innovation and quality and our web solutions illustrate this. Unboxed are looking for a front-end developer to join the team. If you can work CSS and javascript magic and want to work in an Agile environment get in touch with richard.stobart@unboxedconsulting.com

* PHP / XHTML Developer in Pimlico, London – New media agency based in Pimlico, London looking for a full-time web developer to take a lead on a number of new and exciting projects. As an agency specialising in video, the majority of their previous websites have been made with Adobe Flash but they now require a developer who will be able to build both brochureware and basic CMS sites using a combination of PHP and XHTML / CSS along with jQuery or an equivalent JavaScript framework. Due to the nature of the previous websites, your role will be unique as on the only standards based web developer on-site with a wide ranging brief to help shape the agencies website portfolio. You will have direct input on how the development department should be run leading to excellent experience for future roles. For more information or to apply for this role, please forward your CV to me via recruitment@bendodson.com or visit http://bendodson.com/recruitment/

Until Next Time

I’ll be posting another message here and on our Twitter feed (@webstandards) on Friday once tickets are available for the Web Accessibility event.

Ben Dodson
LWS Organiser

LWS January: Web Fonts with Ben Weiner (Live Blog)

Warning: This is a live blog post.  I’ll be typing as it happens.  Expect typos, mistakes and my own distinctive interpretation of the night’s events.

A few quick announcements from Ben Dodson

• Next month’s talk is an accessibility talk
• If you’re looking for work, contact @bendodson and he can direct you to someone who is hiring
• We might do stickers so everyone knows one another’s names (next time)
• We are a social group, we’re all about everyone talking to one another (we’re not just lectures)

Ben Weiner takes the stage

(You can find a transcript of Ben’s talk on his website.)

Ben has been waiting for web fonts, like most of us, for some time.  He’s going to take us on a quick ramble through web fonts.

What is a “web font”?

Anything that is recognisably a font transferred over the net for rendering text on the page.

Only two people at this event (other than Ben) are currently using web fonts.

What is a “font”?

“A font is a computer file that contains the information to create images of letters.”

Fails to convey some of the essential and intangible qualities of a font. For example, the spacing on every side of a letter.

Thousands of hours of go into the creation of a font. Deciding on spacing is more a question of visual judgement rather than scientific rules.

There are a variety of type forms: diacritics, ligatures and non-Latin scripts.

After character outlines are correct and spacing has been tweaked, there are hours of testing. Type hinting is used to make the outlines look good.

Fonts also come in families. Not just regular, bold, italic and bold italic. There are often 4 times that amount.

Ben recommends Font Bureau.

Why do we want to burn the network with all this extra data?

A brief history of web fonts

FONT FACE only had access to fonts on the users computers. At CERN, a large numer of fonts weren’t needed. But early on designers were coming to web design…

Microsoft provided the first solution by providing fonts with Core Fonts for the Web. They were even available on their website for download.

1999 vs 1866 – there were more fonts available for print than for online (broadside and a screenshot of webmonkey).

An early W3C web fonts draft was incorporated into CSS2.

Idea of using desktop font formats was rejected because the file could be easily copied.

Microsoft had Embedded Open Type (EOT) since IE 4.

Netscape 4 had TrueDoc and Portable Font Resource (PFR). This vanished quickly.

These techniques both failed to take root. What killed them off?

To send a font to a browser, you needed a license. Font vendors temporary licenses made this impossible.

A decade of type hacks

Using a picture of text. Anyone who couldn’t see the image had no idea what was being communicated. He includes Flash-driven sites in this.

Less stupid hack: FIR – great way to create cock-ups when the copy gets changed.

Clever hacks: sIFR – the first mainstream technique that works with content management systems. Recognises that text might change once code monkeys leave.

The cleverest of the hacks: retrieve outline of the fonts from the web server and render them in the browser. (Cufon)

typeface.js

Question (Justin): How much bandwidth do they take up?

A: Could be over a megabyte, could be 48K.

They render with the canvas element.

Someone in the audience makes the point that web fonts are probably better supported than canvas.

There is agreement that the way to specify the font you want to see on the page is via CSS. Cufon introduces its own techniques and this is a bit naughty.

Cufon doesn’t handle non-Latin fonts very well, but typeface.js seems to do a better job. Same goes for Latin ligatures (but this actually turns out to be Firefox understanding ligatures).

None of the above use real fonts.

@font-face does and is a W3C recommendation – same technique recommended in CSS2.

Interesting that OSX tries to use a font already on your file system rather than downloading it from the web.

You can pull in a font from a web server and back it up with a web-friendly font stack.

Example New York Times Skimmer uses Cheltenham.

Is there an impact on the server? You can add access restrictions (e.g. referrer checking) to prevent people downloading your font.

Cross Origin Resource Sharing – use “Access-Control-Allow-Origin” in Apache.

BBC’s Urdu site is real text, but some  browsers struggle to render it.

But… Foundries still aren’t playing ball.

Mark Pilgrim isn’t happy.

Licensing is an issue.

Other issues

Adding webfonts can significantly change the bandwidth profile of the site. Average size of a Latin font file (35K). One for each font family variant (regular, bold, italic, small caps, etc.).

Flashes of unstyled text – Firefox displays a fallback font. Safari displays no characters until the font file downloads.

Font families: use font-weight and font-style to distinguish between family members.

Guess what? IE doesn’t seem understand @font-face at all (just font-family and src). You basically can’t build a font-family.

Teething problems are attracting attention:

• Flash of unstyled text – Paul Irish has a solution
• Deciding which font family is selected – Firefox knows what it’s doing, other browsers struggling

No established business model for selling web fonts. Some startups are addressing this.

“Crap fonts are not impressive creative works, they are just crap.”

Free fonts don’t usually compete with professionally created fonts, so it’s worth paying for a font.

WOFF

Web Open Font Format – proposed in the summer of last year.

What about Microsoft? prepared to commit to WOFF when foundries support it as well.  Feels like progress.

Web Fonts Working Group at the W3C is expected to support WOFF.

WOFF obfuscates itself, unlike desktop fonts.

Spiekermann and the FontShops endorse the WOFF specification – this is a major breakthrough.

WOFF is compressed, but not encrypted.

Where can you get good web fonts now?

You can get good fonts now:

• typotheque ?
• typekit – a lot of press
• font squirrel – quality free fonts
• Open Font Library – site will be relaunched soon

How do I get started?

Expect things to degrade, but not always gracefully.  You can use Font Squirrel’s generator.

You can fiddle with heading styles. Just one font family member gets around IE’s failures.

Flash of Unstyled Text – Mark Boulton on 24 ways and Paul Irish

Appreciate difference in size in Microsoft Core font (Georgia is the worst) and your chosen font or it will bite you in the arse.

It may be best to forget about supporting IE altogether.

Good light touch introduction: Spruce it Up by Jonathan Snook.

You can use a CSS cascade to include Embedded Open Type, WOFF, TrueType files.  Again, see Font Squirrel’s generator for a good example of this that works (even in IE!).

Final point: unless you license allows it, you can’t reencode a font file.

Widely predicted: a rash of poorly chosen fonts with missing characters. Ben doesn’t think this will happen.

Browser vendors should agree on how the @font-face rules should be interpreted. IE 9 may be the first full implementation from Microsoft (there’s apparently a rumour floating around to this effect).

Maturing of font hosting services – typotheque, typekit, Open Font Library.

Question and Answer

Q: Didn’t microsoft submit EOT to the W3C to become a standard? What happened with that?

A: There were issues with it being proprietary. By the time it got the W3C, they were looking at something that wasn’t EOT anymore.

Q: Can I overwrite a user stylesheet that specifies Comic Sans.

A: An edge case, but it would be nice to have a whole evening when we could discuss ways to dick people over.

Q: What is the WOFF standard like? Sounds like it’s binary and not very easy to inspect.

A: WOFF takes all the tables from an Open Type font and replaces them in a new file.  It’s a very light obfuscation.

Q: Do you think there will be take up of WOFF?

A: I think there will be more and more younger foundries that offer web fonts because that’s the world they grew up on, that’s the air they breath.

Q: Can I get properly hinted fonts for the web (as good as Core Web Fonts)?

A: There aren’t many fonts out there. They tend to be the fonts commissioned by the operating systems.  For example, Droid fonts. But there’s no reason that a good font can’t work well on the screen.

Q: There are two approaches to font rendering the Microsoft (ClearType) way and the Apple / FreeType way?

A: ClearType tries to render a font taking into account the limitations of the screen.  Apple and FreeType, on the other hand, try to represent the shape of the within the pixel grid.

Q: Cufon splits the letters of words into span tags. This means that Apple VoiceOver reads each letter.

A: I thinks that’s correct. Letters in a span tag are separate things.

October’s Lightning 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 »