2

For further reading, I need the name of the concept of a web application for all common screen sizes and environments ("desktop"/"laptop"/"tablet"/"Smartphone").

That is, in the past some people created both a "mobile website" and a "mobile application" (both could run on Smartphones; the first ran on smartphone browsers and the second natively on smartphones.
but if I want both the smartphone-browser and smartphone-native version to be totally identical what is the name of methodology I should develop in?

2

You are looking for the term responsive web design.

"Responsive" is one of three ways of building mobile sites that Google supports for SEO. The three are:

  • Responsive web design - Uses the same HTML code for all devices but uses CSS rules to reformat the page based on the size of the screen.
  • Dynamic serving - Detects the device type based on the user agent string, and sends different HTML code to different devices.
  • Separate URLs - Separate mobile and desktop sites with redirects between them based on device type.

Responsive web design usually starts with a meta tag that makes mobile devices show the site fully zoomed in:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It typically uses CSS rules based on screen size. Here those rules simply change the background color, but they often change element size or change columns into blocks.

body {
    /* big screens */
    background-color: red;
}

@media screen and (max-width: 900px) {
    body {
      /* medium screens */
      background-color: yellow;
    }
}

@media screen and (max-width: 400px) {
    body {
        /* small screens */
        backgund-color: green;
    }
}

It may use units in CSS that are relative to the screen size:

  • vw - percents of screen width. 1vw is 1% of the screen width.
  • vh - percents of screen height. 1vh is 1% of the screen height.
  • vmin - percents of width or height, whichever is less.
  • vmax - percents of width or height, whichever is more.

For example this rule allows fonts on larger screens to be larger:

body {
    font-size: 2vw;
}

Images are often also dynamically sized based on the screen size:

img {
    width: 100%;
}

Responsive web design may also require changes to JavaScript to detect which features browsers detect. Browsers that don't support certain features may require special code.

1
  • Hello ! I am not sure this is the term I am looking for (I know that term from about 2010) because all responsive websites I have seen had 2 different versions for mobile browser and mobile smartphone application. Hence, I humbly conclude that a situation were a mobile-version of a website and the smartphone application are identical (have the exact same styling), requires a different term...
    – user58733
    May 18 '19 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy