What AT&T's New Data Plans Mean for the Mobile Web

In what is likely to begin an industry-wide clampdown, AT&T has ended its unlimited wireless data plans–a move that is making many iPhone and iPad owners wince. Users will now have to opt between basic and more robust data plans.  The most basic level (“DataPlus”) will allow users to consume or transfer 200MB of data at $15 per month, and the higher-bandwidth plan (“DataPro”) will provide 2GB of data at $25 per month (with the bill ratcheting up at $15/GB thereafter). According to an the public statement issued by AT&T, the DataPlus plan, for example, will provide users enough data to send and/or receive 1,000 emails (without attachments), view 400 Web pages, post 50 photos to social media sites, watch 20 minutes of live streaming video and more. AT&T claims that this data plan will be suitable for 65% of its customers on 3G. But that figure doesn’t bode well for 33% of Smartphone owners that exceed this 2MB monthly cap, and the yet more unfortunate 2% that use over 2GB of data per month. While the company contends that this move will result only in lower phone bills for the majority of its customers, there’s no pretending that it won’t also force subscribers to constantly and anxiously check their data usage and trim back on visits to high-bandwidth sites.

At DevelopmentNow, we have a longstanding policy of making every effort to reduce the effective size of the mobile sites we build, simply because smaller sites load faster and often provide a better user experience. With more than 6.4 million iPhone users in the U.S. alone–a number that will only rise now that the iPhone 4 is set to launch this month–and other telecoms likely to mimic AT&T to maximize profit margins, such efforts are more critical than ever.

Herein follow some of the best practices, tips and tricks we’ve developed and refined to deliver a great mobile experience in a highly optimized package.

  • Have a Mobilized Site. Seems simple, doesn’t it? But with smartphone display resolutions growing, you may be tempted to save time by serving your desktop site to mobile users and hoping they’ll just zoom in. Don’t succumb! Desktop sites provide severe usability problems for mobile users, and there’s no faster way to encourage viewers leave your site than by making it unusable or clunky. Moreover, a dedicated mobile site—with design focused on essential features, vertical content and properly thumb-nailed images—will make other optimization techniques even more effective.
  • Turn on Compression. The first action that any mobile site administrator should take is to ensure that their web server is set to compress its files for delivery (for example, using Apache’s mod_deflate). But there are other places to save space, too: free PHP and Java apps are available that can minify CSS and JS files, and PNGCRUSH remains a favorite tool for squeezing every last byte out of graphics.
  • Employ CSS3 Effects. Then again, if you can avoid using graphical sprites for your site’s “chrome,” you can save bandwidth both in filesize and HTTP requests. Apple’s Webkit software is at the core of both the iPhone’s Mobile Safari and the Android browser, making it the most widely used modern browser, and it supports a host of cutting-edge CSS3 properties that allow designers to utilize all the rounded corners, background gradients and drop shadows they want without a single image file.
  • Promote Caching. Browsers with full caches make for happy web servers, and you can help guarantee that they stay full. Immediately, this means taking actions like letting Google host jQuery for you. In the long run, this means digging deeper into HTTP–for example, using HTTP status codes like “304 Not Modified” and avoiding too many 30x redirects, or setting an explicit cache-control header.

While we can’t force AT&T to revoke their new data plan limitations, we can offer developers some great tips for overcoming, or at least circumventing, these hassling constraints. If this is the future of data plans to come, these pointers will help you prepare for the rationing.