Stan's blog

19^th of February 2022 - Responsive web design

Web pages in the current era should all be responsive. With so many varying screen sizes it is important that a web page can be scaled to show the content in a clear and precise manor on any device. Key factors in enabling this is often to use units that scale, such as

em

rem

. Em's scale based on the default

font-size

of the element being used as the CSS selector. This can be changed in CSS by changing the

font-size

of the element. Rem's base the

font-size

property based on the root element, in most cases this will be the

html

element. The default

font-size

of the root element is commonly 16px, meaning that 2rem is 32px. Using these types of units allows the text size to change with varying web page dimensions.

Using

min-width

and

max-width

is often better than using the

width

property as it sets a hard limit on the elements. This means that when the web page is resized the elemets can resize with it. Setting a minimum or maximum for the height or width means that content doesn't become illegible or distort the design of the web page as it expands and shrinks.

Media queries are an important CSS declaration for responsive web design. They allow us to alter the way a page is structured based on certain properties (such as the screen size). This allows us to build the web page for small mobile screens, through to tablet sized screens and all the way up to computer screen sizes and even televisions. We can also differentiate between potrait or landscape viewing options, light or dark themes and many other traits that may be required. Having a full understanding of media queries is essential and it is something I will look deeper into so that I can use them to their full potential.

Variables

In CSS you can declare variables in the following manner

--background-color: color

which is tremendously useful. This allows us to build the web page(s) and if the client or your boss wants a certain aspect changed that you can simply change the variable instead of having to go through pages of code tryijng to find every instance that needs to be changed. The extent to which you use variables will obviously depend on the scale and complexity of the design. If the website is going to be large and complex then it is likely worthwhile to use SASS due to its extra functionality and the ability to use mixins and reduce the amount of declarations when writing the stylesheets. Having variables in CSS is great as I'll be able to make small changes quite efficiently to my own sites if I write common colors and font-sizes as variables.

Next Steps

I'll be learning about functions in CSS and hopefully get closer to understanding a reasonable amount about intermediate level CSS. Fromt here I'll try to cement my knowledge through examples in codepen and other builds. I also want to dive a little deeper into media queries to try and understand them more. An example I read used

@media only screen and ...

and it seemed unnecesary to me for the example. Understanding the declaration will put me in a good place for the future.