Best practices to build desktop-mobile-tablet responsive website?

What is best practices to do this, without redirecting user that use mobile or tablet to optimized website?
If u have totally different design for desktop and other devices is it better to make
two-three containers and enable container ( with display: block ) depending on screen width?

You use media queries for different layouts.

  • Use em units
  • Use % units
  • Keep the design sparse and minimal or make sure your site is comprehensible without certain elements
  • Use flex when you can
  • Use Bootstrap if you don’t want to use flex
  • Use media queries for tablets, and mobiles. Make sure all of these are usable.
  • Never use absolute positioning in an outer container. It’s okay to use it sometimes (think before and after elements for styling), but it should be your last choice.
  • Make important mobile/tablet buttons large enough for thumbs. Space them properly.
1 Like

i remember when i saw from u this trick in game of life project
when u add ‘shadow div’ with ‘:after’ or ‘:before’, can’t rem
But then i had issue that when i used ‘:after’ instead ‘:before’ or vice versa ( can’t rem ) i have some issues with displaying my element in cross-browser ( different positioning )

I need for one element to use this techinc, so i do not use absolute positioning
Do u encounter some issue related to this, and can u tell me is there any diffs, between in ‘semantic’ with this two elements?

As far as I have seen, there shouldn’t be any issues with absolute positioning or the pseudo elements in most browser. The Game of Life project you mentioned works fine stylistically in Edge, Firefox and Chrome for me (although it’s really laggy in all but Chrome). Maybe you used transforms without prefixes?

In that instance absolute positioning is fine because you are positioning it with respect to the parent (in the GOL for example, each cell). As long as the parent is positioned relatively, things should be fine.

If you are talking about semantic differences between :before and :after, as far as I can tell, they are pretty much the same as a regular div. As long as you assign some content and make them display as block, they will work the same.

1 Like