Skip to content

Latest commit

 

History

History
45 lines (26 loc) · 1.65 KB

README.md

File metadata and controls

45 lines (26 loc) · 1.65 KB
Raw

RDBL

A simple script to help you design "Readable First" responsive layouts.

###Demo

http://thekezzforge.kezzbracey.com/RDBL/

###Readable First - A Responsive Design Approach That Is:

  • Device Agnostic
  • Resolution Agnostic
  • Content First

###Principles:

  • Don't set a base font size, leave that to the browser / user agent. (Props to The Goldilocks Approach for this concept).
  • Build your design in ems / rems, allowing flexible layout that adjusts to the browser / user default font size.
  • Enter dummy content at the start of the design process
  • Use the RDBL widget to check for readability of said content then create breakpoints where the readability breaks.

###Usage

Please see the demo for how to load up the widget.

Note, the 'characters per line' value is estimated via the first paragraph tag in your target readable element.

###Note on Readability

The default range 'characters per line' range used is 63 - 81 characters, aiming for optimal readability in consideration of saccades (eye movements) per line and comfort for the eye.

This is based on the eye taking in an average of 7 - 9 characters per saccade, and targeting approximately nine saccades per line.

http://en.wikipedia.org/wiki/Eye_movement_in_language_reading

However this is a guideline and you can adjust to whatever you personally think is right.

###Firefox only

Right now only Firefox support all the stuff this does, so please use that.

###Credits

Thanks to Leon Gersen for the noUISlider: http://refreshless.com/nouislider/