Front-End Coding

/ Stuff Behind Your page /

When I was seven years old, I watched excavators and bulldozers break ground to the property adjoining ours, as contractors began the process of building a new home. They started by digging a large rectangular hole in the earth for the basement, which was followed by the pouring of the cement to lay the foundation.

Every week, after the builders left the site, I would sneak over to see what was new. What fascinated me the most was how the structure would change with each visit. After the foundation had hardened, the framing process began, one floor after the next including the roof. But then something radically shifted. All that wood framing and steel beams, all those wires, and every metal pipe began to disappear from view as the siding and windows were installed. When the home was finally completed, all I could see was the beautiful exterior.

HTML (The Structural Layer)

The process of building a home is analogous to developing a website. Every site - whether it's a single document or tens of thousands of pages - needs a solid foundation upon which to build. Just like an engineer carefully maps out and puts together a detailed set of plans, every site needs a well-thought out strategy, specifically the structure that can support every aspect of a website. In web language, it's the HTML (HyperText Markup Language) or the code behind every web document.

"Taking advantage of HTML5 and CSS3 improves your chances of reaching a much wider audience on a multitude of platforms and mobile devices."

What really got me seriously thinking about HTML code and its importance was Mr. Jeffrey Zeldman - the “godfather of web standards.” Upon hearing him present about the challenges of getting the standards bodies (currently W3C & WHATWG) and browsers vendors (currently Apple, Google, Microsoft, & Opera) coming together for the sole purpose of creating a recognizable web standard, it got me thinking less about how my pages appeared and more about how to write good, clean code - markup that was both logical and semantic in nature.

Thankfully we live in a world with standards. Take for example a brand new blender. When I bring it home, all I have to do is plug it in and press power. And it works! I don't have to think about it or reconfigure my electrical outlets. The builder of the home installed standardized outlets and the maker of the appliance made sure to abide by specific guidelines. As a result, our lives are made easier. And that's precisely why I've been a staunch believer in using web standards with all my work since 2000. It simply makes life much easier and my work more forward-compatible.

Since that first encounter, whenever I meet-up with Jeffrey, I am reminded of his original talk which called for young developers to rethink their craft and the many advantages which come from writing clean markup. As a result, every tag I embed in my code is written for a reason.

HTML5 (Enhanced Structure and Meaning)

These days, I write all my core code in HTML5 & CSS3, the latest evolution of HTML and CSS? Why? Because the benefits are enormous. With HTML5, I can better clarify the structure and meaning of my pages. With greater clarity comes the ability for web browsers, search engines, web applications, screen readers, and other web developers to make sense of what your web document are all about.

CSS3 (The Presentation Layer)

Sticking with the house metaphor (Um...starting to see a pattern here?), every building has a distinct appearance (e.g., style, colors, use of bricks, stone, or wood siding, etc.). The same applies with websites. Just like I use HTML to establish the structural layer, I use CSS to control the presentation layer - the visual piece you and I see when we load our favorite browser. CSS not only controls how our pages appear through the use of colors, typography, and an assortment of textures, but it gives developers greater control of where our elements are placed within our pages. And now that CSS3 is supported by all modern web browsers, I can add an even greater layer of richness to my pages.

You may wonder what the real benefits are when you take full advantage of CSS3. Let me briefly share some of the strongest reasons: 1) decrease in developing and maintaining pages keeps your costs down, 2) less code means your pages load faster, 3) proper use of CSS3 can boost your search engine rankings, 4) improve your sites ability to adapt across devices, 5) increased usability and accessibility especially for people with disabilities.

So, Why Should You Use HTML5 & CSS3 Now

With all this jargon about writing clean code, markup, semantics, you're probably asking yourself, "What does this mean to me in layman's terms?" Taking advantage of HTML5 and CSS3 now, helps improve your chances of reaching a much wider audience on a multitude of platforms and mobile devices. Just think about that for a moment. Instead of your site being developed primarily for desktop browsers, your site is optimized for basically anyone who has access to the web, whether they're using a desktop, a laptop, a tablet, a Kindle, a smart-phone and (this is important), any future device or technology that we haven't even thought of yet. You heard that right!

Developing your web pages with HTML5 markup and CSS3, using web standards, focuses more on the future than on re-mediating issues of the past.