standards.soak.co.uk Open in urlscan Pro
2606:4700:3034::ac43:8e40  Public Scan

Form analysis
0 forms found in the DOM

Text Content

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


TABLE OF CONTENTS

BROWSER SUPPORT

 * Current Support
 * Desktop
 * Mobile
 * How this Applies

RESPONSIVE DESIGN

 * View Sizes

EMAILS

 * Transactional
 * Desktop
 * Web
 * Marketing

ACCESSIBILITY

 * WCAG Validation
 * How this Applies

PERFORMANCE

 * Search Engine Optimisation
 * Page Speed

© SOAK Digital Ltd 2024