The Tourist's Screen

Narrated

You built a beautiful trip planner. Back in Lesson 4, you turned it from a homework assignment into something that looks like a real product. Clean layout, nice colors, dark mode, accessibility. You deployed it in Lesson 7. Real people can use it. You’re proud of it.

Then your friend texts you. “Hey, I’m checking out your trip planner from the airport.” She sends a screenshot.

Your stomach drops.

The header is cut off. The destination input stretches past the edge of the screen. The “Generate” button is so small she can barely tap it. The itinerary cards are crammed together, text overflowing off the right side. The whole thing looks like someone took your beautiful desktop layout and stuffed it into a keyhole.

She’s on her phone. And your app was never built for phones.

Here’s the thing that makes this especially painful. Think about who uses a trip planner and when. A tourist. Walking around a foreign city. Standing at a train station. Sitting in a cab. Checking what restaurant they’re supposed to go to for dinner. These people are not at a desk with a laptop. They’re holding a phone, one-handed, squinting in the sun. Your app’s number one use case is mobile, and it’s completely broken on mobile.

This isn’t a rare edge case. Depending on the source you check, somewhere between fifty and seventy percent of all web traffic is mobile. If your app doesn’t work on a phone, it doesn’t work for most of your users.

Let’s fix it.