Creating A Future-Forward Web

As developers, designers and information architects, it’s the duty of marketers to strive for future-forward strategy when creating websites. Responsibilities include everything from a website’s structure, presentation, behavior, responsive or adaptive attributes, and content management. This ensures that an investment in a website is sound by planning for ease-of-use for the user and ease-of-maintenance for the client. With technology changing and evolving every day, this can become a struggle with obstacles and pitfalls in the form of browser support and device display resolution, among others. By leveraging new technologies and having a masterful understanding of current standards, it is possible to develop a website to last for three to five years without major structural overhaul and heavy added cost to the client.

When developing a website, browser support is an ongoing battle. Some browsers will support specific functionality and markup syntax while other browsers don’t/won’t for some time, or need a helping hand by way of extra code snippets and/or vendor prefixes. The further back the intended browser support, the more difficult it is to ensure that the website will maintain the experience desired as it faces less and less support. Resources like caniuse.com play a crucial role in assembling a site’s functionality as they display current information regarding the level of support a specific function may have in various browsers as well as whether or not vendor prefixes may be needed in order for the function to perform. Looking to the future, and future-proofing a website, means to let go of the browsers of the past, make peace with the fact that a website will never look or behave exactly the same in any two browsers, and to strive to use code that will be universally embraced in the future but perhaps needs fallbacks just for now. It’s important, when defining the parameters of a website project, that a level of support is committed to. For example, at the time of writing, Evok supports Internet Explorer 8 and forward. With this condition defined, it allows for a certain level of functionality to be safely promised and delivered upon without having to struggle with the obstacles that can arise when having to create conditional fallbacks for legacy support.

As of June 2013, according to the Worldwide Web Consortium’s browser stats (http://www.w3schools.com/browsers/browsers_stats.asp) usage for Microsoft’s Internet Explorer (12.0%) and Apple’s Safari (3.9%) is dropping while Mozilla Firefox (28.9%) and Google Chrome (52.1%) are on the rise—comprising 81% of current web usership.

For a website’s foundational structure, employing HTML5 is not a suggestion – it’s mandatory. The benefits far outweigh the negatives in terms of user experience and the flow of information. At the very least, using HTML 5 allows for far better search ability as the elements and attributes are much more semantic and make logical sense in a structural layout. Some of the added functionality that comes with it, like client-side form validation, may not be supported in all browsers, but the overall structural integrity cannot be argued with. HTML 5 is the future of structural web mark-up and as time passes more of its abilities will become widely embraced by popular browsers. At the time of writing, various browsers offer support for different features of HTML5, but standardization is making progress.

The presentation stage of a website is essentially the look and feel. This is governed by cascading style sheets (CSS). CSS3, in many ways, will serve to be the death of the flash-heavy web experience. For what seems like ages, developers wrote in actionscript and applied flash functionality to a website to allow for interactive animation and behavior. While visually effective and entertaining, the practice was detrimental to search engine optimization as well as support for mobile devices. Flash is very resource-intensive, causing mobile devices to strain on load times and battery life to drain out (if it’s even supported at all). With the arrival of Cascading Style Sheets level 3 came various levels of animations and transitions that work with browsers to provide a smoother experience without the laborious processing of flash components, as well as eliminating the need for a great many images that would otherwise need to be generated via graphics software like Adobe Photoshop and Illustrator.

CSS, as it continues to evolve, will make sites more and more lightweight and energetic as the ability to draw objects, create complex gradients, animate, create transforms, and seemingly endless additional opportunities becomes more supported across the board for browsers both in the desktop and mobile experience.

Structurally via CSS, it’s important to build a website on a fluid grid system base versus having defined pixel parameters. This allows a site to flow and reshape naturally when devices of various viewport resolutions interact with the site. In present day, and especially in the coming days, devices of vast variety will be the dominant way to view information on the web and a fluid framework is the answer to serving up a website that is optimally viewed in those countless viewport sizes.

A fluid grid isn’t enough though. There come points as viewports grow smaller, that a website’s content no longer displays in a way that’s easy to read and interact with for the user—typically called ‘breakpoints.’ It’s at these break points where developers write media queries in the CSS to command site elements to take on different properties, allowing for the website to maintain the desired experience no matter how it’s being viewed. This is known as responsive design. It’s important to note that there is a difference between responsive and adaptive design for websites. Adaptive design is structuring the CSS media queries to fit specific devices whereas responsive design is more fluid and intended to accommodate all devices. Further to that point exists a practice called ‘Mobile First.’

Mobile First is a philosophy that encourages designers to layout the mobile iteration of a website first before fleshing out tablet and desktop versions. This method forces the designer to prioritize and arrange a website’s content in its simplest form. If the information architecture can be thought out to be sound in the most minimal environment of a mobile viewport size, than it will most assuredly be successful when echoed through in tablet and desktop iterations. So often designers execute the desktop version first and by the time mobile resolutions come into play, it becomes a struggle to make the site anywhere near as successful an experience. With over 1.2 billion worldwide users accessing web information via mobile, designers cannot afford to leave mobile as an after thought, and giving the mobile experience thought and strategy will lend itself to the longevity of a website.

Content Management is also key to future proofing a website. WordPress powers over 68 million websites worldwide, roughly 20% of all sites, and is available in over 40 different languages. It is a great example of a robust content management system (CMS) with great flexibility toward adding plugins and widgets for greater site functionality. Employing a CMS can greatly extend the life of a website as it allows for non-developers to make edits to their site content and structure without the need to maintain a current knowledge base on code and scripting languages. This can be extremely versatile depending on what’s agreed upon when building out the CMS integration for the website.

In closing, steps must be taken in order to assure the future proofing of a website. As technologies change and shift, websites fall prey to the disadvantages they can create, shortening their lifespan and weakening their impact on the user. With the proper approach to HTML5 markup, CSS presentation, and content management, a website can stay ahead of the curve—adapting to what the future may bring to the web environment. Websites can be much more lightweight and reach wider audiences on a growing number of employed devices without the need for additional mobile sites or countless fallbacks and conditional code comments.

Is your website future proof?

Sources:
Smashing #3: Redesign the Web
The Mobile Book
Worldwide Web Consortium – http://www.w3.org
HTML 5 Foundations – Matt West
CSS3 Foundations – Ian Lunn
HTML and CSS: Design and Build Websites – Jon Duckett

Resources:
http://caniuse.com/
http://nerdi.net/
http://www.w3schools.com/browsers/browsers_stats.asp