an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Mobile, Responsive, Adaptive

Let's disect what mobile, responsive or adaptive is...

There are two aspects for responsive design that looks fine and is still functional on every type of screen and resolution

> Positioning: display-block, show / hide
There is not much you can do with positioning,
unless you're going to mess it up with Javascript,
which will not make any sense for the users, and will harm functionality / performance.

So basically thought, all screens smaller than 1024px can be considered vertical
larger screens can be considered horizontal.
(Market share of mobile phones/tablets with higher than 1024px vertical width viewport is almost none. Thus, can be omitted.)

Looking at it this way, it comes down to a decision what you are going to with the content:
* are you going to make it block and full width?
* or are you going to show / hide it?

> Legibility: font-size and padding
This varies a lot, but not positioning-wise, actually legibility-wise
so font-size is going to be an important issue here.

There is no sense torturing any one with huge fonts or tiny fonts
especially when you have a simple option to do better.

CSS is already very supportive for this. You just need to use very basic properties.
Genes has a built in setup for font-sizes that look legible on every resolution.

By the way if you're not creating four different mobile page designs every day,
which you probably are not, (and if you are who are you?), you can spare some time,
like, still less than a day, to fix mobile issues of your app.
If you created the skeleton of your app properly,
it is not too hard to modify it to support every resolution on the planet,
by adding simple responsive focused Genes classes to your HTML elements.

There is no need to punish 1280px wide laptops which actually generally have huge screens.
1280px resolution is not for full hd 23inch screens that drag to make their window smaller.
Still Full HD resolutions are only at 21% share among desktop resolutions worldwide.
Rest is smaller resolutions.

You can check these classes below, and use at your will...


  /* POSITIONING */
  /* on vertical screen : positioning */

  @media (max-width: 1023px) {
    .ovs-db {
      display: block;
    }
    .ovs-dn {
      display: none;
    }
    .ovs-dib {
      display: inline-block;
    }
    .ovs-poa {
      position: absolute;
    }
    .ovs-pof {
      position: fixed;
    }
    .ovs-por {
      position: relative;
    }
    .ovs-p1r {
      padding: 1rem;
    }
    .ovs-p2r {
      padding: 2rem;
    }
    .ovs-m1r {
      margin: 1rem;
    }
    .ovs-m2r {
      margin: 2rem;
    }
    .ovs-fw {
      width: 100%;
    }
    .ovs-tal {
      text-align: left;
    }
    .ovs-tac {
      text-align: center;
    }
    .ovs-tar {
      text-align: right;
    }
    .ovs-ha {
      height: auto;
    }
  }
  
  /* on horizontal screen : positioning */
  
  @media (min-width: 1024px) {
    .ohs-db {
      display: block;
    }
    .ohs-dn {
      display: none;
    }
    .ohs-dib {
      display: inline-block;
    }
    .ohs-poa {
      position: absolute;
    }
    .ohs-pof {
      position: fixed;
    }
    .ohs-por {
      position: relative;
    }
  }
  
  /* LEGIBILITY */
  /* mobile viewport */
  
  @media (max-width: 599px) {
    html {
      font-size: 3vw;
    }
  }
  
  /* tablet viewport */
  
  @media (min-width: 600px) {
    html {
      font-size: 12px;
    }
  }
  
  /* larger viewports */
  
  @media (min-width: 1000px) {
    html {
      font-size: 13px;
    }
  }
  
  @media (min-width: 1100px) {
    html {
      font-size: 13.5px;
    }
  }
  
  @media (min-width: 1200px) {
    html {
      font-size: 14px;
    }
  }
  
  @media (min-width: 1300px) {
    html {
      font-size: 14.5px;
    }
  }
  
  @media (min-width: 1400px) {
    html {
      font-size: 15px;
    }
  }
  
  @media (min-width: 1500px) {
    html {
      font-size: 15.5px;
    }
  }
  
  @media (min-width: 1600px) {
    html {
      font-size: 16px;
    }
  }


      
×

Contact NodOnce : Say Something!