Short definition

Mobile-first — a design and development method that starts with a small viewport and essential functionality, then expands as more space becomes available.

Also known as: mobile first, mobile first design.

Mobile-first means designing and building for the smallest practical viewport first, then progressively expanding. That constraint forces you to decide which content is essential and which is optional.

How does mobile-first work?

The base styles define the narrow layout: a single column, stacked sections, and touch-friendly controls. Media queries then add wider layouts as space becomes available. Making mobile the default helps prevent it from becoming an afterthought that needs to be repaired later.

What does this mean for a small business?

For a small business, mobile-first keeps essential content and actions available on narrow screens instead of removing them from the mobile layout. Wider layouts can then add space and columns without changing the underlying content.

What should you watch for with mobile-first?

  • define the content hierarchy before the layout work starts;
  • make tap targets large enough, with enough space between them;
  • avoid loading more code than the small screen needs;
  • test on real devices, not just a resized browser window;

How it relates to other website choices

Mobile-first is one practical way to implement responsive web design. A clear content hierarchy and robust layout also support accessibility.