In today's class I learned more about CSS and responsive design in code. I fell like this class greatly helped me understand how responsive design works as I have learned and used it previously but it was explained poorly compared to this lecture.
The first task we done to get a better understanding of this was to create a extra HTML in our ‘Women in design’ folder to practice creating grid columns in code. I liked how it was explained using visual references and ‘step by step’, by visual reference I mean that the columns were coloured so I knew exactly how they were changing with the code we were adding.
Having a stronger understanding of how columns work in code we moved on to our actual websites to code CSS columns applying the skills from the previous task. Once I added the code from blackboard to my code I pushed my updated code to Github.
Responsive design is for a website which works on any size of screen from desktop all the way to mobile screens. Responsive design for a website is very important as sometimes I have went on websites, or have changed to the desktop version of websites on mobile to access further options and it is so hard to use desktop layout on mobile. You have to pinch and zoom in constantly which as a designer you want to give a user the best experience as possible so they stay and return to your website.
On this topic we looked at different screen sizes and their viewport widths, breakpoints, how to find breakpoints. A breakpoints when a screen size should adjust to a different layout which we looked at different breakpoints pixel sizes on different screen sizes.
To find the breakpoints of our website we used the live viewer to open our webpages then right clicked and selected ‘inspect’. I have used inspect before when coding but what I learned during the lecture was new, the ‘responsive mode’ option. This option made it so much easier to know what the pixel sizes are on different devices and to view how the website looks on the selected screen size. There was also a drop down which allows the user to select existing screen sizes such as a iPhone SE which is the one of the smallest iPhone screen size.
Using this tool in ‘inspect’ I was able to tell what ‘breaks’ in my website on smaller screens such as margins disappearing when smaller than 1004px or that the columns don't work well on screen sizes smaller than 768 pixels, for a smaller screen it would be better to just have one column so it is easier for the user to read. I am defiantly going to use this method in future code to insure that my ‘responsive design’ webpages adapt to small screen sizes nicely.
We identified the three breakpoints and then added font size and spacing media queries to the CSS so the website knows what the max width of each screen size is. Then for the mobile media query we changed the size of the headings, paragraphs, lists, headers and the colour block so that everything would scale down to fit nicely on a smaller screen.