4 Replies Latest reply on Jul 24, 2015 3:50 PM by John Schwiller

    Responsive Design and Column Widths

    John Schwiller

      Here's a Welcome (home) page in a browser, note that the center column is wide in a custom page.

       

      BTW the 'create tile' is something I wrote after some chats with Christy Schoon  as I wanted a quick way to get to Activity (the eye) and common quick creates as on the Activity page - I really want an Activity or Recent Content tile but that's another story.

       

      Normal.jpg

       

      As the browser is narrowed it appears that only the center column width is sacrificed (note the wrapping on the top entry although blurred.):

       

      Narrow.jpg

       

      Then finally on an ipad the center column has now fully taken the width hit and all the columns are about the same width.

       

      ipad.jpg

       

       

      Why don't all the columns resize so that the relative widths stay about the same?

       

      This effect meant that I had to test my Create tile much more as it behaves so differently on ipad from desktop.

       

      cc Ryan Vanderzanden

      Marnie Pasciuto-Wood

        • Re: Responsive Design and Column Widths
          ryanvdz

          Hey John,

           

          That particular layout is our most challenging given the variety of ways customers configure their Jive instance.

           

          Originally when we introduced tiles they were limited to a 2 column layout, and only available in a "narrow" column (see the Activity page of any group/space and that right column is where we first introduced them). At the time there was no intention of offering up multiple layouts and re-creating what we've had for years with our widget technology, so we took advantage of that direction and gave tiles a wider and fixed width than their narrow-column widget counterparts - which allowed us to design view layers much nicer than we'd been able to do with small widgets in the past.

           

          When we expanded the scope of tiles starting last year, we now had to introduce fluid-width 'wide' tiles and new layouts for our 'pages' feature. We queried widget layout data from our customer base and found that this 3 column (dubbed sls or small-large-small) was a popular choice, though due to our much older decision to have our 'small' or 'narrow' widgets be designed at a much wider pixel width than their widget counterparts, we ran into a dilemma - this particular sls layout is popular, but w/o the right theme change (upping the min-width of the app) then the "large" fluid-width tiles would shrink below the width of the "small" fixed-width tiles on either side.

           

          Scaling everything equally would introduce a myriad of bugs into the pre-existing narrow tiles that we'd be fighting for quite a while to come, so the decision was to let the fluid width tiles continue to do what they need to and assume the person designing their page would chose a layout that's best for him/her.

           

          Ultimately we have work to do on our tile & page designs to better accommodate this particular layout - and it may be that we take the hit and make our small column tiles even skinnier such that we aim for the min-width defaults so the behavior you note never occurs.

           

          Hope the above context helps a bit.

           

          -r-

          1 person found this helpful
          • Re: Responsive Design and Column Widths
            John Schwiller

            New call to action tile (rectangular button goes to explanatory page, square button goes to categorised content) plus Create tile (the eye icon takes you to Activity):

             

            New blurr.jpg

            Edit: the create tile looks 'sparse' but this is because as discussed above, the column is fluid and gets quite narrow on a tablet. We didnt want the icon labels flipping on to another line.