what is it?
with the advancement of technology, we are now able to access information via various devices. i can access the same website through my phone as i am leaving for work and then continue where i left off from my desktop or through my laptop when i want to sit on the couch. the screen on my phone, my 27” monitor, and my 14” laptop all have varying screen sizes, but i am able to view the same website in the same format as it was designed and published.
what is this sorcery?
the name of this sorcery is called responsive layout. it is an example of user interface plasticity (the adaptation of the user interface according to the physical characteristics like screen size). if you have seen the words “mobile friendly” on your phone while browsing the internet, that is a product of responsive layouts.
for further clarification, when you’re shopping for clothes online or at a store, you would look for a size that fits you. however, just because you buy a shirt in an extra small or an extra large does not change how the shirt was originally designed to look on a person. likewise, responsive layouts adjust the website according to the screen size. you wouldn’t (or shouldn’t) see the same sized website for a phone on your computer’s browser. in other words, the website does not stay static when the device used to display the website gets bigger or smaller.
when using HTML and CSS to design a website, there are properties you can set in your code to instruct various browsers to control the dimensions and scaling of the website or the contents therein. for example, the max width property can be set to 100% to an image to make it responsive and limit the image to to its original size (as opposed to the width property, which can scale the image to be larger than the original).
with responsive layouts, we are able to create aesthetically pleasing websites as opposed to websites equivalent to size 8 fonts on a powerpoint presentation while you’re sitting in the other end of the room.