Mobile-first layout
Mobile-first layout is a responsive design approach that establishes styles and structure for small screens before adapting them for larger screens.
CSS in Depth, Second Edition
A mobile-first approach is a responsive design strategy that establishes the layout and styles for mobile devices before adding adaptations for larger screens.
- How it is used
- Structures one responsive page for small and large viewports instead of maintaining separate mobile and desktop sites.
- How deep it goes
- Works through default mobile styles and wider-screen changes, while leaving the number of breakpoints dependent on the design.
- Examples
- Uses a page whose navigation and spacing change at a medium breakpoint, plus cards that become a grid on wider screens.
- What you can do after
- Build it from scratch with default mobile CSS and min-width queries that add wider-screen layouts where needed.
Read how CSS in Depth, Second Edition explains mobile-first layout →
D3.js in Action, Third Edition
Mobile-first is a responsive design approach that starts with the constraints of mobile devices and progressively adapts the design for larger screens.
- How it is used
- Uses phone constraints as the starting point for responsive data-visualization layouts and progressively adapts them to larger screens.
- How deep it goes
- Explains design progression, performance considerations, media queries, and grid classes, but defers chart-specific responsive decisions to each visualization.
- Examples
- Demonstrates phone, tablet, and desktop column assignments for rankings, scatterplot, and bar-chart visualizations.
- What you can do after
- Build responsive visualization layouts by starting with mobile columns and adding larger-screen arrangements through min-width breakpoints.
Read how D3.js in Action, Third Edition explains mobile-first layout →
Web Design Playground, Second Edition
A mobile-first layout is a responsive design strategy that begins with a layout optimized for small screens and progressively enhances it for larger screens.
- How it is used
- Uses a smartphone-optimized starting point to build responsive pages by adding larger-screen layout changes.
- How deep it goes
- Defines the strategy, explains additive CSS and content prioritization, and demonstrates a 750-pixel grid change.
- Examples
- Uses a quotation sidebar hidden on narrow smartphone screens and displayed on wider screens such as tablets.
- What you can do after
- Build it from scratch by starting with a minimal smartphone layout and adding larger-screen changes with media queries.
Read how Web Design Playground, Second Edition explains mobile-first layout →
Web Design Playground
A responsive design approach that starts with styles for small screens and progressively enhances the layout for larger screens.
- How it is used
- Uses a small-screen baseline to organize responsive pages before adding larger-screen enhancements.
- How deep it goes
- Explains the baseline, content priorities, and media-query progression, but does not detail every responsive typography or image technique.
- Examples
- Uses a 320-pixel smartphone baseline and responsive heading sizes that change at a 750-pixel breakpoint.
- What you can do after
- Apply it via CSS media queries to build a smartphone layout and progressively enhance it for wider screens.
Read how Web Design Playground explains mobile-first layout →
Related concepts
- responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- websiteuses · A website is a collection of related web pages and resources made accessible through the web under a common site identity or address.
- media queryuses · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.