3 ms·

Yes, this. This bridges some gaps for sites that are built as either mobile-specific (but not truly responsive), or as desktop-only. I would have thought that

Yes, this. This bridges some gaps for sites that are built as either mobile-specific (but not truly responsive), or as desktop-only. I would have thought that the whole device detection, mobile-specific thing would have died many years ago, but it is stubbornly persistent. True responsive sites have worked fine for ages, and should continue to do so. On the desktop-only site side, it looks like Apple has also done some interaction refinements for problems touch-based users can hit on these sites, especially around distinct hover vs. click interactions, the need to "tap-twice" to essentially "focus then click", etc.

billforsternz 7y ago
What is your criteria for a "true responsive site" and can you point to a good resource describing implementation details? Asking for a friend :)
- kevin_thibedeau 7y ago
  Renders to a 640x480 CRT and 4K display without looking like crap on either.
- saidajigumi 7y ago
  Honestly, just using the basics of "responsive web design" (search phrase) is most of it. That is, implementing your site using CSS media queries to adapt your layout across multiple device sizes. Contrast that to using hacky device detection to deliver some entirely separate and "mobile-specific" site. One anti-pattern that often happens is the "mobile" detection is wrong, and delivers some phone-sized UI to a tablet. Instead just leverage CSS to make your site look good at the user's current display width, whatever that is, without having to know anything about the device. This is also great for desktop users, e.g. who might have your site in a browser side-by-side with something else, or similar. All of the "evergreen" browsers have a mobile design view built into their dev tools these days. You can enable that, switch between specific device screen profiles, and continuously drag the "screen size" handles to watch your site's behavior at different sizes. This is great for development, since your web inspector view stays at full size. Combining CSS media queries with CSS flexbox is a hugely powerful way customize the end-user experience for different devices. Flexbox not only makes basic layout adaptations straightforward (or free!), it lets you handle some otherwise tricky cases using tools like reordering support. It's probably also worth searching for "mobile first web design" for further resources.
  - billforsternz 7y ago
    Thanks, looking at a few CSS frameworks I think I've been confused that they seem to have coarse resolution break values and I thought this was an anti-pattern ("don't detect mobile with a hard-wired resolution"). Maybe my mistake is to confuse resolution (after all modern phones often have equivalent resolution as many desktops) with width, so mobile is portrait, desktop often landscape. Instead of a mobile type presentation and a desktop type presentation just go with say one column if <600px or something, two columns if more and not worry if it's a mobile device. Maybe that's what the CSS frameworks are actually doing.

billforsternz 7y ago

What is your criteria for a "true responsive site" and can you point to a good resource describing implementation details? Asking for a friend :)

kevin_thibedeau 7y ago
Renders to a 640x480 CRT and 4K display without looking like crap on either.
saidajigumi 7y ago
Honestly, just using the basics of "responsive web design" (search phrase) is most of it. That is, implementing your site using CSS media queries to adapt your layout across multiple device sizes. Contrast that to using hacky device detection to deliver some entirely separate and "mobile-specific" site. One anti-pattern that often happens is the "mobile" detection is wrong, and delivers some phone-sized UI to a tablet. Instead just leverage CSS to make your site look good at the user's current display width, whatever that is, without having to know anything about the device. This is also great for desktop users, e.g. who might have your site in a browser side-by-side with something else, or similar. All of the "evergreen" browsers have a mobile design view built into their dev tools these days. You can enable that, switch between specific device screen profiles, and continuously drag the "screen size" handles to watch your site's behavior at different sizes. This is great for development, since your web inspector view stays at full size. Combining CSS media queries with CSS flexbox is a hugely powerful way customize the end-user experience for different devices. Flexbox not only makes basic layout adaptations straightforward (or free!), it lets you handle some otherwise tricky cases using tools like reordering support. It's probably also worth searching for "mobile first web design" for further resources.
- billforsternz 7y ago
  Thanks, looking at a few CSS frameworks I think I've been confused that they seem to have coarse resolution break values and I thought this was an anti-pattern ("don't detect mobile with a hard-wired resolution"). Maybe my mistake is to confuse resolution (after all modern phones often have equivalent resolution as many desktops) with width, so mobile is portrait, desktop often landscape. Instead of a mobile type presentation and a desktop type presentation just go with say one column if <600px or something, two columns if more and not worry if it's a mobile device. Maybe that's what the CSS frameworks are actually doing.