Background/Wallpaper image sizes in responsive v6?

[Skidjit]

Forum URL: (private)

I'm not sure where to post my questions about the new v6 upgrades, so if there's a better place to put them, anyone who can do it, feel free to move this to that section of this site. Thanks.

VS Admin

Responsive Design

Mobile matters. The key to the best experience on all screen sizes is an intelligent responsive design. While ProBoards has supported mobile devices for years, it has not been the same powerful experience that users have had on their desktop computers. We’ve heard your requests for more power, options, and customization on your mobile devices, and we’re finally in a position to provide everything you’ve asked for, and more.

Say goodbye to the limitations of the mobile view! With ProBoards v6, themes will no longer have to rely on a separate mobile version. Your users will get to see every customized detail of your forum no matter the size of the screen or the device being used.

Moving to a responsive design has afforded us the opportunity to take a good look at each page within our forum platform. When v6 launches, you’ll notice that many areas have been overhauled with a focus on simplicity and functionality, making sure that you can focus on the things that matter most, your content and your community.

I remember when you first posted this on this thread.
support.proboards.com/thread/572595/announcing-proboards-v6-codename-phoenix?page=1

I didn't know what it meant until I took a better look at my iphone and the tiny box down at the bottom right where we could click to see it in desktop view. I also understood a bit more with later comments about what "responsive" was.

I have a question...

BACKGROUNDS/WALLPAPERS SIZES?
I know that as things are now, if I chose an image that it might not fit the whole screen of my laptop. Also, how it will be different depending upon what device is used... and that laptop/pc's vary from model to model etc. so each site member might see things differently.

Will a "responsive" site also mean:

~ that the background/wallpapers will stretch to cover? (I'm worried, some images don't stretch well)

~ or will the image just cover the whole screen automatically, NOT stretching the image? (looks good)

~ or will there still be the option to set the background image to repeat as it would be set right now?

~ or if the original size of those chosen background/wallpaper images still leave a blank spot at the bottom (or sides) if they don't fit the whole screen NOW, it won't in responsive either? (I think I just talked in a circle. eek. sorry.)

======

(Here's what prompted me to ask this. I was looking up wallpapers or background images and accidentally found myself looking at iphone wallpapers. When I realized these were for iphones, I wondered if I used one for my background for my site, then would it automatically fit my phone when I view it now? Will it fit the screen entirely?

As of right now, I usually choose something that is a large image and try to make sure it fits as best as I can get it. There's normally nothing that fits perfectly, so I have a gap at the bottom of my site when I view it. Ugh. Then I wondered what the difference will be using the responsive v6 view? I realize that using an iphone wallpaper most likely would NOT work unless I found a patterned image instead of a picture image, then set it to repeat. Just thought I'd ask to find out for certain.)

I've read the links posted on the announcement thread that explain about 'repsonsive' sites. I don't remember background images being addressed. (maybe I need to go look again.) But, how I imagined it would work, our sidebars and all of the plugins will automatically be seen while on our mobile devices just like they are seen on our pc/laptops.

ANYONE WHO IS AN EXPERT AT RESPONSIVE stuff feel free to offer up your opinion if you like.

Thanks.

ps. I'm going to experiment with this in the morning to see if I can figure out my own answers, but somehow, I doubt I will be able to on my own. It's midnight and off to bed I go. Good night and sorry for my longwindedness.

[Kami]

With responsive design you can specify different outcomes based on the size of the viewport.

So, if you have someone viewing at 1024x800 for instance you can set it to display background X, but if you have someone viewing at 700x1130 (phone resolution generally) you can set it to background Y.

How your forum responds to the sizes of the resolution the user has can be customised, so it doesn't necessarily have to display just a stretched / shrunken version of things. By default, responsive design won't stretch or resize any images unless the CSS specifies it should. When PB talks about responsive design they are primarily talking about how the HTML on the site is displayed (your categories and boards and threads etc), but CSS can be used to help aid the responsivity of a design.

Also, CSS does allow you to set your background image to cover the user's entire viewing screen (without needing responsive software capability, I currently use it on my forums) but of course as you noted the image needs to be as high quality and resolution as possible to prevent any blurring. That said, there are statistics available online that show the average screen resolution (as of 2015 it was 1366x768) so you can cater to the most common denominator.

[Brian]

Jul 17, 2016 20:57:41 GMT -8 Skidjit said:

Will a "responsive" site also mean:

~ that the background/wallpapers will stretch to cover? (I'm worried, some images don't stretch well)

~ or will the image just cover the whole screen automatically, NOT stretching the image? (looks good)

~ or will there still be the option to set the background image to repeat as it would be set right now?

~ or if the original size of those chosen background/wallpaper images still leave a blank spot at the bottom (or sides) if they don't fit the whole screen NOW, it won't in responsive either? (I think I just talked in a circle. eek. sorry.)

You can achieve all four of these, and you can make it so that the background behaves a certain way at one resolution but behaves a different way at another. This is even possible in v5. The only limitation is what can and cannot be achieved through CSS.

At the moment the theme editor for v6 is still well under construction so I currently have no idea what the background options will look like as nothing is set in stone just yet. I'd assume based on our currently supported browsers that background-size might finally be available as part of the editor rather than something you have to specify manually.

[Skidjit]

Jul 17, 2016 21:26:30 GMT -8 Kami said:

With responsive design you can specify different outcomes based on the size of the viewport.

Thanks Kami for your comment. Since I'm more than a bit green at this stuff, I think I'm getting part of what you are saying.

I was thinking that "responsive" might be something like a blanket affect, where it will cause the way we've set our PB sites up, that it will work/look the same on all devices with little work. I guess I have a lot to learn when the day comes for v6. It sounds like you are saying that responsive will also have settings depending upon what device we are viewing the site on. That does sound cool. It gives us more control if we need it.

So if you have someone viewing at 1024x800 for instance you can set it to display background X, but if you have someone viewing at 700x1130 (phone resolution generally) you can set it to background Y.

Here's where I think I'm misunderstanding you. Are you saying I might have to have a separate background image set just for laptop view, another for smartphone view, etc? I know I have to be hearing that wrong.

How your forum responds to the sizes of the resolution the user has can be customised, so it doesn't necessarily have to display just a stretched / shrunken version of things. By default, responsive design won't stretch or resize any images unless the CSS specifies it should. When PB talks about responsive design they are primarily talking about how the HTML on the site is displayed (your categories and boards and threads etc), but CSS can be used to help aid the responsivity of a design.

Yep, the categories, boards and threads etc. I kind of figured that... that's why I thought I'd better ask about the background images. Thanks for letting me know.

I will have to dig out a code I tried out a while back... that I think was the css you are referring to, that will cause the background image cover the whole screen. It did something weird though to the images. When I used my plugin for collapsible categories, when they were not collapsed, my background image stretched. It shortened whenever I had them collapsed. It was not really the affect I hoped for, but it was something that didn't leave blank spots at the bottom or sides of the forum where the image didn't cover. I might have to tinker around with that again. ugh.

Also, CSS does allow you to set your background image to cover the user's entire viewing screen (without needing responsive software capability, I currently use it on my forums) but of course as you noted the image needs to be as high quality and resolution as possible to prevent any blurring. That said, there are statistics available online that show the average screen resolution (as of 2015 it was 1366x768) so you can cater to the most common denominator.

This is exactly what I was trying to accomplish but it didn't quite work the way I hoped. Yeah, using large images.

I thought resolution meant how clear the picture is and not really the size horizontally/vertically.

Having this discussion makes me really want for v6 to get here soon. Lots to learn. Thanks

[Skidjit]

Jul 18, 2016 8:01:01 GMT -8 Brian said:

Jul 17, 2016 20:57:41 GMT -8 Skidjit said:

Will a "responsive" site also mean:

~ that the background/wallpapers will stretch to cover? (I'm worried, some images don't stretch well)

~ or will the image just cover the whole screen automatically, NOT stretching the image? (looks good)

~ or will there still be the option to set the background image to repeat as it would be set right now?

~ or if the original size of those chosen background/wallpaper images still leave a blank spot at the bottom (or sides) if they don't fit the whole screen NOW, it won't in responsive either? (I think I just talked in a circle. eek. sorry.)

You can achieve all four of these, and you can make it so that the background behaves a certain way at one resolution but behaves a different way at another. This is even possible in v5. The only limitation is what can and cannot be achieved through CSS.

At the moment the theme editor for v6 is still well under construction so I currently have no idea what the background options will look like as nothing is set in stone just yet. I'd assume based on our currently supported browsers that background-size might finally be available as part of the editor rather than something you have to specify manually.

I think I've tried this in v5, as mentioned in my last post, it didn't really have the affect I was hoping for. Maybe things will be easier to work with v6.

This is my hope too!!!! That "it might be finally available as part of the editor rather than something you have specify manually." I know I'm not the only one who wishes for this.

Thanks for your comment Brian

[Kami]

Skidjit:

Here's where I think I'm misunderstanding you. Are you saying I might have to have a separate background image set just for laptop view, another for smartphone view, etc? I know I have to be hearing that wrong.

It really depends on what kind of background you're using, but my point was about resolutions rather than specifying views by device. A responsive site doesn't look at what device you're using, but rather the resolution. So, you can have (for instance) image X for all common desktop resolutions, but specify a different image -- or a different behaviour for that image -- for anything outside of the common resolutions (whether it's a phone resolution, or the opposite end of things at a 4k resolution).

To hopefully make it a bit more clear: If I have a background image at 3000px x 3000px, I can set that via the CSS to 'cover' regardless of the viewer's screen resolution. However, if I find that it looks strange on smaller resolutions, I could specify that for a maximum width of say 748px, to use: a) use an alternate image that fits the resolution, b) not display a background image, c) not set the image to 'cover', d) use a tiling image. You don't necessarily NEED to do any of this, depending on your image and how you want your forum to look on smaller resolutions.

This is exactly what I was trying to accomplish but it didn't quite work the way I hoped. Yeah, using large images.

The CSS to set backgrounds to cover 100% shouldn't affect anything else except the background. If it didn't work as expected, then I would recommend trying again and asking for some troubleshooting assistance -- there could be a CSS conflict that was making it work improperly.

I thought resolution meant how clear the picture is and not really the size horizontally/vertically.

When discussing web design, resolution generally refers to the size of something (your monitor, an image), while quality refers to the clarity of the picture. Resolution and quality frequently go hand in hand -- higher resolution pictures tend to have better quality.

[Kami]

Skidjit: perhaps these links can help you become more familiar responsive design as a whole:

- designrfix.com/web-design/responsive-web-design-101-basics
- echosurgemarketing.com/key-responsive-web-design-principles/
- blog.froont.com/9-basic-principles-of-responsive-web-design/

(this last link has animated gifs to help illustrate some of the key points of responsive design, which as a visual learner I find rather helpful. Your mileage may vary obviously)

[Skidjit]

"Kami "

OK I think I get it now. It does sound better to have options.

The CSS to set backgrounds to cover 100% shouldn't affect anything else except the background. If it didn't work as expected, then I would recommend trying again and asking for some troubleshooting assistance -- there could be a CSS conflict that was making it work improperly.

Yeah, I'll have to go look up the code soon and ask about it again here. Most people when I asked here before said it can't be done (to make a background image fit the screen.) Then a person posted the css code. I only use it on one of my sites since the image gets stretched on my others. My main site has a ton of categories and boards. I definitely need to collapsible category option.

Things are already a bit more clearer for me. Thanks for your time in responding.

[Skidjit]

Kami Thanks for those links. Someone did post some on the announcement thread a while back. I was going to look them up to see if they mentioned anything about background images. I'm hoping I can look at these you posted sometime tomorrow when I have a fresh mind to soak this all in.

[Kami]

Skidjit: glad I could be of assistance. (:

[Skidjit]

Ugh. *cries*

Kami

I hate to keep bothering you like this. Everything looks fine on my laptop. The plugin no longer affects the background image resizing. However, I just looked at my view from my iPhone. It's resizing on that device. I didn't change the code or anything. Just thought I'd let you know. Here's what my code looks like:

body {
background-size: cover;}

Still, this works better than how it was before, resizing on all. Thanks so far.

[Skidjit]

Jul 18, 2016 8:01:01 GMT -8 Brian said:

Jul 17, 2016 20:57:41 GMT -8 Skidjit said:

Will a "responsive" site also mean:

~ that the background/wallpapers will stretch to cover? (I'm worried, some images don't stretch well)

~ or will the image just cover the whole screen automatically, NOT stretching the image? (looks good)

~ or will there still be the option to set the background image to repeat as it would be set right now?

~ or if the original size of those chosen background/wallpaper images still leave a blank spot at the bottom (or sides) if they don't fit the whole screen NOW, it won't in responsive either? (I think I just talked in a circle. eek. sorry.)

You can achieve all four of these, and you can make it so that the background behaves a certain way at one resolution but behaves a different way at another. This is even possible in v5. The only limitation is what can and cannot be achieved through CSS.

At the moment the theme editor for v6 is still well under construction so I currently have no idea what the background options will look like as nothing is set in stone just yet. I'd assume based on our currently supported browsers that background-size might finally be available as part of the editor rather than something you have to specify manually.

Ooo! I thought I understood what you were saying before, but I'm understanding a bit more now. Sorry I'm a bit slow on the uptake.

Should I wait to see if v6 will address this cool feature?

Is it too late to put in a pitch to the proboard team for this feature request for v6 just in case they are not?

Or should I ask someone for help in figuring out how to achieve the things you mentioned? I'm anxious to tinker.

[Kami]

Not particularly. I'm not too familiar with this particular CSS (mainly because I now tend to use tiling backgrounds) but it is my understanding that a media query would allow you to change the behavior of the CSS you specify based on the size of the viewport. Try the following:



media only screen and (max-width: 767px) {
body {
/* This background image is for smaller screens */
background-image: url(url here);
}
}

Replace the red text with the image you want to display at a certain size, and the blue text with the maximum size you want the alternate image to display at (anything larger will display the "normal" background.

You can also add any other behaviours to this CSS, including 'cover' and setting the image scroll to 'fixed'. Just append any other CSS after the ; of the background image line.

If it were me I'd make the width 750px as that is the resolution for the iPhone 6 which according to statistics seems to be the most commonly used device, but it's up to you -- check the site I have you earlier to see the background behaviour based on the size of the mobile screen and adjust the max width accordingly.

Hope this helps!

[Kami]

EDIT: I think you may be misunderstanding Brian (: what he's saying is what you want is already possible, and the only limits are what CSS itself is capable of at the moment (which is quite a lot in CSS3 compared to earlier versions), rather than it being dependent on v5 versus v6. I believe however, since v6 will be created with inherent responsivity, it may change how much CSS you need to manually input. You don't have to wait (:

[Skidjit]

Media query? hmm?

I take it that I put this in my theme "style sheet" page, down at the bottom. This will target, but not conflict with what I placed on the visual editor page. I think I got it.

This isn't to replace the other code that I'm using is it? I would leave it there and put this code below it, right?

OK I'll try this and see how it goes. Thanks.

I know what you mean about tiled backgrounds. They are much easier to deal with.

As for Brian, I think I misunderstood him in my first response to him. When I backread his comment today, I thought he was saying pretty much the same as you were.. all of this can be done right now, I just need the css code to do it.


I have to go. Thanks for all of your help. It really is much appreciated.