• <menu id="c6u88"><menu id="c6u88"></menu></menu>
    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 &lt;img&gt; and &lt;video&gt; 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 &lt;img&gt; and &lt;video&gt; 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 &lt;img&gt; and &lt;video&gt; 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 &lt;img&gt; and &lt;video&gt; 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 &lt;img&gt; and &lt;video&gt; 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 &lt;img&gt; and &lt;video&gt; 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.
    777米奇影视