Recently I (Tim, front-end wizard) had the joy of creating our mobile website. It’s definitely a work in progress, but we are all proud of it. I want to start off by giving you a few insights into what makes our mobile website beautiful.
- Total Images: 3 files for 28kb
- Total JS Files: 15 files (11 if you don’t include all our analytics) for 140kb
- Total HTML Files: 1 for 725b
- Total Stylesheets: 2 for 3.67kb
Grand Total: 32 Requests for 180kb and onload hitting in 1.04s
That’s really not too bad when compared with most mainstream mobile websites. To give you an idea.*
- Papa John’s Online Order: 10 requests for 152kb
- Mobile Facebook: 10 requests for 197kb
- Mobile Ebay: 22 requests for 267kb
- Mobile Youtube: 11 requests for 290kb
- Mobile Amazon: 8 requests for 81kb
- Mobile Cnet: 66 requests for 489kb
- Mobile CNN: 28 requests for 385kb
- Mobile Google Search: 20 requests for 716kb
- Sencha Touch Kitchen Sink: 21 requests for 818kb
- jQuery Mobile Documentation: 11 requests for 277kb
CSS3
You should be utilizing as much CSS3 as possible. With mobile you don’t have to worry about non-standard browsers because nearly all smart phones support Webkit and thus CSS3 and HTML5. In our application, the only images used were for the logo, sprites (little icons), and a waiting spinner. The rest of it was done using border-radius, background gradients, box shadows, and CSS sprites.
The Framework
Our framework is all custom-coded and uses require.js with backbone.js, underscore.js, and jQuery. I eventually have plans to swap the jQuery with Zepto to give us even greater efficiency. There are many pre-built frameworks that exist out there, but I will never again use any of them. They all have several problems in common.
- You’re only going to be using about 1/3 of what the framework has to offer, so the rest of that is just bloating your mobile website.
- Once you deviate from their kitchen sink examples and try to customize something, the entire application is going to suffer and degrade.
- It’s extremely difficult to debug those frameworks. Ever try debugging Sencha Touch? Good luck!
Conclusion
Getting a great mobile website isn’t done overnight. Lots of time and care has to be put into it. On the flip-side, it also doesn’t mean that you have to break the bank on it. By using standardized tools and the latest advancements in CSS3 and HTML5, having a mobile website that looks great and runs fast is completely attainable.
*Disclaimer: this data is for initial page loading only. Subsequent requests typically contain cached resources. Some of those sites are more “image” oriented. Some of the counted requests might also be ajax requests to retrieve data.
