As we look more towards responsive design as a solution to mobile websites one issue keeps coming up: page bloat.
The recent prevalence of broadband has meant that designers and developers don’t have to think about every kilobyte they attach to a page. Oversized background images and feature-laden javascript libraries/plugins get thrown into some sites without a second thought. That 400k of javascript makes the page look and feel great, but when it comes time to view it on a mobile device via EDGE or 3G the site just feels heavy (because it is!)
In a way we are returning to the days of dialup where every byte matters. Some people are projecting mobile web usage to surpass that of traditional PCs by 2015. I’ve been considering my own development practices and have come up with the following guidelines for myself:
1. Shim/Polyfill where you can: HTML5 is awesome, and it’s completely usable right now. No need for jQuery + jquery.validate.js (31kb+22kb) when you can use H5F (7kb) or something similar to take advantage of built-in validation methods. I also found this great library of validation patterns.
2. If you’re not taking advantage of an entire library, you don’t need it. jQuery is awesome; I love the ease of selectors and built in methods. I’m 100% guilty of loading it when all I need are 2 AJAX calls. I probably could have gotten by with something like miniajax which is simply a couple of predefined functions to make my life easier. Check out Microjs for a number of tiny hyper-specific javascript libraries.
3. If it can happen server-side, it probably should. I think this is fairly self-explanatory. There have been a couple of instances where I’ve found myself debating randomly ordering elements via javascript rather than as they come out of database via PHP/ColdFusion. The less work I ask the user’s browser to do, the better.
4. Take full advantage of HTML5 boilerplate. Did you know that HTML5 Boilerplate has a built in script to minify and compress Javascript/CSS? It actually does quite a bit more than that like remove color profile information from JPGs… I need to take better advantage of this stuff!