Lecture 12 - Mobile and Shipping

Project check-in

Ten days to Demo Day. Each team gets three minutes, and this time you start on a phone:

1. Open your landing page the way a stranger would, from a link.
2. Sign up, and show the first screen a new person sees.
3. Do the core thing.

Feedback follows Rules for Class CritsRules for Class Crits

Keep feedback respectful and focused on the work, not the person. We’re all here to learn.
If you liked something, call it out! If you don’t, try and explain why.
You can use “I wonder…” or .... Then, in your team: what's left on your must-have list, and what are you cutting? This week is your feature freeze. After it, you only fix and polish.

Your site already works on a phone

Open your project on your phone. It's responsive (L4), it's on the internet, and you can put it on your home screen:

• iPhone: in Safari, tap Share → Add to Home Screen.
• Android: in Chrome, tap ⋮ → Add to Home screen (sometimes Install app).

It gets its own icon and opens like an app. A website that does this well is called a progressive web app (PWA). A small file called manifest.json, with your app's name, icon and colours, makes it look even more like one.

So why does anyone make an app?

Three ways to make a mobile product

Some things to note:

• For a startup, the web is usually the first version. One link in a WhatsApp group, no review, no install. Many products only become apps once people are asking for one.
• Native apps should feel native. The back gesture, tab bars, share sheets and where the main button goes all differ between iPhone and Android. Apple's Human Interface Guidelines and Google's Material Design are both public. Look up the same component in both.

iOS and Android are different products

Who are your users? A product for Indian college students that only works well on an iPhone has picked a very small audience. Test on a cheap Android phone, and on Slow 3G (Exercise - Trace a RequestExercise - Trace a Request
Watch your website load, piece by piece

Use the browser's Network tab to observe everything that happens between typing your URL and seeing your page.

Steps


Open your own site (from Exercis...).

The stores are gatekeepers

Some things to note:

• That cut is a design constraint. It's why Netflix and Spotify have you pay on their websites rather than inside their iPhone apps.
• A website ships when you push. An app ships when Apple says yes, and reaches people when they update. A one-line bug fix can take days.
• The stores also decide what's allowed. Sign in with Apple, from L8, keeps appearing because of Apple's rules.

Sidenote: Which apps on your phone could have been websites? Which ones really needed to be apps?

Ship-ready

Most student projects skip this part, and most real products don't. In your team, go through each list on your own project and write down everything that fails. That list is your work until Demo Day.

Accessibility

• Contrast. Body text needs a contrast ratio of at least 4.5:1 against its background. Inspect some text in DevTools and click its colour swatch to see the ratio. Check dark mode too (L3).
• Keyboard. Put the mouse away and use Tab and Enter. Can you sign up and do the core thing? Can you always see where you are?
• Alt text on every image that means something. A model can write a first draft (L11), but read it.
• Text size. rem, not px (L4). Turn up your phone's text size and look again.
• A screen reader. On a Mac, ⌘F5 turns VoiceOver on and off. Listen to your landing page for thirty seconds.

Speed

• In DevTools, open Lighthouse and click Analyze page load. Read the Performance and Accessibility scores and the first few suggestions.
• Throttle to Slow 3G and reload, as in Exercise - Trace a RequestExercise - Trace a Request
  Watch your website load, piece by piece
  
  Use the browser's Network tab to observe everything that happens between typing your URL and seeing your page.
  
  Steps
  
  
  Open your own site (from Exercis.... What does someone see while it loads?
• The usual cause is images: a 5 MB photo straight from your phone. Resize it before it goes in the repo.

Security and privacy

• Rules. Rerun the fetch from Exercise - Hack the WallExercise - Hack the Wall
  Find out what a stranger could do to the class wall
  
  The class wall is open on purpose. The page only lets you paint squares in your own colour, but the page isn't what protects the data. The datab... against your own database. Signed out, can you write? Can you read anything you shouldn't?
• Keys. Search your repo on github.com for AIza, and check .env isn't there (L9).
• Your server. Does it turn away empty and very long requests (L11)?
• What you collect. List every piece of personal data you store. Do you need all of it? Who can see it? India's Digital Personal Data Protection Act (2023) expects you to collect only what you need and tell people what it's for.

A real domain (optional)

your-project.vercel.app works, but a name like hostelorders.in is easier to say out loud on Demo Day.

1. Buy one from a domain registrar. A .in or .com costs a few hundred to a thousand rupees a year.
2. In Vercel, go to Settings → Domains and add it. Vercel tells you which DNS records to add at your registrar.
3. Add the new domain to Firebase's Authorized domains, or sign-in will fail on it.

This is DNS from Exercise - Trace a RequestExercise - Trace a Request
Watch your website load, piece by piece

Use the browser's Network tab to observe everything that happens between typing your URL and seeing your page.

Steps


Open your own site (from Exercis...: you're telling the internet's address book that your name points to Vercel's computers. It can take anywhere from a few minutes to a few hours to reach everyone.

Demo Day

Friday 27 November. Seven minutes per team, then three minutes of questions.

• Start from your landing page, the way a stranger would, and go through sign-up to the core thing.
• Tell the story of how you made it: what you cut, what broke, and what you'd do differently. That's the process documentation from the brief.
• Have a backup. Record your screen going through the whole flow, in case the Wi-Fi, a key or a quota fails on the day.
• Practise once with a timer. Seven minutes goes quickly.

Homework

• Everything on your ship-ready list.
• Exercise - Mobile Ecosystem ComparisonExercise - Mobile Ecosystem Comparison
  iOS vs Android, from a product team's chair
  
  Compare and contrast the iOS and Android ecosystems for app development and distribution, highlighting the differences that would actually change a prod..., with your own product as the lens.
• Rehearse your demo.