Mobile Guidelines

Mobile Friendliness

• Content is not blocked for zoom/scale

  The `[user-scalable="no"]` parameter is not present in the `<meta name="viewport">` element and the `[maximum-scale]` parameter is not less than 2.Source: Lighthouse - 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

• Uses legible font sizes

  Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. Source: Lighthouse - 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

  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 change 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