These classes involved more HTML & CSS with more emphasis on responsive web design. This is one of the obstacles that I am facing as I am new to this kind of stuff so I decided to do some exterior research to help me create a functioning responsive website.
First of all what is responsive and adaptive web design?
Both responsive and adaptive web design can be used intermittently but for the general definition responsive web design is creating fluidity in the site that proportionates no matter what size/scale the site is being viewed on, whereas adaptive web design is more static layouts using mainly breakpoints to custom set a defined proportion depending on what viewing device the user is on.
How do I create responsive web design?
- Basic Layouts/css grids/ flex grids.
- Acknowledging/foreshadowing how layouts will collapse around each other.
- Measuring units e.g. viewport width/height, em, etc
- Media Queries – Breakpoints
Laying it out:
Although I have not yet fully catered for fewer than a tablet and smaller screen widths I must ensure that it will be flexible and proportionate to screen size. One of my biggest problems is my case study page whereas I have too much content in the Hero for it all to flow proportionate on smaller devices. I can perhaps look for a solution or remove that feature for tablet and mobile devices. This ultimately means I need to foreshadow and predict where and how the boxes will fit on the screen in these devices.
Measuring Units:
Measuring units are vital for creating a responsive design, the normal units of pixels are slowly being fazed out. Although, they are still good for padding margins, etc. Especially for smaller devices.
- Viewport Width/Height – Viewport units are except for screen responsiveness they ultimately scale to the resolution of a website’s screen. It is relative to 1% of the viewport screen, for example, if I create a hero banner and want it to take up the full size of a user’s screen (height) I can put min-height as 100 VH and vice versa. Although, these measurements can pose a problem for smaller devices especially headings/fonts so it is best to convert them into pixel units for this case.
- Percentages – These are relative to the parent’s element.
- EM – Relative to the font size of the element.
Breakpoints:
Breakpoints allow for better adjustments on viewing devices. For example, Webflow lays this out easily as it tells you what device equates to what resolution in the top menu. It creates a better and more adjustable viewing experience.
What have I learned?
I found it really beneficial to me to understand how to create a fluid and responsive website. Although, I am still practicing through trial and error in some instances. These few classes have acquired me with better knowledge on the basis of HTML/CSS and responsive web design.