Design to desktops/laptops today, but in the future we may go to mobile

I have seen that mobile should be considered first then desktop.
We have a site that is on our intranet, and is not accessible to the outside world. Currently, no mobile devices or tablets are used just desktops and laptops.
They hope to have this site accessible from anywhere on any device. Although, this may not happen depending on budgeting.
Without taking time to design to a device that we may not need to target. Is there anything I can do to design for desktop and laptop, and keep it easy to add mobile later if needed?

Don’t think of it as mobile versus desktop. It’s really about differences in view port width. A desktop browser’s width can easily be changed from very narrow to very wide. And a mobile device’s width can also be changed from narrow to wide by switching from portrait to landscape. So you are not designing to a specific device, you are designing to handle any view port width. I refer to this as a “narrow-first” approach and I 100% highly recommend that is what you use.

You don’t need a mobile device to do this. Just narrow your desktop browser as far in as it will go and style for that width. This should be your default (hence “narrow-first”). Then you can gradually widen the browser and start adding break points to make layout transitions for wider view ports. This is a very high level explanation, there are other considerations to take into account to make it truly responsive, but you get the gist.

Your approach of designing for wide view ports now and then adding narrow view ports later can be done but is not as clean and much more work (IMHO). But if you have no choice then I would suggest that you at least move from px units to rem units for everything involving a width that you can, including CSS break points. This will release you from the unnecessary burden of having to choose a bunch of specific px break points because you can now base them on what the content needs instead of worrying about trying to cram them into a specific px width.

1 Like

Thank you for the insight. I’m going to try “narrow-first”.
If I do that should I change to rem or stay with px?
Can I mix flexbox and grid?
Responsive design was relatively new when the last time I did any web work .
I’m looking forward to getting to use and learn the newer designs.

Personally, I use rem for everything I can, so I would definitely recommend it. The nice thing about rem (or em) units is that they also take the font size into account. Thus, if the user manually increases the font size your layouts won’t break and have a bunch of overflow issues because your widths will expand as the font size gets bigger. This is one of the advantages of using rem in CSS break points as well.

If you mean “can I use one inside of the other” then yes, here’s an example. If you just mean, “can I use both of them on the same page” then yes as well.

1 Like

Do you use rem for margins, padding and widths?

It depends on the circumstances, so I can’t say I do 100% of the time, but yes, I try as hard as possible use rem for margins, padding, and widths, especially for left/right margin/padding and all types of widths.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.