Building a website in today’s environment is increasingly becoming a more complex task to undertake. From more complex business requirements, to back-end process flows, to third party integration – not to mention increased user expectations or social media considerations. However, given my background as a front-end developer I am more interested in the rise of more multifaceted and stylized user interfaces.

To illustrate how far we have come see the evolution of Microsoft.com from:

3 February, 1999

(Source Archive.org – http://web.archive.org/web/19990203104923/http://www.microsoft.com/)

To today

(Source – http://www.microsoft.com)

As you can see today’s websites have more stylised interfaces with complex animations and user interactions. After seeing this evolution it is important to understand what the role of a front-end developer is in the website build process. A front-end developer is responsible for taking the designers concept and making it a living and breathing website primarily using three different technologies: HTML, CSS, JavaScript. While doing this they have to take into account where the data is coming from and how is it going to be output to the screen for the browser to render. The output to the screen is where a web interface becomes complicated as a front-end developer has to consider a number of unknowns of the user’s computer setup including:

1. Web browser
2. Operating system
3. Does the user have JavaScript enabled?
4. Does the user have images turned on?
5. Users text size

Supported web browsers

A typical browser support list looks something like this:

1. Internet Explorer 8.0.x
2. Internet Explorer 7.x
3. Internet Explorer 6.x
4. Firefox 3.0.x
5. Firefox 3.5.x
6. Safari 4.x
7. Opera 10.x

Note, that this does not include beta versions, mobile browsers, web crawlers or screen readers.

Supported operating systems

Typically there are 4 versions of operating systems that need to be considered in today’s market, including:

1. Windows XP
2. Windows Vista
3. Windows 7
4. Mac OS X 10.6

This does not include more obscure operating systems like Linux or Solaris or older versions of Windows or Mac.

JavaScript and images

A web user has control in their browser to turn on or off both images and JavaScript. Therefore, a front-end developer has to ensure the website is readable and usable with either of these possibilities disabled.

Textsize

A front-end developer has to be aware that a user can increase and decrease the default text size in their browser and therefore has to provide a layout that does not break with all sensible variations.

The Complication Matrix

See a matrix below of all the possible combinations outlined above:

Browsers: 7
x 4 Operating Systems
x 2 JavaScript (on/off)
x 2 Images (on/off)
x 3 Textsize

——

336 possibilities

Wow, that is a lot of different possibilities. How does a front-end developer get around this? There are two development approaches: graceful degradation or progressive enhancement.

Graceful degradation

Graceful degradation means providing a good level of functionality to the supported web browsers, while making sure older browsers still have a usable website with all the essential functionality. The website may not look the same in unsupported web browsers, but it will be usable.

Progressive enhancement

Progressive enhancement is a similar concept to graceful degradation but the other way around. The website would establish a base-level of user experience that all browsers will be able to provide. More advanced functionality would then be automatically available for the supported browsers who can use it.

By using either graceful degradation or progressive enhancement a front-end developer is trying to provide a website that is functional to for every user.  By doing so a front-end developer does not have to climb Mt Everest to overcome to limitless possible combinations of a user’s computer they just have to be aware of how to compensate for it.

Thanks to our image source (top right corner): WebAppers