[Pro] Responsive Data Table

Freeway
1

I’m really struggling to make a price sheet/data table of my website responsive.

I’ve tried following Ernie’s example using Walter’s TableKit CSS, but it’s not exactly what I need and I’m not sure how to adapt it to my application. I don’t need the table to be adaptable/sortable by column. I just need it responsive.

I’m willing to redesign the table as well, but all the info needs to be there in some form.

Thanks for your ideas/suggestions!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

At the moment, it’s not set in a table at all. Did you use an Action or a script to get that to happen? Or did you lay it out without using a drawn or inserted table (in Freeway) and now you want to make it a table?

I do have a separate Action called Semantic Table, that is cut down from the TableKit Action. All it does is take a drawn or inserted table and “clean it up” to have a proper and and optional section, and also can strip out the inline P tags that Freeway insists on putting in the TD and TH tags.

As far as getting a wide table like this to slim down without losing readability, it’s often a good idea to think up a completely different way to present the data on the narrow screen – something akin to a table pivot in Excel – where instead of keeping your top row of labels in place, you repeat them on each line as captions.

                        Entrepreneur Bronze  Silver   Gold     Platinum
                    
                        ... many rows here ...
                    
Monthly Service Charge  $54.90       $94.92  $137.57  $190.21  $289.17

becomes…

Monthly Service Charge  
Entrepreneur
$54.90
Bronze
$94.92
Silver
$137.57
Gold
$190.21
Platinum
$289.17

There are ways to do this kind of labeling in CSS using generated content, and there may be a way to do that based on the value present within the column label, if you could figure out a way to reference it reliably. I could certainly do that in Prototype, if there isn’t a way to do it in CSS.

Walter

On Dec 6, 2014, at 11:00 AM, Doty email@hidden wrote:

I’m really struggling to make a price sheet/data table of my website responsive.

I’ve tried following Ernie’s example using Walter’s TableKit CSS, but it’s not exactly what I need and I’m not sure how to adapt it to my application. I don’t need the table to be adaptable/sortable by column. I just need it responsive.

I’m willing to redesign the table as well, but all the info needs to be there in some form.

Thanks for your ideas/suggestions!

Doty

http://www.dotyshepard.com/clients/mm/Services/restaurants.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Walt,

What I have now is a very crude attempt at an inline layout. I didn’t use a “table” at all, nor have I applied any actions.

I do think I’m going to have to re-think how to present this data. But I do need the left column (or some semblance thereof) to remain in place. So, instead of having six columns, on the iPhone I would likely only have 2. I’m hoping something like that can work…

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

The thing is, you are building a table – of tabular data – which is precisely the one thing that tables are good for and how they are meant to be used. All the “bad rap” that tables get is entirely deserved, but only in the case of non-tablular (semantically speaking) data. When you use a table to force a visual layout, that’s when you are doing the bad thing that CSS labors to solve. But semantically, a table has a structure which informs the data – that’s the very best outcome that you want.

Making the table look differently at different breakpoints is the trick you want to get to happen, while leaving the data in its organized format. CSS offers some amazing tools to make that possible. When you shift a td from display: table-cell (its inherent display format) to display: inline-block or something else, you can get cells to wrap like text within their parent row, or even more. There are a lot of tricks possible here, and they don’t require you to sacrifice the machine-readability of your data, either.

Walter

On Dec 6, 2014, at 12:06 PM, Doty email@hidden wrote:

Walt,

What I have now is a very crude attempt at an inline layout. I didn’t use a “table” at all, nor have I applied any actions.

I do think I’m going to have to re-think how to present this data. But I do need the left column (or some semblance thereof) to remain in place. So, instead of having six columns, on the iPhone I would likely only have 2. I’m hoping something like that can work…

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Walt,

I hear you. I have always stayed away from tables for the very reasons you’ve mentioned. But, it seemed like as good a place as any to start for this application. If you go to this page you will find a “table” that I tried to create “inside” my existing inline layout. Without doing anything to it, I’m “closer to responsive” than I was, but I would like to make this truly responsive. FW7 touts “beautiful data tables” on their homepage, but I need some help to get there. What would you suggest for a next step?

Thanks so much!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Here’s two great articles about this problem:

Both have links to more articles. I don’t have a specific solution for you, but it’s a start.

Walter

On Dec 6, 2014, at 12:52 PM, Doty email@hidden wrote:

Walt,

I hear you. I have always stayed away from tables for the very reasons you’ve mentioned. But, it seemed like as good a place as any to start for this application. If you go to this page you will find a “table” that I tried to create “inside” my existing inline layout. Without doing anything to it, I’m “closer to responsive” than I was, but I would like to make this truly responsive. FW7 touts “beautiful data tables” on their homepage, but I need some help to get there. What would you suggest for a next step?

Thanks so much!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

I’ve tried following Ernie’s example

http://www.dotyshepard.com/clients/mm/Services/restaurants.html

The big difference between your table and my example is that your table has
both horizontal and vertical data headers - so it’s much more complex. The
challenge here is NOT how to make this responsive, but how to present this
complex information in a small viewing area. Solve THAT problem, and the
rest is just mechanics.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Is there a way to tell freeway to present the information differently if the user is on a small screen? Perhaps I could create very small table for the phone users. I’m just not sure how to indicate which table should be presented…

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

I think, Doty, that there are ways to achieve the mechanics of something –
once you have the design of something. Without a clear idea FIRST of WHAT
that design is, the mechanics of HOW are just not practical.

Design the “table” (or whatever) as it should appear for whatever views
(mobile, tablet) FIRST, then perhaps we can figure out the HOW of getting
there.

Stop doing this backwards.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Is there a way to tell freeway to present the information differently if the user is on a small screen?

Absolutely - you can use Media Queries for this.

Example here shows different tables at different sizes. http://deltadesign.co/FW7Test/diffitems.html

Not quite sure how to get FW7 to do it without a bit of extra CSS but I will dig deeper.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Thanks, Dave.

I have the tables sketched out for the iphone breakpoints, but I’m unclear about the implementation piece. Your help is much appreciated.

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

In my example I have 3 different tables in my layout each inside it’s own HTML item (wrapper). These are table1wrapper, table2wrapper and table3wrapper.

What I have done is write media queries that show or hide the tables depending on the screen size. This is what FW7 does to make your page responsive.

The code is:


<style type="text/css">
#table2wrapper { width:100%; min-height:100px; z-index:0; float:right; display:none }
#table3wrapper { width:100%; min-height:100px; z-index:0; float:right; display:none  }
@media screen and (max-width:1050px)
{
#table1wrapper { float:left }
#table2wrapper { float:left }
#table3wrapper { float:left }
}
@media screen and (max-width:768px)
{
#table1wrapper { display:none }
#table2wrapper { float:left; display:block}
}
@media screen and (max-width:568px)
{
#table1wrapper { display:none }
#table2wrapper { display:none }
#table3wrapper { float:left; display:block}
}
</style>

Now obviously that will differ depending on the breakpoints you wish to use and the names of your items. The Code is added via Page>HTML Markup in the before End section.

So to get this to work create your page as normal, insert a table wrapper for each table you wish to show and put your table inside. So insert HTML item, insert HTML item to give you 2 wrappers and click inside each and paste in the appropriate table.

Once you have that online let us know and we can guide you in how to modify the code to suit your page.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

I should add that the first 2

    #table2wrapper { width:100%; min-height:100px; z-index:0; float:right; display:none }
    #table3wrapper { width:100%; min-height:100px; z-index:0; float:right; display:none  }

are in there so that only table1wrapper is visible at normal screen sizes.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Wow! Thank you Dave! I’m a little scared and excited to give this a try. Stay tuned. In the meantime…

What breakpoints are you all using these days? I think I have more than I need and it’s creating more work than necessary. I just added one for the iPhone 6 as things weren’t looking right on my shiny new device. But there has got to be a point of reason here, chasing all the devices vs. productivity …

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

This concept sometimes causes confusion even though it’s quite logical. Basically, you want the layout to define your breakpoints instead of using static values for iPhone 6, iPad etc. This means that breakpoints will vary wildly from one layout to the next, and what I use is completely and utterly irrelevant to your needs.

Todd
http://xiiro.com http://xiiro.com/

What breakpoints are you all using these days? I think I have more than I need and it’s creating more work than necessary. I just added one for the iPhone 6 as things weren’t looking right on my shiny new device. But there has got to be a point of reason here, chasing all the devices vs. productivity …

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Okay, Dave…

I’ve uploaded my attempt here:
http://www.dotyshepard.com/clients/mm/Services/restaurants-resp.html

In my fw document, I still have the big table (followed by 5 little tables), but it’s no longer showing on upload. My big table (the one I want to show at breakpoints 568 and higher) is inside a container called “bigtablewrapper”

I didn’t adjust anything for the breakpoints, and I’m sure I need to. If it’s helpful for comparison, at this link is just the big table by itself.

Thanks so much for your help!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

The bigtable doesn’t show because you have added the following code which hides it:

 #bigtablewrapper { width:100%; min-height:100px; z-index:0; float:right; display:none }

And because this is not part of a media query it works all the time - no matter the size of the page!

If you want 2 alternatives ie either the big table or the several smaller tables then you would modify your layout and have bigtablewrapper and a wrapper to enclose all the smaller tables ie smalltablewrapper (inside smalltablewrapper would be table1wrapper, table2wrapper,table3wrapper, table4wrapper etc)

Your code would then be

<style type="text/css">
    #smalltablewrapper { width:100%; min-height:100px; z-index:0; float:left; display:none }

@media screen and (max-width:568px)
{
    #bigtablewrapper { display:none }
    #smalltablewrapper { float:left; display:block}
}
</style>

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Dave you are awesome!!! Thank you so much!

At the 568 breakpoint, it switches to the other “single table/small table” layout. Presto!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Would anyone be able to explain this process in further detail? I am trying to do the same type of thing as Doty I believe. I have 2 different versions of my 2 different tables in my example. There are 2 horizontal tables and then below are 2 vertical tables that I wanted to use for the smaller screens. I put them all on the page because I don’t exactly understand how to set up the media query on Freeway when I make my page. I understand where the code goes (before the I believe). Am I actually designing my page with both versions showing in the ‘Page’ ‘Default’ view ( like on top of one another or the small one off the page or something)? I realize this sounds like a really stupid question but I guess I just didn’t understand if we were referencing an outside file rather or making a seperate page to make the tables on. What Doty has done is exactly what I was going for really. I am just not very advanced with all of this.

My other question was if I should name my files ‘smalltablewrapper’ and ‘bigtablewrapper’ on my freeway page in regards to the above example DeltaDave was referring to. Again, probably not the smartest question so I apologize. Just a bit lost and this responsive table idea is really giving me fits.

I appreciate any help that can be given! Thank you so much. The page below is where I have loaded my example.

http://howtohikela.com/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

If all you are trying to do is show the relevant layout of table depending on screen size then the principle is the same.

1st step is to name your items appropriately - the actual name is irrelevant as long as you know which is which is big/small, wide/tall - you decide.

It will certainly be easier in your construction if you are using an inline layout but if you are using FW7 you can do it without any extra styling code or media queries because FW7 will write them for you.

So if you follow the normal construction method for a responsive site at different page widths you can check the Display checkbox (under the 3rd Tab in the Inspector with your Html item selected)

So Display would be checked for the Big while it would be unchecked for Small at the larger page widths and vice versa for mobile sizes.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options