The front-end development practice at Nonlinear is based on 6 pillars that define the quality of every project we work on. These pillars help us guarantee that the websites we build can be accessed by everyone, everywhere, and deliver a consistent experience.
Having said that, front-end quality is not only a front-end developer’s responsibility. Every one of the pillars presented here should be addressed from the early phases of a project and will involve a variety of professionals. For example, those in charge of the website’s content strategy, user experience, and visual design need to be compliant with these pillars’ requirements.
Without further ado, here are our 6 pillars:
1) Semantic HTML
2) Responsive Design
Mobile usage has skyrocketed in popularity over the past few years. In fact, it’s now easier to find mobile-only internet users, than it is to find desktop-only users. This means if we want everyone to be able to consume our website content, we need to build our sites to be compatible with mobile devices.
No matter the purpose of the website, if you want to make a website that works for the needs of users in 2016, you need to make it responsive. The cost of making a responsive website is not considerably larger than that of making a non-responsive one. If you’re working with an experienced front-end developer, you can be confident that they’ll be able to make everything responsive.
A quick tip: responsive design should not be tested by resizing the browser. Use the website with different devices and test it with a varied range of screen resolutions and input methods, like touch screens.
3) Progressive Enhancement
Every good front-end developer knows that complete control over the user environment is illusory. However, it’s still the front-end developer’s responsibility to make sure the website can be viewed and interacted with no matter the conditions.
A common issue developers face? People continuing to use older versions of browsers in which newer features aren’t supported. In cases like these, it is best practice to start with the simplest implementation in order to ensure the website works everywhere, and then to add richer features which will be accessible by the fortunate users who have upgraded their browsers.
Still think accessibility isn’t important? Keep in mind that there are laws in North America that enforce accessibility for certain types of websites. The accessibility criteria that should be met is described in the Web Content Accessibility Guidelines 2.0 (WCAG). The level of compliance that we use (as a base) is AA, which meets legislation in Canada and the US. It’s the responsibility of every front-end developer to read the WCAG and keep it in mind when building every page and component. Accessibility tests are run against every task sent to QA.
Every client likes to have their website ranked high in search engines. No matter how great a website is, if no one can find it, its existence is almost pointless. There a few guidelines and best practices to boost rankings that are solely impacted by HTML structure. A front-end developer needs to know these and ensure every website they build follows them. As is the case with the Accessibility pillar, SEO best practices will be tested in the QA phase.