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.
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.
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.).
- 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.
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.
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.
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.
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.