WEBVTT 00:00:00.000 --> 00:00:05.095 Google retired its standalone Mobile-Friendly Test, but mobile layout problems still matter. 00:00:05.095 --> 00:00:10.189 I’ll show you this tool’s seven-part diagnostic, useful cases, the sample score 00:00:10.189 --> 00:00:15.284 and fixes, its main features and limits, and the device checks to 00:00:15.284 --> 00:00:16.133 make next. 00:00:16.133 --> 00:00:21.703 This tool assigns a zero-to-one-hundred product score from seven weighted H-T-M-L and 00:00:21.703 --> 00:00:27.272 C-S-S checks, then requests a separate three-hundred-ninety by eight-hundred-forty-four phone preview. These 00:00:27.272 --> 00:00:32.841 are directional diagnostics, not Google eligibility criteria and not a replacement for 00:00:32.841 --> 00:00:34.233 testing real devices. 00:00:34.233 --> 00:00:39.094 Use it before a launch, after a responsive redesign, while investigating horizontal 00:00:39.094 --> 00:00:43.955 scrolling or tiny text, when a template lacks a viewport tag, when 00:00:43.955 --> 00:00:48.816 large desktop images reach phones, or as a quick comparison between representative 00:00:48.816 --> 00:00:52.867 page types. Test the exact page, not only the homepage. 00:00:52.867 --> 00:00:57.348 Paste one complete public U-R-L, clear the anti-abuse check, and select "Test 00:00:57.348 --> 00:01:01.830 page". The analysis reads the initial H-T-M-L and as many as four 00:01:01.830 --> 00:01:06.312 stylesheets. The screenshot is a separate metered render, so it can be 00:01:06.312 --> 00:01:09.300 unavailable while the seven-check score still completes normally. 00:01:09.300 --> 00:01:14.890 The scorer-generated example has a viewport tag that disables zoom, a linked 00:01:14.890 --> 00:01:20.480 stylesheet the static sample cannot inspect, and a nine-hundred-sixty-pixel fixed-width wrapper. Those 00:01:20.480 --> 00:01:26.070 signals demonstrate accessibility, evidence availability, and likely overflow problems without pretending that 00:01:26.070 --> 00:01:27.933 a screenshot was rendered. 00:01:27.933 --> 00:01:32.478 The example scores seventy-eight, which falls in "Mostly mobile-friendly". The gauge is 00:01:32.478 --> 00:01:37.023 a summary, not a pass certificate. Begin with the warnings and information 00:01:37.023 --> 00:01:41.567 rows that explain where points were lost, then use the phone preview 00:01:41.567 --> 00:01:45.733 and real-device testing to decide whether users experience the same issue. 00:01:45.733 --> 00:01:50.025 The viewport warning keeps twenty-four of thirty points because the page sets 00:01:50.025 --> 00:01:54.317 device width but blocks pinch zoom. Remove the zoom restriction. The fixed-width 00:01:54.317 --> 00:01:58.608 warning keeps nine of fifteen because one element exceeds four hundred pixels. 00:01:58.608 --> 00:02:02.900 Replace the rigid width with a flexible width and an appropriate maximum. 00:02:02.900 --> 00:02:07.465 Responsive C-S-S receives an information result because the example names a stylesheet 00:02:07.465 --> 00:02:12.030 that was not actually fetched. Information is half credit for incomplete inspection, 00:02:12.030 --> 00:02:16.596 not proof of failure and not a pass. A live run can 00:02:16.596 --> 00:02:20.400 inspect as many as four linked stylesheets for media rules. 00:02:20.400 --> 00:02:25.949 The seven checks cover viewport configuration, responsive C-S-S, hard-coded widths, small font 00:02:25.949 --> 00:02:31.498 declarations, responsive image markup, H-T-M-L document weight, and incompatible object or embed 00:02:31.498 --> 00:02:37.047 content. The weights total one hundred, with viewport worth thirty because every 00:02:37.047 --> 00:02:42.133 other mobile behavior depends on the browser using the device width. 00:02:42.133 --> 00:02:46.780 Scores from ninety through one hundred are green; seventy through eighty-nine are 00:02:46.780 --> 00:02:51.427 mostly mobile-friendly; fifty through sixty-nine need work; and lower scores are red. 00:02:51.427 --> 00:02:56.074 Pass, warning, error, and information badges provide the actual evidence. A high 00:02:56.074 --> 00:03:00.333 total can still hide one important issue, so review every row. 00:03:00.333 --> 00:03:05.350 The main features are the weighted seven-check score, explicit thresholds and point 00:03:05.350 --> 00:03:10.367 values, stylesheet inspection, a separate iPhone-sized headless-browser preview, calm screenshot-unavailable states that 00:03:10.367 --> 00:03:15.383 do not alter the score, and private baseline export and import for 00:03:15.383 --> 00:03:20.400 comparing a later run. Each output remains tied to one tested U-R-L. 00:03:20.400 --> 00:03:25.550 The score does not execute JavaScript, so runtime-applied styles can be missed. 00:03:25.550 --> 00:03:30.700 Media-rule presence does not prove correct layout. The tool tests one public 00:03:30.700 --> 00:03:35.850 page, limits stylesheet and byte acquisition, and one screenshot represents only one 00:03:35.850 --> 00:03:41.000 browser and viewport. It does not measure Core Web Vitals, real tap-target 00:03:41.000 --> 00:03:44.433 spacing, every orientation, authentication state, or assistive technology. 00:03:44.433 --> 00:03:50.393 Save the tested U-R-L, time, total, each check, acquisition notes, and phone 00:03:50.393 --> 00:03:56.352 preview state. Fix the responsible template and assets, rerun the score, and 00:03:56.352 --> 00:04:02.311 compare a baseline. Then test representative devices and browsers for zoom, orientation, 00:04:02.311 --> 00:04:08.270 overflow, touch targets, forms, menus, keyboard access, screen readers, loading, and real-user 00:04:08.270 --> 00:04:08.767 performance. 00:04:08.767 --> 00:04:14.680 Repair the viewport, flexible layout, fonts, images, weight, and legacy content that 00:04:14.680 --> 00:04:20.594 the evidence supports. Then retest the page and verify real interactions, overflow, 00:04:20.594 --> 00:04:26.507 tap targets, accessibility, and performance on representative phones before calling the experience 00:04:26.507 --> 00:04:27.000 ready.