Hello guys. Welcome to the course "Web technologies and web design for beginners" and today
we're gonna talk about cross browser and cross-platform programming.
Why cross-platform programming is important? Internet is nowadays a huge part of human life.
Almost four and a half billion users worldwide use it, which is fifty six percent of the entire population
of the Earth. It's obvious that they use wide variety of technologies. To create document that
will fit everyone we should consider support of different browsers, different screen sizes,
and different platforms. Nowadays most people use Google Chrome but there are those who use
Safari, those who use Firefox, Internet Explorer and Mozilla. Most of the CSS properties present in the
approved standards are supported by all modern browsers and devices. Currently the
line between the computers and portable devices with which users visit web pages almost erased.
All devices can be classified into groups by screen size, proportions, screen navigation method, etc.
Each of these parameters affects the usability of web page that you're designing. Comparing the
screen of a desktop computer or laptop to a mobile device you can see, that despite the same declared
resolution in pixels the actual physical size of the mobile device is several times smaller.
Nowadays users mostly use smartphone to browse websites. Less of them use laptops, even less use
tablets, some of them still use computers and one percent of users use netbooks or even smart TVs.
If you design for mobile browser you should consider that the page elements, which size is
set in pixels, can be displayed correctly in a computer but will be unacceptably small on
a mobile device. In this case mobile browser will try to squeeze the page to fit it all
into a mobile phone screen and will make it hardly readable. Or it will add horizontal
and vertical scrolls which may make reading quite hard. Unless special instructions are given
the browser will decide itself how to handle your page. The correct page should have only vertical
scroll and should have the font size easily readable for users even on smallest devices.
To handle this there is a special meta tag which is called "viewport" with which help
you can manage initial settings and even the settings the user can handle himself.
Web page elements can be measured in absolute and relative values. Absolute units of measurements do
not depend on anything, they will not change their value with any changes or settings.
In HTML and CSS there are five absolute units of measurement that are still present. First of all
these are inches - European unit of measurement with a distance equal to 2.54 centimeters, marked as "in".
The second one is centimeter, which is equal to almost 40 percent of inch. It's denoted as "cm".
Also we have millimeter which is 10 percent of a centimeter. The fourth element of measurement
is points which is standard printing unit of measurement. And pica which is also standard
printing unit of measurement but it's rarely used. Relative units of measurement are characterized by
the fact that their value is calculated relative to some other value. The dimensions denoted by
these values may change due to external factors such as screen size, viewports, width,
user settings etc. There are four relative units of measurement in HTML nowadays. First of all
it's "em" - letter M of typographical font which is used in the current web page it's equal to the
size of a huge letter M. The next one is letter Єx" which is basically the same but it's calculated
by the height of a lowercase letter x. The next one surprisingly is pixel, because pixel element
is monitor screen element which can be painted with only one color. A pixel is relative value,
because of its ability to scale depending on the monitor screen size. In fact the pixel depends on
the diagonal of the screen, which is constant, and the resolution, which waries depending on the user
settings. The last relative unit of measurement is percentage. Percentage value is a real number
calculated by browser and it depends on the property, to which it's assigned - either it is
calculated by the another property of this element or it depends on the parent element or whatever.
Next time guys we will talk about media requests and dynamic adapting
of the page depending on the different screen size. Thanks for watching and stay tuned!