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

HTML5 Pub Lunch

Daniel Appelquist (W3C TAG member and Senior Technology Strategist at Vodafone) invites you to a pub lunch this Friday along with Doug Schepers, Web Standards Specialist at the W3C.

This is a chance for a relaxed chat and Q&A about the future of HTML and related Web standards. Please note this is not a sponsored event so you’ll have to buy your own lunch. We only supply the Web standards goodness.

For numbers, just say if you want to come: http://upcoming.yahoo.com/event/6577146

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.

The open web needs you – spotlight on education

The Web Standards Project (WaSP) has been busy at work hatching the InterACT curriculum, a framework for teaching standards based web design and development intended for schools, universities and business.

Education is core to getting the web to pull it’s socks up and become more of an inclusive, cross browser, cross platform, cross device place. By creating a curriculum and web craft degree backed by both industry and educators, the Open Web Education Alliance (OWEA) hopes to help produce the graduates that employers need to build slick, usable, accessible and profitable websites.

Up to this point all the work in OWEA and WaSP InterAct has been voluntary contributed to by some of the best web designers and developers out there today. To get this initiative really off the ground however we need to put in some serious hours and to do that OWEA needs funding. (Disclaimer: I’m hoping to be the one to put in the serious hours).

This is where you come in

We’re applying for a grant from the Shuttleworth Foundation and would love to show them how well backed this initiative is by our community. So, if you care about a sustainable web then take two minutes to show your support by signing up to  The Open Web Education Alliance project funding bid. We need comments, contributors and votes!

Buy the book

WaSP InterAct have just brought out Interact with Web Standards: A Holistic Approach to Web Design - over 500 pages of hotness by Erin Anderson, Virginia DeBolt, Derek Featherstone, Lars Gunther, Denise R. Jacobs, Leslie Jensen-Inman, Chris Mills, Christopher Schmitt, Glenda Sims, Aarron Walter. Well worth a read for anyone learning or teaching web design.

While you’re at it you may also want to get Introducing HTML 5 by Bruce Lawson and Remy Sharp. It’s out in July so it’ll be a nice little surprise when it drops through the letter box in a months time.

LWS June: HTML5 and Flash: where are we now? (Live Blog)

Joe Lanman takes the stage for a general introduction of the topic.

Thanks to our sponsor EMC Consulting.

Our next event will be Andy Budd talking about User Experience on 12th July. August will see a summer social (some time in the 3rd week). In September we will have Michael Mahemoff talking about HTML5.

If you know of a good venue for London Web Standards – bigger one than Square Pig, please recommend it to us.

This talk is going to be about Flash vs. HTML5 alternatives for doing common things in HTML5 as opposed to using Flash.

[19:15] Jeff Van Campen takes the stage

Multiple file uploads was missing when Jeff tried to live a few weeks without using Flash and was badly missing multiple file uploads feature on some sites. WordPress is a good example where multiple file uploads is used.

Drag and drop is one of the interesting features which is also commonly used and cool feature along with file uploads.

GMail now (if you are using Chrome) allows you to drag and drop files into GMail to send them as attachments.

This stuff works in Chrome and Firefox – should work in Safari (which is a bit weird), but should work in WebKit night build.

You can attach multiple files to GMail by using shift and selecting multiple files and then clicking on ‘Open’ to attach more than one file to GMail at once.

The way FireFox handles the multiple file uploads is not terribly user friendly as it bungs everything into the file upload field.

GMail allows a drag and drop of multiple files onto the interface to do the same thing of attaching multiple files.

Jeff demonstrated a UI which enables desktop dragging of files onto the browser and the respective web page showing those files as dropped onto the target area.

Jeff mentions PPK article about why drag and drop is terrible mess at the moment.

It’s not really possible to drag a picture from desktop to ‘upload your files here’ area under current implementations.

There is no keyboard accessibility solution for this problem currently – Gez Lemon is doing some work on speccing something out for this.

If you are going to need multiple uploads you are probably going to need a Flash fall-back in order for this to work.

Flash is still the only way for this to work in Opera and IE.

FaceBook handles multiple file uploads through a Java applet of some sort.

The fall back solution is to offer multiple file upload boxes in straight HTML.

[19:30] Nick Smith takes the stage to talk about fonts

Ol’ skool font replacement solutions are Cufon, sIFR, image replacement under the current state of the web.

With CSS3 and @font-face we are downloading fonts from the server.

Cufon wraps words in < span > tags and the words end up being broken up by this tag.

Now Cufon uses < canvas > which is good and is moving towards future.

Cufon can embed links and can protect your fonts (sort of).

Cufon is kind of accessible.

sIFR (Scalable Inman Flash Replacement) is:

• Well developed
• Handles any font format
• Good to protect your font
• Can be resized
• Can embed links
• Accessible

but it is also:

• Slow to load
• Don’t handle Flash blockers

This is what Jeff pointed out – there is a group of people who are saying ‘no’ to Flash, and they are left in no-man’s land.

Nick Smith’s site still uses Flash and he demoed an example what happens on it if Flash is disabled or blocked – not very good.

@font-face & CSS3 solution has the following pros and cons:

• Supports Internet Explorer 6
• Live text
• No JavaScript required
• Accessible

There are also following cons:

• Big licencing issues
• Free fonts can be a minefield
• FOUT (Flash of Unstyled Text)

Nick demos a font changing example from Apple Developer web site to show the power of CSS3 on the fly.

Kornel shouts from the back rows saying that this is ‘not HTML5′ – discussion starts on whether this is or is not HTML5.

This is CSS3 rather HTML5 – some people thought that Google Pacman logo was HTML5 because it worked on iPhone and it was HTML4 and JavaScript.

Nick says he constantly has the problem with designers that certain fonts cannot be used within web pages, so he has to regularly instruct them that those fonts cannot be used within the context of web pages.

Someone (a visual designer) makes a remark from the audience that majority of CSS3 fonts don’t look as good for Windows users while sIFR and Cufon look much better and as intended by the visual designer.

Audience member says: It seems as though currently you are required to download entire font definition from the web with @font-face which seems to be massive for some languages like Chinese.

Much discussion takes place around fonts on the web and HTML5, downloading it, using it, performance issues and display issues. Many people seem to have an opinion about this particular topic and are commenting extensively about their experience and thoughts about this.

How long until we see ‘HTML5 loading screens’ like we have been seeing on Flash sites?

Does anyone know why aren’t the really big font foundries signing up to distribute their fonts through this. Kornel replies that the same thing happened with music industry. Pirating debate kicks off with a lot of comments again.

You can go to almost every font library and download individual types of fonts, but it is not cheap.

Majority of clients want to pay for the font and its use on a web site.

Kids on MySpace are likely to pirate fonts, but …

Would clients pay for image from Getty Images, so why not pay for fonts also?

[20:24] Edd Sowden about CSS transitions and live streaming

HTTP live streaming

OSMF – Open Source Media Framework can be used as one of the solutions (this is an Adobe solution)

JW Player (from v4.6) supports this feature

Demo shows a live example of video player switching on the fly from low quality content to high quality video without stopping

This works by chunking up files – Apples implementation uses tools which come with Snow Leopard, but only works in Safari under Snow Leopard OS.

ISS Smooth Streaming is Microsoft’s implementation of this live streaming solution.

Looks like its Apple vs. Flash.

On YouTube we currently have the manual process of users having to switch the video up a notch to get the better quality on their browsers.

[Audience question] Is there going to be a native streaming within the browsers implemented any time soon?

I haven’t seen anyone try it other than Apple on Safari with Snow Leopard, but this can be done in Flash.

[20:42] Joe Lanman on stage talking about Vector Graphics

Flash is used quite widely for vector graphics – for practical things like graphing.

A lot of the issues around various solutions are to do with the fact that Internet Explorer does not support it.

Raphael JS is a useful library which allows use of SVG in Internet Explorer by converting stuff to VML.

SVG is more ‘webby’ as it is within the DOM (SVG is XML based) so its pretty cool in that respect.

Joe takes us to Raphael JS web site to show us some examples of what is possible with this library.

The output of a graph in code terms is SVG code which can be styled with CSS in the same way we do it with HTML. This is theoretically more accessible as assistive technologies can read the graph.

Its great that data is there within the DOM so it can be accessed – it is also possible to apply JavaScript to this to add some behaviours.

Its a little bit weird in that it doesn’t support everything so animation via JS won’t work.

Kornel throws in a comment that SVG support animation elements, so animations can be done natively using SVG coding.

Downsides of this method?

This solution is good for graphing but not necessarily for animations which Flash is really easy to create with.

Android browser does not support SVG because ‘SVG adds 1MB to the overall download size’.

There is a JavaScript graphing library based on Raphael JavaScript library. http://g.raphaeljs.com/

[Audience comment] This graphing library does not handle many data points very well. FireFox also tends to halt when there is a big amount of SVG data within a page.

Many audience comments about this topic once again. Flash vs. these SVG diagrams look very similar and not much different at all.

[21:03] Talk is formally finished and informal conversation starts

BBC Homepage uses canvas with Flash fall back on the homepage.

[Audience question] Does it really matter that something is HTML5 as opposed to Flash now?

The BBC clock on the homepage works on an iPhone as well.

Excellent audience discussion about why using open technologies instead of Flash is a good idea.

Joe Lanman closes the night off thanking everyone for participating.

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.