August Event: Design for the Future

London Web Standards is pleased to announce our next event: Design for the Future with Andy Hume and Richard Rutter. The event will take place on the 16th of August.

Standards we’ve been reading about for years—HTML5, CSS3, WAI-ARIA—are finally making their way into all of the major browsers. At the same time, more and more people are accessing the Web using mobile and tablet devices.

This month at London Web Standards, Richard Rutter (@clagnut) and Andy Hume  (@andyhume) will discuss using emerging standards to create websites that are beautiful and engaging across a range of devices.

A Progressive Web, Andy Hume

The idea of progressive enhancement isn’t new, but the way we approach it needs to evolve. New devices such as those powered by iOS and Android are upon us, just as a throng of emerging technologies like HTML5 and CSS 3 are ready for action. With every day that goes by people are experiencing the web in new, different, undreamed of, impossible ways.  Exciting as this sounds on paper, how do we build websites within that impossibly complex and constantly shifting landscape?

The Future of Typography, Richard Rutter

At no other time has typography been taken so seriously by so many involved in the web, and that means there’s an awful lot of change and innovation to keep up with if you want to stay on the cutting edge of online type. This presentation will cover recent proposals and additions to CSS 3, from ligatures to hyphenation, synthesis to capitalisation, and much in between. It will cover the reasoning behind the new aspects of CSS 3, and reintroduce older properties which only now are becoming implemented and useful. The future of web typography is looking bright.

dConstruct Ticket Winner and UX Questions

We have a winner! Congratulation to Tanya Ahmed, who has won a ticket to this year’s dConstruct for submitting a UX Question for this month’s event: Getting Started in UX.

If you didn’t win, you can still purchase a ticket for only £125. The word on the street is that they are going fast.

Congratulations are also due to the 10 people whose UX questions have been selected. They will all be on hand to ask their questions at the event.

• Andrew Sawers
• Simon Cox
• Rupert Bowater
• Patrick Sansom
• David Powers
• Katarzyna Stawarz
• Clive Walker
• Richard Tape
• Rai Eastham
• Matt Bee

July Event: Getting Started in UX: Q&A with Andy Budd (#lwsux)

We’re please to announce our July event: Getting Started in UX: Q&A with Andy Budd

We’re going to try a slightly different format this time: a Q&A session.

We’d like the questions to come from you. So if you have a question about UX, about Clearleft’s approach to UX or about how to get started in UX, you can submit it online

The first 10 people to submit an interesting question will receive a guaranteed ticket to the July event.

One randomly selected person will receive a ticket to dConstruct (worth £125). We’ll announce the winner on 5 July.

General Release tickets for the event will be available from 1pm on Friday, 25 June 2010.

If you talk about this event online, please use the tag lwsux (#lwsux on Twitter).

Thanks to EMC Consulting for their generous sponsorship of this event.

May Event: Beautiful Design for Everyone with Ann McMeekin & Antonia Hyde

Tickets

Tickets will be available on the 30th of April at 1:00 pm on Eventbrite.

A special thanks to our sponsors

New venue

This month, we’re meeting at a different venue:

LWS April: Faster Web Pages (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.

Update: Kornel has posted a PDF of his presentation as well as video on his site.

Google & Bing did some speed tests where they delayed their page. Half a second actually has an impact on the way people interact with the site. People will abandon search rather than waiting half a second more.

Google has now added speed into their ranking algorithm. Google may be counting how long it takes for ads on your site to load.

Some of the PHP tips on Google’s “make the web faster” site can actually make websites slower.

The longer it takes pages to load, the more likely users will abandon the page (see Neilsen’s page load limits).

Kornel has a fantastic illustration of the pipes that the Internet is made of. Now we have fat pipes that have a lot of bandwidth. The size of the file doesn’t matter as much as latency, the time it takes to cross the wire.

Bandwidth has improved 300 times sinc modems. latency has imported only 3 times. It isn’t going away. It won’t get faster until we upgrade the universe.

Most web standards were written when bandwidth mattered and latency didn’t matter that much. Three way handshake (SYN, SYN-ACK, ACK) = 2 pings to download anything.

HTTPS is much much worse because there is a lot more traffic on the wire for the exchange of keys, etc.

The solution is to reduce the number of requests.

Merge JavaScript & CSS files into one file. Don’t use @import! Use @media print in your main CSS file. It’s best to automate this, but don’t use PHP. PHP deliberately breaks all caching.

Merge images into CSS sprites. This is what Google does. There are downsides to this technique. It breaks when you try to cut-and-paste, and it can be a maintenance nightmare.

IE7 has a limit of 2 connections pre hostname. This is what RFC2616. Unfortunately, IE actually paid attention to the standard. Create a cookie-less assets server (this can be a CDN or just a virtual host). Serve the main style sheet from the same server as the site you’re serving HTML from because it saves a DNS lookup. The download of the CSS will start immediately.

Caching is important, but difficult.

• Use mod_expires in Apache.
• Change the URL when content changes (e.g. style.css?1234)

document.write is evil. It can create any code that might completely change the meaning (and thus the layout of the rest of the page. It also makes the parse wait for all scripts. WebKit, Firefox and IE8 parse the page twice. Once without JavaScript enabled, and then with JavaScript enabled. This still doesn’t fix all the issues. IE7 and Opera don’t do this. There is no hope fr scripts that write other scripts (e.g. Google Analytics).

The moral of all this? Place scripts at the end of the body.

Good example of using a defer() function. Ads cannot be deferred. Place ad JavaScript at the end of the page, then use position:absolute to place the ads toward at the top of the page. Otherwise, you can use a iframe. SWFObject is great for loading in Flash ads.

Dont’ use the defer attribute. Few browsers support it, and it’s not supported that well in IE either. document.write doesn’t work anyway.

Hosted JavaScript libraries don’t help. Users would have to have the same version from the same provider, and users often don’t have that version in their cache. If they don’t have it, the browser has to do a DNS lookup on another server then download the whole script.

IE7 and Opera behave differently than all other browsers.

webpagetest.org, uses IE7 in the background. And Fiddler is a power horse, but make sure you enable “streaming mode” or your waterfall graph will be broken. For Firebug, use YSlow and google PageSpeed.

Progressive rending can slow down fast pages. To avoid this to the extent possible, specify image dimensions and float widths. Avoid clearing divs and brs. Use overflow:hidden instead. Otherwise, use the clearfix hack.

Bandwidth

The solution is gzip. Computers are so fast, it’s always better to gzip than not. With any text-based file, you get a 50% saving. In Apache use mod_deflate or mod_compress.

In some cases, gzip doesn’t work, so it’s best to minify your files using YUI Compressor or Google Closure Compiler (for very large JavaScript libraries). Google Closure Compiler requires some tweaking. makefile is perfect if you know how to write makefiles.

Image reduction

Use the lowest number of colors. Don’t use PNG24, but if you do try posterize. Use PNG8+alpha (Photoshop ignores these files, but Fireworks can save these files). There’s no reason to use GIF unless you need animations. JPEGs bug and are based on 8×8 blocks. Sometimes shifting your image by a few pixels can reduce JPEGs considerably.

Kornel has written ImageAlpha to give PhotoShop users access to PNG8+alpha (Mac only).

Image optimisation

Remove unused data by removing EXIF data and color profiles. Kornel has created ImageOptim to make this process easier.

And that’s it.

LWS March: JavaScript – The events that get left behind & Pro-bunfighting (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.

Pro-bunfighting

Frances Berriman will be discussing testing, and group hugs.

She works on the BBC Glow JavaScript Library, which is Open Source.

Small team, with various issues.

Issues

3 people on the team. 2/3rds live in london.

Quite a lot for the three of them to do, but not a lot of face-to-face time.

Problem 1: Communicating what to make

Miscommunication is the source of most project woes. Issues arise when a specification has been misunderstood. Someone does work, but the response is, “That’s nice, but it’s not what I wanted.”

Need to communicate accurately over email.

The unwrap() method

People skim prose.

All communication of requirements is done in code in JSDoc.

Empty source files are created in their repository with JSDoc, then they commit them. Makes it easier to follow than email.

The bun-fight

Locking themselves in a room and have a fight. Go through the docs line-by-line.

Everyone has to read it. Everyone has to understand it.

Bits get removed. Bits that aren’t really needed, so no one wastes time coding it.

Then someone goes away and codes it.

Because they are using JSDoc, they get free documentation.

Problem 2: Checking what we’ve made actually works

Unit testing. The first thing you should think about doing is turing examples from you docs into unit tests.

They use Qunit. setup and teardown are really useful, but don’t seem to be documented.

Sanity checking & code reviews

Notorious at the BBC. Some people may have cried.

Somebody stands over you shoulder and tells you what is wrong.

They make sure it doesn’t read like a W3C standard because nobody can read a W3C standards.

Also check punctuation and make sure it’s understandable by an external user.

Conflict resolution

We fall out, and there is no resolution.

But debate is good. No one holds a grudge.

Problem 3: checking what we’ve made is fast

How do we know what is we made is fast? We benchmark in Woosh.

Live demo of Woosh, comparing Glow to other libraries.

The headlines

• Treat writing documentation like writing code
• There’s no such thing as too many unit tests
• Benchmark regularly if you want to go fast

Events left behind

Jake Archibald

Used Photoshop CS5 content fill to generate his notes.

He likes cycling. He doesn’t do it too often, but when he does it he thinks, I should do that more often. And he notices improvements, i.e. disk brakes are better than whatever went before. One thing hasn’t changed — the chain & gear system still clunks and breaks. Browser events are the chains and gears of the JavaScript world.

Making an application work off of the keyboard is more complicated than you’d think it was.

We need to be abele to be able to track more than one event (polyphony).

Key actions. Key repeating – this differs between operating systems and depending on user settings.

Key actions are monophonic.

Mouse events are pretty well documented in the W3C DOM 2 specs.

What about keyboard events? No a lot.

What do the browsers do?

keypress – The exceptions in Internet Explorer and Webkit actually make more sense. Only keys that generate characters generate a keypress event. Exceptions are more random in Opera and Firefox.

Should keydown really repeat?

Is there a way we can normalise the event order?

The plan for for Glow 2:

• Event order is keydown, keypress, keyup
• keypress is the only event that repeats
• keypress always fires
• (missed it)

Problem with fixin keypress: it isn’t always fired. We need to fake a keypress event when needed. Need to decide this. And to do this, we need browser detection.

Keycodes on various television remotes aren’t the same. There’s no spec to tell them what the keycodes should be.

Opera doesn’t distinguish number pad number keys from other number keys, so this behaviour is repeated in Glow (lowest common denominator).

Great photo of the messy cupboard in the search to find an American keyboard.

Unfortunate closeup of a keyboard found in the messy cupboard.

keys x keyboards x browsers x operating systems = Archibald’s constant of misery

The good news: Erm, no good news, but there will be soon. DOM Level 3 Events covers keyboard events in detail (though the spec is volatile).

IE uses key instead of keyIdentifier and location instead of keyLocation.

Wrapping up:

• Keyboard events are awful
• They’re going to get less awful

April meetup: Faster web pages

London Web Standards is pleased to present:

Faster web pages: the secrets of front-end performance

Monday 26 April 2010 from 7:00pm – 11:00pm

Kornel Lesiński will explain quirks of web standards and browser implementations that cause unnecessary slowdowns, show plenty of tricks to lower latency and utilize bandwidth better, demystify PNG and introduce you to tools that shrink them more than you thought possible.

Tickets will be available on the 9th of April at 1:00 pm on EventBrite.

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.

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.

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 »