A while back there was a code newbie chat discussing the concept of mobile first.
A number of people responded that mobile first development was just a fad, or a buzzword. However, I disagreed. You see, mobile first development is operating on the assumption that anything that works on your phone will also work on your computer. The other way around?
The concept of responsive design is based on this observation. When you're implementing a design for a site and supporting various screen sizes, think first about how it will look on the smallest screen. Make that the default! Then adjust for larger screens as you get more real estate. That way, you are styling for the always case and actively optimizing for those small screens.
Styling for Mobile
Let's take my site as an example. I have a navigation bar with an h1 tag in it. I've styled other h1 elements on my page to have a margin at the bottom, but in this case that will put spaces in my vertical navigation that I don't want!
I also want this specific h1 in my navigation to have a more bolded font weight. So let's add those things.
#header h1 {
font-weight: 900;
margin-bottom: 0;
}
I don't need to do anything else to make this look appealing on my phone. And it still works on other sized devices, awesome!
Tablets as a Standard Size
Well, on second thought, the h1 looks ok but it's kind of weird to have a vertical nav bar on my tablet and not make use of the horizontal space available to me. So I want to change the look of the page when the screen size is just a bit bigger.
This is where media queries come in. Media queries can scope any section of styles to a particular screen size, which is incredibly powerful. However, because we're defaulting everything to our smallest screen, we actually want this media query to only be in effect for screens larger than a particular size.
@media (min-width: 600px) {
#header nav ul li {
display: block;
}
}
Keep in mind that the particular pixel size we're working with is generic tablet size. There are multiple "recommended" breakpoints for these things.
Once More with JavaScript!
Sorry for those who don't get this joke.
So that looks better. We now have our typical horizontal navigation. However, that's not the only way to do this. Responsive design can also be implemented using JavaScript.
skel.init({
reset: 'full',
breakpoints: {
global: { range: '*', href: '/css/style.css'},
narrow: { range: '-980', href: '/css/style-narrow.css'}
}
})
Note that global styles are always in place.
We're still using CSS to promote different styles, but instead of media queries, we have JavaScript code that triggers based on screen size and uses the appropriate stylesheet.
Wow! My Desktop Screen Is Huge!
Ok, you've made it to the land of expansive green fields and endless possibilities! Who knew a laptop screen would feel so luxurious. It's at this point that you might start looking at showing more items in a row in your grid. Or maybe you want to display something horizontally that was vertical before. More framing? It's up to you! The world is your oyster!
@media (min-width: 775px) {
#header h1 {
margin-left: 5em;
margin-bottom: 1em;
}
}
We can go crazy and add that margin back. We have room now!
That grid we've been showing one element of at a time? Psh, that's a thing of the past. Three at a time baby!
@media (min-width: 775px) {
#speakwrap {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-template-areas: 'conference';
grid-gap: 10px;
padding: 1em;
}
}
I'm kidding a bit. But it really is nice to have so much flexibility when you get to this point. And in reality, it's easier to scale something up from your most limiting point than to attempt to scale back.
If you're looking for more content like this, check out:
The Layers of JS...Styles Remix
The Layers of CSS
The Layers of Javascript
Top comments (7)
While mobile first will allow it to "work" on other devices, it won't be a good UI. Phone interfaces are not the same as tables are not the same are large displays.
It's difficult to create one layout that will work across sizes. Documents are the easier to translate. Applications are the harder to translate.
It's not difficult, it just requires more planning and creative thinking! I'm building a web app which looks perfect on each device while still using the same components without any crazy hacks (with just HTML & SCSS!) I might be able to share some photos. :)
Desktop
Mobile
(Icons look a bit weird on desktop, dunno why tho)
That looks awesome! Nice work!
You're right, but getting things working is the first step. Using the concepts above to adjust that design to look more elegant on other screen sizes is made easier from that starting point.
I design desktop first, but then use CSS Grid to make everything rearrange for all sizes of device. grid-template-areas is all you need to create some incredible mobile interfaces which can easily look like a native app experience, but without having to create a separate interface or get yourself into update management hell.
Mobile first or last a good experience is what matter. Thee eis no doubt an accessible, fast and a good looking (read experience) website wins all hearts and praises.
P.S. Keeping 2 H1 in one page is not recommended.