When I exported a page, I’m seeing pictures that are , p-800, and p-500 for each picture.
When I’m in Designer I’m seeing Desktop, Tablet 991px and down, Mobile landscape 767 px and down, Mobile Portrait 478 px and down.
When I look at the exported page CSS, I’m seeing “@media screen and (max-width: …)” of 479 px, 767 px, and 991 px. Shouldn’t there be one for Desktop and 4K?
Seems like a bug in Designer saying 478 when it should be 479?
Why are picture widths 800 and 500 when these aren’t the media screen sizes? And 991 px isn’t close to 800 or 500, and neither is my actual background picture size of 1536 px wide by 768 pixels.
Is 1536x768 the correct size to use for the background? I can modify it to any size or add another image which is larger or smaller.
When I loaded the html page in Chrome, it wouldn’t go all the way down near the 224 px minimum Portrait Mobile size shown in Designer. Why? Will it really work ok on a phone?
When I load the exported HTML into Chrome desktop, press F12, and look at the picture showing margin, border, padding these are all “-” and then inside that is the size 133x883. So I think the minimum size it goes to is 883 px across.
I’m a bit confused by all of this and don’t think the training fully explains it. Can you help?
Basically, I want to find out what sizes I should be using. I can modify the exported HTML and CSS if needed or modify the picture sizes, no problem. I just want to know what is best to work well on the various devices.
When the page is shown on a 4K monitor does it just interpolate the pixels and basically use 4 pixels for every one (a 2x2 grid)? Or what is it doing? Should I do a 4K picture and page size?
Where in my HTML/CSS/Javascript is it telling the portrait phone not to download the larger image sizes? Or does it download all the large images even if not shown to the user?
Anything else I need to know about best practices with media sizes, p- sizes, picture sizes and the related HTML and CSS code; regardless of whether Webflow is using best practice or not?
I’m just starting the website and want to standardize on best practices for good viewability and speed for the user on all devices. They are typically wealthy but usually 30 to 70 years old, so they might be using an older phone, table, or desktop even though they have the money for an expensive new one.
Any suggestions on what size to make the videos that I’ll be adding to these pages? 1080p? And should I do multiple sizes? If so, what sizes? Does Webflow automatically convert these sizes like it does most pictures?
I’m exporting the Home Worry Free Method page, and here is a viewable copy of the website:
https://preview.webflow.com/preview/pamelas-hwf-landing-page-21c72aceae4adc?utm_medium=preview_link&utm_source=dashboard&utm_content=pamelas-hwf-landing-page-21c72aceae4adc&preview=1a4103e6082177f889e6512ab90a641f&mode=preview