search_logo

E

Edwin

March 27, 2023

Development Award Guidelines.

Development award guidelines.

You will notice that the judging system is divided into 6 categories:

1. 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.” 

GOALS

  • Best practices and techniques implemented to improve website performance and display contents faster to the end-user, as well as save bandwidth and energy power.
  • Optimized content efficiency / data delivery and improved server response time. 
  • Proper render blocking resources management (minification, deferring scripts, inlining, total HTTP requests)

CHECKLIST

  • Enable compression / Gzip.
  • Critical rendering path, fetching, parsing and loading order of resources.
  • Render-blocking JS, defer parsing, asynchronous scripts, delayed script loading.
  • Prioritize visible / above-the-fold content. 
  • Minify CSS and JavaScript.
  • Optimized, compressed and deferred media (image formats, sprite images, videos). 
  • Use of CDN.
  • Cache layers (leverage browser caching, CDN, web server and app server).
  • Expires or Cache-Control Header.
  • Reduce DNS Lookups.
  • Fewer Redirects.
  • Fewer third-party plugins.
  • No iframes.
  • Avoid filters.
  • Responsive images. Scale, formats, compression, lazy/deferred loading. 
  • Inline scripts, styles and images (SVG, Data URI).
  • Progressive enhancement / graceful degradation.
  • Stylesheets at Top & Scripts at Bottom.
  • Conditional loading, Lazy loading.
  •  No console logs or error messages.
  • Rendering performance. 
  • HTTPS and HTTP/2.
  • Works cross browser.

RELEVANT METRICS

  • Page Load Time and Above The Fold Time.
  • Total HTTP requests.
  • Overall asset count and weight.
  • Media count and weight (Images, Videos, Embeds, iFrames, Objects).
  • Total domains.
  • Total third-party dependencies (analytics, retargeting, ads, social widgets, frameworks, libraries, plugins, web services).

 

2. Responsive Web Design (RWD) / Mobile 

 

GOALS

  • Consistent user experience across different app modules and widgets, regardless of the user’s screen size or features supported on their device.
  • Clear and uniformed website design principles, implementation, and appeal across devices.
  • Critical content and features accessible across different types of user input methods (e.g. click, swipe, pinch).

CHECKLIST

  •   Flexible Grid based layout / Liquid UI.
  •   Flexible Media (Images, Videos, Embeds, iFrames, Objects).
  •   Responsive images and media optimization. 
  •   Consistency through media queries / breakpoints across devices.
  •   Performance (speed, loading time, etc).
  •   Readability and responsive typography.
  •   Conditional loading / Lazy loading.
  •   Progressive Enhancement / Graceful degradation.
  •   Viewport Meta Tag and other <head> related information.
  •   Feat-detection / UA sniffing.
  •   Retina and Pixel-density.
  •   Proper user input.
  •   Appropriate tap targets size.
  •   RWD navigation patterns.
  •   Works cross browser.

———————————————————————————————————–

3. Markup / Metadata 

GOALS

  • Solid HTML’s sectioning model, appropriate use of its elements and their structural and semantic meanings.
  • Use of the most meaningful yet minimal markup required to present the styles and needed interaction.
  • Right information hierarchy of contents so users, browsers and search engines can more accurately understand and interact with it.

CHECKLIST

  •  Valid HTML Markup. 
  •  Doctype, language and character encoding.
  • Document elements and global attributes (head, title, lang, base, link, meta, style, translate).
  • Standard Metadata (description, keywords/concepts, expires, generation, language, viewport, author, content-type, mobile-web-app, etc).
  • Structured Metadata Markup and Microdata. 
  • OpenGraph, Schema.org, Twitter Cards, Pinterest and Social integration.
  • Images with captions, alt, width, height and src.
  • Document structure / organization / cohesion. 
  • Readability, indentation, use of whitespace and comments. 
  • Descriptive variable names and semantic naming conventions. 
  • No div-itis, class-itis, span-mania, tag-soups.
  • Favicon.ico at different sizes and cacheable.

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.

————————————————————————————————————

4. Semantics / SEO 

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

GOALS

  • Proper information hierarchy of contents so users, browsers and search engines can more accurately understand and interact with it.
  • Solid HTML’s sectioning model, appropriate use of its elements and their structural and semantic meanings.
  • 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

  • Meta-tags: unique, accurate, semantic, brief but descriptive meta-tag definitions, per page (title, description, keywords, expires, language, author, publisher, etc.)
  • Improved URL structure (hyphens, lowercase, human-readable, brief but descriptive, use of keywords, no dynamic parameters, etc).
  • Performance and loading times.
  • Images: “alt” attribute describing image-related information (brief, but descriptive filenames and alt text).
  • Suitable anchor text.
  • Canonicalization.
  • Structured Metadata Markup and Microdata. 
  • Social Meta Tags / Schema.org (itemscope, itemprop -name, description, image-)
  • Social Meta Tags / Open Graph protocol (og:title, og:type, og:image, og:url, og:description, fb:admins; twitter:card, ). 
  • RDFa, Microdata, and Microformat Data Sets
  • Language declaration in the HTML element.
  • Long Word Count.
  • HTML5 Semantic Markup (nav, page, section, footer, etc).
  • HTML5 Semantic Headings (h1, h2 … p, etc) to emphasize relevance.
  • HTML Sitemap page on the site. 
  • XML Sitemap for search engine robots.
  • Robots.txt / Restrict crawling: exclusion standards (nofollow, noindex, etc)
    and most relevant User Agents.
  • Rel=”next” and rel=”prev” for pagination.
  • Rel=”alternate” href=”x”.
  • Quality experience (speed, reputable, spelling errors, broken links).
  • Quality content (mobile-friendly, unique, original, relevant, text-based content). 
  • Use of text for navigation links and contents.
  • Avoid duplicate content (canonicalization or 301 redirect).
  • Avoid redirects or use them properly (301, 307, etc)
  •  Minimize 404 (use 301 redirect).
  •  Proper Hyperlinks (HTML links over JS, “nofollow” for untrusted or paid content, etc).

5. Animation / Transitions 

“Animations are most useful when they reflect and reinforce the semantic relationships between elements: 

GOALS

  • 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.
  • 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).

CHECKLIST

  • Smooth, fast and stable frame-rate.
  • Easing’s, timings, rhythm, appeal.
  • Balance and consistency: avoid animations being too slow, too fast, too often, too different.
  • 2D / 3D animations and layouts.
  • Math, physics and dynamic/random generation techniques.
  • Animation libraries / frameworks.
  • Garbage collector, GLSL optimization, GPU testing, assets management, memory leaks.
  • Parallax scrolling implementation.
  • CSS / JS animations.
  • Works crossbrowser.

LINEAR, INTERACTIVE AND TRANSITIONAL

  • Linear Animation: keyframe animations that run without user interaction or triggered by simple user interaction -onscroll, onclick, etc-.
  • 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.
  • 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

  • Procedural Animation: classic movement over time.
  • Representational Animation: objects changing shape during the animation,
    like character animation. 
  •  Stochastic Animation: processes to control groups of objects, such as particle systems, like a fireworks animation, Secondary action. 
  •   Behavioral Animation / AI: objects or “actors” are given rules and variables about how they react to their environment.

———————————————————————————————————–

6. 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.”

GOALS

  • 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.
  •  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. 
  • Custom interactive controls / widgets should be operable through keyboard.

CHECKLIST

  • Supported user input methods (keyboard / mouse / touch navigation support).
  • Labeled interactive elements.
  • Viewport configuration.
  • Appropriate tap targets size.
  • Focus / active management.
  • Tabbing order (tabindex on focusable elements).
  • Wrap buttons and <a> within one large single clicking area  (no multiple <a> for the same link or interaction)
  • Legible font sizes.
  • Colour contrast text / background.
  • No relevant information only on hover.
  • Text alternatives and labels for any non-text elements. 
  • Videos with audio: provide captions, full text transcription and keyboard controls.
  • aria-hidden=”true” for non interactive or decorative elements.
  • Browser history (next / prev / refresh).
  •   Language declaration.
  •   Pause controls for any animation that starts automatically and plays for more than 5 seconds. Auto-updating content and animated carousels could likely fall under this category.
  • Content accessible with no CSS.
  • Content accessible with no JS.
  • Works crossbrowser.

CUSTOM CONTROL ACCESSIBLE DEVELOPMENT CHECKLIST:

  •   Keyboard operable –  Can you use the control with the keyboard?
  •   Touch operable – Can you use the control with touch gestures?
  •   Expected operation – Can you operate the control using the standard keys and/or touch gestures for the control type?
  •   Focusable – Can you get to the control via the keyboard? 
  •   Clear indication of focus – Can you easily see it when the control has focus?
  •   States and properties – The control has any UI states and properties that it has exposed in accessibility APIs
  •   Color contrast – The control label/description/icon is perceivable/usable for low vision users 
  • High contrast mode – The control is perceivable/usable when High Contrast Mode is enabled.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.

———————————————————————————————————–

PRIMARY TOOLS

 

SECONDARY TOOLS AND RESOURCES

 

CHROME EXTENSIONS

Top comments
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Read next

V

Customize Lenis scroll configuration, depending upon each section.

Vinod - November 13, 2024

S

  Web Content Accessibility Guidelines (WCAG)

Sreenivas S Pai - August 7, 2024

A

CSS Selector : nth-child selector

Aswin - July 24, 2024

A

Image Blur Loader : Next.js

Aswin - July 22, 2024