In this lesson we will apply some solutions to get our website’s content adapted to the browser window’s / screen’s size, so the user should not be forced to use horizontal scrolling. This means responsiveness in a webpage. We will use relative sizing, defining different sizes, objects for different screen sizes etc.
We will use for the first time the <meta> tag to add information about our webpage.
@media – using this rule we can adapt our website to different screen sizes. We take in consideration the resolution, height, width and orientation of the screen.
<meta> - this tag is used to add useful information about the page to the <head> part of the page. This information does not appear in the browser, it is used by the browser and search engines.
<picture> - this tag is used to define alternative images for different display sizes.
min-width – with this property we can add to any sizable element a minimal width value. This means that the element cannot be smaller, regardless of the size of the device or browser window the content is displayed.
max-width – with this property we can add an upper limit to an elements size. The element’s width cannot be bigger.
Example for <meta> information:
<meta charset="UTF-8"> - the character set used in a website, can be defined in the editor, on the webserver and can be stated in the HTML code too. The browser needs to know the character set used, to show the content correctly.
<meta name="keywords" content="programming, teaching, courses, lessons, HTML, CSS, Coders Work">
<meta name="description" content="Personal website, teaching about coding in HTML, CSS and JavaScript">
<meta name="author" content="Mike"> - these may be used by search engines to categorize your website. Nowadays, this is not the only point of view used to define your page.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - this setting is used by web developers to ensure that their content appears correctly on every device. It is needed mostly on mobile devices.
It means that the content’s sizes (expressed in percentage) are calculated compared to the device size and at first appears with no zoom.
- Defining size in percentage, using max-width and min-width – the element is resized relative to the parent element (a <div> segment, table or grid) and eventually to the browser window. We can define a minimum or maximum width, not to get bigger and smaller than a given size. There are other relative sizes, like em – relative to the base font size.
- Setting the viewport - mentioned above – it does not work if you define sizes in pixels (instead of relative sizing).
- Defining different pictures for different sizes – we use the <picture> tag to define these pictures.
- Background image settings - we can use the setting background-size: cover; to stretch the picture to fill the container element, we can use background-size: 100% 100%; to obtain the same effect. It can be useful if the container’s size is changing.
- Defining text size relatively – we can define font-size not only in pixels, we can use vw as measurement unit. This means resizing relative to the viewport (display/browser window size).
- Choosing the best way of positioning elements – both or float, display: inline-block result in malleable positioning – the elements get in a new row if they do not fit in the row.
- Using frameworks – proficient web developers use frameworks to ease their work. Frameworks mean using CSS files containing standard-compliant CSS classes. Frameworks may use JavaScript functions applied to the design elements. You can read about Bootstrap, W3.CSS
Example on <picture> tag:
In the example above the browser chooses between two pictures: if the browser windows width is bigger than 850 pixels the picture with the book will appear, else the smaller picture with the boot. We can use the same pictures’ different sized versions.
Example on @media rule – media query:
There are four buttons with the measurements expressed relative to the font size.
There are different settings for browser windows with the width under 600 pixels, and above.
In a small window the buttons are vertically arranged, in a larger window horizontally. With this rule there are only two states, if we were to use floating for example the buttons would get in a column one by one getting through different states.
Guidance for responsive website: for a fully responsive website, the key element is to use widths expressed in percentage or viewport units or max widths. For more information, look up the responsive website concept.
Set the character set to UTF-8.
Add keywords: programming, teaching, courses, lessons, HTML, CSS, Coders Work
Add description: Personal website, teaching about coding in HTML, CSS and JavaScript
Add the viewport setting too.
In the style.css file’s beginning, insert the following resets:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Change the width into max-width for the following elements: #header, #menu, #content, #footer.
Now, if you resize the browser window, you’ll notice that there will be no horizontal scrolling for a good while.
Also, not to have the content from side to side, set 20 padding to left and right to the body.
Write a media query, where at 700 pixels screen width, the small pictures appear 2 on a row, instead of 3.
HTML:
<picture>
<source media="(min-width: 900px)" srcset="01.jpg">
<source media="(min-width: 500px)" srcset="02.jpg">
<img src="03.jpg">
</picture>
<picture>
<source media="(max-width: 500px)" srcset="01.jpg">
<source media="(max-width: 900px)" srcset="02.jpg">
<img src="03.jpg">
</picture>
https://www.w3schools.com/Tags/tag_meta.asp;
https://www.w3schools.com/html/html_responsive.asp;
https://www.w3schools.com/Css/css_rwd_mediaqueries.asp;
https://www.w3schools.com/css/css_rwd_intro.asp;
https://www.w3schools.com/CSSref/css_units.asp;
https://www.w3schools.com/html/html5_syntax.asp.
