Is there a specific type of design for doing mobile first?

HTML-CSS
#1

Hi guys,

I’ve been unable to wrap my head around mobile-first since first trying to implement it last week. Before this I’ve been working on basic designs and working from desktop backwards with decent results. As my designs are mainly all flex-box /grid it means that the page naturallty transitions into mobile design nicely with just a few media queries.

Would I be half correct saying mobile first is mainy for more complicated designs were you have multiple sections of grid/flex and not just one big flex-box?

For example here’s two of my recent complete challenges Social-proof-challenge & my Chat-app-challenge. Both are super simple but I fail to see why working mobile first would be any better and I’m assuming this is because they’re simple designs?

I can certainly see how with more complicated designs such as This youtube follow-along mobile first build would be better with mobile-first.

Any comments on this would be super helpful.

#2

What I do is lay out my content first on desktop and then when I’m done with that I start with mobile first. I do mobile first because essentially everything is in one column and it’s easier than working backwards from desktop to mobile with less media queries

#3

Thank you. I tried this the other day with grid. I laid out my templates and inserted the content and everything fit nicely, but when working from mobile first and then trying to fit the templates around the content it was overflowing and just seemed more confusing.

Again, I’m wondering if this is the best way if you only have a couple of media quieries on a basic site where mobile is just a column.

Because I’m still a newbie I guess it’s hard to see the difference and I’m so used to desktop first and not doing everything in reverse essentially. Ask me in 6 months and I’m sure I’ll give a different answer!

#4

Frankly, no. It is almost always easier to start from a narrow-first approach then to start with a wide version and work your way backwards. Yes, with a very simple design you can get away with doing the wide version first, but in the real world you usually aren’t working on very simple designs.

I think you just need to practice more until it feels more natural to you. So don’t fall back on old habits. Force yourself to start narrow and work your way out.

Also, it is perfectly fine if you find yourself needing to add helper <div>s and such to aid in styling for your wide version. Usually you don’t need as many helper <div>s with the narrow version since things sort of just stack up on top of each other. So don’t be afraid to add these helpers, but always make sure to go back and verify that your narrow version still looks good and adjust any CSS if needed.

1 Like
#5

Thank you.

Ok, this maybe where I’m going wrong here so please correct me:

When I attempt mobile first I create the mobile content, let’s say <400px. From 400px I then attempt to create my flex-box/grid which is where I struggle.

Are you saying that once I’ve finished my mobile design at mediaqueries ~400px I can then go to desktop and work down to 400px?

I think this is why I’m struggling so much as working down from desktop allows flex/grid to automatically fall into place/wrap as you decrease screen size. I’m essentiually trying to do that in reverse. :smiley:

#6

If you use a narrow-first approach you most likely won’t need flexbox/grid for most of your layout in the narrow view. I’d have to see exactly what you are working on to help you any further. But in a narrow view chances are that you’ll want most of your major block elements to just stack on top of each other (taking up the entire width available to them), which is the default for block elements. So you won’t need to put them in a flexbox or grid. Again, I’d have to see the particular page you are working on to answer this, I’m just giving you a general guideline here.

And when you start out with the narrow view, forget about break points. Your narrow view is the default and you should not be using any break points at all. The break points are for later when you widen your browser and want to change layout based on a wider view port.

In summary:

  • Narrow your browser as far as it will go in.
  • Style the page to look good at that narrow width.
  • Do not use any CSS break points.
  • Use very simple CSS for styling. Do not introduce advanced layouts like flexbox/grid unless absolutely necessary.

Once your narrow view is complete then you can widen the browser and add break points as needed and introduce more advanced layouts using flexbox/grid.

1 Like
#7

As an addition to what was already said - I think it’ll all fall into place for you if you try to wrap your mind around the difference between this:

@media (max-width:400px) {
  ...
}

and this:

@media (min-width:400px) {
  ...
}

You’ll almost never need the first one for a mobile-first approach, and you’ll almost always need the second.

2 Likes
#8

Thank you, it’s now making a lot more sense! :smiley:

#9

Thank you, yes I’ve started to just use min-width now and it makes a lot more sense so I guess I kinda got the answer in there somewhere!

#10

Yep I think you’ve nailed it.

1 Like
#11

I don’t think I’ve ever attempted to learn something with as much ups and downs as web developement and I’m on the easy part! Slowly it’s sinking in!

#12

Welcome to the wonderful world of web development. There are few areas of technology that change as fast. Get used to doing a lot of searching, reading, and learning because there will be a new flavor of the month every month. I wish I were kidding.

2 Likes
#13

This is why it’s so daunting, I hate it but love it!

I redone a few old HTML/CSS challenges on FCC and understood them so much better so it’s a good sign I’m slowly improving.