- This topic has 10 replies, 3 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
I’ve noticed on some very large monitors that my site doesn’t seem wide enough. And then same monitor on other sites, seem to fill out to the width.
What is best way to set up my theme width so it can responsively size for all monitors, including tiny phones? And then what size should my header image be set at?
My theme width is currently sized at 1100px, as is the header image width.
See this site here.
Thank you.
Weaver doesn’t have options for very wide monitors other than using the full width options, as exemplified by this very site. Note how the header image changes a bit of the clipped areas as you change the width (its dimensions are 1200px by 180px). The title and mini menu move around, too. I think the margins on the content are percentage based, but the content mostly fills the full screen. All of this extends down to the smallest phone screen, with the sidebars stacking.
I believe this sort of design is very common. Some sites preserve a smaller left/right margin on very wide screens, but all that is a trade-off of how wide the content really gets. Note that the new Block Editor with its new Wide and Full alignment allow you to mix widths a lot. The Full alignment is ideal to have full width layout even on the widest monitors.
One could add @media rules to change some of the margin percentages for very wide screens, and I’ think you could even add some CSS rules to use the standard CSS capabilities to split <div>s into columns (which doesn’t allow you to control exactly where the content splits.)
But the biggest trend in design is for mobile devices, and I think the current responsive designs Weaver Has are excellent in that department.
I think the trend for desktops is lots of full width images. Sites constrained to less than even 1200px can look bad on a wide screen. (But the fraction of people with big monitors is getting smaller and smaller all the time.) Since I personally run on a 28″ Retina iMac, I notice some when sites have limited width. But since 60% plus views are on mobile devices, and probably 30% are on laptops, I think the number of really wide monitors is small.
In the end, it is really up to you.The real rule is to design your site for YOUR audience.
PS: the site you linked does have a wide header and footer, which really helps on wide monitors. I might make your content width wider, and I think your header should have higher resolution – probably a combination of higher quality jpeg, and bigger.
I agree that the resolution on the image could be much better.
How much wider, if I were to go wider? It’s 1100px now.
And yes, the theme is outstanding for going smaller. I have a fairly small display — iPhone 6s. So I figure if I can see it okay there in portrait mode, then everyone else should have no issues.
Good question to consider the audience and what they are most likely using.
Thank you.
Your header image is set to full width.
Most system these days are HD resolution so 1920px would be ideal for the width of the image.
It is better to have a higher resolution with a bit more Jpeg compression to keep it small than the reverse
I think I understand about image resolution and will try to make adjustments accordingly.
But back to theme width – should I change it beyond 1200 px?
Right now it’s 1100px and the full width tab drop down is blank with check marks in the Header Area Extend BG, Primary Menu Extend BG, and Footer Area Extend BG. Additionally, there is a check in the Header Image Stretch under Stretch Areas (Expand).
You said 1920px would be ideal for width and higher resolution with more compression would be ideal.
I come from the DPI world, not PPI (which I am trying to learn).
So if I have an image that I eventually want to size to 1100 x 275px, I should start with hi-resolution image that is 1920 x 480?
I have some old Windows based software (Corel Draw) that lets me specify the DPI and compression when I export to JPG. Does 720 DPI with 30% compression sound about right?
No that is not what I am saying, what I am saying is that you should an image that IS 1920px wide.
When the browser is smaller than that, browser will automatically use a lower res image provide by WordPress, so it is Win win, best quality when browser is large, no load impact when it is not.
What about the height? If it’s 1920×480 and I have it set under Main > Header > Header Image > Suggested Header Image Height at 275px, will it automatically size down to 275? When I upload the image under Customizer > Header, will it make me crop it?
Unless you want to change the ratio, you leave it as it is.
Right now, you have an image that is 1100 x 275, but when you look at the site on a browser that is 1920 wide, the image is scaled up to 1920 x 480, which looks bad because of the scaling
So you should just create and use the image at 1920 x 480, and let the image scale down with the browser
- You must be logged in to reply to this topic.