Do you code mobile-first?

According to Statcounter, the device market share in 2021 Q1 is:

54.25% - Mobile
42.9% - Desktop
2.85% - Tablet

What is your preferred dev workflow?
Do you code mobile-first? Or do you design for desktop and then work on responsiveness for the mobile afterward?

Comments

[Chittoji Murali Sree Krishna]

As per web-dev I do like this:
I do mobile first, then I will start using media queries to control for desktop,

My point of view will be like:

h1{
font-size: 2rem;
}
@media (min-width: 900px){
h1{
font-size: 3.5rem;
}
}

Few people will say desktops screen width will be like 1440px, so start it from 1440px, I think 900px is enough, or we can go for 1000px if we want,
I never tried for tab view.

It's my opinion, few might like it, few might not

[Junxiao Shi]

Sometimes, I use Pure CSS, and everything is responsive.

Other times:

<TABLE border=0 align=center width=960>
<TR><TD>
<EMBED src=main.swf></EMBED>
<TR><TD>
This website is best viewed on Internet Explorer 6.0 with 1024x768 resolution.
</TABLE>

Each method has its benefits and drawbacks.

[Christopher Wray]

This is funny haha

[Jay Jeckel]

I still design sites mostly the same way I did before smart phones were a thing. That said, even back in the day it was good practice to have your layout respond well when the user resized their browser. As I understand it, that seems to be the core idea of mobile-first, ie usefully displaying your content regardless of how small or big the available screen space.

[Souk Syp.]

Desktop view, then mobile.
Before Tailwind, I used to do mobile first.

[decentralizuj]

I am back-end dev, but on solo-projects I must work on front-end too. I use mostly bulma, as it doesn't require any JS in rails (like bootstrap), but I saw some amazing things with Tailwind, so I have one question here (I know I can google this, but discussions are to ask, no?)

You say desktop-first (me too), but before Tailwind you used to go mobile first, which means you work desktop-first in Tailwind.

@manen say Tailwind require you to do mobile-first.

I would highly appreciate short answer about this, since I will use Tailwind in my current project Moriarty, to make GUI. Thanks!

[Souk Syp.]

Yes use Tailwind. Go desktop. Responsiveness can be added easily later if you know more about Tailwind.

[decentralizuj]

I'm sorry, I didn't define the question very well. Does Tailwind require mobile first, or desktop-first, or doesn't matter? That's why I quoted answer that say "Tailwind require you to go mobile-first".

I know how to work on front-end, but I don't like it. I have knowledge (and work with) html, pure css or scss, template engines like haml, frameworks like bulma and bootstrap, but never used Tailwind (anyway that's not a problem).

I just need answer on this, from someone who used Tailwind.

[Souk Syp.]

It doesn’t matter. It’s just a css framework.

[tq-bit]

tailwind provides you utility classes. for instance, going from a 3-col grid view on desktop to 1-col on mobile is as hard as this:

class="grid-cols-1" <- smaller gadgets
class="md:grid-cols-2" <- medium
class="lg:grid-cols-3" <- larger devices

it's especially handy with Javascript framework components, but perhaps not the best choice if you cannot reuse templates or partials

[Souk Syp.]

You can put these classes on the same element like this for responsiveness. Cool ?

<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
</div>

Read the docs here

[Shaquil Maria]

@decentralizuj to answer your question, tailwind does not require you to work mobile-first, but they do encourage it. Their breakpoints work with min-width so it would be easier if you start mobile-first.

[Mohammed Nadeem Shareef]

by default tailwind provide mobile first layout but you can easily configure it.

[brandon_wallace]

I start projects mobile first. It is easier to start at the mobile size in my opinion.
It is a nice challenge of getting a design to look good on a small screen. I even check mobile landscape view for when the phone is turned sideways.

@media only screen and (orientation: landscape) and (min-height: 320px) and (max-width: 600px) {
    /* code */
}

The key is to make a drawing of the way it will look on mobile, tablet, and desktop before writing code.

I think that older developers go desktop first and newer developers lean more towards mobile first.

[Peter Mick]

I use bootstrap. If you use the grid system that ships with it correctly it sorts out the responsiveness aspect for mobile devices. And as I go with the development I frequently check in Chrome Developer Tools how shitty or great things look like. HTH.

[Conner Ow]

What I do is, when making a website, first, make it work on a computer screen. I'll then use media queries and go down until my site works on a Galaxy Fold (280px wide, yikes!).

How I test it is using the Browser Inspector.

[Bugsy Sailor]

I still design and code desktop first.

I understand this is a big no-no.

My only reason is personal preference. Most of my websites are personal projects with pretty small footprints. When I browse my own websites, and most of the web, its on desktop. My mobile experiences, which I admit is a lot 😬, is mostly limited to social media apps. So for all my websites it's a one person team, and between juggling many tasks as a retail business owner, it makes the most logical sense to develop in a way that's easiest and most enjoyable to me.

If that rant makes any sense. 🤷‍♀️

[Pacharapol Withayasakpunt]

It depends, but I mostly code for myself.

• For Electron-like webapp, desktop first; then adapt for mobile.
• For mobile-enabled webapp / Cordova, mobile first, by some options in DevTools console.
• For content-first websites, mobile first as well.

I have never (yet) code Tablet-first, or Touchscreen-first, now that you mentioned.

[Thalita G.]

I always code desktop-first but prepare for the mobile version at the same time. I use the Bootstrap grid which already helps a lot with mobile responsiveness and put media queries on properties that are most definitely going to be desktop-only.

I've mostly worked with other designers throughout my career though, and usually the mobile version would be either a quick afterthought or not even considered at all. 😅 I can still get around with my own workflow with them, but it can sometimes be tough not knowing what they have in mind for mobile.