A Responsive Design Approach for Complex, Multicolumn Data Tables. Posted by Maggie on 12/29/2011 Topics: progressive enhancement responsive design In responsive web design, one of the toughest design problems to solve is how format complex tabular data for display on smaller screens. In this post, we'll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen sizes, provides quick access to the data, and preserves the table structure so that data can still be compared across columns.
We've been batting around the idea of making tables responsive for awhile. Our initial attempts to make table data palatable on small screens include showing a thumbnail image that links to the data or a canvas-based chart; others have developed responsive CSS workarounds that display a definition list, using either list or table markup. A table for every screen View larger image Markup <table cellspacing="0" id="tech-companies"><thead><tr> ...header cells...
Say Hello to Rabble. Give Up and Use Tables. Adaptive Images in HTML. The Boston Globe. This is a transcript of an interview I did for the SitePoint podcast, episode 111. Listen to the audio of this interview. Louis: So hello and welcome to another episode of the SitePoint Podcast. With me today I’m very pleased to have on the show Jeremy Keith. I don’t believe Jeremy needs much introduction to most of the listeners of this show. Jeremy is a web designer based in the UK, he’s the author of several books on web design, most recently HTML 5 for web Designers.
Hi Jeremy! Jeremy: Hello. Louis: How are you doing? Jeremy: I’m doing very well, thank you very much for having me. Louis: Oh, it’s an absolute pleasure. Jeremy: That’s right, yeah. Jeremy: Yeah, well thank you very much for allowing me on to the show. Louis: Oh, absolutely. Louis: Right. Louis: Right. Jeremy: No, of course as with anything it depends.
And Ethan talks about this situation. Jeremy: Exactly. Louis: (Laughs) exactly, right. Louis: Yeah, for sure. Louis: And there’s kind of two ways of looking at that. Media Queries. Responsive Web Design. The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries.
Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .