Question 1: is there an optimal line length for copy?

The optimal line length for your body text is considered to be 50-70 characters per line.

Question 3: What type of unit should you use to control the container width?

The best unit for setting the width of the container is “em” units as they scale with the font-size.

Question 3: How do we convert 50-75 characters into ems?

This is the hardest question as the content itself can affect how many characters appear per line.

I decided to do an experiment with a range of well known texts:

1. “de Finibus Bonorum et Malorum”, by Cicero
2. “Far far away”
3. “The Sorrows of Werther”, J. W. von Goethe
4. “Metamorphosis”, Franz Kafka
5. “The quick brown fox” pangram

I took ten lines of text from each of these different examples, and then measured how many characters appeared per line at a range of different “em” widths.

Here is the sample page to show how the measuring was done.

Below is a table of the results, including an overall average across all five example texts.across

As you can see, the average seems to suggest that your container width should be set between the narrowest width of 21em (approx 49 characters per line) to the widest width of 30em (approx 71 characters per line).

I hope this is helpful for anyone asking the question “How wide should my columns be in ems”.

There are solutions that flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolling across the table. All of them are very clever.

However, there are concerns about many of them

1. some of them would be hard to implement in the real world – especially those that rely on the ::before pseudo-element selectors to generate table headers)
2. some of them may not work for all types of table data – like the pie chart solution
3. some of them many confuse the end users – like the disappearing column solution.

Would you like to see a super-simple solution for responsive tables – that needs no JavaScript and just a few lines of CSS? Take a look:

Solution 1: super simple

All you need to do is add a wrapping div around the table.

<div class="table-container">
	<table>
		...
	<table>
</div>

And then add some simple rules:

.table-container
{
	width: 100%;
	overflow-y: auto;
	_overflow: auto;
	margin: 0 0 1em;
}

Here is demo 1

Solution 2: adding scrollbars for iOS

If you look at the demo above on an iOS device, like an iPhone, you will see that there are no scrollbars present. While users can swipe the table to scroll, this is not immediately obvious. We can fix that by adding some additional CSS.

.table-container::-webkit-scrollbar
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
}

.table-container::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
}

Here is demo 2

Solution 3: scrollbars for everyone

If you want to force all browsers and devices to display scrollbars, there are a range of JQuery options available:

• jScrollPane
• Custom content scroller
• jScroller
• Tiny Scroller

Solution 4: adding a gradient

Did you notice that the table looks “cut off” at the right edge? to give this a “fade in” look, you could add a linear-gradient. To do this successfully (so that it will work well at any screen size- or when the user scrolls) we will add two new elements to the markup.

<div class="table-container-outer">
	<div class="table-container-fade"></div>
		<div class="table-container">
			<table>
				...
			<table>
		</div>
	</div>

And then some additional CSS

.table-container-outer { position: relative; }

.table-container-fade
{
	position: absolute;
	right: 0;
	width: 30px;
	height: 100%;
	background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
	background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);
}

Here is demo 4

So there you have it, a few simple (and very rough) responsive table options. What do you think?

• Mixing Responsive Design and Mobile Templates
• Responsive audio out
• Logical Breakpoints For Your Responsive Design
• There is no breakpoint
• Build responsive emails
• Prototyping Responsive Typography

CSS

• Getting Started with Sass
• How to Build a Better Button in CSS3
• How to shrinkwrap and center elements horizontally
• Reintroducing Preboot

HTML5

• HTML5 forms input types

Browsers

• WebKit for Developers
• Browser Trends March 2013: IE Drops Below 30%

Design

• 10 Brilliant Color Apps for Designers

Speed

• Improve page load times

UX

• Usability testing myths
• How to Conduct A Content Audit

Acessibility

• 8 Myths About How Blind People Use the Internet

• CSS Animations – W3C Working Draft 19 February 2013

CSS

• When to Avoid the Descendant Selector
• CSS: a rapidly changing world
• Using Flexbox: Mixing Old and New for the Best Browser Support
• Flexbox syntax for IE 10
• Setting Weights And Styles With The font-face Declaration
• Using White Space For Readability In HTML And CSS
• Dig deep into CSS linear gradients

Responsive

• There is no breakpoint
• The In-Between
• Devising a Strategy for Responsive Design
• Sassaparilla – Start your next web project faster
• Don’t start with a page template

Browsers

• Opera gears up at 300 million users
• Hey -o-, let’s go!
• What’s New in Firefox 19

Mobile

• Dos and don’ts of cross-platform mobile design

Developers

• A time traveller’s guide to Git

HTML5

• Quick Tip: The HTML5 Context Menu Attribute

UX

• Why UX Designers Need To Become Project Managers

Accessibility

• Using WAI-ARIA Landmarks – 2013
• Text alternatives for images with captions
• Quick Tip: Never remove CSS outlines

• CSS Fonts Module Level 3 – W3C Working Draft 12 February 2013
• CSS Transitions – W3C Working Draft 12 February 2013

Responsive

• Responsive grid systems; a solution?
• REMux: An Experimental Approach to Responsive Web Design
• Ditching responsive design
• The real conflict behind <picture> and @srcset
• Retina Revolution
• Improving Your Responsive Workflow with Style Guides

CSS

• When to Avoid the Descendant Selector
• Balancing Text for better readability

HTML5

• Introducing the New HTML5 <main> Element
• The progress element

Accessibility

• Accessible HTML5 Media Players and More
• Making elements keyboard focusable and clickable
• CAPTCHA: Inaccessible to Everyone

UX

• Mad Libs madness
• What Does a User-Centred Design Process Look Like?

Web development

• New tools for web design and development: January 2013
• Favicon: A Changing Role
• Your Website has Two Faces

Mobile

• Master mobile navigation

• CSS Text Decoration Module Level 3 – W3C Working Draft 3 January 2013
• CSS Cascading and Inheritance Level 3 – W3C Working Draft 3 January 2013

CSS

• How to Order CSS Selectors, a Draft
• 2013 CSS Wishlist
• Media Query width and vertical scrollbars
• Using background clip for text with CSS fallback
• Front-end performance for web designers and front-end developers
• CSS Selectors Level 4: The Path to CSS4
• Programmer Friendly CSS Frameworks

HTML

• Using the main element
• The main issue
• Using HTML 5.1
• Simplequiz #7: Pinterest

UX

• Double entry of form fields
• How To Get Started In UX Design
• Effectively Planning UX Design Projects
• A Definitive Guide To The Android Carousel Design Pattern
• Is Your Landing Page Too Busy?
• Three charts are all I need

Browsers

• Browser Trends February 2013: IE10 Becomes the Fastest Growing Browser
• Modern IE – Testing for Internet Explorer – just got a little easier
• Modern.IE – A new set of tools to help test web site compatibility

Mobile

• Mobile prototyping: a new paradigm

Design

• Almost Flat Design
• Beauty is in the eye of the beholder
• Bounce Back: Become A More Resilient Designer

Accessibility

• Advanced ARIA tip #1: Tabs in web apps
• Mobile Accessibility Survey
• HTML CodeSniffer

Performance

• HTTP Archive: adding flush

dog catches fish

fan face

kitten nibbling

arrow to the thigh

dog vs goat

surprise

Playtimes over

basketball dog

cat boxing

surprise

cat opens a box

dogs and dog door

kitten standing

monkey sees itself

dog and slead

squirrel

dog alarm clock

giraffe and peacock

I’m lost

kangaroo!

window cleaner

kid and car boot

school bus

climbing tree

gymnastics

turtle attack

husky window

cat closing door

mini golf

Scared cat

face

cat opens door

jump on ice

Camel and box

Horse and dog

sunglasses

mascot

lift your shirt

oh shit

cat and dog on couch

dancing

obi-wan

dog at desk

ship launch

cut pushing

cat tank

kitten pounce

talking door

Woops

bunny attack

kitten and dog

girl and mouth

angry bird

snow crash

dog and blanket

dwight

dog in field

dog bite

deer through dog door

cats climbing

treadmill

cat stalking pigeon

attack

pizza

lion

• Interview with Ian Hickson, HTML editor

Responsive

• Turning off responsive web design
• Preparing Websites For The Unexpected
• The responsive web will be 99.9% typography
• 29 new inspiring responsive designs on the web
• Techniques for Responsive Website Advertisements

CSS3

• The New CSS3 Relative Font Sizing Units
• Flexbox — fast track to layout nirvana?
• CSS3 Flexible Box / FlexBox
• Who Says the Web is Just for Squares?

General

• Dealing with IE again
• The mysterious WebKit placeholder overflow bug
• Predictions for the web in 2012
• 20 top web design and development trends for 2013

Accessibility

• Headings: Who needs ‘em?
• WAI-ARIA Live Regions Updated
• Rethinking How We Interact With Technology Using Voice, Touch and Gestures
• Podcast #97: Responsive Design and Accessibility
• Accessibility for iPhone and iPad apps