Mobile-Optimized Web Presence Flashcards

A marketer is reviewing their company's website performance on mobile devices. They notice that while the content and layout are identical to the desktop version, the user engagement is significantly lower and the bounce rate is higher. According to Google's mobile-first indexing, which of the following is the MOST likely cause of this issue?

Answer: The mobile version has poor performance metrics, such as slow page load speed and layout shifts.

Google's mobile-first indexing means it primarily uses the mobile version of a site for indexing and ranking. [3, 6] Poor performance metrics, such as slow page load speeds (LCP), poor interactivity (FID/INP), and visual instability (CLS), are major factors that create a bad user experience, leading to high bounce rates and lower rankings. [1, 9, 23] While content might be the same, a slow and frustrating mobile experience is a critical issue. Responsive design is the recommended approach, and dedicated mobile URLs are not a requirement. Backlinks are important, but the immediate user experience problem points to performance.

A web development team is deciding between two design approaches for their new e-commerce site. Approach A uses a single, fluid layout that dynamically adjusts to any screen size. Approach B uses several distinct, pre-designed layouts that are served to the user based on detected screen size breakpoints (e.g., one for mobile, one for tablet, one for desktop). What is the correct terminology for Approach A?

Answer: Responsive Web Design

Responsive Web Design (RWD) is the approach that uses a single, fluid layout with flexible grids and CSS media queries to dynamically adapt to any screen size. [17, 25] Adaptive Web Design, by contrast, involves creating multiple fixed layouts for specific breakpoints and delivering the one that matches the user's device. [25, 28]

Which of the following technologies allows a website to be 'installed' on a user's home screen, send push notifications, and work offline, effectively blurring the line between a website and a native mobile app?

Answer: Progressive Web App (PWA)

A Progressive Web App (PWA) is a type of web application that uses modern web capabilities to deliver an app-like experience to users. [5, 8] Key features include the ability to be added to the home screen, offline functionality through service workers, and access to push notifications, which are traditionally associated with native apps. [11, 21]

An online retail company has optimized its mobile website and sees a significant portion of its traffic from mobile devices. To improve the user experience for this segment, they want to ensure their site is accessible to people with disabilities. Which set of international guidelines should they primarily consult for mobile web accessibility?

Answer: Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG), developed by the W3C, are the global standard for digital accessibility. [35] These guidelines cover web pages and applications, including content used on mobile devices, and address how to make them perceivable, operable, understandable, and robust for people with disabilities. [19, 34]

A user is navigating a mobile website. They attempt to click a 'Buy Now' button, but just as their finger touches the screen, a banner ad loads at the top, causing the entire page layout to shift downwards and making them accidentally click the 'Cancel' button instead. Which Core Web Vital metric specifically measures this frustrating user experience?

Answer: Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is the Core Web Vital that measures the visual stability of a page. [1] It quantifies how much visible content shifts unexpectedly during the page load process. A high CLS score indicates a poor user experience, like the one described, where unexpected layout changes cause users to make unintended actions. [10, 23]

When designing the user interface for a mobile website, which of the following practices is MOST critical for ensuring good usability and navigation?

Answer: Designing large, easily tappable touch targets with adequate spacing between them.

On mobile devices, users interact with their fingers, so touch targets (like buttons and links) must be large enough to be tapped accurately without accidentally hitting an adjacent element. [16, 26, 30] Hover effects do not work on touchscreens. While content parity is important for SEO, usability requires that content be formatted for easy mobile consumption, not just copied over. [16, 24] While hamburger menus are common, ensuring buttons are physically easy to use is a more fundamental aspect of mobile usability.