Front-end coding standards and best practices

Statistics

Everybody knows the expression Lies, damned lies, and statistics. Statistics used correctly can provide very good insight or direction of the web application you have made or are going to build.

User statistics

User statistics are a valuable source of data, which provides us the information on what devices, platforms and browsers they are using. As a primary source for information we will look at the data from our own projects. But very good secondary sources for localized data are also available online.

There are several global user statistics providers that let you look at different sets of data. Also take into account the methodology different statisctics providers use, ie.e what do they actually measure[2][3].

Source: StatCounter Global Stats - Browser Market Share NL

Browsers

(Web) Browsers is the term we use for the software client to roam the World Wide Web (WWW).

Desktop browsers

These browsers are dedicated builds for desktop operating systems. Below is the internal standards desktop browser set for front-end development (versions at time of last update of this document).

At the threshold of 2% marketshare we will re-evaluate the specific browser support.

Mobile browsers

When referring to mobile browsers, it is mostly those browsers that are used to visit the WWW on mobile phones. These are mainly the stock browsers that come with the platform that is the operating system of the phone. For Android this is mainly Chrome, older Android versions still run the Android Web browser (Google provides some data on global use of Android versions and device sizes) and for iOS it is the mobile version of Safari.

There is no official support set for mobile browsers. The browser a user utilises is closely tied to the platform and its version.

If we use the same methodology for a standard mobile browser set as we use for desktop browsers (and the stats provided by Statcounter). This would cover at least 90% of the users:

  • Chrome Google Chrome for Android (Android 4.0+)
  • Safari Safari for iPhone (iOS5+)
  • Android Android Web browser (Available until Android 4.1)
  • IE mobile IE mobile (Version 10+)

Email

Email is used as a way for the E-commerce platform to communicate system messages and to engage in a dialog with users, for example through a contact form. It is also a prime marketing tool for clients to communicate and promote their services and products.

Email clients

Email client is the term for the application that is used to send, receive and manage emails. Email clients are broadly divided in three groups, desktop, mobile and web clients. The popularity and statistics between these groups can be viewed at Campaign Monitor, Email Client Popularity and an up-to-date overview of the most popular Email clients, Litmus, Email client Market Share.

At the moment in general and for front-end development specifically, there is no standard email client set which is the default development and test set.

As a working set, you can use the email clients below, if they are provided by an email testing service available to you, or you have access to the different email clients in test environments or by test accounts.

Desktop email clients

Desktop email clients are still commonly used (Only second in popularity to mobile email clients Email marketing trends), even more in a business environment. The most popular email desktop clients:

Mobile email clients

Mobile email clients are the most popular way to read emails, so when designing and coding emails this group of email clients should also be taken into account.
The most popular mobile devices being used to read email:

(No statistic data is available about specific mobile email client applications being used on the different devices and platforms)

Web email clients

Web email clients are the applications that run in a web browser. The usage of web email clients and certain ones can differ geographically (For example the email provider landscape in Asia and Russia is vastly different), but the most commonly used web email clients in the international English speaking world are:

Testing

Thorough testing your web application should be an integral part of the development process. Testing in the context of front-end development is mostly about interface consistency, functionality and behaviour, and performance.

Interface consistency

Across browsers, platforms and devices we strive to deliver a consistent user experience as it comes to the design and interaction.

Functionality and behaviour

Functionality and behaviour testing.

Performance

Interface performance testing. Some tools to test the performance of the web application can be found in the resource section.

Email

Email testing is mostly about the consistency of the design and this can only be done by sending the actual email to the target set of email clients and checking it visually. There are commercial online test tools that do this for you in the resources section.

Appendix References and Resources

References

Resources

  • Testing performance of your web application install the YSlow and Pagespeed extensions in your browser. You can also do some performance testing online at WebPageTest and the online version of PageSpeed.
  • The HTTP Archive has all kinds of interesting statistics about how the Web is built and keeps track of them.
  • Modern.ie is a website by Microsoft dedicated to developing and testing applications cross-browser
    Modern.ie
  • Litmus, Litmus Email Testing and Campaign Monitor, Inbox Preview, both have tools to test send your emails to various email clients and from which you can view the results. Email on Acid is a dedicated service for testing and email analytics.
  • Detect your current Useragent, Useragent detection as used by Statcounter to build their statistics database.