When it comes to mobile development, I've seen a lot of buzz recently on how CSS3 can help people eliminate images and cut the bandwidth requirement for their websites, however if a good mobile experience is important to you, you may want to think twice before deciding how to retrofit your website.
- The Good Old Days
- The Future is Now
- Your Screensize May Vary
- Don't Forget the CPU
- Oldschool Techniques
- What About Bandwidth?
- The Need for Speed
The Good Old Days
Back in 1999 bandwidth was a big deal. The vast majority of people using the Internet were on slow dialup connections (remember dialup?) while a select few had access to broadband, mostly in corporate or university settings. To make matters worse, HTML was still in its infancy, so any fancy designs (rounded corners, transparencies, etc) had to be faked using images. Being able to get images down to a few KB allowed more people to access to your site, made your site load more quickly and resulted in a better customer experience.
The Future is Now
Fast-forward 13 years. Advances in CSS and HTML now mean that transparencies, rounded corners, gradients and more now can be built completely without images. This means things are more flexible and load times are incredibly low - great right? Not quite. These days we also have these little things called mobile phones and tablets, so we need to keep a few more things in mind.
Your Screensize May Vary
Because screen size varies widely across all these devices, Responsive Web Design (rather than Predictive) is becoming the pre-eminent solution for handling mobile as well as traditional computer traffic. These days CSS Media Queries - using CSS to scale to screen size - is becoming the primary focus of those touting Responsive. This strategy meshes well with the idea of swapping out images for CSS3; images generally don't scale well and as an added benefit you reduce your bandwidth.
Don't Forget the CPU
The bad news is of a lot of these new CSS3 techniques (gradients, transparencies, etc) are CPU (or GPU) intensive. While this isn't a problem for your new laptop, it's melting the little CPU in your phone down to jelly. Transparencies and gradients combined with animation are some of the worst offenders, but caution regarding rendering performance should be taken across the board. The iPhone with it's hardware 3D acceleration, shouldn't be regarded as a good minimum target either - it's a relatively high performance device.
When it comes to getting around some of the performance bottlenecks with CSS3, sometimes oldschool techniques are the best. Stop worrying about how many images you've been able to eliminate or how few KB your website is and approach your build pragmatically. You may still need to fake a transparency or include a gradient image, but please, for the love of Zeldman, don't use tables.
What About Bandwidth?
When it comes to building websites in 2012, bandwidth truly doesn't matter. And it's going to matter even less in 2013 with the roll out of more 4G networks. Additionally many devices are often on wi-fi, so provider network speed is truly a non-issue. Even on 3G, bandwidth isn't a big deal - we're streaming HD video, so don't sweat 20k images.
The Need for Speed
Making your application fast still matters a lot but remember, when it comes to a speedy website or HTML-based app, getting things across the wire is just the first step. You also have to render the page and then make sure all your interactions are timely and don't overload the device they are running on.