HTML5, CSS3, WordPress and Embracing the Responsive Web Design

Ironwulf En Route 2012 Responsive Design
Ironwulf En Route 2012 Responsive Design
Ironwulf En Route 2012 Responsive Design

I’ve been out of the loop from the Web Design Industry for a few years now. Prior to my photography and blogging, I was busy working as a web and graphic designer . If you followed Ironwulf.net En Route in its early years, all of the template designs were done by me from the ground up. The earlier versions even got local recognition as one of the Best Designed Filipino Blog in 2007 and internationally as part of the 45 Beautiful and Creative WordPress designs from SixRevisions in 2008. But changes in technology have transformed the landscape of Web Design, now we are not only designing for native desktop browsers but also multiple platforms like mobile devices or flat screen TVs to try to make them compatible. Gone are the days when our only worry is to make our designs look consistent in different browsers.

Keeping Up to Date

So I decided it was time to catch-up with what’s new. My site Ironwulf En Route has seen incremental design changes but the back-end still uses the old WordPress format with some updates to the code. And since WordPress 3.2 rolled out their Twenty Eleven Theme, they have improved support for HTML5 so I looked into learning that and boy I was a little overwhelmed. Little by little discovering the new Syntax used on the code and even CSS3. And don’t get me started with LESS/SASS which are CSS processors said to make life easier for developers which I have yet to delve into.

WordPress Frameworks

Taking it one step at a time, I learned about Boilerplate and Twitter’s Bootstrap. Both are powerful web development tools that serves as a base on starting a project. The builds contain the necessary files like CSS, Javascript etc to immediately start on developing websites. But since I was developing for WordPress, I looked for several base frameworks to work with which uses either one of the tools mentioned above. Here are some I found very useful. To work on them, one has to have knowledge of HTML and CSS (and some with LESS/SASS).

HTML5 the Future of Web

More than Responsive Web Design

The most obvious benefit on working with HTML5 and CSS3 is its fluid and responsive design that adapts to different resolutions. Now I found this cost effective for companies looking into developing dedicated Apps for different devices. And with Adobe Flash virtually dead, HTML5 is there to take its place for rich interactive sites.

Aside from the aesthetics, it’s under the hood that’s more important. While I started writing organized code in HTML4 where even if you strip down the CSS, all the content is in order, HTML5 brings this to another level with much improved HTML5 semantic elements. An easy example is that we can lessen the use of <div>s and can now use <header>,
<article>,  <footer>, <figure>and even media tags like<videos>, <audio> and <canvass>.

Inspiration

I don’t want to sound like an expert as I’m also still skimming the surface here. But I could already see the possibilities of its use especially for dedicated mobile Apps. If you do decide to delve into this format, check out these sites that showcase HTML5 and some beautiful responsive web designs.

What ya think?