How to: Make sure your website’s code is compliant

Great design and relevant content comes together with proper coding

With great design, comes great interoperability
Online, every millisecond matters. Replacing bandwidth heavy elements like gradient backgrounds with CSS is the best way to trim your site’s load time.

Visual elements such as rounded corners and gradient backgrounds have traditionally been done with some creative image positioning, which is no longer necessary. The consortium responsible for publishing new CSS standards has worked on code alternatives to render effects like rounded corners and drop-down menus – image free.

Flash used to be the only way to create animations or image sliders, but those features have been largely replaced with Javascript. Internet video gave Flash a second-wind, but its absence on Apple devices and the adoption of HTML5 video will finally put the legacy plugin to rest.

Removing unnecessary graphics also makes maintenance easier: instead of using an image with static text for your forms, it’s more logical to create a button style so the effect can be reused with whatever text the button is supposed to display.

Clients and servers scratch each other’s back
Personal technology has advanced so far that developers will try to offload as much thinking as possible to a user’s Internet connected device. Caching your pages, pulling remote data and handling databases are all examples of backend processing and have to be coded in a server language like PHP.

Javascript is a client-side language that manipulates HTML documents after they have been sent to the user, which is perfect for presentational visuals like slideshows and Flash-like effects.

The browser wars are still raging on
Browser vendors adapt CSS and HTML standards at their own discretion, and sometimes add unique property prefixes which are likely to change.

Let’s say you wanted to add a slight tilt to one of your images, a few browsers would recognize transform: rotate(7.5deg), but you would need to add -webkit-transform: rotate(7.5deg) to include Chrome/Safari and -ms-transform: rotate(7.5deg) to register on IE9.

While competition is great for web innovation, developing advanced features that work on the most devices means more time programming (likely by trial-and-error) necessary cross-browser support.

The developer’s dilemma
After the design stage and before the content is loaded, the programmer has to consider the technical capabilities of the site before structuring any of the HTML.

Trying to reach the largest audience usually involves browser hacks and workarounds that add significant development time. But this is not the right strategy. Following the latest CSS and HTML standards means for a rapid deployment and reduced maintenance in the future.

The web is full of wheels
If you’re looking to cycle banners or make your site mobile-ready, it’s a safe bet that someone has already released a code library which will help accomplish this task for you. For example, jQuery is an extremely popular Javascript library with functions that manipulate your content and perform AJAX requests with less code, while adding reliability between browsers.

Responsive layout frameworks, such as Bootstrap and Foundation, are picking up traction because they come pre-loaded with common elements like buttons, form fields, and columns. Those same frameworks also throw in their own Javascript goodies like tooltips, popover content, tabbed areas, and fancy image carousels, all of which enhance your site without adding undue load-time burden or causing browser errors.

Finding the right balance for the right audience
HTML pages themselves are a few kilobytes, but add up all of the files that make up the design and the end result can be several megabytes. This comparison may seem negligible, but every byte matters in a world of mobile data caps and hourly billing.

A poorly coded site can be slow, difficult to maintain, hurt your ranking with search engines and leave your site vulnerable to exploits. A sloppily written WordPress theme can be obsolete in 6 months. Everything from responsive design to banner slideshows have to be reviewed often to stay up-to-date and to evaluate new alternates that are constantly being released.

Code is written by humans, so like us, it evolves all time. Make sure your site is keeping up.