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/