Back to articles

Making the Web Better

4 min read
Web DevelopmentHTML5BrowsersJavaScriptCSS3

Making the Web Better

Right, everyone's banging on about HTML5 lately. Microsoft's just pushed out their IE9 beta (and it's actually not rubbish!), Chrome's getting faster every five minutes, and Apple's still going mental about Flash. But what's actually happening with the web?

The Browser Wars (Again)

Remember when IE6 was the only browser anyone used? Mental how things have changed:

  • Firefox has got proper quick with 3.6
  • Chrome's pushing out updates every few weeks
  • Safari's... well, Safari
  • IE9's beta actually supports proper web standards
  • Opera's still doing their own thing

What's Actually New?

Everyone's shouting about HTML5, but here's what's actually useful:

Video Without Flash

<video src="whatever.mp4">

Brilliant, right? Except:

  • Safari wants H.264
  • Firefox wants Ogg Theora
  • Google's pushing something called WebM
  • IE9 beta's being picky
  • Still need Flash as backup anyway

Better Forms

Finally getting:

  • Email fields that check addresses
  • Built-in date pickers
  • Required fields that work
  • Number inputs with proper controls But IE8 doesn't support any of it yet (sigh).

Canvas for Drawing

var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');

Proper good for:

  • Games (if you're clever)
  • Graphs and charts
  • Anything animated
  • Replacing some Flash stuff

CSS3's Getting Interesting

Some proper nice stuff working now:

  • Rounded corners (no more corner images!)
  • Box shadows
  • Text shadows
  • Gradients (though they're a faff)
  • Transitions (only in webkit but still)

But you still need about 50 different versions:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

JavaScript's Gone Mental

Remember when JavaScript was just for image rollovers?

  • jQuery's proper massive now
  • Ajax everywhere
  • Libraries getting dead clever
  • GMail's showing what's possible
  • Facebook's pushing it miles

Mobile Web's Getting Important

This is interesting:

  • iPhone's changed everything
  • Android's getting massive
  • BlackBerry's trying to keep up
  • Need to think about touch now
  • Sites need to work on small screens

What's Actually Working

Few things making the web better:

Speed

  • Google's proper obsessed with speed
  • Browsers competing on javascript speed
  • CDNs getting cheaper
  • Broadband's getting faster (bit by bit)

Better Code

<!DOCTYPE html>

(That's it - proper simple now!)

Progressive Enhancement

Build stuff that works everywhere:

  • Basic HTML first
  • CSS for styling
  • JavaScript for extras
  • But still works without it

The Problems

Still got some proper annoying bits:

IE6 Won't Die

  • Still about 15% of users
  • China's still using it loads
  • Big companies won't upgrade
  • Clients still want support

Testing's Got Harder

Need to check:

  • All the browsers
  • Different versions
  • Mobile phones
  • Different screen sizes
  • Touch screens
  • Slow connections

Making Sites Better

Right, here's what actually helps:

  1. Keep It Simple

    • Sites don't need loads of fancy stuff
    • Make sure it works everywhere
    • Don't just copy Apple's website

  2. Think About Mobile

    • Sites need to work on phones
    • Not everyone's got fast internet
    • Buttons need to be bigger

  3. Performance Matters

    • Compress your images
    • Minify your JavaScript
    • Use CSS sprites
    • Cache stuff properly

The Future Bits

Few things worth watching:

WebGL

  • 3D in the browser
  • No plugins needed
  • But probably ages away

Web Sockets

  • Proper real-time stuff
  • Better than Ajax
  • Games might get interesting

Web Workers

  • JavaScript in background
  • Proper multithreading
  • Could be dead useful

Should You Use HTML5 Now?

Depends innit:

Yes If:

  • You're building something new
  • Don't mind adding fallbacks
  • Google's your main audience
  • Building for mobile

Maybe Wait If:

  • Lots of IE6 users
  • Need stuff to work everywhere
  • Client's proper fussy
  • Can't be bothered with fallbacks

Wrapping Up

Look, the web's getting better. Proper browsers are winning, mobile's forcing us to think different, and we can finally stop using table layouts (seriously, if you're still doing that, stop it).

Just remember:

  • Make sure stuff works everywhere
  • Don't get carried away with new features
  • Think about mobile
  • Keep it quick

P.S. - Anyone else noticed Chrome's got even faster this week? Getting a bit ridiculous now.