Front-end Web Development

A screenshot of HTML & CSS developer hand-written markup.

It sounds simple, and it is. As an HTML & CSS developer, I take great care to write clear, organized, streamlined HTML & CSS markup. To me, front-end markup isn’t an afterthought. It’s a vital step in crafting wonderful user experiences.

Interested in what I have to say about HTML & CSS? Let’s chat. Contact me

HTML5 Markup

I build websites in HTML5. I utilize many of the new spec’s additions and improvements over its predecessors, but I have a unique way of doing so. My markup depends heavily on classes to attach CSS rules to elements. So even though older versions of Internet Explorer may not natively support the <header> element, it can still style it by matching the <header>‘s class.

This technique allows me to provide greater backwards compatibility for older browsers, and fits neatly into my object oriented methodology.

But there are still some limitations to HTML5 currently imposed by older browsers. A forward-looking HTML5 website may feel different to Safari, Firefox & Chrome users than it would to IE users. I am sensitive to the tendencies of all browsers and always deliver a great experience to users, regardless of their browser.

Further reading on HTML

If you’d like more information about HTML5 and my methodologies & experience, please check out these blog posts on the subject.

Want to see what kind of HTML I can write for you & your project? Contact me

Object-oriented CSS3

My CSS follows an “object-oriented” approach, a method not often associated with front-end markup. But at the core of object-oriented programming lies the idea of “reduce and reuse,” or modularity. CSS can (and should!) be modular and reusable too.

Structuring my styles into reusable classes allows for lightweight, streamlined stylesheets, easily understood and extended by any other developer in the future.

What I mean by OOCSS

The principles of object-oriented programming, in a traditional sense, say to define your objects and methods independently of anything else and call them as necessary later. That way, they are defined once and used any number of times. The same principle can apply to CSS.

As an example, how many times do you think a typical CSS document lists a float rule? Nicole Sullivan did some research and found that, of the Alexa top 1000 websites, 56% had more than 10 float rules, 13% had more than 100 float rules, and the worst offender had 733 float rules (source).

Now imagine of we could define that float rule once and apply it any number of times, whenever necessary. We could save ourselves 10, 100, or 700+ lines of CSS markup.

A note on semantics

The principles of OOCSS, at face value, don’t play nice with those of semantic markup (or responsive web design, but that’s another issue altogether). After all, a CSS class called “float_left” is about the furthest thing from semantic.

I’m generally a fan of semantic markup and, in fact, the majority of my HTML & CSS are written that way. But, when it comes to things like grid systems and common classes, I basically look the other way. I think the benefit gained from reusing modular CSS classes far outweighs the potential pain in the butt Theoretical Redesign Future™.

Further reading on CSS

If you’d like to read more about object-oriented CSS3 and my techniques, please check out these blog posts.

Want to see what kind of CSS I can write for you & your project? Contact me