Mobile First Design

Websites are expected to work. Plain and simple, if a site isn’t designed to work on my phone I’m out.

Now that I’m one of the people building sites I understand why some design and functionality is lost on mobile designs. However it is important to know that if a site doesn’t function well across multiple browsers and devices, it isn’t finished.

Here we arrive at the crux of the situation. What is the best approach to coding a good looking site that works well regardless of how the user is viewing with the page. When I was first learning CSS I was only learning the concepts, so most tutorials show from the desktop and add media queries to optimize the design on smaller screen sizes.

Let’s talk about the desktop-first design. After the HTML is set-up CSS rules are applied with large screen sizes initially and media queries with a min-width are added. Desktop designs are typically more complicated. This means writing CSS to overwrite default styles and so on. It can take a lot of effort to build a site exactly like it was designed to look. This way of building a site works, but sometimes it makes a bit of a headache down the road.

For example if I have two elements that I would like to appear side-by-side it isn’t a heavy lift to throw those into a flex container and manipulate the space around them as needed.

However when we go back to our code to make the site work for mobile odds are that we cannot leave these elements side-by-side. Meaning we either have to remove the display: flex; or change the flex-direction to column. Either way we had to write code to make that happen.

Since we want the elements to display vertically we could have started from a mobile view and not written any CSS and the elements would have displayed how we intended. The idea behind starting at these smaller viewports and working to the most complicated design using media queries with min-width is to simplify the code. Instead of coming back later to overwrite styles we can start with something simple (that might already look good on mobile) and adding to it later.

I’m out here on this learning journey like a lot of you. I’m hoping that by implementing this work-flow I can be more efficient in my coding. I’m certain there are cases where working from the desktop and modifying the site for mobile works best. This is just another technique that might make parts of our lives easier.

Thanks for reading and let me know your thoughts.

Happy coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store