My web development strategy for 2012

How I plan to approach web development for the next year

How I used to develop websites

Back in the desktop-only days, I built websites to XHTML standards, used a reset.css stylesheet and normally this ensured that most browsers rendered the site as intended. Then I would look at the odd cases (IE usually :). Then I would add in either an IE-specific stylesheet to override certain buggy styles, or I would use CSS hacks (yes I did just admit to it). This is what I consider to be a top-down approach, where I build for the well-behaved browsers and then "patch" for the broken ones.

Whats changed?

Mobile. With the adoption of mobile devices comes a plethora of different target browser configurations - smartphones, tablets, small hi-res screens, small low-res screens, touch-screen, non-touch screen, landscape/portrait layouts, pinch/zoom, stupendously hi-resolution widescreen desktop monitors.

Very quickly I learned that my top-down, graceful degradation approach was going to cost me a lot of stress and time to get the same site working on all these new devices.

I am not prepared to only target a few of them - thats unprofessional. Websites should just work in my opinion. Creating and maintaining more than one website, to display the same content on different groups of devices, just isn't an acceptable solution, either professionally or commercially.

Time for a new way of thinking..

The new strategy

Bottom-up. Progressive enhancement. Feature detection. Responsive, adaptive layouts. Build for the lowest feature set first (typically older mobile devices), get it working, then feature-detect and progressively enhance for browsers that support features like CSS3 media queries, JavaScript, HTML5 GeoLocation, Touch-Screen etc etc.

With this approach to web development, and creating sites that are more responsive and adaptive, differences in browsers should be handled intelligently and future browser release should produce less inconsistencies and bugs with a site developed this way.

Square peg, round hole

I am moving away from the attitude of forcing a browser to display things a certain way, or in forcing it to do certain things. For example - why use an HTML5 polyfill for older Internet Explorer versions, or older feature phone browsers? They were built to work with HTML4 and XHTML, so bloody give them XHTML. With some simple server-side detection and combined with a templating system (think any good CMS), the correct page markup can be delivered to the browser.

Look how many browsers there are out there, its simply madness to build a DHTML <select> dropdown element replacement widget so that the control looks the same in all browsers - if a browser wants it displayed a certain way, then let it do it. Why protect users from the fact that browsers render things differently - should that not be a consideration when choosing a browser? Have we (web developers) not made a bed for ourselves?