Whether you’re on mobile or a desktop, nothing’s worse than gawky, jagged effects. And nothing beats a smooth animation, especially on mobile, where we’ve grown to expect second-rate speed & stripped-down interactions.
Today I’ll share my thoughts on how the web’s progressed over the last two years or so. We’re observing a lot of changes in how we interact with all things web, so let’s take a closer look at the shifting sands of code and graphics.
Because CSS animations perform better on smartphones and are easier to write than JS, our mobile browsing is filled with ‘em. You see them all over the mobile web, from that gently glowing button to Bootstrap’s Popovers, all because they’re easier to implement.
Furthermore, since CSS is more native and closer to the core code of web browsers — specifically webkit browsers like Safari & Chrome — the animations are buttery smooth compared to the old JS animations.
While there’s plenty to be said about JS’s advantages and CSS’s downfalls (and when one is a better choice for a task than another), I still say that CSS is the way of the future. CSS allows us to be more expressive with the designs we make and subtly draw the user’s attention to animations that prompt those visceral microinteractions. And those visceral microinteractions are becoming so key to the emotional design & storytelling, which are now expectations for a great site.
With the new doors HTML5 is opening, we’ve only begun to scratch the surface of what these new features can do. If “limitless” sounds hyperbolic, just take a peek at Chrome Experiments — especially those with WebGL & WebRTC. As people are joining CSS3’s power with HTML5’s, we’re starting to see cooler and cooler sites that can really engage the user, like Apple’s Mac Pro product page and Google’s Zeitgeist.
Though formatting a page with new tags doesn’t mean radical change, the HTML5 standard pushes the web ahead as a whole. For instance, form field validation is now built in, instead of writing each from scratch with JS. The Fuelly example below shows form field validation & placeholder text in action, both on a desktop and on mobile.
One prevalent HTML5 feature is the geolocation API, which offers context awareness. Sites are definitely leveraging that ability to provide local search results and make the user’s experience more efficient, like Yahoo! does.
Another great thing about HTML5 is local storage, which is essentially the next stage in the evolution of cookies during your mobile web browsing. Your phone’s load time & other performance is maximized (& your smartphone’s acting pretty smart!). Take, for instance, autosaving website forms, which is especially useful when you’re writing a long comment or filling out an extensive form.
Scalable vector graphics (SVGs) are on the rise, and they hold lots of promise for the future. If you haven’t seen Polygon’s PS4 Review yet, it’s a site to behold on both mobile and desktop with its graceful and engaging use of SVGs.
So why are SVGs so great? Well, they support transparency and the file size is often much smaller than a PNG or GIF, both of which are made up of pixels instead of vectors. Moreover, you can resize an SVG to any size, and the file size doesn’t change. SVGs look so good that there’s only one graphic to load for all devices. How cool is that?
Well, it’s particularly cool when filling a background with a huge, simple graphic (not photos — best to avoid trying to get this to work with SVG. It’s just not practical), an SVG is the way to go. In the PS4 review, SVGs are perfect to animate the simple line drawings while minimizing the page weight. Other examples, like the Sass glasses, show how intricate an SVG can be (at 200% zoom on a desktop browser, and on an iPhone).
Usually an image (like the PS4 line drawing) is just a picture on the page. But with SVG, it can be either a single picture element, or a series of XML tags similar to HTML markup — and you can change the tags in real time using JS. And this is exactly what Polygon did, changing length of lines properties in real time. Without a SVG, you’d have to load a series of PNGs and animated GIFs, which would make for an incredibly heavy page.
What’s holding us back from all-out SVG? Pre-IE9. Older IE versions require a shim to support it, which means extra JS (which means complicating the code and weighing down the site). Most importantly, it means more time spent testing on an older, outdated browser.
Right now, HTML5 is still coming into its own. We’re in the stage of evolution where every feature is taken advantage of in any way possible, and we’re trying to do it all using modern browser techniques. These day’s we’re seeing everything from SVGs to the video tag, from local storage to WebGL — plus other browser-specific features, such as notifications and packaged apps.
As more of these technologies move forward and mature, I think we’ll see each feature used for a specific task, and our toolkit as creators will have evolved even further.