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.
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.
OK, I see what your saying. - So the buzz words are ‘mobile first’ & ‘device independant’
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
Anyone have any good links that could give me some ideas how to code mobile first and device independant?
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.
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.