Hacker News new | past | comments | ask | show | jobs | submit login

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



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.


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.


Renders to a 640x480 CRT and 4K display without looking like crap on either.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: