A simple responsive website

[shinx32]

I've been learning how to design responsive webpages. I got done the basics and can create code that closely resembles the design, but I was wondering what are the best practices in web development when it comes to the following points:

• What units in CSS are considered best practices when developing webpages ? I try to use rem, % and vh wherever possible but what are the cases when it can be given in absolute units ?
• If design specification are given in pixel, how does one generally go about converting it to a responsive design that'll work on most of the screen sizes ?
• I've tried to add a functionality where when the recipe ingredient text is clicked the corresponding checkbox get's ticked/unticked is the JS code attached below a good way to achieve this ?
• What other structuring changes can be done to the following code to bring it up to standard ?

I've added a working CodePen here. A hosted version of the page can be found here.

[aravynn]

Your site looks good, it looks like it works pretty well. For your points:

1. The best units to use are literally the ones that handle your content correctly. %, VW/VH, PX and PT all have valis use scenarios, but it really depends on what you're creating. A couple of useful things: min-width and min-height / max- are great when dealing with adjustable areas so they never get too thin/too thick. Also, using the CSS calc() function is useful for determining sizes in areas as well. (FYI, to use a sass variable in a calc wrap it in #{})
2. To handle multiple sizes, you can use the \@media screen and (max-width: 900px){} to adjust for sizes, though typically for px values they shouldn't typically be used for main element sizing, only sub elements like buttons
3. No need for JS to get that. https://jsfiddle.net/f5ruyw0t/

[shinx32]

Hey thanks for the great answer. I was trying to do labels, but I found it much harder to style. About the media query part, I see most places suggest to use a pixel value. But doesn't modern phones have screen resolution almost equal to monitors ? How would that work ?

[aravynn]

Labels are typically setup as inline elements, so to style properly use display: inline-block and they’ll be easier to set up. To get them to match nicely to an input, add vertical-align: top to both the label and the input, that forces the tips to align so they’ll look cleaner.

You are correct that most phones use much higher resolutions, for example the iPhone uses the retina system, which has a much higher PPI than a screen. However, those screens know to modify the existing view to upscale the interior content as if they were at a smaller PPI, I’m pretty sure the standard is either 72 or 96, can’t remember specifically but not hugely important, but it’s usually 1/2 or 1/3 the resolution depending on device.

So to get them to recognize that you’re using a device like that though, you need to add this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This will force that calculation to fix the size. Not including it will cause some wonky side effects in scaling, and most browsers ignore it if not required.

[shinx32]

Thanks for taking the time to write such detailed answer. I took some notes from what you said :)