Hi there:
So I have a tiny bit of knowledge about web design and understand the principles, but I keep getting it wrong when making my site responsive. Does anyone know where I can take a deeper dive to better understand when to use %, pixels, fr, min-max widths, etc.?
For example, I started reading through Bootstrap’s documentation, but it only seemed focused on min-max widths. Editor X Academy is too surface level to help me understand further.
Thanks in advance!
%
Use percentages whenever you want an element to take up a percentage of another container or the entire screen. Percentages are dependant on the size of their parent container. If I have a parent container that is 100px wide and I have a child container within that set to 50% it will be 50px wide. If the container has no parents (except for the section) it will be limited to the width of the browser window and the height of the section when its values are set with percentages.
px
Pixels are not a responsive unit and should be used whenever an element should remain static despite the width or height of the viewport or container the element is in.
vw & vh
Most of the time we can get away with using percentages to make content take up variable amounts of space on the page but sometimes we need to use absolute units to do the same thing. If you need to have an element within a container take up 100% of the browser height you can do that with 100vh which will work independently of the size of its parent container’s size. vw units are also useful for setting up padding that will scale based on the device’s width as typically you’ll want less horizontal padding on mobile compared to a desktop screen.
fr
Fraction units are only used with grid elements and they are the easiest way of setting up responsive grids. We can set grid columns and rows with percentages or pixels if we want but fr units will automatically calculate the space they should take up. If you want three equal columns in a grid for example you could set them all to %33.3333 or just 1fr each which is much cleaner and you’ll get the same result. Why do the math when the browser will do it for you!
min & max widths
Responsive units are great but sometimes they will make elements get larger or smaller than you want them to. With min-width we can define a minimum possible width in pixels so that the element can grow if given more space but will only get as small as we tell it to, the opposite is of course true with max-width. Often you may want to define a min-width and a width as well in order to allow an element to grow as a percentage of its parent container while only shrinking to a certain set size.
Hope this helps y’all.
Wow! Both of these are super helpful! Thanks to you both. I am curious though, why they don’t include “em” units. When I was taking a basic HTML/CSS course they said that was the golden standard now for accurate measurements.
@wilkinsonhank I had a follow-up question. How do you know which responsive units to use and when? Does it just come with experience? Trial and error? Both?
I didn’t include em or rem units because they aren’t usable in Wix, I tend to use rem when writing CSS although there’s much debate on if it’s actually any better for accessibility compared to pixels. In any case, they operate under the same principals as pixels but are based on the font currently in use. I suspect Wix doesn’t make them available to keep things a little simpler for the end users.
As for when to use each unit, you’ll likely be using both min and max fixed units and percentage based responsive units all over the place. There isn’t really a fixed guide for doing things and you’ll have to choose your units based on what you are making and how you want it to react to the page resizing. With a solid grasp on all the concepts mentioned above you should be able to intelligently choose what units to use where in order to create what you want to.
Hank, I have a question. So if I want my site to be responsive across desktop, tablet and phones, which settings do I need to use so it automatically resizes appropriately? Do I need to use grids to make this work?
Hi @doug :
You’d need to tweak your design for the different breakpoints (aka media queries in code speak… or more simply, the different devices/screen sizes/screen orientation). The grid help accomplish this, depending on your goal. Other times, using flexbox might be better. You just need to play around with it to understand what happens when you use each tool.
One thing I’ve found helpful is https://www.w3schools.com/css/ for understanding the theory of CSS. I also have a bit of a foundation in the code side of CSS, which makes it easier to understands the code and the theory behind the principles. While Editor X, Webflow, etc. are trying to shift from code-based CSS to visual-based CSS design with their tools, learning some CSS does help, and I’d recommend it. You could find free classes on youtube or pay for something on Udemy, which is pretty cheap.
Lastly, I’d recommend going to this live demo of the tool next week if you’re able. One of their product managers will be building a website, live to show you how things work together. I’m excited for this, because while Editor X Academy is helpful, you don’t get a great understanding of how everything works together.
https://wix.zoom.us/webinar/register/WN_9S0Q1tGLQxaxS1qEDaovPQ?utm_source=email_mkt&utm_campaign=em_blast_editorx_educational_august-5-workshop-announcement_28072020_en&experiment_id=button_cta_2_resp
Hope this helps!
Responsive web designs have become one of most important factor for the websites as the users won’t stick to the website if the pages are not loading properly or the designs are not catchy. Users need pages to load quickly, if not then the users will leave the page and the bounce rate of your site would increase, as a result the conversion rates will decrease.Hence, having a responsive design for the website is very important.
To Know More Visit - Alakmalak Technologies.