For a long time I have been amazed by all the pieces parts involved with web development. I talked about it in yesterdays post. Another thought I have had about web development for a long time is it is very verbose. Today I learned that it is even more verbose than I thought.
According to the Udemy course, I am currently working my way through, up until approximately 2009, websites were developed for viewing on PCs and then modified for viewing on a cell phone. We probably all have experienced sites on our phones that look terrible. If you look at the same site on a pc, it probably looks fine.
After 2009, websites were viewed more and more on cell phones. The majority of viewing is done on cell phones today. So now the best way to develop a responsive website is to start with cell phone version and work towards the PC version. Because of the variety of devices used to access websites. The coding has become even more verbose. New HTML codes have been developed specically to facilitate creating resonsive websites.
In the good old days, before 2009, to display an image on a website, the code looked like this.
<img srcset=”assets/images/hero–large.jpg ” alt=’Coastal view of ocean and mountains’>
Now to make a good, responsive site, variations of the same image are needed for different screen sizes and resolutions. This means the code looks like this
<picture>
<source srcset=’assets/images/hero–large-i.jpg 1920w, assets/images/hero–large-hi-dpi-i.jpg 3840w’ media='(min-width: 1380px)’>
<source srcset=’assets/images/hero–medium-i.jpg 1380w, assets/images/hero–medium-hi-dpi-i.jpg 2760w’ media='(min-width: 990px)’>
<source srcset=’assets/images/hero–small-i.jpg 990w, assets/images/hero–small-hi-dpi-i.jpg 1980w’ media='(min-width: 640px)’>
<img srcset=”assets/images/hero–smaller-i.jpg 640w, assets/images/hero–smaller-hi-dpi-i.jpg 1280w” alt=’Coastal view of ocean and mountains’>
</picture>
Each “souce” code has an image at regular resolution and one at high resolution ), the width of each of those is needed so the browser can figure out which will display best and the “media” code says at what screen width to start using a particular image. There are similar methods to deal with font sizes based on display width.
See why I say it has gotten even more verbose.
IAAC Video Day 116
This is my 116th day participating in the #iamalivechallenge. I am alive and doing very well. I hope you are doing very well as well.
Join use in the challenge. Get full details in the free ebook below. Just click on the ebook for your own copy.
