cool tech graphics

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.

Date posted: January 4, 2012


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.

Good point, Vineet! But if latency is a concern, then you could keep your images by converting them to sprites. That's one way to reduce the number of downloads, without needing to get CSS3 crazy.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

About the Author

Joaquin Lippincott, CEO

Joaquin is a 20+ year technology veteran helping to lead businesses in the move to the Cloud. He frequently speaks on panels about the future of tech ranging from IoT and Machine Learning to the latest innovation in the entertainment industry.  He has helped to modernize software for industry leaders like Sony, Daimler, Intel, the Golden Globes, Siemens Wind Power, ABC, NBC, DC Comics, Warner Brothers & the Linux Foundation.

As the CEO and Founder of Metal Toad, an AWS Advanced Consulting Partner, his primary job is to "get the right people in the room".  This one responsibility is cross-functional and includes both external business development functions as well as internal delegation and leadership development.

A UCLA alumni, he also serves in the community as a Board Member for the Los Angeles Area Chamber of Commerce, the Beverly Hills Chamber of Commerce, and Stand for Children Oregon - a public education political advocacy group. As an outspoken advocate for entry-level job creation in tech he helped found the non-profit, P4TH, an organization dedicated to increasing the number of entry-level jobs in the tech industry, and is in the process of organizing an Advisory Board for the Bixel Exchange, a Los Angeles non-profit that provides almost 200 tech internships every year.


Schedule a Free Consultation

Speak with our team to understand how Metal Toad can help you drive innovation, growth, and success.