by Ian Torrey

Development for today’s web can be a tricky landscape to navigate. When translating visual and interactive design models, there’s quite a bit to be decided with respect to where the display logic ends and the back-end truly begins. With more powerful, data-driven, front-end experiences possible, it has become ever more critical to map out how design will be architected to ensure a positive user experience.

Following are 4 key areas where development can make or break your web experience.

Performance

When building a truly interactive experience, every moving part needs to be mapped out with careful consideration to where, when and how. Where does the code that drives the component reside? Every HTTP request the page contributes to page performance. Within the experience, we can execute functions when the page is done loading or upon a specific event/request. Making everything accessible on page load can have the disastrous effect of scripts clobbering one another, loading out of sequence or, worse yet, failing. Finally, how do we bring data to the page and power interaction design efficiently? It’s exciting to see the evolution from previous front-end technology, where anything dynamic took place on a static request to a back-end system. The use of AJAX is now commonplace, blurring the line even more between front and back-end. With the advent of HTML5, we all look forward to this toolset to build even more powerful interfaces.

Here’s a terrific visualization of HTML5 elements and current support:

http://www.focus.com/images/view/11905/

Accessibility

Web accessibility refers to the inclusive practice of designing and building websites so as to make them available for people of all abilities and disabilities.

With the web reaching now most every corner of our social makeup, building sites that meet with accessibility standards is a must. Screen readers and end user customization (fonts, grey scale, image rendering) are common states of user interface every development effort needs to consider when planning the execution.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Google Accessibility Errors
Example of accessibility errors with Google.com

Scalability / Responsiveness

Over the last few years we’ve seen evolving standards for how to truly separate content from the underlying programming that manages layout. Developers have been focused on creating efficient methods for minimizing the number of elements (HTML & Graphical) required to render a design. Before the first page is written, development teams need to be thinking of extensibility. The reality of today’s web requires the ability for design to adapt, grow and accommodate. The efficiency of a well-architected site means this process becomes manageable from a time, cost and risk management perspective.

Closely related to scalability is the technical architecture of responsive design. From a technology perspective, responsive web can be described as an elegant integration of scalability, performance and accessibility. While browser support continues to grow for basic media queries, some additional support is still required to accommodate the vintage browsers of yesteryear.

As noted in earlier posts, with mobile devices outpacing traditional desktops as a means of accessing the web, responsive web is a requirement for planning any deployment.

Consolidation / Minification

Following up on performance, best practices dictate consolidation of CSS and JavaScript wherever possible, both in an effort to minimize the number of http requests as well as to ensure files don’t overwrite one another simply because of the order in which they are called. In addition, obfuscating scripts will help keep file size as small as possible. A major benefit is page speed, as well as overall performance through a reduction in both the amount of assets called from the server as well as the size of the files themselves. Being smart about the use of bandwidth results in happy end users.

Tools

Here are a few tools that will help diagnose and test these elements:

Performance:

Performance Tool
Example of a performance report from YSlow

Accessibility:

Consolidation / Minification: