Certificate

Mobile Guidelines

Mobile Friendliness, Performance, Best Practices / PWA and Usability guidelines documentation.

In collaboration with

Mobile Friendliness

  • Configures the viewport

    This rule triggers when detecting that your page does not specify a viewport, or specifies a viewport that does not adapt to different devices. Source: PageSpeed Insights - Learn more

  • Content is sized correctly for the viewport

    If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. Source: Lighthouse - Learn more

  • Size tap targets appropriately

    This rule triggers when detecting that certain tap targets (e.g. buttons, links, or form fields) may be too small or too close together for a user to easily tap on a touchscreen. Source: PageSpeed Insights - Learn more

  • Uses legible font sizes

    This rule triggers when detecting that text in the page is too small to be legible. Source: PageSpeed Insights - Learn more

  • Color Contrast is satisfactory

    Low-contrast text is difficult or impossible for many users to read. Background and foreground colors should have enough contrast ratio to guarantee readability. Source: Lighthouse - Learn more

Performance

  • Speed Index

    Perceptual Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. The lower the score, the better. Source: Lighthouse - Learn more

  • Document complete

    These metrics are collected from the initial request until the browser considers the page loaded (JavaScript onLoad event). This usually happens after all of the image content has loaded but may not include content that is triggered by javascript execution.

  • Fully load

    These metrics are collected from the initial request until 2 seconds of no network activity after Document Complete (JavaScript onLoad event). This will usually include any activity that is triggered by javascript after the main page loads.

Usability

  • Generic

    Standard checklist

    • Clicking logo always leads you to homepage.

      Make it easy to get back to the homepage. Use your logo as a navigation button to return to the homepage. Learn more

    • Key CTAs are visible on the homepage.

      Keep menus short, visible and sweet. Learn more

    • No ending trailing paths.

      Always provide navigation options on footers and/or fixed header. Learn more

    • Suports multi-device experiences.

      Use wishlists/favouriting/saved baskets; social sharing; email; to facilitate seamless movement between devices or mobile platforms. Learn more

    • For category pages/search result with lots of products, make sure lazy-loading or pagination are used.

      Load images asynchronously -- after the above-the-fold content is fully loaded, or conditionally, only when they appear in the browser’s viewport. Learn more

    • Possible to swipe to see more images or tap to enlarge them.

      Allow for mobile gestures like swipe or tap to enlarge images, graphics and other contents, keeping good quality and focus. Learn more

    • Streamlines forms information entry.

      Minimize the number of fields and autofill information wherever possible. Implement correct input types in fields, i.e. input type = email, number, etc. Make use of tabIndex to iterate through fields with the keyboard. Learn more

    • Forms error warnings.

      Users are notified immediately when mistakes are made in a field, and guidance is provided on how to fix it. Learn more

    • Makes site search visible and user-friendly.

      Place your site search near the top of your pages, via an open text field or clear label. Offer filters to help users get what they need from search or group results per categories. Auto-complete is available in on-site search. Learn more

    • Keeps your user in a single browser window.

      Switching between windows on a smartphone can be troublesome, and raises the risk that visitors might not find their way back to your site. Try to keep users in one place by avoiding calls-to-action that launch new windows. Learn more

  • Retail Pure play

    Website of company selling products online only (digital only)

    • Autocomplete is used to suggest popular searches (but can be ignored)

      Fails if no autocomplete or if the user is not allowed to ignore the autocomplete. Learn more

    • Filtering is available and prominent on search results or category listing pages

      Fails if filtering is appropriate but not provided or if sorting is prioritized over filtering in the visual hierarchy. Learn more

    • The product details follow a set pattern making it easier to compare, e.g. bullet points with tech specs

      Fails if different product description information formatting from one page to another. Learn more

    • Key and appropriate information is provided and easy to find on the product page

      Fails if any key information is missing or hard to find, i.e. delivery dates, shipping costs, returns policy plus all product pertinent info like size, colour, quantity, etc. Learn more

    • All product images are zoomable, without blur

      Fails if product images are blurry at full zoom. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • There is a choice to convert without creating an account, i.e. Guest checkout

      Fails if no guest checkout. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Retail Omnichannel

    Website of company selling products online and offline

    • Autocomplete is used to suggest popular searches (but can be ignored)

      Fails if no autocomplete or if the user is not allowed to ignore the autocomplete. Learn more

    • Filtering is available and prominent on search results or category listing pages

      Fails if filtering is appropriate but not provided or if sorting is prioritized over filtering in the visual hierarchy. Learn more

    • The product details follow a set pattern making it easier to compare, e.g. bullet points with tech specs

      Fails if different product description information formatting from one page to another. Learn more

    • It is possible to check in-store product availability

      Fails if in-store product availability is not provided. Learn more

    • All product images are zoomable, without blur

      Fails if product images are blurry at full zoom. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • There is a choice to convert without creating an account, i.e. Guest checkout

      Fails if no guest checkout. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Travel Accommodation

    Travel websites enabling users to book accommodation (hotel, house, flat etc)

    • Autocomplete is used to suggest popular searches (but can be ignored)

      Fails if no autocomplete or if the user is not allowed to ignore the autocomplete. Learn more

    • Following a search, the search field is populated and editable to support another search and users can remove the search term easily e.g. a cross in the right of the field - all search criteria can be edited easily within the results page

      Fails if any conditions are not met. Ajax is not mandatory: if page reload after applying multiple filters it is a pass. But if it reloads every time you select anything is is a fail. Learn more

    • Filtering is available and prominent (search results or category listing pages) - multiple filters can be applied at once (i.e. without a page reload). When filters are applied the user has a clear indication of the number of results which will be left

      Fails if any conditions are not met. Ajax is not mandatory: if page reload after applying multiple filters it is a pass. But if it reloads every time you select anything is is a fail. Learn more

    • Search results/category page accommodation lists can be viewed on a map

      Fails if no map view is present. Learn more

    • Key and appropriate information is provided and easy to find on the product page, i.e. cancellation policy plus all relevant information like room type, amenities, etc

      Fails if information is missing or hard to find. Learn more

    • High quality images and/or videos are available and can be zoomed into or enlarged for full-screen viewing

      Fails if small or low fidelity images/videos or a general lack of images across the site. Learn more

    • Users can see how many images there are and move between them with ease i.e. swiping or tapping an appropriately sized hit area

      Fails if not possible to enlarge or swipe/tap to view more. If the images are of varying sizes or orientations, the touch targets should remain in the same place always. Learn more

    • The conversion process is quarantined - no unnecessary links that take users out of the process

      Fails if any links out of the conversion funnel. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Travel Transport

    Travel websites enabling users to book transportation (flight, train, car, etc)

    • Autocomplete is used to suggest popular searches (but can be ignored)

      Fails if no autocomplete or if the user is not allowed to ignore the autocomplete. Learn more

    • Following a search, the search field is populated and editable to support another search and users can remove the search term easily e.g. a cross in the right of the field - all search criteria can be edited easily within the results page

      Fails if any conditions are not met. Learn more

    • Previous searches are saved without an account

      Fails if previous searches are not remembered. Learn more

    • When availability is low, opportunities are taken to leverage the 'scarcity principle' by providing real time awareness of the specific number of seats/vehicles available

      Fails if no information about the specific number of seats/vehicles, etc, is provided. Learn more

    • Key and appropriate information is provided and easy to find on the search results page, i.e. cancellation policy plus all relevant information like baggage allowance for flights, insurance for car rental, etc

      Fails if information is missing or hard to find. Learn more

    • Either a simplified payment process is provided at the beginning of the payment process (Paypal, Apple Pay, Google Pay, etc) or opportunities for using card scan technology are taken

      Fails if the site accepts 3rd party payments but does not allow the user to use them until after they have entered payment address and delivery address, etc. then it is a fail. Learn more

    • The conversion process is quarantined - no unnecessary links that take users out of the process

      Fails if any links out of the conversion funnel. Learn more

    • There is an option to reserve with only a deposit or a full-refund easy cancellation process is available

      Fails if users can only make a non-refundable full commitment booking. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Lead Gen

    Websites aimed at generating a 'lead': getting users to sign-up, register for a newsletter, express their interest regarding the service or the product that the company is ultimately selling.

    • Key and appropriate information is provided and is easy to find on the product page e.g. APR, key benefits, etc

      Fails if information is missing or hard to find. Learn more

    • Relevant product/service details are concise and use bullet points to make it easy for the user to skim and scan the content for understanding

      Fails if content is laid out in text form and large paragraphs requiring the user to seek out the information themselves by reading large bodies of text. Learn more

    • Phone numbers are clickable to make calls

      Fails if missing tap to call functionality. Learn more

    • Links never open new browser tabs unless clearly indicated or users can back arrow to the previous page

      Fails if opening new browser tabs without warning the user in advance that this will happen. Learn more

    • Access to instant, responsive support (web chat or phone) within office hours is available at any point

      Fails if missing or hard to find contact options. Contact options should align with regional expectations. Learn more

    • Optional fields are clearly optional

      Fails if it is not clear that optional fields are optional, i.e. They do not say 'optional' or they do not follow the pattern of no asterisk for optional, while compulsory fields do. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

    • Within a form, users can navigate back and forth between steps/pages without losing previously inputted information

      Fails if a user backtracks and previously entered data is lost. Learn more

  • Agency / Portfolio

    Agency/freelancer website showcasing their best work

    • Brand logo linked to homepage

      Fails if doesn't have a logo or clicking it doesn't lead you to homepage. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Active section is highlighted in navigation menus

      Fails if current section or page is not visually highlighted in navigation menus, except for internal section pages where it's accepted not to highlight the parent section. Learn more

    • Listing/overview pages with many items implements deferred loading techniques

      Fails if the website doesn't provide at least one of the following: lazy-loading, load more buttons, paginator. Doesn't provide a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • The case listing page is not the only way to browse through all the cases

      Fails if doesn't provide at least one of the following: next/prev case buttons, related cases listing, or any other way to keep browsing without going back and forth to the listing page. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • Make it easy to contact you

      Fails if the website does not provide all of the following: easy to find contact options, tap to call, mailto on emails, addresses do not link to gMaps, except being embedded. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Corporate / Institutional

    Websites introducing a company or institution, e.g. describing its nature, history, services, team, success stories, contact information and offices location, etc

    • Brand logo linked to homepage

      Fails if doesn't have a logo or clicking it doesn't lead you to homepage. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Active section is highlighted in navigation menus

      Fails if current section or page is not visually highlighted in navigation menus, except for internal section pages where it's accepted not to highlight the parent section. Learn more

    • Listing/overview pages with many items implements deferred loading techniques

      Fails if the website doesn't provide at least one of the following: lazy-loading, load more buttons, paginator. Doesn't provide a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • Make it easy to contact you

      Fails if the website does not provide all of the following: easy to find contact options, tap to call, mailto on emails, addresses do not link to gMaps, except being embedded. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Blog / News

    Websites displaying articles, news, infographics, or research results on a certain topic.

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Listing/distributive pages with many items implements deferred loading techniques

      Fails if the website not provides at least one of the following: lazy-loading, load more buttons, paginator. Not provides a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • Listing/distributive pages are not the only way to browse through all the articles

      Fails if doesn't provide at least one of the following: next/prev case buttons, related cases listing, or any other way to keep browsing without going back and forth to the overview page. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • Search and filtering are available and prominent (search results or category listing pages)

      Fails if no search functionallity. Filtering is appropriate but not provided or if sorting is prioritized over filtering in the visual hierarchy. Learn more

    • Articles can be shared

      Fails if doesn't provide sharing options. Doesn't provide any of the following article meta information: title, description and image. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Promotional

    Websites designed specifically to showcase a product, campaign, or event..

    • Brand logo linked to homepage

      Fails if doesn't have a logo or clicking it doesn't lead you to homepage. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Active section is highlighted in navigation menus

      Fails if current section or page is not visually highlighted in navigation menus, except for internal section pages where it's accepted not to highlight the parent section. Learn more

    • Listing/overview pages with many items implements deferred loading techniques

      Fails if the website doesn't provide at least one of the following: lazy-loading, load more buttons, paginator. Doesn't provide a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • Carousels are generally avoided (but they are acceptable if they are well implemented)

      Fails if any of the following are seen: carousels auto-rotate, text is not legible, swipe is not supported, next images do not load within 1 second of swipe. Learn more

    • Make it easy to contact you

      Fails if the website does not provide all of the following: easy to find contact options, tap to call, mailto on emails, addresses do not link to gMaps, except being embedded. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Storytelling / Game

    Websites showcasing an experimental, artistic, gaming or immersive interactive experience.

    • Brand logo linked to homepage

      Fails if doesn't have a logo or clicking it doesn't lead you to homepage. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Active section is highlighted in navigation menus

      Fails if current section or page is not visually highlighted in navigation menus, except for internal section pages where it's accepted not to highlight the parent section. Learn more

    • Contents are loaded on demand

      Fails if the website doesn't provide at least one of the following loading techniques: lazy-loading, next/prev buttons, pages/chapters bullets nav. Learn more

    • Sound control

      Fails if no audio on/off button, no warning about the website using sound -- eg in the preloader or splash page. Learn more

    • Website can be shared

      Fails if doesn't provide sharing options. Doesn’t provide any of the following article meta information: title, description and image. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Event

    Websites which main goal is to a specific event or a series of events: conference, festival, etc. The event has a specific dates, agenda, line up.

    • Brand logo linked to homepage

      Fails if doesn't have a logo or clicking it doesn't lead you to homepage. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • Active section is highlighted in navigation menus

      Fails if current section or page is not visually highlighted in navigation menus, except for internal section pages where it's accepted not to highlight the parent section. Learn more

    • Listing/overview pages with many items implements deferred loading techniques

      Fails if the website doesn't provide at least one of the following: lazy-loading, load more buttons, paginator. Doesn't provide a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • Prevent layout shiftings when loading media. Set width and height attributes on both <img> and <video> tags

      Fails if transitioning from placeholders to final images changes the rendered size of the element as media loads. Not using a solid color placeholder occupying the same dimensions as the target image, or techniques such as LQIP or SQIP that hint at the content of a media item before it loads. These changes can be disorienting for users and trigger expensive DOM layout operations that consume system resources and contribute to jank. Learn more

    • The website promotes content updates and implements notification techniques

      Fails if not features one of the following: push notifications about new articles, newsletter email subscription, social media. Learn more

    • Make it easy to contact you

      Fails if the website does not provide all of the following: easy to find contact options, tap to call, mailto on emails, addresses do not link to gMaps, except being embedded. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

  • Marketplace

    Websites that serve as an aggregating platform for products and services in a specific category (excluding Retail, Travel - see relevant types). External users can submit their offering to the platform.

    • Autocomplete is used to suggest popular searches (but can be ignored)

      Fails if no autocomplete or if the user is not allowed to ignore the autocomplete. Learn more

    • Filtering is available and prominent on search results or category listing pages

      Fails if filtering is appropriate but not provided or if sorting is prioritized over filtering in the visual hierarchy. Learn more

    • No ending trailing paths

      Fails if doesn't provide at least one of the following: main navigation options on footers, fixed or 'smart' headers/burger-icon, Back to top or close buttons. Learn more

    • The product details follow a set pattern making it easier to compare, e.g. bullet points with tech specs

      Fails if different product description information formatting from one page to another. Learn more

    • Listing/overview pages with many items implements deferred loading techniques

      Fails if the website doesn't provide at least one of the following: lazy-loading, load more buttons, paginator. Doesn't provide a clear reference about the total amount of items in a portfolio or blog page. Learn more

    • The website promotes content updates and implements notification techniques

      Fails if not features one of the following: push notifications about new articles, newsletter email subscription, social media. Learn more

    • Make it easy to contact you

      Fails if the website does not provide all of the following: easy to find contact options, tap to call, mailto on emails, addresses do not link to gMaps, except being embedded. Learn more

    • The most appropriate keyboard for the input type is provided first

      Fails if most helpful keyboard not provided, i.e. input types text, tel, email, password, capitalization when appropiate, etc. Learn more

    • The website supports autofill for all form fields and the fields are tagged for the appropriate information from autofill

      Fails if fields are not tagged for efficient browser-based autofill, making users enter data that is already known either by the website or the OS. Not filling a standard field or filling fields with the wrong content, i.e. puts house number and street name into the same field when there are separate fields for each. Learn more

    • All mistakes made in forms are clearly highlighted in real time, and instructions for correct completion are provided in real time

      Fails if mistakes and guidance for correct completion are not highlighted in real time and/or error messages are ambiguous or unfriendly. Learn more

PWA / Best Practices

  • Avoids Application Cache

    Application Cache is deprecated. Source: Lighthouse - Learn more

  • Avoids WebSQL DB

    Web SQL is deprecated. Consider using IndexedDB instead. Source: Lighthouse - Learn more

  • Avoids requesting the geolocation permission on page load

    Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to user gestures instead. Source: Lighthouse - Learn more

  • robots.txt is valid

    If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Source: Lighthouse Learn more

  • Avoids requesting the notification permission on page load

    Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Source: Lighthouse - Learn more

  • Avoids deprecated APIs

    Deprecated APIs will eventually be removed from the browser. Source: Lighthouse - Learn more

  • Allows to paste into password input fields

    The main reason why password pasting improves security is because it helps to reduce password overload. Source: Lighthouse - Learn more

  • Registers a Service Worker

    The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Source: Lighthouse - Learn more

  • Responds with a 200 when offline

    If you're building a Progressive Web App, consider using a service worker so that your app can work offline. Source: Lighthouse - Learn more

  • Uses HTTPS

    All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. Source: Lighthouse - Learn more

  • Redirects HTTP traffic to HTTPS

    If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. Source: Lighthouse - Learn more

  • Uses HTTP/2 for its own resources

    HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push. Source: Lighthouse - Learn more

  • Uses passive listeners to improve scrolling performance

    Mark your touch and wheel event listeners as `passive` to improve your page's scroll performance. Source: Lighthouse - Learn more

  • Avoid using <span class="inline-code hljs javascript">document.write()</span>

    For users on slow connections, external scripts dynamically injected via document.write() can delay page load by tens of seconds. Source: Lighthouse - Learn more

  • Manifest's <span class="inline-code">short_name</span> won't be truncated when displayed on homescreen

    Make your app's short_name fewer than 12 characters to ensure that it's not truncated on homescreens. Source: Lighthouse - Learn more

  • Configured for a custom splash screen

    A default splash screen will be constructed for your app, but satisfying these requirements guarantee a high-quality splash screen that transitions the user from tapping the home screen icon to your app's first paint. Source: Lighthouse - Learn more

  • User can be prompted to Install the Web App

    Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Source: Lighthouse - Learn more

Sources

These 4 sources will be used to measure each categories checklist:

  • Webpagetest.org
  • Lighthouse
  • PageSpeed Insights
  • Manual checking

The items to be checked and the sources to retrieve metrics/results are established by Google and Awwwards. Since most of these sources are periodically updated, over time scores can change for a certain website for the same items/categories.

Runtime Environment

  • Page Speed Insights:
    • Mobile
  • Webpagetest.org:
    • Test Location: Dulles VA USA
    • Browser: MotoG4 Chrome
    • Connection: Mobile 3G (1.6 Mbps/768 Kbps 300ms RTT)
    • Number of Runs: 1
    • User Agent: Default
  • Lighthouse:
    • User agent: Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36(KHTML, like Gecko) Chrome/61.0.3116.0 Mobile Safari/537.36
    • Device Emulation: Emulated Nexus 5X
    • Connection: Mobile 3G (1.6 Mbps/768 Kbps 300ms RTT)
    • Network Throttling: 150ms TCP RTT, 1,638.4 Kbps throughput (Simulated)
    • CPU Throttling: 4x slowdown (Simulated)

Award Logic

Three pages will be evaluated, except for one-pager websites: the homepage or landing page, plus 2 others chosen manually (typically an About page, a Product overview page or Product detail page -- if not present, then Contact page).

Each category will receive a score of 0 to 100 per page, based on the number of its internal items (total item results sum, divided by the total number of items).

The score of a page will be determined by the sum of the checklisted scores, divided by the total number of checklisted items.

In the same way, the final score of a website will be determined by the sum of all the evaluated pages average, divided by the total number of pages being evaluated (3 pages will be evaluated, except for one-pager websites).

Sites that reach or exceed a global score of 70/100 will obtain the Google Mobile Excellence Award.

If a site does not reach ≥70/100 on the Homepage test, the evaluation process will end and the report will be sent detailing only the results of that page.

Color assignment:

  • from 0 to 49 red
  • from 50 to 69 orange
  • from 70 to 100 green

Reports and Re-Evaluation

Regardless of whether a website obtains the Mobile Excellence Award or not, all the information and metrics gathered will be sent to the user in the report.

As the aim of the Mobile Excellence Report is to improve mobile experiences across the board, users are permitted to make changes after receiving their report and request to have the report done again in order to get a new score that reflects the improvements that have been made.

Extra Awards / Badges

  • Mobile Site of the Week
    • To become Mobile Site of the Week the site must be one of the highest voted in the last 3 months and also have won an Honorable Mention. It is then highlighted on the Awwwards homepage.
  • Mobile Site of the Year
    • Mobile Site of the Year award will be given out at the Awwwards Conference Amsterdam 2019. Twenty websites with the highest score and an Honorable Mention will be nominated for this award and the Awwwards Jury will vote for the best.