June 21, 2016
The front-end development practice at Valtech 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
This is the most basic and important pillar. Without Semantic HTML, every other pillar becomes either impossible or nearly impossible to achieve. So, in order to avoid this, we need to use the right tags for every type of content. A header will be a <header>. A menu will be a <nav>. Every page should have an H1 and the subsequent headings must follow the correct order (H2, H3, H4). Writing Semantic HTML also means we must properly separate responsibilities between HTML, CSS and JavaScript.
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.
An example for this progressive enhancement approach is using custom fonts. Font face is not supported by older browsers and can be disabled by users. To account for this, we add a base safe font and then test the content with this font. Next, we implement the custom font and test again. This approach should be replicated on JavaScript, SVG and some CSS features, like Flexbox.
4) Performance
The most frustrating thing for any user is having to wait a long time for a page’s content to load. Or, having to face a long delay every time they interact with a page. A front-end developer should write concise style rules and optimize JavaScript as much as possible. Next, remove unused code and edit base Keystone code instead of building on top of everything. Remember that, some CSS and JavaScript features perform better than others. Always try to find the best solution to each problem.
From a project level, make sure CSS and JavaScript are being minified and bundled. JavaScript should not block the rendering of content. Be careful when manipulating the DOM. When exporting assets, make sure they are optimized for web.
5) Accessibility
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.
6) SEO
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.
