Standards Guide.
Version 2
Browser Support
Current Support
Our level of browser support is regularly updated to reflect the market share of web browsers.
We support the following 'evergreen' browsers which allows us to take advatnage of the latest web Standards, optimising for performance, accessibility, and battery life. If there is a requirement to support 'legacy' browsers such as Internet Explorer 11 this must be agreed as a separate deliverable within the Statement of Work.
Desktop
- Chrome
(Latest Stock Browser) - FireFox
(Latest Stock Browser)
- Safari
(Latest Stock Browser) - Microsoft Edge
(Chromium)
Mobile
- iOS Safari
(Latest Stock Browser) - Android Chrome
(Latest Stock Browser)
How this Applies
Use HTML5 and CSS3 in a progressive manner.
SOAK will develop to the minimum functionality supported by the list of browsers above. Tests will be ran against only those browsers specified (unless others are included within the Statement of Work).
In some cases we may use APIs / properties that are not supported by all of the browsers (as each has its own release cycle), however SOAK will implement patches (known as polyfills) to ensure cross-browser compatability. Using feature detection it is also possible to take advatnage of newer style properties while falling back to a useable default, known as 'progressive enhancement'.
Responsive Design
View Sizes
Responsive Design allows a layout and the content within to adapt to different screen widths, device types and resolutions.
We generally design to the following width breakpoints:
- 375px
- 768px
- 1024px
- 1440px
Please note that designs are made on a static art-board, browsers are fluid depending on the window width. SOAK will adapt the layout where appropriate in the intermediate widths to ensure the best possible arrangement of content for readability and navigation.
Emails
Transactional
Transactional emails are those sent out by systems in response to key events, for example when triggering a password reset or placing an order.
Due to the fractured levels of support by email clients, SOAK will use the default output from the chosen software and where possible apply light branding such as your logo / brand colour. Such emails will use tabular layouts as these have the widest support.
SOAK will ensure that these emails are supported within the following common clients:
Desktop
- Apple Mail
(Latest Stock Browser) - Microsoft Outlook
(Latest Stock Browser) - Windows 10 Mail
Web
- Gmail
- Outlook
- Yahoo!
Please note that designs are made on a static art-board, browsers are fluid depending on the window width. SOAK will adapt the layout where appropriate in the intermediate widths to ensure the best possible arrangement of content for readability and navigation.
Marketing
Marketing emails to be used within a campaign, typically requiring bespoke templates.
Due to the range of services (Campaign Monitor, MailChimp etc) and the fractured feature support within email clients, the support requirements are to be determined as part of the key deliverables within the Statement of Work prior to the project commencing.
The templates will be tested against using the Litmus testing service to ensure that they render correctly across all agreed clients.
Accessibility
WCAG Validation
Adhere to WCAG 2.1 Level AA guidelines where feasible. Many tools exist for checking varies areas of site accessibility. We aim to provide a solid foundation of accessibility along the following lines:
- Use valid HTML and CSS, W3C technologies and guidelines
- Ensure top-level navigation elements and content links are clear and accessible by the keyboard
- Provide a full site map
- Ensure fonts are scalable from the browser
- Do not rely on small hit areas for navigation
- Do not rely on colour alone to indicate choice / state
- Respect user motion settings to disable animations / transitions
How this Applies
Ensure websites are accessible to their intended audience.
Beyond the basic rules outline above, site accessibility should be evaluated on a per-site basis. Javascript heavy sites will inevitably be less accessible than a plain HTML page, but we aim to add any reasonable features that will improve the user experience of all visitors.
Accessibility does not only relate to disabled web users. Visitors on mobile devices have accessibility requirements that are different to their desktop counterparts, but these are often subtle such as increasing link target areas, ensuring form controls are compatible with their browser and keypad, etc. The best approach is a pragmatic one, to solve problems as they appear in user-acceptance testing.
Performance
Search Engine Optimisation
Correct use of semantic markup and logical heading and page structures can improve the search engine performance of web pages.
On-site SEO includes the following considerations:
- Provide full site maps
- Maintain a hierarchical URL structure
- Best Practice CSS and HTML to avoid bloated markup
- Unique H1 per page, other headings in consecutive order (H2, H3 etc)
- Reduce superfluous page markup and position relevant content at the top of the document
- Use of semantic HTML5 and heading elements to strengthen keyword use
- Ensure content is visible to search engines without resorting to black hat techniques
- Use of rel=nofollow around external hyperlinks
- Allowance for custom page meta data
- Consideration of domain and sub-domain names
- Use of structured data markup such as JSON+LD for common entities (article, event, product)
Page Speed
Page loading times are a key metric used by Search Engines, as well as providing a good user experience.
SOAK aim to produce pages that reach a minimum score of 90% on Google's Page Speed Insights tool, prior to third-party scripts and trackers being inserted at the User Acceptance Testing (UAT) stage.
To ensure that this target is met the following techniques will be used:
- Images will be sized appropriately and compressed
- Static files such as Javascript and CSS will be minified
- Large resources such as Youtube embeds will be lazy-loaded
- Render blocking scripts will be loaded asynchronously where possible
- Server configuration will be optimised with appropriate cache times and compression
- Code splitting to ensure only required files are loaded
© SOAK Digital Ltd 2023