The Concept of Hybrid UI

The fact that writing media queries is a massive headache for web designers cannot be overlooked. In fact, media queries, in the first place, is what I believe to be a traditional format of responsive design - requiring to open the inspect tool countless times or always keep connected with ngrok for keeping track of responsiveness. While some may disagree with me and quote me as an amateur in the web design world, many others will agree that there should be a better way.

/* For Desktop View */
@media screen and (min-width: 1024px) {
  .gfg-div {
    background-color: #63c971;
    color: #fff;
  }
}

/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: orange;
    color: black;
  }
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
  .gfg-div {
    width: 200px;
    height: 200px;
    background-color: red;
    color: #fff;
  }
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: cyan;
    color: black;
  }
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: chartreuse;
    color: black;
  }
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: brown;
    color: black;
  }
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: cornflowerblue;
    color: black;
  }
}

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: darkgoldenrod;
    color: black;
  }
}

The code above should give an idea of how tedious it can be to manage every single element with media queries.

I've been making hybrid apps myself for three years. And the advantage of hybrid apps is that you don't need to go through the learning curve of coding an app in Kotlin, Flutter, or Swift; you just need to know how to make a responsive website and convert it into an app. The easiest approach to do this is to use online app builders like the MIT app inventor or its revamped versions such as Appybuilder, Kodular, Niotron, Thunkable, etc, and place your website inside a webview container. These builders also give you a lot of functionalities to add so that your website behaves more like an app with drag-and-drop elements and code blocks. But the usefulness of making an app following that process is strongly dependent on how responsive your website is.

The concept of hybrid UI is that the same UI is persistent in both the desktop version and the smaller screens. To start with, most websites that we see nowadays have a responsive header that has a hidden menu only for devices with relatively lower screen dimensions.

This approach requires setting up multiple media queries for better responsiveness across mobile browsers. But we don't see these headers in mobile apps. Why is that? Because mobile app headers usually have a top or bottom navigation menu which is better in terms of appearance and UI.

What we overlook is that desktop screens can also have a top or bottom navigation menu and still look absolutely standard.

Moreover, the central menu in this bottom navigation gives the developer more room to make up for the dropdown nav-bar structure used in desktop headers.

Then we can come to the content section, where desktop screens have a larger display size, and should be utilized. Older responsive websites would only use the 760 pixels in the center, just to keep the website responsive. That was a huge cutoff in terms of design and UI for desktop users. But it shouldn't be the case now as most mobile phones already have much higher resolutions. A good idea is to compromise a bit of screen size in order to compensate and keep the design less complicated with not requiring tons of media queries.

Again, whether a website actually requires a footer should be reconsidered as apps don't usually have or need footers. Also, the top progress bar might be used as webview apps don't have a scroll level indicator either. Having Lottie or Blush animations, and an elegant pagination is a plus.

Finally, a basic hybrid UI that I was able to build can be seen in this pen.