Last night, I was fortunate enough to participate in a dry run of Jason Grigsby and Lyza Danger Gardner’s WebVisions New York mobile workshop- the somewhat awkwardly titled “Zombie Apocalypse of Devices Preparedness 101.” My first impression of the duo and the workshop was a bit unfair: Grigsby had lost his voice and was frustrated, which resulted in a brief moment of tension. This, paired with the hackneyed zombie theme, left me a bit wary; however, this didn’t last long. Grigsby and Gardner were thoroughly delightful and knowledgeable.
So the idea was this: the “zombies” (mobile devices) are “coming” (becoming absolutely ubiquitous) and if we want to survive as designers/developers, we need to be prepared. According to Gardner, there are 5.9 billion mobile subscriptions on the planet. That number will soon match the human population- currently 7 billion. Not surprisingly, there is also a direct correlation between the speed at which a site loads and the amount of money people are willing to spend at that site. This, of course, is of particular importance in the limited-bandwidth world of mobile. As Gardner and Grisby, both of Portland-based Cloud Four and contributors to the Future Friendly project, so eloquently put it, “We’ve gotten lazy [as developers] and the web has gotten fat.” So… time for boot camp!
We were provided with the Sigma Stronghold website- a heavy, non-semantic, error-ridden, mobile-unfriendly page dedicated to the patriots defending the world from zombies. Our first task was the clean it up and slim it down, which we did with the help of tools like ySlow, the W3C Validator, Smush.it, and SpriteMe. Of course, valid code and light images are important regardless of the screen, but Gardner and Grigsby have actually found that “invalid markup could make the mobile browser, or even the phone, crash”- yet another reason to validate. We also spoke a bit about minimizing HTTP requests by combining stylesheets and doing some nerdy stuff with the .htaccess file- not really my cup of tea, but all good stuff to think about.
The code was looking prettier and the page was loading quicker but it still looked awful on mobile devices. Of course, now was the time for the requisite foray into Responsive Web Design. We made the layout fluid and added some media query breakpoints, quickly transforming the page into something that, at least in theory, should function well on most types of screens. We discussed the limitations of responsive sites, namely the effect of loading assets but hiding them for mobile devices, and we chatted about possible alternatives.
We also talked about the different HTML5 tools at our disposal, including geolocation, ApplicationCache, and localStorage. Zombies, we were reminded, are like snowflakes: all are different, and therefore necessitate different methods of vanquishing. Some sites function well as responsive and device-agnostic, others need to be visited offline, some require a separate mobile site, and still others work best as native apps. We decided to take the path of creating a Zombie-Catching HTML5 mobile site using jQuery Mobile and package it up as a native app with the help of PhoneGap Build. The process, from empty jQuery Mobile page to touching and swiping a native Android app residing on an actual phone, was surprisingly quick and painless, thanks to Grigsby and Gardner’s vast experience and expertise (freshly consolidated in a new book).
Now is a particularly exciting, and overwhelming, time to be working with mobile. There are really phenomenal tools, frameworks, APIs, and, most importantly, people improving the environment for the rest of us. If you’re in NY over the next couple days, go to the New York Webvisions event and please check out Grigsby and Gardner’s workshop. I guarantee you will leave feeling better prepared for the “Zombie Apocalypse of Devices.” As far as fighting off actual zombies, I recommend carrying around a baseball bat.