Assignment 10 - Mobile Ready

Mobile Design Approach

For this assignment I implemented a mobile-friendly version of my home page using a single responsive layout that works on both desktop and mobile devices.

• Responsive navigation using a hamburger menu on small screens.
• Hero section that stacks vertically on mobile for better readability.
• Images scale with max-width: 100% and limited height so they fit on phones.
• Tap-friendly sidebar links and controls that work with both mouse and touch.

The same menu choices and main content are available on both desktop and mobile, and the interface can be used with touch the same way it is used with a mouse.

Lighthouse Mobile Audit - Summary

I ran a Lighthouse audit in Chrome DevTools using Mobile device emulation (Navigation mode, Slow 4G throttling). Below are the overall scores from the report:

• Performance: 49
• Accessibility: 100
• Best Practices: 100
• SEO: 100

Key Performance Metrics

• First Contentful Paint (FCP): 1.0 s
• Largest Contentful Paint (LCP): 12.6 s
• Total Blocking Time (TBT): 1,640 ms
• Cumulative Layout Shift (CLS): 0
• Speed Index: 2.1 s

Lighthouse highlighted some performance opportunities such as:

• Using more efficient cache lifetimes for static assets.
• Improving image delivery (smaller or more optimized hero images).
• Reducing main-thread work and long-running tasks.

These are optimization suggestions and are not required to be fixed for this assignment. The main goal here is to understand what Lighthouse reports and how it evaluates a page on mobile.

Accessibility, Best Practices, and SEO

Lighthouse reported scores of 100 for Accessibility, Best Practices, and SEO. This indicates that:

• Interactive controls are accessible and keyboard-focusable.
• The page uses good contrast, semantics, and HTML5 structure.
• The site is served over HTTPS and avoids insecure or deprecated features.
• SEO basics such as title, meta tags, and mobile viewport are correctly configured.

Embedded Lighthouse Report (Mobile)

Below is the full Lighthouse HTML report for my home page. The report includes detailed audits for Performance, Accessibility, Best Practices, and SEO.

Open Full Lighthouse Report in New Tab

Note: The report above was generated using Chrome DevTools Lighthouse in Navigation mode with mobile emulation and Slow 4G throttling.