4 ms·

The big challenge for this are different screen layouts. Mobile + desktop support is basically a hard requirement. A tablet-optimized version is nice to have.

The big challenge for this are different screen layouts. Mobile + desktop support is basically a hard requirement. A tablet-optimized version is nice to have. This gets very hard to do well with just CSS.

superkuh 8y ago
Or you could just not care about mobile's inadequacies. That's one of the joys of making personal websites. You get to do what you want not what's required to make the most money.
subbz 8y ago
Not true. Check out CSS media queries.
- pasta 8y ago
  And grid for repositioning blocks
- H1Supreme 8y ago
  I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.
- Beldin 8y ago
  When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).
  - craigzucchini 8y ago
    You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
  - aykutcan 8y ago
    you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
  - tobyhinloopen 8y ago
    Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)
StillBored 8y ago
Yes, we were targeting mobile/tablet devices at the time too (well bolting on to existing code base). For example, the CSS to dynamically swap between a side menu and hamburger button wasn't complex (as well as a few other layout changes we made based on screen size), but getting everything to resize properly had a significant/constant overhead during development. Mostly because any given solution took hours to work out. The alternative of feeding separate style sheets makes it easier to develop, but much harder to test even with the responsive design buttons in ff/chrome. That is probably also why I haven't seen many web apps that try to do everything with a single set of CSS pages recently.
- nothis 8y ago
  So is it time for "CSS libraries" (pls no, though)?
  - WorldMaker 8y ago
    Why do you think so many developers use things like Bootstrap, Foundation, Bourbon, Bulma, etc as starting points and languages like LESS and SASS to keep it modular/readable/maintainable? We've had CSS libraries and frameworks for years now.
sergiosgc 8y ago
> This gets very hard to do well with just CSS. This was once true, but not anymore. Grid and flex coupled with media queries solve this problem almost perfectly.

superkuh 8y ago

Or you could just not care about mobile's inadequacies. That's one of the joys of making personal websites. You get to do what you want not what's required to make the most money.

subbz 8y ago

Not true. Check out CSS media queries.

pasta 8y ago
And grid for repositioning blocks
H1Supreme 8y ago
I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.
Beldin 8y ago
When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).
- craigzucchini 8y ago
  You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
- aykutcan 8y ago
  you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
- tobyhinloopen 8y ago
  Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)

StillBored 8y ago

Yes, we were targeting mobile/tablet devices at the time too (well bolting on to existing code base). For example, the CSS to dynamically swap between a side menu and hamburger button wasn't complex (as well as a few other layout changes we made based on screen size), but getting everything to resize properly had a significant/constant overhead during development. Mostly because any given solution took hours to work out. The alternative of feeding separate style sheets makes it easier to develop, but much harder to test even with the responsive design buttons in ff/chrome. That is probably also why I haven't seen many web apps that try to do everything with a single set of CSS pages recently.

nothis 8y ago
So is it time for "CSS libraries" (pls no, though)?
- WorldMaker 8y ago
  Why do you think so many developers use things like Bootstrap, Foundation, Bourbon, Bulma, etc as starting points and languages like LESS and SASS to keep it modular/readable/maintainable? We've had CSS libraries and frameworks for years now.

sergiosgc 8y ago

> This gets very hard to do well with just CSS. This was once true, but not anymore. Grid and flex coupled with media queries solve this problem almost perfectly.