CSS-Tricks

Responsive Data Table Roundup

Chris Coyier — Wed, 11 Jan 2012 17:18:07 +0000

There has been a bunch of takes on responsive data tables since I first published about it.

The idea of the original was to abandon the grid layout of the table and make each cell it's own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It's easier to browse the data without losing context of what's what. The downside is that you might lose the context of data comparison, since you no longer see see cells of data right next to other cells of that type.

Mobifreaks published a very similar idea, which uses the same layout change and pseudo element labeling. They used HTML5 data-* attributes for the labeling, which removes the need to have custom CSS for different tables. I don't buy into the SEO part, but the code is good.

Derek Pennycuff took the original and applied the "mobile first" concept. Instead of starting with table markup it starts with definition list markup, then forces it into a table layout when the screen is large enough to accomodate it. While I love the thinking here, I'm not sure I like what it takes to get it done. The markup is much heavier and (ironically) I don't think it's semantic. Tabular data should be marked up as a table. I think the philosophy behind "mobile first" is keeping things simple and lighter by default and heavier and more complex for larger screens. This demo starts out and stays heavy.

Scott Jehl cooked up two clever ideas. One was to build a chart from the data in the table. In this demo it's pie chart that is much narrower than the complete data table and thus more suitable for small screens.

View Demo

Pretty cool, but clearly all tables can't be converted into charts. I'd also argue a data table and a chart are pretty different things. If you are going to go through the trouble of making a chart, it would probably be good to show that to the larger screen as well as it provides context in an useful alternative way. Or at least have an option to see it.

Scott's other idea focuses on the problem that large data tables can stretch out the width of a parent container beyond what a small screen is capable of displaying. So to prevent this, a media query is used to hide the table on small screens, replaced with a small mock-table and a link to view the full table.

View Demo

Stewart Curry had the idea of just hiding less important columns for smaller screens. One of people's earliest gripes of mobile-specific sites was that just because they are on a mobile device doesn't mean they deserve a less-than-full experience than a user with a larger screen (especially since these devices are totally capable of maneuvering around "full" sites).

View Demo

I think Stewart was on to something though. Using small screens to focus information to the most important things is great, it just shouldn't lock away information with no recourse. Maggie Costello Wachs of Filament Group also had the idea of hiding non-essential columns on smaller screens, but also providing a dropdown menu where you can re-enable them if you wish (which you can get to see with horizontal scrolling).

View Demo

David Bushell also tackled the idea of not altering the basic table format, but still solving the "too wide" problem. His concept flips the table on it's side and applies overflow-x: auto to the tbody meaning the data cells can scroll left and right if it breaks out of a small screen, but you still always see the headers (as if they were fixed position).

View Demo

Brad Czerniak has an idea he calls Rainbow Tables where on smaller screens the grid structure of the table is abandoned and the data cells are squished into each other as tight as they will go, while still being a "row". Then instead of the data be identified by which column it is in, the data is color coded to match a key.

View Demo

If you've seen or have an idea for more possibilities for responsive data tables, let us know in the comments below. I'll keep this post updated with all the design patterns for this I know about.

Responsive Data Table Roundup is a post from CSS-Tricks

PROTECT IP / SOPA Act Breaks the Internet

Chris Coyier — Wed, 11 Jan 2012 02:00:14 +0000

Here's a good video to watch explaining the huge problems that could come from PIPA (right on a page where you can do something about it). You've probably heard of SOPA. PIPA is the new SOPA.

Direct Link to Article — Permalink…

PROTECT IP / SOPA Act Breaks the Internet is a post from CSS-Tricks

(Better) Tabs with Round Out Borders

Chris Coyier — Tue, 10 Jan 2012 18:07:20 +0000

The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements.

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

The markup


//AN_Xml:    Lorem
//AN_Xml:    Ipsum
//AN_Xml:    Sit amet
//AN_Xml:    Consectetur adipisicing
//AN_Xml:

This would be about as basic as you can get. Not a lot of elements to work with here, but it will do.

Getting started

To get started, let's get rid of the default

styling and get these babies in line.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
.tabrow {
//AN_Xml:    text-align: center;
//AN_Xml:    list-style: none;
//AN_Xml:    margin: 0;
//AN_Xml:    padding: 0;
//AN_Xml:    line-height: 24px;
//AN_Xml:}
//AN_Xml:.tabrow li {
//AN_Xml:    margin: 0 10px;
//AN_Xml:    padding: 0 10px;
//AN_Xml:    border: 1px solid #AAA;
//AN_Xml:    background: #ECECEC;
//AN_Xml:    display: inline-block;
//AN_Xml:}
```
Selecting a tab
The selected tab should of course be clearly visible.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
.tabrow li.selected {
//AN_Xml:    background: #FFF;
//AN_Xml:    color: #000;
//AN_Xml:}
```
Getting to the bottom of things
Every tab control needs a well-defined bottom edge. It won't do much now, but later it will help emphasize the effect of the selected tab being on top.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
.tabrow {
//AN_Xml:    position: relative;
//AN_Xml:}
//AN_Xml:.tabrow:after {
//AN_Xml:    position: absolute;
//AN_Xml:    content: "";
//AN_Xml:    width: 100%;
//AN_Xml:    bottom: 0;
//AN_Xml:    left: 0;
//AN_Xml:    border-bottom: 1px solid #AAA;
//AN_Xml:    z-index: 1;
//AN_Xml:}
```
Here we introduced our first :after pseudo-element. Basically, :after appends another child to an element. It's not in the DOM (which is why it's called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some content, in this case a single space character.
In my opinion, the terms :before and :after are slightly confusing since the pseudo's aren't actually added before or after the element they apply to, but are inserted as children. This is also why you can't apply :before and :after to elements that can't contain children ("no content" elements), like .
In this case, we use the pseudo element to create a bottom border that doesn't influence the tabs' positioning. We could have just put a bottom border on the

ShopTalk

Chris Coyier — Mon, 09 Jan 2012 18:05:22 +0000

New thing! Dave Rupert and I are going to be doing a podcast called ShopTalk (@ShopTalkShow).

It's going to be a weekly show on (mostly) Thursdays at 10am Pacific / 1pm Eastern. Variations to that will be noted at the site. You'll be able to listen live if you'd like, otherwise subscribe on iTunes and listen to it anytime.

Similar to CarTalk, our plan is to have the meat of the show be audience question based. We also plan to have a guest each week. Not to interview, but just to hang out with us and all three of us will answer the questions and talk shop about the web. Nuts and bolts real web dev stuff.

Our very first guest for episode #1 is Jonathan Snook! We'd love it if you would submit questions. Either just written or use Record MP3 send a link to that recorded question. Questions can be about Jonathan and all cool things he does, or really anything web development (mostly front end) related. Doesn't even have to be a question, could just be a topic you'd like to hear about or a tip on some cool new thing. Eventually we'll have more ways people can participate live.

This is gonna be a fun time folks. I hope everyone can tune in when they can and participate!

ShopTalk is a post from CSS-Tricks

Upcoming Speaking

Chris Coyier — Thu, 05 Jan 2012 02:28:26 +0000

My first half of 2012 is sprinkled with some web conferences I'm very much looking forward to.

February 20-21, Orlando, Florida - InControl

March 9-13, Austin, Texas - SXSW Interactive

April 26-27, Warsaw, Poland - Front-Trends

April 30 - May 4, Las Vegas, Nevada - Future Insights Live

June 6-7, Vancouver, Canada - Interlink Conference

Without giving away too much, my talk will be based around some quick thoughts I posted as What We Don't Know (except at SXSW where I'll probably just be hanging out).

Hope to see some of ya'll around.

Upcoming Speaking is a post from CSS-Tricks

CSS Profiling and Optimization

Chris Coyier — Wed, 04 Jan 2012 23:46:30 +0000

Just as I got done saying how I hope we can soon stop talking about CSS selector performance, Juriy Zaytsev publishes some great research on selector performance using Opera and WebKit's new "style profiler" as part of the dev tools. He was able to save 650ms on page load time on a CSS3 heavy one-page app. Big difference makers: number of selectors, universal selectors, border-radius, and transforms. Worth a thorough read through.

Direct Link to Article — Permalink…

CSS Profiling and Optimization is a post from CSS-Tricks

Looking to Hire Someone for Web Work?

Chris Coyier — Wed, 04 Jan 2012 03:52:55 +0000

The very first thing you should do is start writing. Just open a text file and define exactly who your ideal hire is. What they are like, what they hopefully know, what you'll need from them, and what you can offer them.

Then find somewhere to post it online. Probably your own website for one. Blogs are great for that. Or get more aggressive and do an in-app notification about it. There is no excuse not to have somewhere to post it. Even if you are brand new and don't even have a website yet, you could always use a Google Doc.

Now you need people to see it. Take what you've written and go post it over on Authentic Jobs. I think it's the most mature and successful industry job board. You'll probably get a lot of responses, so use an email filter to help keep yourself organized. I'd probably use an incoming email like "chriscoyier+authenticjobs@gmail.com" so they will be automatically tagged.

Good candidates will be obvious. They will email you and quickly explain in natural language why they are a good candidate. Crappy candidates will write crappy emails. Those are automatically out, since, let's face it, all jobs require good communication.

Another reason to start with Authentic Jobs is because if you don't find someone you like, you can just ask for your money back as it's guaranteed. If that's the case, I'd recommend trying to post on Smashing Jobs, 37 Signals Job Board, Dribbble Jobs, and Forrst.

None of these are free. Nor should they be. It's a crap-job / crap-company filter. If you don't believe me Google around for "free job boards". Companies that aren't willing to invest a few hundred bucks in their most vital assets don't deserve good applicants.

Then obviously: share the link to your job posting on social media stuff. Email people you think might be interested. Email folks you think might know people.

OK I fess up

Here's why I'm writing this: I get quite a few emails like "Hey Chris, we're looking to hire somebody, know anybody looking?". Oh really? Who are you? What will they be working on? What do they need to know? What are they going to earn? What benefits do they get? How should they apply? Should they send you a super vague email like this one? =)

I don't mind folks asking me about hiring, but when you're that vague, you're putting the work on me, and forgive me but I'm just not going to do it. Give me a link where you've got everything clearly defined, and I'll happily look it over and share it with whom I feel appropriate.

Looking to Hire Someone for Web Work? is a post from CSS-Tricks

HTML5 Progress Bars

Chris Coyier — Wed, 04 Jan 2012 02:03:10 +0000

Comprehensive research by Zoltan Hawryluk on the <progress> element. Screenshots of default styling across different browsers, overriding that default styling, shadow dom, polyfills, states, and fancy replacement tricks.

Direct Link to Article — Permalink…

HTML5 Progress Bars is a post from CSS-Tricks

WebKit Selector Performance Changes

Chris Coyier — Sat, 31 Dec 2011 17:13:21 +0000

Nicole Sullivan covers some of Antti Koivisto's work on making CSS selectors faster in WebKit. Clever stuff, which Nicole helps make understandable for all of us. Mostly stuff that helps the browser "rule out" selectors more quickly. I hope other browsers can take the ideas and use them where they can and continue their own innovations. Selector performance is already something that we pretty much don't need to worry about it, I'd love it if we never had to think about it again.

Direct Link to Article — Permalink

WebKit Selector Performance Changes is a post from CSS-Tricks

Responsive Multi Column Data Tables

Chris Coyier — Sat, 31 Dec 2011 02:39:56 +0000

Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her solution involves marking columns as "essential" and "optional" with CSS classes and hiding the optional ones with media queries at smaller screen sizes. Then to keep all the data accessible, providing a (dynamically created) dropdown of checkboxes to reveal the hidden optional columns.

Direct Link to Article — Permalink

Responsive Multi Column Data Tables is a post from CSS-Tricks

CSS-Tricks

Responsive Data Table Roundup

PROTECT IP / SOPA Act Breaks the Internet

(Better) Tabs with Round Out Borders

The markup

Getting started

Selecting a tab

Getting to the bottom of things

Above and beyond

Around the bends

Don't be such a square

Cutting corners

Almost there

Pieces of flair

ShopTalk

Upcoming Speaking

CSS Profiling and Optimization

Looking to Hire Someone for Web Work?

OK I fess up

HTML5 Progress Bars

WebKit Selector Performance Changes

Responsive Multi Column Data Tables