What are peoples work-flows to keep things mobile first Centric?

1

So I just checked out my portfolio project on my iPhoneSE (The old one!) and my website looks like a dog’s dinner. :crazy_face:

The thing is this is the second time I started to do this website, well the CSS anyway and I just don’t seem to be able to get into the flow of working mobile-first.

Is the only trick up our sleeves to work with Chrome or Firefox and set the inspector up for a certain model of phone we want to work with and then take in from there?

Is there any magic skills anyone can impart?

What are the tricks Dev’s use to get things looking nice on the majority of phones out there? …

1 Like
3

I think the trick is to think in flexboxes and have a look at the chances in the layout when you change the screen width.

Example:
Smartphone:

  • whole site: column layout
  • header: row layout (logo and hamburger menu)
  • content: column layout
  • footer: row layout (logo, imprint, tos)

Wide screen:

  • whole site: column layout
  • header: row layout (logo and navigation)
  • content: row layout
  • footer: row layout (logo, imprint, tos)

So in this simple example you only have to change the content section from column to row.

If you know this upfront, it’ll be way easier to implement it.

1 Like
4

Thanks a lot guys…

Yeh I was just losing it a bit when I realized my site looked totally broken on a small phone screen even though I had been coding ‘mobile-first’ from the start (with the new CSS).

I manged to real it in and get it to look OK now…

I think the trick is to decide what model of phone you want to have as your bare minimum… code it to look nice on that… then add the other features for perhaps … bigger phones … then tablets… then small desktop then large desktop… like that…?

I just realized after all my efforts I hadn’t made it look nice even on my own phone and It was a bit of a ‘wipe-out’ moment… but it’s all good.

I had it in my head that somehow Safari is evil and was braking me expertly coded ‘mobile-first’ website but the truth is I suck! Lolz.

1 Like
5

Why? That restricts your code to a particular device. What happens when a new device is made that is between breakpoints? Why not code your media queries to modify the layout at the size the layout breaks?

That’s just my opinion, and I’m not an expert, but if your layouts are not dependent on particular devices, they should look all right on all devices, even future ones.

If your layout breaks at 615px wide, set a media query for that size, and then test again. Someone may have a HD desktop screen, but open sites in smaller windows.

1 Like
6

OK, I see what your saying. - So the buzz words are ‘mobile first’ & ‘device independant’ :slight_smile:

My question is where to start? I mean if you coded mobile first right from the get go someone might have an old mobile screen that is 100px by 100px … An old sony Cybershot or something… How can we code something reasonably complex and still have it look good without an almost infintate no. of breakpoints…

OK I think I am answering my own question as a write this… immense skill, that’s how, I guess :crazy_face:

Anyone have any good links that could give me some ideas how to code mobile first and device independant?

7

OK I was being a bit ridiculous a 100px by 100px…

8

It’s also about opportunity costs.

You probably can’t make your page perfect for 100% of the devices.
Do you want to invest 20h to make it work on 99.9% instead of 99% of devices?

If you start from mobile, you can use the whole layout, add some space to the left and right and would have a decent wide screen view. The page maybe wouldn’t look awesome, but it would be at least ok-ish.

1 Like
9

Thank you for your replies. It’s helpful for me to get my head round the workflow, thanks.

10

I like that breakdown. What’s your opinion on grid or flex? I feel more comfortable with flex, but a lot of folks seem to like grid better.

11

I use Flexbox 99% of the time.

If I use Grid, I only use it with grid-template-areas:.

12

Continuing on this thread… kinda… so how do people deal with super large 4k displays and ultra-wide displays etc … when you don’t have one to test your site on?

Are there any tricks? (or tools).

13

If you look at probably most websites, they seem to only occupy the middle part of the screen anyway (except for headers and footers); what’s that, about 1,200px or so? Look at this forum for example. The left and right sides of the screen are fairly wide whitespaces, even on a 1920x1080 resolution monitor.

You can use the ‘responsive mode’ in browser developer tools and have the viewport as wide as you require.

1 Like
14

That makes sense thanks!