When it comes to Mobile Development, Stop Worrying about Bandwidth

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

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.

Oldschool Techniques

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.


I think you're right about bandwidth not being a big deal, but latency still is. Especially on mobile networks, even as bandwidth increases, latency is still the cause of many noticeable stalls. So while a few KB isn't really the concern, reducing the number of different resources your page loads, and ensuring that they can be loaded in parallel, can still make a dramatic difference in perceived load time.


The overall point of your article seems to be "don't reduce bandwidth at the expense of overwhelming the CPU," and I agree completely. Bandwidth is just one of many factors when considering a mobile audience. However, I don't agree that "bandwidth isn't a big deal." 4G is still relatively unheard-of outside major cities, and 3G page loads can be painfully slow.

There's a great article about the trade-offs between bandwidth and CPU load by the creator of Every Time Zone, which is great further reading on this topic.

I think to Vineet's point above, some of the issues you are seeing via phones on cellphone networks may be latency related, not bandwidth related. That said, mobile phone doesn't mean 3G or 4G. If someone is using their device at home or in a Starbucks, they likely have wi-fi.

My main point is, no matter what network connection someone may have on, their CPU is still tiny all the time.

Add new comment

Restricted HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>&lt;code&gt;</code>, <code>&lt;blockcode&gt;</code>, <code>&lt;apache&gt;</code>, <code>&lt;c&gt;</code>, <code>&lt;cpp&gt;</code>, <code>&lt;css&gt;</code>, <code>&lt;drupal5&gt;</code>, <code>&lt;drupal6&gt;</code>, <code>&lt;html&gt;</code>, <code>&lt;java&gt;</code>, <code>&lt;javascript&gt;</code>, <code>&lt;mysql&gt;</code>, <code>&lt;php&gt;</code>, <code>&lt;python&gt;</code>, <code>&lt;ruby&gt;</code>, <code>&lt;sql&gt;</code>, <code>&lt;xml&gt;</code>. The supported tag styles are: <code>&lt;foo&gt;</code>, <code>[foo]</code>.

About the Author

Joaquin Lippincott, President &amp; Founder

Joaquin is a modern technology veteran. Throughout his career he has built successful digital strategies with a wide assortment of transformative technologies and platforms, helping clients identify a clear path for success.

Over the years he has worked with industry leaders such as DC Comics, the Emmys, Intel, Technicolor, Verizon Wireless, Habitat for Humanity, Limewire, the Linux Foundation, Sony Pictures Television, Mercy Corps, and Cisco as well as numerous small businesses, advertising agencies and internet start ups. With over 14 years of experience in his field he is still as passionate about technology as ever.

Joaquin is a graduate from UCLA with a degree in design and has also served on the AIGA Portland chapter board as President.

Twitter: @joaquinlippinco