This is the result of my lazy day-dreaming about the problem of what to do about data-tables now that everything is getting, well, more flexible. How should a table be made responsive? Can it be made responsive, and what would that mean? So I decided that was way cooler and more fun than what I was doing (which wasn’t very focused anyway) and started tinkering with the concept.
Lol! I wish I could take full credit, but I have to admit that I’m only
taking small jumps off the big ideas of other, smarter people.
Walter – this uses just a little bit of CSS in a media query in the page
head, a combination of pseudo styles (!) to create labels for the data
cells. Not very automated, however. Everything that disappears has just
been positioned off-screen - to preserve accessibility. Your Tablekit CSS
is so nicely written that it made styling this a lot easier.
Still needs some refinement… still hate all the width tags on the data
cells. Still not sure how helpful this is for mobile browsing (looong
scrolling vs pan-and-zoom or tiny tables). BTW, built completely in Freeway
Pro - though after a lot of hammering with other tools.
–
Ernie Simpson
On Fri, May 17, 2013 at 7:19 AM, Walter Lee Davis email@hiddenwrote:
Ernie, that is really impressive. You can’t see me, but I’m doing the
“we’re not worthy” bit from Wayne’s World right now.
Is that all done with CSS, or is there a JS component to it?
Walter
On May 17, 2013, at 3:01 AM, The Big Erns wrote:
I started this an example of data-table styling for another
Freeway-talker, and somewhere in-between boredom and frustration it turned
into this:
I need to do something very similar to this for a site I’m working on. Is this still necessary w/ FW 7? The FW page says that they have “beautiful data tables.” But I haven’t tried them yet.
The real trick might be that I need the first column to stay visible because it’s laid out kind of like a spreadsheet.
I used FW’s “secondsight” template and threw something together here. I built it in-line, but it’s falling apart when it comes to responsiveness.
Any idea where I should start making this more responsive?
Any idea where I should start making this more responsive?
here’s an article I found with some thoughts about designing pricing tables
that should give you some useful ideas about what you are trying to make,
though likely not how you are trying to make it -
Your example makes me think you are struggling so hard with the “how” to
build it part that you are forgetting to bring out the “what it is” part of
your design. Design it first, then work out how to build it. Eventually you
will find a compromise between what you can imagine and what you can build.
Remember that responsive is not a thing either, but a plan. How would you
design this thing for different widths? Get out of Freeway for awhile and
into something else you’re comfortable concepting with and try designing
both a wide and narrow version. Look at them for awhile and then imagine
(JUST imagine) how you might build each – then try and see the common
structures and imagine how one might changes into another. THEN go back to
Freeway and see if you can make that happen.
I have also updated my example with a downloadable FW6 file in case anyone
wants it. It goes out unsupported and without any further promise of
instruction.