The Definitive Guide to Create a Technically Perfect Website

Building a website involves more than just crafting an attractive design and adding content. It requires attention to detail and a focus on technical aspects to ensure a seamless user experience.

In this article, we’ll explore a guideline / checklist that covers essential elements for creating a technically perfect website. By following these guidelines, you can enhance the functionality, accessibility, and performance of your website. Be aware that their contents are not in order of relevance or importance.

Being an open and ongoing article, suggestions and contributions are always welcome! Don’t hesitate to drop and email.

Web performance optimization

“First and foremost, speed is more than a feature. Speed is the most important feature. If your application is slow, people won’t use it.” Fred Wilson

Remember, website perfection extends beyond technical aspects. It’s also crucial to consider factors such as usability, visual design, quality content, and meeting the specific needs and goals of the target audience.

“WPO is similar to SEO in that optimizing web performance drives more traffic to your web site. But WPO doesn’t stop there. WPO also improves the user experience, increases revenue, and reduces operating costs” Steve Souders

GOALS

(1) Best practices and techniques implemented to improve website performance and display content faster to the end-user, as well as save bandwidth and energy power: This goal emphasizes the importance of implementing industry best practices and techniques to enhance website performance. It aims to deliver content quickly to users, ensuring a smooth and efficient browsing experience. Additionally, it highlights the need to optimize resources to save bandwidth and reduce energy consumption, contributing to a more sustainable web.

(2) Optimized content efficiency / data delivery and improved server response time: This goal focuses on improving the efficiency of content delivery, ensuring that data is transmitted in an optimized manner. By optimizing content efficiency, such as compressing files and utilizing efficient protocols, you can reduce file sizes and enhance data transmission. Additionally, the goal of improving server response time underscores the importance of optimizing server configurations and reducing latency for faster website performance.

(3) Proper render blocking resources management (minification, deferring scripts, inlining, total HTTP requests): Efficiently managing render-blocking resources is essential for optimizing website performance. This goal encompasses techniques like minification, which reduces file sizes, and deferring scripts, which allows critical content to load before non-essential scripts. Inlining resources and managing total HTTP requests also contribute to improving the rendering process and overall performance.

(4) Balance between number-based metrics vs. user metrics and perceived performance: This goal highlights the need to strike a balance between objective number-based metrics, such as load time and page size, and user-centric metrics that reflect the perceived performance from the user’s perspective. It’s important to consider both quantitative data and qualitative factors, such as user experience, interactivity, and visual responsiveness, to ensure a holistic approach to web performance optimization.

CHECKLIST

(1) Enable compression / Gzip: Compressing resources helps reduce file sizes and speeds up data transfer.

(2) Render-blocking JS, defer parsing, asynchronous scripts, delayed script loading: Managing JavaScript execution to prevent it from blocking the rendering of the page is crucial for improving performance.

(3) Critical rendering path, fetching, parsing, and loading order of resources: Understanding how resources are fetched, parsed, and loaded is important for optimizing the critical rendering path and reducing page load time.

(4) Prioritize visible / above-the-fold content: By loading above-the-fold content first, you enhance perceived performance and user experience.

(5) Minify CSS and JavaScript: Minifying CSS and JavaScript files reduces their file size by removing unnecessary characters, improving loading speed.

(6) Use of CDN: Utilizing a content delivery network (CDN) helps deliver content from servers closer to the user, reducing latency and improving loading times.

(7) Cache layers (leverage browser caching, CDN, web server, and app server): Implementing caching mechanisms at different layers helps store and deliver resources more efficiently, reducing server load and improving performance.

(8) Fewer third-party plugins: Minimizing the number of third-party plugins reduces the potential for performance bottlenecks and conflicts.

(9) Expires or Cache-Control Header: Setting appropriate cache headers allows browsers to store and reuse cached resources, reducing the need for frequent requests.

(10) Optimized, compressed, and deferred media (image formats, sprite images, videos): Optimizing and compressing media files, along with techniques like lazy loading, enhances page load speed.

(11) Reduce DNS Lookups: Minimizing the number of DNS lookups reduces the time required to resolve domain names.

(12) Avoid filters: Filters, such as those used in CSS, can impact rendering performance and should be used sparingly.

(13) Progressive enhancement / graceful degradation: Implementing progressive enhancement ensures a baseline experience for all users, while graceful degradation allows the website to function well on older or less-capable browsers.

(14) Fewer Redirects: Reducing the number of redirects minimizes additional HTTP requests and improves loading times.

(15) Responsive images: Optimizing images for different devices and screen sizes, including scaling, appropriate formats, compression, and lazy/deferred loading, is crucial for responsive design and performance.

(16) No iframes: Avoiding iframes helps prevent additional HTTP requests and improves page loading speed.

(17) Inline scripts, styles, and images (SVG, Data URI): Inlining small scripts, styles, and images directly into the HTML reduces the need for separate HTTP requests.

(18) Stylesheets at Top / Scripts at Bottom: Placing stylesheets in the document head and scripts at the bottom of the page allows for progressive rendering and prevents render-blocking.

(19) No console logs or error messages: Removing unnecessary console logs and error messages reduces the overhead and potential performance impact.

(20) Works cross-browser: Ensuring compatibility and functionality across different browsers is essential for delivering a consistent experience to all users.

(21) Rendering performance: Optimizing rendering performance involves techniques like reducing layout recalculations, minimizing repaints, and using efficient CSS selectors.

(22) Conditional loading, Lazy loading: Loading resources conditionally or lazily can help reduce initial page load time and improve performance.

(23) HTTPS and HTTP/2: Implementing HTTPS for secure connections and utilizing HTTP/2 for faster and more efficient data transfer contribute to improved performance.

RELEVANT METRICS

(1) Page Load Time and Above The Fold Time: Page Load Time refers to the time it takes for a web page to fully load and become interactive. Above The Fold Time specifically measures the time it takes for the above-the-fold content (visible portion without scrolling) to load. These metrics are crucial for assessing the overall speed and responsiveness of your website.

(2) Total HTTP requests: The total number of HTTP requests made by a web page is a key metric for web performance optimization. Reducing the number of requests helps improve loading speed, as each request introduces latency. Optimizing resources and consolidating files (such as CSS and JavaScript) can help reduce the total number of HTTP requests.

(3) Overall asset count and weight: The count and weight of assets (HTML, CSS, JavaScript, images, etc.) on your web page affect its loading speed. Monitoring the total count and weight helps identify opportunities for optimization, such as minification, compression, or lazy loading, to reduce the overall payload and improve performance.

(4) Media count and weight (Images, Videos, Embeds, iFrames, Objects): Images, videos, embeds, iframes, and objects contribute significantly to page weight and loading time. Monitoring the count and weight of these media elements allows you to optimize them by using efficient formats, compression techniques, lazy loading, or content delivery networks (CDNs).

(5) Total domains: The number of domains referenced by your web page affects performance. Each domain introduces additional DNS lookups, connection overhead, and potential latency. Minimizing the number of domains can improve loading speed, although it’s important to balance this with other considerations, such as utilizing CDNs or third-party services efficiently.

(6) Total third-party dependencies: Third-party dependencies, such as analytics, retargeting, ads, social widgets, frameworks, libraries, plugins, and web services, can impact web performance. Each dependency adds additional HTTP requests and potential overhead. Managing and optimizing these dependencies is crucial for ensuring optimal performance while still delivering desired functionality.

Responsive Web Design (RWD) and Mobile Optimization

Responsive web design and mobile optimization are crucial considerations in today’s mobile-driven world. By implementing responsive design principles, adopting mobile optimization best practices, and prioritizing user experience, you can create a website that delights mobile users and ensures seamless functionality across devices.

Continuously test, optimize, and adapt your website to meet the ever-changing demands of mobile users. Embrace the power of responsive web design and mobile optimization to deliver exceptional experiences and drive the success of your online presence.

GOALS

(1) Consistent user experience across different app modules and widgets, regardless of the user’s screen size or features supported on their device: This goal emphasizes the importance of providing a consistent and seamless user experience across different modules and widgets within your application. Regardless of the user’s screen size or the capabilities of their device, it’s crucial to ensure that the user interface remains consistent, intuitive, and functional.

(2) Clear and uniformed website design principles, implementation, and appeal across devices: This goal focuses on maintaining design coherence and aesthetic appeal across different devices. By implementing clear and uniform design principles, you ensure that your website maintains its visual integrity and usability on various screen sizes and resolutions. It ensures that users can easily navigate and engage with your website, regardless of the device they’re using.

(3) Critical content and features accessible across different types of user input methods (e.g. click, swipe, pinch): This goal highlights the importance of making critical content and features accessible through different user input methods. Users interact with mobile devices in various ways, including tapping, swiping, pinching, and more. Ensuring that essential content and features can be accessed and utilized through different input methods enhances the overall user experience and usability of your website.

CHECKLIST

(1) Flexible Grid-based layout / Liquid UI: Using a flexible grid-based layout allows your website to adapt to different screen sizes and orientations. It ensures that your content flows smoothly and adjusts dynamically based on the available screen real estate.

(2) Flexible Media (Images, Videos, Embeds, iFrames, Objects): Optimizing media elements, such as images, videos, embeds, iFrames, and objects, for responsiveness ensures they adapt to various screen sizes. This can involve techniques like using responsive image solutions, flexible video embedding, and scaling or hiding non-essential media on smaller screens.

(3) Responsive images and media optimization: Implementing responsive images ensures that images are delivered in appropriate sizes based on the device’s capabilities, resulting in optimized loading times and bandwidth usage. Techniques like lazy loading and compressing media further enhance performance.

(4) Consistency through media queries / breakpoints across devices: Using media queries and breakpoints enables you to define specific styles and layout adjustments for different screen sizes or device breakpoints. This helps maintain design consistency and usability across various devices.

(5) Performance (speed, loading time, etc.): Optimizing performance is crucial for responsive and mobile-friendly websites. This includes considerations such as reducing file sizes, minimizing HTTP requests, leveraging caching mechanisms, and optimizing code to improve loading times and overall performance.

(6) Readability and responsive typography: Ensuring readability across different screen sizes involves employing responsive typography techniques. This includes using appropriate font sizes, line heights, and adjusting typography based on screen dimensions for optimal legibility.

(7) Conditional loading / Lazy loading: Conditional loading or lazy loading refers to selectively loading content, such as images or scripts, when they are needed. This helps improve initial page load times by deferring the loading of non-critical elements until they become visible or necessary.

(8) Progressive Enhancement / Graceful degradation: Implementing progressive enhancement and graceful degradation strategies ensures that your website functions across a wide range of devices and browsers. It involves providing a baseline experience for all users while enhancing the experience for those with more capable devices or browsers.

(9) Viewport Meta Tag and other <head> related information: The viewport meta tag is essential for controlling the layout and scaling of your web pages on mobile devices. Additionally, optimizing other <head> related information, such as meta tags for mobile search optimization, is important for mobile-friendly websites.

(10) Feature detection / UA sniffing: Feature detection helps identify the capabilities of a user’s device and allows you to provide appropriate experiences. User Agent (UA) sniffing can also be used to detect specific device characteristics or browser capabilities for targeted optimizations.

(11) Retina and Pixel-density: Accounting for high-resolution displays, like Retina displays, ensures that images and graphics appear crisp and clear on devices with higher pixel densities. Using appropriate image assets and techniques like CSS media queries can optimize the display for different devices.

(12) Proper user input: Consideration should be given to optimize user input methods, such as touchscreens or keyboards, to provide a seamless and intuitive experience across devices.

(13) Appropriate tap target size: Designing tap targets, like buttons or links, with an adequate size ensures they are easy to interact with on touch devices, reducing the chance of mis-taps and improving overall usability.

(14) RWD navigation patterns: Implementing responsive navigation patterns, such as hamburger menus, collapsible menus, or sticky navigation, allows for easy navigation on smaller screens without compromising usability.

(15) Works cross-browser: Ensuring your website functions consistently across different browsers is crucial for delivering a reliable experience. It involves testing and optimizing your design and code to work seamlessly on popular browsers and their different versions.

(16) Touch gesture support: Ensure that your website supports common touch gestures like swiping, pinching, and double-tapping, especially for interactive elements such as image galleries or sliders.

(17) Accessibility considerations: Implement accessibility best practices to make your website usable and accessible to users with disabilities. This includes providing proper semantic markup, keyboard navigation support, and alternative text for images.

(18) Testing on real devices: Perform thorough testing on a variety of real devices to ensure your website displays correctly and functions smoothly across different platforms, screen sizes, and browsers.

(19) Performance monitoring and optimization: Continuously monitor the performance of your website using tools like Google PageSpeed Insights or Lighthouse. Optimize your assets, reduce render-blocking resources, and utilize caching techniques to improve loading speed and overall performance.

(20) Mobile-friendly forms: Optimize form fields and input elements to be mobile-friendly, with appropriate input types, validation, and error messaging. Consider using techniques like form field autofill to enhance the user experience.

(21) Content hierarchy for small screens: Review and optimize the content hierarchy for smaller screens to ensure that the most important information is prioritized and easily accessible, even without extensive scrolling.

(22) Mobile SEO considerations: Follow mobile SEO best practices, including mobile-friendly URL structures, structured data markup, and optimized metadata, to improve your website’s visibility and search engine rankings on mobile devices.

(23) Cross-device testing: Test your website on various devices, including smartphones, tablets, and different operating systems, to ensure a consistent experience across different devices and screen sizes.

(24) User testing and feedback: Conduct user testing sessions or gather feedback from users on different devices to identify any usability issues or areas for improvement specific to mobile and responsive experiences.

(25) Continuous improvement and iteration: Responsive web design and mobile optimization are ongoing processes. Regularly analyze user behavior, collect data, and make iterative improvements to enhance the overall user experience and performance.

Markup / Metadata

GOALS

(1) Solid HTML’s sectioning model, appropriate use of its elements and their structural and semantic meanings: Utilize HTML sectioning elements (such as <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) appropriately to structure your content and convey its meaning to both users and search engines.

Use semantic HTML elements (e.g., <h1> – <h6>, <p>, <ul>, <ol>, <strong>, <em>) to provide proper meaning and structure to your content.

(2) Use of the most meaningful yet minimal markup required to present the styles and needed interaction: Use minimal markup necessary to achieve the desired styling and functionality. Avoid excessive nesting or unnecessary elements that could add complexity and hinder performance.

(3) Right information hierarchy of contents so users, browsers and search engines can more accurately understand and interact with it: Establish a clear and logical information hierarchy by properly organizing your content. Use appropriate heading levels (<h1> to <h6>) to indicate the importance and structure of the content.

Employ proper nesting and indentation to visually represent the hierarchy of content sections.

CHECKLIST

(1) Valid HTML Markup: Ensure your HTML markup follows the standards defined by the W3C and passes validation tests.

(2) Doctype, language and character encoding: Include a proper doctype declaration at the beginning of your HTML document.

Specify the language attribute (lang) to indicate the primary language of the content.

Set the appropriate character encoding (charset) to ensure proper rendering of special characters.

(3) Document elements and global attributes (head, title, lang, base, link, meta, style, translate): Use essential document elements such as <head>, <title>, <link>, <meta>, and <style> to define the structure and metadata of your webpage.

Utilize global attributes like translate to specify the translation behavior of elements.

(4) Standard Metadata (description, keywords/concepts, expires, generation, language, viewport, author, content-type, mobile-web-app, etc): Include standard metadata elements such as <meta name="description">, <meta name="keywords">, <meta http-equiv="expires">, <meta http-equiv="generation">, <meta name="viewport">, <meta name="author">, and <meta http-equiv="content-type"> to provide essential information about your webpage.

(5) Structured Metadata Markup and Microdata: Implement structured metadata markup using standards like Schema.org to provide additional context and meaning to your content.

(6) OpenGraph, Schema.org, Twitter Cards, Pinterest and Social integration: Utilize OpenGraph, Schema.org, Twitter Cards, Pinterest, and other social integration features to enhance how your website appears when shared on social media platforms.

(7) Images with captions, alt, width, height and src: Include appropriate attributes for images, such as alt for alternative text, width and height for specifying dimensions, and src for the image source.

Consider adding image captions for improved accessibility and user experience.

(8) Document structure / organization / cohesion: Ensure a well-structured and organized document hierarchy using semantic HTML elements to enhance accessibility and understanding.

(9) Readability, indentation, use of whitespace and comments: Maintain readable and well-indented code.

Utilize whitespace appropriately to enhance code readability.

Include comments to provide explanations or descriptions of code sections.

(10) Descriptive variable names and semantic naming conventions: Use descriptive variable names and adhere to semantic naming conventions to improve code clarity and maintainability.

(11) No div-itis, class-itis, span-mania, tag-soups: Use HTML elements appropriately and avoid excessive use of <div>, unnecessary classes, <span>, or unstructured markup.

(12) Favicon.ico at different sizes and cacheable: Include a favicon.ico file at different sizes to ensure proper display across devices and platforms.

Implement caching mechanisms for the favicon.ico file to improve performance and reduce server requests.

TIP

Isolate website contents and try to project mentally its markup and semantics. By considering content first, you are already getting yourself into a structural and semantic mindset.

Semantics / SEO

“Besides SEO, another benefit of semantic markup is that it provides the foundation for an Accessible site” Sarah Lewis

GOALS

(1) Proper information hierarchy of contents so users, browsers and search engines can more accurately understand and interact with it.

(2) Solid HTML’s sectioning model, appropriate use of its elements and their structural and semantic meanings.

(3) Best practices and techniques implemented in order to help Google and other crawlers to find, index, rank and display the web site and its contents.

CHECKLIST

(1) Meta-tags: Ensure that you have unique, accurate, and descriptive meta-tags for each page, including the title, description, keywords, expires, language, author, publisher, and other relevant metadata. These tags provide important information to search engines and users about your webpage’s content.

(2) Improved URL structure: Optimize your URLs by using hyphens, lowercase letters, and human-readable keywords. A well-structured URL helps search engines and users understand the page’s topic and improves accessibility.

(3) Performance and loading times: Pay attention to website performance and loading times. Optimize your code, leverage caching techniques, and minimize server response time to provide a fast and smooth user experience. Faster loading times contribute to better search engine rankings and user satisfaction.

(4) Images: Ensure that your images have descriptive filenames and include relevant “alt” attributes. This helps search engines understand the content of the images and improves accessibility for visually impaired users.

(5) Suitable anchor text: Use appropriate and descriptive anchor text for your hyperlinks. Clear and relevant anchor text provides additional context to search engines and improves the user experience.

(6) Canonicalization: Implement canonical tags to avoid duplicate content issues. Canonical tags help search engines understand the preferred version of a webpage when multiple versions exist.

(7) Structured Metadata Markup and Microdata: Utilize structured metadata markup and microdata to provide additional information about your content. This can include specifying the type of content (e.g., articles, products) and providing specific attributes related to that content.

(8) Social Meta Tags / Schema.org (itemscope, itemprop -name, description, image-): Implement social meta tags using Schema.org vocabulary to enhance the display of your web pages on social media platforms. This can improve click-through rates and visibility in social sharing.

(9) Social Meta Tags / Open Graph protocol (og:title, og:type, og:image, og:url, og:description, fb:admins, twitter:card ): Use Open Graph protocol tags to control how your web pages appear when shared on social media platforms like Facebook and Twitter. This allows you to customize the title, description, and images displayed in social media posts.

(10) RDFa, Microdata, and Microformat Data Sets: Consider implementing RDFa, microdata, or microformat data sets to provide structured data markup that can be understood by search engines. This can enhance search result listings and provide more meaningful information to users.

(11) Language declaration in the HTML element: Specify the language of your web page using the “lang” attribute in the HTML element. This helps search engines and screen readers understand the language of your content.

(12) Long Word Count: Ensure that your content has sufficient word count to provide comprehensive and informative information to users. Longer, high-quality content tends to perform better in search engine rankings.

(13) HTML5 Semantic Markup: Utilize HTML5 semantic elements such as <nav>, <section>, <footer>, and others to structure your content in a meaningful way. Semantic markup helps search engines and assistive technologies understand the structure and hierarchy of your content.

(14) HTML5 Semantic Headings: Use heading tags (e.g., <h1>, <h2>, <h3>) to emphasize the relevance and hierarchy of your content. Properly structured headings improve both user experience and search engine optimization.

(15) HTML Sitemap page: Create an HTML sitemap page that lists all the important pages on your website. This provides an easy-to-navigate overview of your website’s structure for users and search engines.

(16) XML Sitemap for search engine robots: Generate an XML sitemap and submit it to search engines. This helps search engine robots discover and index all the important pages on your website.

(17) Robots.txt / Restrict crawling: Use a robots.txt file to control search engine crawlers’ access to specific parts of your site. Implement exclusion standards like “nofollow” and “noindex” for pages you don’t want to be indexed. Specify the most relevant user agents to ensure proper crawling.

(18) Rel=”next” and rel=”prev” for pagination: Implement rel=”next” and rel=”prev” tags to indicate pagination on your website. This helps search engines understand the relationship between paginated content and improves the indexing and presentation of those pages.

(19) Rel=”alternate” href=”x”: Utilize rel=”alternate” hreflang=”x” tags to indicate alternative language versions of your web pages. This helps search engines serve the appropriate language version to users based on their preferences or location.

(20) Quality experience: Provide a high-quality user experience by optimizing speed, ensuring reputable content, fixing spelling errors, and eliminating broken links. A positive user experience contributes to better search engine rankings and user engagement.

(21) Quality content: Create mobile-friendly, unique, original, relevant, and text-based content. High-quality content is more likely to be ranked well by search engines and attracts organic traffic from users.

(22) Use of text for navigation links and contents: Avoid using images or JavaScript-based elements for critical navigation links and important content. Using text allows search engines to understand the context and improves accessibility.

(23) Avoid duplicate content: Implement canonicalization techniques or 301 redirects to avoid duplicate content issues. Duplicate content can confuse search engines and negatively impact search rankings.

(24) Avoid redirects or use them properly: Minimize the use of unnecessary redirects and ensure that proper redirect codes (such as 301 or 307) are used when necessary. This helps search engines understand the correct page to index and avoids redirect chains.

(25) Minimize 404 errors: Regularly check for broken links and implement proper 301 redirects to relevant pages. Minimizing 404 errors improves the user experience and prevents search engines from indexing irrelevant or non-existent pages.

(26) Proper Hyperlinks: Prioritize using HTML links over JavaScript-based links whenever possible. Use the “nofollow” attribute for untrusted or paid content to prevent search engines from following those links.

Animation / Transitions

“Animations are most useful when they reflect and reinforce the semantic relationships between elements: for example, ‘this comment belongs to this article’ or ‘these menu items are part of this menu’. You can’t treat individual screens as separate entities: to the user, the entire experience is one continuous space.” Amin Al Hazwani

GOALS

(1) A consistent animation strategy and fluid execution through all website pages and user-input-interactions, like buttons on click/tap/hover, image sliders, transitions between sections, etc.

(2) An animation approach that enhances the user experience by telling a story, providing visual feedback and info to users on what just happened (eg. on click, hover, success or failed form submission etc) or what to do next (eg. pre-loaders). Please consider only real-time scripting animation, not video or image-sequences.

CHECKLIST

(1) Smooth, fast, and stable frame-rate: Ensure that animations run smoothly without stuttering or lagging, providing a seamless visual experience for users. Optimize animations to achieve a high frame-rate and responsiveness.

(2) Easings, timings, rhythm, appeal: Pay attention to the timing and easing functions used in animations to create natural and visually pleasing motion. Experiment with different timings and easing options to achieve the desired effect.

(3) Balance and consistency: Maintain a balance between animation speed, frequency, and visual impact. Avoid animations that are too slow, too fast, or occur too frequently, as they can disrupt the user experience. Strive for consistency in animation styles and effects throughout the website.

(4) 2D / 3D animations and layouts: Consider utilizing both 2D and 3D animations to add depth and visual interest to your website. Explore techniques for creating immersive 3D experiences, such as parallax scrolling or layered animations.

(5) Math, physics, and dynamic/random generation techniques: Employ mathematical, physics-based, or dynamic/random generation techniques to create interactive and dynamic animations. This can add a sense of realism, interactivity, and variety to your animations.

(6) Animation libraries / frameworks: Evaluate and utilize animation libraries or frameworks that provide pre-built animation capabilities and simplify the implementation process. Research and choose libraries that align with your project requirements and provide good performance.

(7) Garbage collector, GLSL optimization, GPU testing, assets management, memory leaks: Pay attention to performance optimization techniques specific to animations, such as managing garbage collection, optimizing GLSL shaders, testing animations on the GPU, effectively managing assets, and avoiding memory leaks that can impact performance.

(8) Parallax scrolling implementation: Implement parallax scrolling techniques to create depth and visual interest in your website. Ensure that parallax effects are implemented smoothly and enhance the overall user experience.

(9) CSS / JS animations: Utilize CSS and JavaScript animations to create a wide range of effects and transitions. Evaluate which type of animation is best suited for each scenario and implement them accordingly.

(10) Works cross-browser: Test and ensure that your animations work consistently across different web browsers and devices. Consider browser compatibility and adapt the animations as needed to provide a consistent experience for all users.

LINEAR, INTERACTIVE AND TRANSITIONAL

(1) Linear Animation: keyframe animations that run without user interaction or triggered by simple user interaction -onscroll, onclick, etc-.

(2) Interactive Animation: dynamic animations based on user interaction -mouse, keyboard, navigation path, motion detection, etc.- or other variables based on complex scriptings including Maths, Physics, Device Features, Context, etc.

(3) Transition Animation: animations between sections or main website pages.
Normally involves a wide use of site related features: AJAX, URL history, a friendly “Loading UI” implementation, etc.

ANIMATION TYPES

(1) Procedural Animation: classic movement over time.

(2) Representational Animation: objects changing shape during the animation,
like character animation.

(3) Stochastic Animation: processes to control groups of objects, such as particle systems, like a fireworks animation, Secondary action.

(4) Behavioral Animation / AI: objects or “actors” are given rules and variables about how they react to their environment.

LOW LEVEL AND HIGH LEVEL TECHNIQUES

Low level Techniques: techniques that aid the animator in precisely specifying motion, such as shape interpolation algorithms (in-betweening), involving a fairly specific idea of the exact motion that he or she wants.

High level: typically algorithms or models used to generate a motion using a set of rules or constraints. The animator sets up the rules of the model, or chooses an appropriate algorithm, and selects initial values or boundary values. The system is then set into motion and the motion of the objects is controlled by the algorithm or model.

Accessibility

“It may be useful to think of search engines as users with substantial constraints: they can’t read text in images, can’t interpret JavaScript or applets, and can’t “view” many other kinds of multimedia content. These are the types of problems that accessibility is supposed to solve in the first place.” Andy Hagans

GOALS

(1) Confirm that web site / application is accessible for all kind of users, including those ones under technical, physical, or other constraints, and those on alternative platforms.

(2) Semantic information about widgets, structures, and behaviors, in order to allow assistive technologies (screen reader software, voice interactive software, Braille output devices, closed captioning, etc) to convey appropriate information to persons with disabilities.

(3) Custom interactive controls / widgets should be operable through keyboard and meet the WCAG 2.0 [ WCAG20 ] criteria: “All functionality of the content is operable through a keyboard interface”.

CHECKLIST

(1) Supported user input methods (keyboard / mouse / touch navigation support): Ensure that all interactive elements can be operated using various input methods, including keyboard, mouse, and touch, to accommodate users with different abilities and devices.

(2) Labeled interactive elements: Provide clear and descriptive labels for interactive elements, such as buttons and form fields, to ensure they are easily understood by all users, including those using screen readers.

(3) Viewport configuration: Configure the viewport meta tag appropriately to ensure optimal display and usability across different devices and screen sizes.

(4) Appropriate tap targets size: Ensure that interactive elements, such as buttons and links, have a sufficient size and spacing to make them easy to tap or click on touch screens.

(5) Focus / active management: Ensure that interactive elements receive focus and have a clear indication when they are in an active or selected state, allowing users to navigate and interact with them using keyboard or assistive technologies.

(6) Tabbing order (tabindex on focusable elements): Set the tab order of interactive elements in a logical and intuitive sequence to enable users to navigate through them using the keyboard.

(7) Wrap buttons and <a> within one large single clicking area (no multiple <a> for the same link or interaction): Avoid having multiple clickable elements that perform the same action, and ensure that interactive elements are large enough to be easily clicked or tapped.

(8) Legible font sizes: Use font sizes that are readable for users with visual impairments, and avoid using small or overly decorative fonts that may hinder legibility.

(9) Colour contrast text / background: Ensure sufficient color contrast between text and background elements to make content readable for users with visual impairments.

(10) No relevant information only on hover: Avoid relying solely on hover interactions to convey important information or functionality, as it may not be accessible to users who cannot use a mouse or have limited dexterity.

(11) Text alternatives and labels for any non-text elements: Provide alternative text descriptions or labels for non-text elements, such as images, icons, and multimedia, to ensure their meaning and purpose are conveyed to users who cannot see them.

(12) Videos with audio: provide captions, full text transcription and keyboard controls: Include captions, transcripts, or audio descriptions for videos to make them accessible to users who are deaf or hard of hearing, as well as those who cannot play audio.

(13) aria-hidden=”true” for non interactive or decorative elements: Mark non-interactive or decorative elements with the “aria-hidden” attribute set to “true” to prevent them from being presented to screen reader users.

(14) Browser history (next / prev / refresh): Ensure that users can navigate backward and forward through the website using the browser’s history, allowing them to easily revisit previous pages or refresh the content.

(15) WAI-WCAG Design Principles: Perceivable, Operable, Understandable, Robust: Follow the Web Content Accessibility Guidelines (WCAG) design principles to make your website or application perceivable, operable, understandable, and robust for all users.

(16) WAI-ARIA Landmark Roles (banner, navigation, search, main, etc): Use WAI-ARIA landmark roles, such as banner, navigation, search, main, etc., to provide additional structural information to assistive technologies about the organization and purpose of different sections of your website.

(17) WAI-ARIA Widget Roles (progressbar, slider, button, tree, textfield, etc): Employ appropriate WAI-ARIA roles, such as progressbar, slider, button, tree, textfield, etc., to enhance the accessibility of custom interactive controls and widgets.

(18) WAI-ARIA Abstract Roles (input, section, widget, select, etc): Utilize WAI-ARIA abstract roles, such as input, section, widget, select, etc., to provide semantic meaning and enhance accessibility for specific elements or components.

(19) WAI-ARIA Live Regions Roles (alert, log, timer, etc): Implement WAI-ARIA live region roles, such as alert, log, timer, etc., to enable assistive technologies to announce and provide updates for dynamically changing content.

(20) WAI-ARIA Document Structure Roles (article, figure, list, img, text, etc): Apply WAI-ARIA roles, such as article, figure, list, img, text, etc., to convey the correct semantics and structure of your content to assistive technologies.

(21) WAI-ARIA Labels on custom elements ( https://www.w3.org/TR/wai-aria-1.1/#dfn-accessible-name ): Ensure that custom elements have appropriate WAI-ARIA labels assigned to them, allowing assistive technologies to provide accurate information to users about their purpose and functionality.

(22) WAI-ARIA States and Properties ( https://w3c.github.io/aria/#states_and_properties ): Utilize relevant WAI-ARIA states and properties to convey additional information or change the behavior of interactive elements, enhancing their accessibility and usability.

(23) Language declaration: Include the language declaration in the HTML markup to inform assistive technologies about the language used on the website and facilitate proper language processing and pronunciation.

(24) Pause controls for any animation that starts automatically and plays for more than 5 seconds: Provide controls for users to pause or stop any auto-playing animations that last longer than 5 seconds, allowing them to have control over the content and avoid potential distractions.

(25) Content accessible with no CSS: Ensure that the content remains accessible and usable even if CSS styles are disabled or not supported, allowing users to understand and navigate the information effectively.

(26) Content accessible with no JS: Ensure that critical functionality and content are accessible and usable even when JavaScript is disabled or not supported, providing an alternative experience for users who cannot utilize JavaScript.

(27) Works crossbrowser: Test and ensure that your website or application functions properly and maintains accessibility across different web browsers, including popular ones like Chrome, Firefox, Safari, and Edge.

CUSTOM CONTROL ACCESSIBLE DEVELOPMENT CHECKLIST:

(1) Keyboard operable – Can you use the control with the keyboard? : Ensure that custom controls can be operated using the keyboard alone, without relying on mouse or touch interactions.

(2) Touch operable – Can you use the control with touch gestures?
With assistive technology enabled? : Ensure that custom controls can be operated using touch gestures, allowing users to interact with them on touch-enabled devices.

(3) Expected operation – Can you operate the control using the standard keys and/or touch gestures for the control type? : Verify that the custom controls behave as expected and follow established interaction patterns for their respective control types, ensuring a consistent user experience.

(4) Focusable – Can you get to the control via the keyboard? : Ensure that custom controls can receive keyboard focus, allowing users to navigate to them using the Tab key or other keyboard navigation techniques.

(5) Clear indication of focus – Can you easily see it when the control has focus? WCAG2 Visible Focus : Provide a clear visual indication when custom controls receive focus, making it easier for users to identify the currently focused element.

(6) Label – The control has a text label that is exposed as an accessible name in accessibility APIs : Ensure that custom controls have descriptive labels associated with them, enabling assistive technologies to convey their purpose and function to users.

(7) Role – The control has an appropriate role exposed in accessibility APIs : Assign appropriate ARIA roles to custom controls, indicating their function and behavior to assistive technologies.

(8) States and properties – The control has any UI states and properties that it has exposed in accessibility APIs : Expose relevant UI states and properties of custom controls through ARIA attributes, providing additional information to assistive technologies about their current state.

(9) Color contrast – The control label/description/icon is perceivable/usable for low vision users (Use a color contrast checker ) : Ensure that the labels, descriptions, and icons used in custom controls have sufficient color contrast, making them perceivable and usable for users with low vision.

(10) High contrast mode – The control is perceivable/usable when High Contrast Mode is enabled (e.g. Windows HC mode ) : Verify that custom controls remain usable and visually distinguishable when high contrast mode is enabled, catering to users who rely on this feature for improved visibility.

TIPS

High accessibility overlaps heavily with effective white-hat SEO.

Keep in mind some of the disabilities that might keep someone from enjoying your full customer experience, like color blindness, blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, vestibular disorder, limited physical dexterity-such as the inability to use a keyboard or mouse, and more.