DEV Community

loading...
Cover image for Trying the mobile-first approach (as a newbie)

Trying the mobile-first approach (as a newbie)

Maru
Aspiring to become a Web Developer and documenting my journey πŸ€“
・3 min read

Hello everyone!

One of the things I've struggled a lot while building websites is to make the mobile version to look good, to me this was very important because I know nowadays most users access sites through their phones.

When I started to make some research about responsiveness the first advice that appeared was 'to follow the mobile-first approach' and this made perfect sense, however, I did have to review a couple of things before trying it myself. So, I want to share my experience in case it helps other people!

If you're like me and want to try this approach for the first time, I suggest you to pick a Frontend Mentor challenge and start from there. I chose the "Fylo Dark Theme Landing Page" for this.


What is the mobile first approach?

This was my first question and here's the best answer I found:

"Mobile-first is when we start by writing our CSS for mobile devices and then use media queries to add in styling for larger screen sizes." Source


My experience

Like I mentioned, I chose a Frontend Mentor challenge for this. At first, it was very strange to focus on the mobile design because I had only done it the other way around (desktop-first) but you do get used to it.

As I started writing the code I had to keep in mind that basically, the default styles would be smaller and then I would have to write media queries to make everything bigger. Also, the default styles would be one column (due to the design I picked).

What made the most sense to me is that mobile designs are usually simpler and it's easier to start from there. Also, that if you start with the desktop design you'll find yourself writing media queries to override the complex styles.


My solution to the challenge:

Mobile:
Mobile Version

Desktop:

Desktop Version

Live site
Original challenge description


What I learned

  • During this process I learned that you can click this button in the browser Developer Tools to emulate a phone with different sizes. It's super useful!

Browser Tool

  • When following this approach you have to use min-width for the media queries and this is honestly the explanation that finally made me understand how it works:

Min-width is the minimum width at which a style will START to be applied. (Have to be ordered from smallest to largest to work properly, regular styles first). With min-width, styles START and continue forever as long as min-width is met, and no max-width is specified.

Max-width is the maximum width at which a style will continue to be applied. After that, the style will STOP being applied. (Have to be ordered from largest to smallest to work properly, regular styles first). Styles STOP as soon as width greater than max-width is hit.

Thank you Stack Overflow

  • There are so many other ways to create a responsive layout without using media queries! For example, this to create responsive grids: grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  • I can definitely see why this is the recommended approach for most cases but I know it really depends on your case. For now, I try to think first "What would make me write less code and not repeat myself?"

  • It was an amazing feeling to see that the website looks good on mobile! It's not perfect at all and I still have to work on other things, but overall I'm very happy with the result and I enjoyed the experience.


If you check out the live site please let me know if you have any feedback, I would appreciate it a lot 😊

Discussion (9)

Collapse
jeanpaulb21 profile image
Jean Paul

Nice Article! Are you self taught?

Collapse
marulucenat profile image
Maru Author

Thank you! Yes, I am :)

Collapse
jeanpaulb21 profile image
Jean Paul

Oh nice, And... are you focused only on web programming?

Thread Thread
marulucenat profile image
Maru Author

For now, yes πŸ€“

Thread Thread
jeanpaulb21 profile image
Jean Paul

Ok ok great 😊

Collapse
li0so profile image
Emilio Becerril

I’ve always struggled with making my design mobile friendly. This seems like a great idea and I can’t wait to try it out. Thanks for sharing!

Collapse
marulucenat profile image
Maru Author

Yes, you should try! Thank you for reading ☺️

Collapse
benjithorpe profile image
Benjamin Thorpe

I was used to Desktop first, then I had a project where I decided to test mobile first, and now I am fully on mobile first, still getting the hang of it.

Nice piece by the way

Collapse
xavin616 profile image
Xavin616

Thanks, this is really helpful. Personally, I always taught the mobile first approach was an necessary pain but this is eye-opening.