Module 1: Responsive Foundations

Why Mobile-First Matters

For many people, especially across East Africa, a smartphone is the main and often the only way they use the internet. They browse shops, read news, apply for jobs and pay bills on screens a few inches wide, frequently on mobile data that costs money and varies in speed. A website that only works well on a laptop quietly turns these visitors away. Responsive web design is the practice of building one website that adapts to every screen, and mobile-first is the most reliable way to do it.

What responsive design means

A responsive website uses one set of HTML and CSS that adjusts its layout to the space available. It rests on three ideas, first described by Ethan Marcotte in 2010 and still the core of the craft:

1. Fluid layouts that use relative widths instead of fixed pixel widths.
2. Flexible media: images and videos that scale within their containers.
3. Media queries that apply different CSS when the screen meets certain conditions, such as a minimum width.

Modern CSS has added powerful tools on top of these, including flexbox, grid, container queries and fluid typography, all of which you will learn in this course.

Mobile-first versus desktop-first

There are two ways to write responsive CSS. Desktop-first styles the large layout as the default, then uses max-width media queries to undo and squeeze things for smaller screens. Mobile-first styles the small layout as the default, then uses min-width media queries to add layout as space grows.

Mobile-first usually produces shorter, cleaner CSS because a single column is the natural behaviour of HTML. Block elements already stack vertically and fill the width. You start with that, then add columns when there is room, rather than fighting a complex layout back down.

Mobile-first is also a content strategy

A small screen forces you to decide what matters most. Consider a hypothetical Nairobi bakery's website. On a desktop there is room for a large slideshow, a full menu, a blog feed, social media widgets and a long story about the founders. On a phone, a visitor typically wants to know: what do you sell, how much, where are you, are you open, and how do I order? Designing mobile-first puts the call-to-action ("Order on WhatsApp" or "Call us") and opening hours near the top. When you later scale up to desktop, you add supporting content around this core rather than burying it.

A worked example

Here is the mobile-first pattern in its simplest form. The default card list is one column; at 40em (640px at the default font size) it becomes two columns, and at 64em (1024px) three.

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

A phone reads the first rule and ignores the media queries because its width does not meet them. Every rule builds on the previous one; nothing is undone. Compare the desktop-first version, which starts with three columns and must override them twice going down. It works, but it is easier to leave a stray rule that breaks small screens.

Performance and real-world conditions

Mobile-first thinking extends beyond layout. Phones often have slower processors than laptops, smaller memory and less reliable connections. Thinking mobile-first means asking: does this page need a 3 MB hero image, three web fonts and several tracking scripts? Every kilobyte costs a mobile visitor time and possibly money. Google also uses the mobile version of a page for indexing and ranking (known as mobile-first indexing), so a poor mobile experience can affect how your site appears in search results.

Common mistakes to avoid

• Hiding important content on mobile with display: none instead of reorganising it. If it matters on desktop, it usually matters on a phone.
• Testing only by resizing a desktop browser. Real phones have touch input, different fonts, browser toolbars and slower networks.
• Tiny tap targets, such as links packed closely together. Fingers are less precise than mouse pointers.
• Treating mobile as an afterthought, bolting on a few media queries at the end of a project.
• Building a separate mobile site at a different address, which doubles maintenance. One responsive site is the modern standard.