1 Reply Latest reply on Jul 19, 2016 9:27 AM by john.decker

    What is the best practice for banners so that they display correctly both on a regular and web responsive browser

    Kara Francis

      This was kind of an issue before 2016.2, but now it is a bigger issue after the 2016.2 upgrade on July 16th, 2016.

       

      We have a logo in our banner (separate from the place image), but that logo is now completely underneath )covered by) the name of the place.  I'm guessing that we will just need to eliminate the logo approach to our banner design.  Before I had to place it in the perfect spot so that it wasn't cut off on the left (sometimes we would only see the right-side of the logo on my phone)

       

      On Jive Daily the image/logo is perfectly placed directly above our place name.  Would it be nice if it appeared that way on the web responsive browser)

       

      Does anyone know what the ideal approach is if we want an image of sorts in our banner - different than our place image?

       

      We don't have a preview instance, so I'm discovering things as we test the recent deployment.

        • Re: What is the best practice for banners so that they display correctly both on a regular and web responsive browser

          Hi Kara,

          Great question. Since responsive web was first introduced several versions ago I have seen this come up. One recommendation would be to test/view the banner in both responsive and standard before implementing it. This will allow you to see if any adjustments are needed to the image and/or the colors. In my examples below, I would likely change the header text color:

           

          Screen Shot 2016-07-19 at 8.27.02 AM.png

           

          Responsive:

          Screen Shot 2016-07-19 at 8.27.15 AM.png

           

          Another recommendation would be to chose a banner that does not have a location specific image, since this can change depending on the size of the page which can potentially cut off parts of the image. One example of this can be see in the images above, you can see a Don't Walk sign in the full version but it is not shown in responsive version.

           

          Hope this helps.