Why I Took a “Mobile First” Approach When Building My Personal Website

I never had to think about responsive design or CSS at the companies where I worked. I was only responsible for developing markup and logic because there was usually a dedicated individual who styled everything. In some ways, I believed I was living the life, but the truth was that I've never been comfortable with CSS or responsive web design.

Another thing I've noticed is that other developers start with the desktop design initially. They must support the desktop first approach for a number of reasons, one of which is that they are developing an admin dashboard that is only meant to be utilized in a desktop browser environment. However, the most common explanation I observed is that the designer is to blame because they only gave a desktop design.

I decided to try out a Mobile First approach to my website because:

• I am my own designer so I can provide myself with mobile designs as well.
• I felt that shrinking down a design is much harder than trying to scale up.

Here's a screengrab of my initial Figma designs.

When I was done with the mobile layout and went to design the desktop layout, it was so easy to just expand my layout to the larger screen.

When developing, I only need to worry about my font-family margin and font-sizes to make it work on a mobile size screen. I don't have to bother myself with complicated layouts and such. By only adding the above mentioned properties, I was able to get a decent looking mobile website.

Try this approach on your next development task and see how it goes. I'm sure it'll turn out great. 😎