Saturday, 21 January 2012 14:49

HTML5, CSS3, & You

Written by Matthew Coleman

Things you need to know about how the web is changing.

Intro

The web is an ever evolving technology that is essential for any business in today’s world. Even smaller businesses which have traditionally relied more on a local customer base, traditional forms of advertising, and word-of-mouth can now benefit greatly from making use of web technologies. I would argue that any business owner who wants their business to stay competitive must learn about and take advantage of new web services and online advertising and service platforms.

HTML5 and CSS3 are simply the latest and greatest forms of online technology that can improve your business’ exposure, efficiency, and online presence and capabilities. In this article I will discuss both technologies and point out reasons why you should use them for your business.

HTML5 & CSS3

Traditionally when one hears ‘web technology,’ it is natural to assume that this means a website. While it is true that HTML5 and CSS3 are tools which support websites, they can be considered to have many other capabilities as well, for both websites and web applications.

HTML5 means better web development (or how things work)

HTML5 is the latest revision of the Hypertext Markup Language which is used to structure web documents. It has many capabilities and is most well known today to allow websites to more easily display multimedia like audio and videos, provide a common, well-defined technology basis for complex web applications, and have the ability to render content for today’s low-power and small sized mobile phone and tablet devices.

CSS3 means better web design (or how things look)

CSS3 is the latest draft of Cascading Style Sheets, the most popular way websites are ‘styled,’ which includes things such as colorization, typography, layout, and other visual elements of a web page. Web designers are very excited about CSS3 because it greatly enhances a browser’s ability to stylize websites, including things such as rounded corners, drop shadows for elements and text, beautiful gradients, and other interesting things like element rotation.

HTML5, CSS3, and Your Business

HTML5 and CSS3, paired together with current back-end web technologies, are the future of web development. Web developers who are current on technologies (and worth your time) will be utilizing these technologies, and know how to use them in the most effect and most powerful ways. The following is a list of ways that HTML5 and CSS3 can help improve your web presence, and why you should consider upgrading your websites for 2012.

HTML5

HTML5 lets your website be highly interactive.

HTML5 allows you to implement interactive aspects of your website without the need for complicated technology setup or overhead.

For example, HTML5’s <canvas> element allows web designers to integrate animations within web applications which before was only possible using Flash. The <canvas> element has a ways to go before it’s ready for full-time use, but by allowing browsers to natively render different animations, it has the potential to be a huge cost and time saver for both businesses (in terms of development time vs. user experience) and users (in terms of load times and ease of access).

HTML5 is good for SEO.

HTML5 includes new semantically important page structure capabilities. These allow you to structure your page to take advantage of future search technologies, letting customers find your business based on their needs.

Companies which fail to take advantage of HTML5 will most likely put themselves at a competitive disadvantage as search engines and web crawlers begin using HTML5 to index web services for their users.

HTML5 is great for hosting audio or video.

HTML5 includes the ability for browsers to directly serve video and audio to users. No longer will people be forced to use or download Flash or other browser plugins. These take a long time to load, are not easy to use, cost money to develop in, and provide content which isn’t search-engine friendly.

This is especially important if you want your website to serve content easily to mobile phones. Apple has long since expressed that Flash would not be natively served on iPhones or iPads, and Adobe recently announced it would be removing support for Flash for devices.

HTML5 can make your website universally viewable.

Not everyone has the same screen size or browser. Any web developer or designer worth their paycheck designs their websites and web applications keeping in mind that users’ viewing capabilities are variable. Tablets, mobile phones, and computers all access the internet regularly, and the market for devices of varying sizes and capabilities is sure to continue to expand.

HTML5 provides a general structure for designing websites that perform well on any hardware, which include different screen sizes and different rendering capabilities. HTML5 is what’s considered a “Write Once, Run Anywhere” (WORA) technology—saving developers time and ultimately businesses development costs.

HTML5 can make your website universally accessible.

Web developers and businesses which develop websites and web applications need to consider issues of accessibility—making sure that any user can use or view content on their website, regardless of their physical abilities. People with sight or hearing disabilities have a disadvantage in surfing the web when web services don’t serve content to them in a way that is accessible to them, which is also a legal consideration in some cases.

HTML5 allows accessibility standards to be met much more easily using improved semantics and more native capabilities. HTML5 allows browsers to extend content to people with disabilities in better and more efficient ways.

HTML5 is the future.

HTML5 has long been in the works and is generally designed for the purpose of unifying multiple branches of the previous HTML 4.0 specification (such as HTML 4.1 and XHTML). It greatly extends the abilities of web applications, is already largely supported by all major browsers, and generally degrades gracefully (older browsers can still use websites and web applications which use HTML5).

Need hard numbers? According to a study done by ABI , it is expected that by 2016 there will be 2.1 billion mobile devices in use which will use HTML5 browsers, including most-likely all of Apple’s products (Apple is a large advocate for HTML5 technology, see www.apple.com/html5 ).

Other companies are also investing heavily in HTML5, including Facebook and Google. The popular music provision service Pandora recently upgraded their website to take advantage of HTML5, which now loads much faster and is better able to track listening patterns. Amazon.com also recently released the Kindle Cloud Reader, entirely HTML5 based, which most noticeably allows iPhone/iPad users to buy content from Amazon directly.

HTML5 saves money.

I’ve already mentioned this a couple of times in a number of different sections of this article, but this is, of course, the bottom-line—HTML5 can save you developer costs now and in the future. By combining functionality of what used to be multiple different plug-ins and APIs (especially for mobile phones and tablets) and creating a web platform technology with universality in mind, businesses can see significant cost savings in developing web applications as products or for product support.

CSS3

CSS3 is useful for making websites which reflect current design trends.

CSS3 is a tool for web designers that saves an incredible amount of time producing web design products that used to require the use of multiple, time-consuming techniques. Attached to the development of CSS3 is the fact that browser vendors like Microsoft (Internet Explorer) and Mozilla (Firefox) are learning from the mistakes of the past and adopting new standards quickly. Many of CSS3's features and capabilities already work well in every major browser.

Not only do designers have a better tool for design with CSS3, but much of the work that designers were forced to do in order to make content universally viewable across browsers is no longer necessary.

CSS3 makes websites and making websites faster.

In this Smashing Magazine article author Trent Walton performs an interesting time and cost comparision between traditional CSS and CSS3, both in terms of development (how much it cost to develop a product) and user experience (how much it costs to deliver a product).

In both cases, CSS3 provided significantly reduced cost overhead, allowing the development and delivery of content to both be much quicker. CSS3 is an obvious choice for businesses wanting to save development costs while improving delivery of content from their websites and web applications.

Other really cool things

So we’ve talked about HTML5 and CSS3 a lot in this article, and hopefully you have a pretty good understanding of just how big of an affect these technologies are having in the web world and can potentially have on your business.

HTML5 and CSS3, being specifications which are still currently under development, also tend to have a lot of other things attached to them that are actually separate, but equally exciting developments. While these aren’t a part of HTML5 or CSS3 in particular, they will still play an important role in website development alongside them.

Below is a quick list of some of the other things you’ll want to keep your eye on for use in the future on your own website:

  • Geolocation; allowing you to use web applications on your website which interact with users’ physical locations.
  • Web Storage; like cookies, but longer lasting.
  • File Writer; File Storage, and File API; allowing your web users to interact with files much more easily.
  • new Javascript and JQuery functionalities

Conclusion

It is important for businesses to both take advantage of these technologies and to supplement or advance their current websites and web applications to take advantage of HTML5 and CSS3’s benefits. As the new year approaches, think about how your business can plan ahead and use these technologies both in developing new products and upgrading your current website, web services, and web applications.

If you would like to learn the specifics of HTML5 or CSS3, you can read their development specifications here and here, respectively.

For a bit of fun, here’s a cool pieriodic table of all elements (old and new) included in the HTML5 draft.

Thank you very much for reading, and please feel free to leave comments below!

Further Reading

  1. The HTML5 boom is coming. Fast. Gigaom . http://gigaom.com/2011/07/22/the-html5-boom-is-coming-fast/
  2. HTML5: A Look Behind the Technology Changing the Web, The Wall Street Journal http://online.wsj.com/article/SB10001424052970203537304577030033160849296.html
  3. Why HTML5 Makes Sense for Business, Metal Toad Media http://www.metaltoad.com/blog/why-html5-makes-sense-business
  4. 6 Reasons Why HTML5 is More than Just Another Web Toolkit, Software Quality Connection . http://www.softwarequalityconnection.com/2011/04/6-reasons-why-html5-is-more-than-just-another-web-toolkit/
  5. Why HTML5 is worth your time, O’Reilly radar . http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html
  6. Keen On...Why HTML5 Will Blow Up Your World (TCTV), TechCrunch . http://techcrunch.com/2011/11/16/keen-on-why-html5-will-blow-up-your-world-tctv
Share |
Last modified on Saturday, 21 January 2012 14:51

1214 Walnut Street
Murphysboro, IL 62966
www.splatteredink.com

 

click for map and directions

How can we help you?
Phone Number:
Your Email:
Your Name: