The Mobile Web & How To Accommodate: Introduction to HTML5, CSS3 & jQuery

Posted on Friday, February 10th, 2012

It’s a decade into the 21st century and this isn’t your grandfather’s Internet any more. We all know about Flash and how it can bring a website to life with its fun animations and intriguing interactivity, but as you may know, our web experience has been violently shoved into a mobile environment that doesn’t always accommodate conventional technologies.

Welcome HTML5, CSS3 and jQuery.

You may have heard these buzz words floating around the office either in meetings or in emails and thought to yourself, “…what the heck are they talking about!” Basically, these are the new and most commonly used front-end web technologies.

HTML5

Wikipedia describes HTML5 as…

A language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

HTML5 includes and has improved upon Offline Access, File Access, File Storage, Multimedia, Performance, Presentation and Graphics. To summarize, this new version of HTML will…

• Allow people to create a more application like experiences on the web.
• Have audio and video work natively inside of a user’s web browser (without the need for third-party plugins).
• Harness the power of a user’s GPU with animations, cool transitions and vector graphics.

CSS3

CSS stands for Cascading Style Sheet. These style sheets allow developers to style their HTML code in a very clear and precise manner. The biggest advantage when using CSS is that your mark-up remains clean and separate from the CSS code that styles your website. This is nothing new for web developers. It has been around since the late ’90s and is in its 3rd iteration.

What is so special about this 3rd version is the inclusion of transitions, animations, gradients, rounded corners, multiple backgrounds and much more. Basically, it has eliminated the need for some third-party plugins and graphics making website that use these techniques more lite weight and faster to download.

If you are keen and noticed that CSS3 has been lumped into the HTML5 specs above, you are not alone. Before everything fell into place, not that it has completely done so yet, people used to talk about HTML5, but where really referring to CSS3. Take Apple’s HTML5 demo for instance. They were trying to showcase the greatness of HTML5, but were using mostly CSS3 to do so.

All in all, HTML5 in combination with CSS3 brings a lot to the table when it comes to front-end web development.

jQuery

jQuery is a JavaScript framework developed in order to complete otherwise complex tasks quickly and easily. This technology is what gives modern website an app-like feel with its trendy animations and transitions.

What makes this framework so useful is that it is open-source, easy to use and with its never-ending library of resources and user developed plug-ins, finding that widget you need with a “sliding, collapsing, rotating, fading, pop-up thingy” is as easy as opening Google. And if for some reason you can’t find it, writing your own is supper easy.

The other great thing about jQuery is that it can be used as a fallback when HTML5 and CSS3 are not supported.

Compatibility

The biggest hold up for using these new technologies are the browser compatibility issues, mainly Internet Explorer (don’t get me started on this one!). Most modern browsers (Safari, Chrome, FireFox) have built in support for most of the new technology, and if for some reason they don’t, decent fallbacks are available. They just have to be considered in the development phase.

So many web users with up-to-date browsers are being forced to experience the web the way they have been for over 10 years because of the lowest common denominator. I say we give ’em what they deserve, a robust, fun, interactive experience and let those stuck in the ’90s have a decent fallback.

Conclusion

So what does this mean for mobile? Most if not all of these technologies work with mobile and therefore we can start accommodating the mobile web audience with these supper cool and productive web tools and techniques. What are we waiting for? Let’s not miss the boat like Microsoft keeps doing.