I’m shocked at how many businesses still have websites that don’t work in mobile. For the average person, reading web pages on a smartphone is the primary way they read content on the web.
Though I’m not 100% on board with “mobile first”, it should soon be the norm. To CSS hackers, “mobile first” just means implementing the mobile layout first, then making the wider-screen layout the exception.
Example:
img.photo {
width: 100%
}
@media only screen and (min-width: 640px) {
img.photo {
max-width: 640px;
}
}Your code, above the media queries, is for a narrow mobile device screen. Then, in the media queries, you rearrange the content for a wider screen.
So, what’s on the wider screen? In the mobile-centered world, it shows the same content, but spread out horizontally. Perhaps in the mobile page, there’s a “hamburger” menu, and display all that content at once.
Less Content
Of course, if you are mobile-focused, you aren’t going to have as much content. There’s really nothing worse than a mobile page that goes on forever. The scrolling finger gets tired!
More Guidance
With less screen space, and less ability to view two-dimensional layouts with data, the readers need help to navigate. One way is via “guidance” like related pages, one-touch database queries, and location sensitive queries.
Consider large hierarchical navigation to be impossible on mobile. The mobile device cleaves websites into two – the mobile part, and the wide-screen navigation parts. My favorite contrast is usps.com on mobile, and usps.com on desktop. They’re different.
Fewer Design Options
The mobile screen is so small that you’re reduce to extremely simple layouts. Most of the site will be a 100% width scrolling rectangle.
The wide-screen version will be the same thing, except perhaps some whitespace along the content columns, and some parts will go from one column to two side-by-side columns.
This decrease in layout possibilities has led to the proliferation of “page builders”, which open the door to automated website creation.