Let's Have Fun: HTML5 & CSS3 Edition

Responsive Design
Category: 

Ask any web developer about HTML5 and CSS3 and they'll have an endless list of superlatives about how great they are. They're foundational tools for building websites. They make websites look good, they make websites responsive, they make websites interactive experiences, rather than long blocks of static text like a book or magazine. They define what the web is and can be. And, well, we're easily excited by those possibilities.

Day-in and Day-out, I work with HTML 5 and CSS3. Sure, there are other languages bundled in there that are nearly as important (jQuery is a lovely piece of genius, and PHP/MySQL have allowed us to create highly customizable and easily editable websites), but HTML5 and CSS 3 are the real jam. They're what, as a website visitor, you're most familiar with, whether you know it or not.

html-css

So, let's call them, collectively, 5/3. Got it? Okay.

So, 5/3 is great for developers, but did you know that it's also just as fun for designers? In a lot of ways, 5/3 holds as much promise and exciting features for designers, who are generally responsible for how a website looks and how a user (you) will interact with it, as it does for developers (who bring the designers work to life!). Let's take a look at some examples that showcase the sort of power we're working with.

CSS3D Clouds

Clouds

One of my favourite examples of powerful 5/3 is this cloudy demonstration created by Jaume Sanchez Elias. With the help of just a little bit of javascript, CSS3 fills your browser window with a customizable sky full of fluffy white clouds (or, if you're feeling like staying in, some storm clouds). It's all rendered in real time. In years past, similarly animated clouds (or something more practical) would have been a canned, pre-rendered animation, which reduces flexibility and, well, gets boring for anyone viewing the content more than once. The ability to render visual elements on the fly, with some randomness involved, makes for a more interesting experience all around.

Cool, but not so practical, right? That brings us to our next example.

A Responsive Timeline

Check out this Pen!

This fully-responsive timeline, built by Nils Wittler using only 5/3, is fun and funky, and works well on any device you view it with. Try it on your phone! What used to be an image embedded on a website (and invisible to search engines), is now a dynamic and fluid HTML design full of content and important keywords. This is a great example of how these advancements in 5/3 allow designers and developers to work better at creating solutions that are fun and benefit our work on a more practical level. For our own take on a responsive timeline, check out the City of Colwood's Historical Timeline.

And, I dare you not to be impressed by Disney and Google's Find your Way To Oz, a fully interactive adventure/website in your web browser. Go on, explore. It's driven, at its core, by advanced 5/3 mechanics.

More Cool Examples

If I keep going, you might never get back to work. So, let's move on.

But... the Drawbacks

As a developer, and on-the-side designer, I want to tell you that there are absolutely no drawbacks to 5/3 implementation. Nope. None. It's amazing. [insert stream of earlier-mentioned superlatives here] No, really, it is. But...

Yeah, there's a but, though it's not 5/3's fault. The biggest drawback is that, while supported by modern browsers (Chrome/Firefox/IE9+/Safari), 5/3 support in older browsers is hit or miss in older browsers, especially Internet Explorer 8-, which is still (unfortunately) in use on millions of computers around the world.

Another But...

Like all technology, the foundations of the web, and the people who are dedicated to expanding the boundaries and possibilities of its technologies, is about the future. The web is a fast moving space and we're just scratching the surface of its potential. We need to respect the ecosystem that we're releasing products into, and legacy browsers are a part of this, but it's also important to remember that to get anywhere important, you have to start moving in its direction.

So, there's another but...

In small bits and pieces, HTML and CSS3 are already proving their worth for even the simplest websites. Almost every website we build at Upanup Studios is mobile-friendly. To accomplish this, we use several 5/3 techniques and, with the use of something called a 'shiv' (it's not as dangerous as it sounds, I promise!), we're able to enable many of these features in the older browsers we just discussed.

Conclusion

The days of animated GIFs, crashing Shockwave plugins, Flash-based security concerns and bulky websites are coming to an end. Websites have always had visual flair, but, for the first time ever, the tools are embedded into the same languages that form the building blocks for spreading information that has made the Internet and the World Wide Web such a world-changing entity. The line between developer and designer continues to fade, and, in its spot, is a pretty fun, pretty interesting place where design and content can coexist peacefully.

Useful Resources

  • CSS-Tricks — Created and edited by Chris Coyier, CSS-Tricks is a one-stop-shop for the latest discussion of trends and advancements in web design and UI techniques/tools.
  • Unheap — This jQuery repository is a curated collection of the best jQuery plugins available and will help to take your 5/3 website to another realm of interactivity and visual yumminess.
  • CodePen — Also created by Chris Coyier, this community is dedicated to exploring and experimenting with all things possible with web interfaces. A wonderful source of inspiration.
Aidan Moher
By Aidan Moher
Web Designer
October 28th, 2013
Disclaimer: Our team members contribute to this blog in their own voices. As such, opinions expressed in this post are not necessarily shared by Upanup. If you are curious or concerned, please contact us.
Share: