I’m here at the @media conference in London – I had hoped to blog during the conference but a lack of wi-fi at the venue (my only real complaint about the conference) and shoddy hotel internet connection put paid to that!
There were a couple of presentations on the first day that I found particularly interesting:
Nate Koechley – High performance web sites
Nate spoke about some of the work they’ve been doing at Yahoo! to improve web site performance, culminating with a list of a dozen rules that are simple and easy to do, and if followed, will give you an average speed increase of 20-50%.
- Make fewer HTTP requests – this is the most important rule, use CSS sprites, combine scripts and stylesheets
- Use a CDN (content distribution network, e.g Akamai). Distribute your static content first.
- Add an expires header to all your files, not just for images
- Gzip all components, not just HTML. Really shrinks users download times. 90% of browsers support compression. Gzip compresses more and is better supported than deflate
- Put CSS at the top of the document in the HEAD. Use link, not @import, for faster perceived loading time (not actual loading time)
- Move scripts to the bottom – scripts block rendering of everything below them in the file until the browser has done loading the script
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups – blocks parallel downloading. Bets practice is to use 2-4 hosts and use keep-alive
- Minify JavaScript both external and internal.. Use minify rather than obfuscate
- Avoid redirects
- Turn off ETags
Following these steps on the Yahoo! Search page made a 40-50% performance improvement. You can follow along with their work at YUIblog.
Mark Boulton – Five Simple Steps to Better Typography
One of many speakers to use a martial arts during their presentations, Mark compared good typographical design to the martial arts style of Bruce Lee. Mark outlined five simple steps to improve your web typography.
1. Be Appropriate and Adaptable
Typefaces tell stories – the web is lacking in availability of typefaces, but you still need to use appropriate fonts. Align your typography with what you’re trying to say.
Don’t let the type (or the design) get in the way of the text.
Be adaptable to the requirements and appropriate to the story.
2. Use Rhythm
Use vertical rhythm (24ways article from Rich Rutter is a good reference for this)
Remove browser defaults
Use incremental leading on sidenotes
3. Balance and contrast
Using “Optical grey” (squinting your eyes to blur the text or using a blur filter can help with this) can help you determine how good your balance is – you should aim for a medium weight, and minimise dark optical grey. You can make your text lighter by using different, more open, fonts as well as increasing leading and line height
Use sans and serif fonts to provide contrast.
4. Use the right tools for the right job.
Hyphens are not dashes! Use em or en dashes.
5. Use a system
Use a grid. Base your unit size (the basic measure for the grid) off your type size. Align everything to the grid.
The day finished with a closing presentation from Joe Clark called “When accessibility is not your problem”. Joe explained that there are specific aspects of accessibility that site authors shouldn’t worry about – you shouldn’t have to worry about the way a broken screen reader will read you content if you’ve stuck to using good semantic HTML. You don’t need to always provide expansions for abbreviations and acronyms. You don’t need to always write simply if it’s not appropriate.
That’s it for day one!
Simon MackieSimon Mackie is SitePoint's Managing Editor, responsible for producing books and other content products for web pros. He lives in sunny Bristol on the south west of England.
