Programming #7: Responsiveness Principles

We’re past halfway there yall! I’m starting off on the Web Design Principles, after this we only got the CSS Flexbox and Grid left, then we can start the projects! 😁

Media Queries

So of course we don’t all use the internet on the exact same device. So just like we did with Applied Accessibility, we have to modify our site to make it accessible to different media types.

The first that likely comes to mind is font. Digital screens are made up of pixels, but the pixels vary by the size of the screen; 10px on an iPhone is different from 10px on a desktop. The visible area a user can see on a webpage is called the viewport. This isn’t the same as resolution, which is moreso the quality of the screen’s projection. The viewport is the screen’s fixed size.

So our first task is to modify the font size so it adjusts to a smaller screen.

<style>
p {font-size: 20px;}
@media (max-height: 800px){ p {font-size: 10px;} }
</style>

You can also change the max-height to minimum or width. Just keep in my whether you’re specifying the minimum or maximum, that means the content will alter when the screen is more than or less than (in that same order as min & max).

So this code commands the font to decrease from 20px to 10px if the user’s screen height is less than 800px.

Image Responsiveness

This is basically the same as we did with font, just with images.

<style>
.responsive-img {
}

img {
  width: 600px;
  max-width: 100%;
  height: auto;
}
</style>

So this got a little confusing, cause the instructions said to put the rules within the ‘responsive-img’ element (which was declared in an ‘img src’ element below that I left out), yet that was wrong. I pasted this correct answer from the module, and the ‘responsive-img’ element is left blank, so I don’t see why it’s there in the first place.

But yea, this is how you modify an image to be responsive to a change in screen size. This particular example ensures the image’s width will always fit the screen while the auto-height preserves its original size. If you were to do 100% or auto for both, it would still be stretched out and low resolution.

Retina Image for Higher Resolution Displays

Jumping back to viewports and resolutions, sometimes an image can only be as clear as its digital creator made its resolution; a high-res screen doesn’t automatically make every image clear, the image has its own res too.

This gets technical very quickly, so we’re gonna stick with the simple method for now: Redefine the height and width as half of their original size.

This example is based on an image that is 200×200. Of course you can adjust this for whatever your image’s size is, just make it half.

<style>
img {height: 100px; width: 100px;}
</style>

Typography Responsiveness

Instead of using fixed units like pixels, we can set them to be relative to the viewpoint’s dimensions.

We just use the 4 dimensional units, width (vw), height (vh), maximum (vmax), and minimum (vmin). This is technically just an alternative for percentages, so any number you put in front of these units will be a percentage of the viewpoint’s size. So 10vw is 10% of the viewpoint’s width, and 35vmin would be 35% of the viewpoint’s smaller dimension.

What I Learned Today

1. Use a media query to adjust font size for various screen sizes
2. Make an image responsive to change in screen size
3. Shrink a low-res image to appear clearer on a high-res screen
4. Adjust typography/font responsiveness using relative viewpoint units

Concerns

This was surprisingly easy 😂 every time I skimmed through this module in the curriculum I thought each of these were projects in themselves. I’m glad these were simple enough to breeze through.

Next we’ll be going over CSS Flexbox, which looks like it’ll be a more nuanced look into the graphical boxes we’ve been over.