Code conventions

One of our main goals is to be available to all users, regardless of where they are and how they want to consume our content. One important aspect of this is that all our services should be adapted for accessibility. All users should feel that the services are quick and easy to handle, even with a cheap mobile and a bad internet connection. Another equally important thing is that our services should work on future platforms, even if they have weaker hardware and less capable web browsers than the established platforms do.

Techniques

To develop web services that meet these demands, we use a number of well-known and proven web development techniques and methods. All our services should be implemented according to them. The goal of the techniques is to be able to use the latest web technology and still support less common web browsers and platforms.

Progressive Enhancement

All web services that we develop should be built on progressive enhancement. This is a layer-based technique where you focus on content and the core of the service. This core functionality should be built with a simple and stable base. It should be implemented with accessible, semantic HTML and basic CSS that works well and looks good in all browsers. This base can be extended with new functionality layers that enriches the user experience in the browsers that support them.

Follow web standards

Web services that we develop should be built to follow the standards for HTML, CSS and JavaScript. But this should not prevent us from using technology that not yet has gone through the standardization process. The important thing is to be future-proof and not to violate the established standards or risk violating aspects that will be standardized in the future. Techniques that are browser-specific, such as plugins, should be avoided.

A consequence of following standards is that we can’t make specialized solutions for broken web browsers that haven’t implemented these standards correctly. This is to avoid the administration of complex solutions to solve specific bugs in browsers that might no longer be used by any of our users.

Unobtrusive JavaScript

Unobtrusive JavaScript is an important part of progressive enhancement. Using this technique means that all services should work without the support of JavaScript. JavaScript can be added later to enrich the experience and create a more interactive environment.

The main reason for using unobtrusive JavaScript is not backward compatibility, accessibility or SEO, but to create future-proof services. If the services work without JavaScript, it will be much easier to make them support future devices, even if they turn out to have less memory and processing power than the devices used today. Unobtrusive JavaScript also open possibilities for using techniques like ”Cutting the mustard”, explained below.

Feature, Device & Browser detection

Feature detection means that appearance and functionality is adapted to what the web browser supports. Device and browser detection is a much more costly technology from a maintenance perspective, because the tests needs constant adjustments to take new browser versions and devices into consideration. Device and browser detection is more error prone than feature detection, because it’s difficult to determine which web browser is used, especially because browsers often masquerade as something else.

To be future-proof and reduce the burden of maintenance, all progressive enhancement in our services should be based on feature detection. In exceptional cases, device or browser detection can be used, if this is the only possibility. But the decision should be discussed, and the reason should be documented in detail.

Cutting the Mustard

Progressive enhancement and feature detection create amazing possibilities to give a perfectly custom-made experience for the web browser that the visitor is using. But to consider all combinations of possible functions provided by different browsers in different operating systems can get very complex. It is also expensive to develop and maintain.

One way to benefit from feature detection without running into this problem is to use the technique ”Cutting the mustard”. That means to define a minimal amount of JavaScript features that we think a web browser should support to be good enough (i.e. cutting the mustard). If a web browser doesn’t fulfil this level, we will treat it as if not supporting JavaScript at all. This often has positive effects for the user experience in these browsers, since their performance is generally quite poor. Cutting the mustard also gives the positive result that the browsers which actually passed the tests can use more advanced JavaScript functionality without having to be tested for each feature. It also makes it possible to use the more modern aspects of the JavaScript standard.

The ”Cutting the mustard” tests are run directly after the page is loaded. If they fail, the normal JavaScripts are not used, and the page is exchanged for a non JavaScript variant, as if JavaScript was turned off. When the browser in practice supports some JavaScript, this can be used to provide basic functions, for example image scaling. But this should be kept to a minimum if you want to get real benefits from this method.

Responsive Design

Responsive design is about presenting content adapted for the users’ devices and screen sizes, without having to develop different services for this. Responsive design is based on that all content should be available regardless of device and screen size. How the content should be presented can vary and should be tailored to make the best use of the user's particular screen size.

From a technical perspective, responsive design means that the images, typography and layout of the web page is changed to fit the user's screen size, using flexible images, elastic columns and media queries in CSS.

Mobile First

At SVT, we strive to develop our web sites mobile first. In practice this means that we start developing the site for the the narrowest screens first. This is the layout the user will se if no media queries are applied. We then scale up the layout using media queries on larger screens. From a design perspective, mobile first helps to focus on core values, and what is important to the user. The design shows what is central and relevant in the content, and presents it first.