Mobile/Readabilityv2

Readability 2.0

Mission: Meet or Exceed iOS Readability, establish Firefox for Android as the most readable browser out there

Reads

• Algorithm description of font inflation: http://jwir3.wordpress.com/2012/07/30/font-inflation-fennec-and-you/
• Spec for text size adjust property: http://dev.w3.org/csswg/css-size-adjust/

CURRENT STATUS & ACTION ITEMS

Where are we? As of 05/09/14

Open

• Double Tap to reflow on zoom
  • bug 990821 - Improve reflow on zoom to a state that is acceptable for release
  • bug 990259 - Double-tap zoom does not work when text reflow is enabled
  • bug 1001563 - Double-tap zoom does not work on wsj.com (site compat)
• Font Inflation
  • Full tree
  • bug 707195 - Text inflation inflates comments on news.ycombinator.com to different sizes (because inflation computed separately for different table cells)
  • bug 730603 - Font inflation incorrectly inflating feed of latest messages on www.facebook.com
• References
  • http://www.reddit.com/r/firefox/comments/1mkqry/firefox_24_released/cca7taf

Landed

• Open Source Fonts
  • bug 831354 - Ship fonts for content in Firefox for Android
• Font Inflation
  • bug 777089 - consider changing size mapping function for font inflation
• Double Tap to Reflow on Zoom
  • bug 847872 - Only reflow zoom on double tap
  • bug 900564 - Remove 'double tap to reflow' from settings (from beta and GA)

Notes

• https://etherpad.mozilla.org/readability20130118
  
• https://etherpad.mozilla.org/readability20130111
  
• https://etherpad.mozilla.org/readability0104
  
• https://etherpad.mozilla.org/readability1214
  
• https://etherpad.mozilla.org/readability1207
  
• https://etherpad.mozilla.org/readability1109
  
• https://etherpad.mozilla.org/readability1102
  
• https://etherpad.mozilla.org/readability1019
  
• https://etherpad.mozilla.org/readability1012
  
• https://etherpad.mozilla.org/readability1005
  
• https://etherpad.mozilla.org/0928
  
• https://etherpad.mozilla.org/readability0816
  
• https://etherpad.mozilla.org/Readability0725
  
• https://etherpad.mozilla.org/readability0716
  
• https://etherpad.mozilla.org/readability0706
  

Readability Team

Eng Management: blassey, mfinkle, madhava, jet
elancaster: pgm
dbaron:layout
lucas:front-end
sjohnson (irc: jwir3):layout
jkew (irc: jfkthame):layout
ian: UX
kats: mobile platform

Team members request iOS iPod Touch devices here:
https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&format=itrequest

Useful Links

http://www.vanseodesign.com/web-design/legible-readable-typography/
http://blog.mozilla.org/nattokirai/

Competitive Analysis

• Opera/Stock browser uses reflow on zoom
  
  • There are issues with this, namely there are problems that occur on Opera Mobile when panning after a zoom.
  • Speed is an issue on Opera Mobile, too. Takes on the order of 2-4 seconds (on a Galaxy SII) for the reflow to complete after a zoom. Zooming back out seems to be much faster, though. Perhaps they do some sort of caching of the original reflow or something?
• Chrome does inflation & reflow
  
• Chrome doesn't do reflow on gesture. Kerning/linespacing isn't as nice
  
• iOS is generally seen as better than Android
  
  • iPhone preserves appearance more than boost readability
    
  • iOS hides their font inflation well (less intrusive)
    
    • Also less aggressive, meaning that readability is sometimes sacrificed for layout (which isn't necessarily a bad thing, but I thought I would point it out).
  • iOS more reliably picks the "correct" web font (see wired.com for ex.)
    

(may just be fennec bugs there)

UX Themes

• Balance Legibility vs. Beauty
  
• Font Rendering at zoom levels
  
• Use smaller fonts on a page, if rendered more crisply
  
• Improved letterspacing/kerning
  
• What is the user really wanting to see/read? Need this info from the front end to the layout engine
  
• Open Question: Meet or exceed the iPhone in aggregate vs. individual features?
  
• Font hinting keyed to a particular size/zoom
  
• Basic Typography Features are slightly better on iOS than Android - UPDATE: An initial comparison of iOS Safari to Nightly 17 on Android http://cl.ly/0p3X2A3U3F0N
  

Implementation Considerations

• Question: How much should we revisit font inflation decisions?
  
• Shipping our own fonts to replace:
  
  • verdana, georgia, times
    
  • droid sans, serf
    
  • Ship better readable fonts. ( Adobe Myriad 'sans', Minion 'serif' as Arial/Helv/Times)
    
  • We already have an app specific font directory
    
  • Latin vs. non-latin basically the same rules (re: inflation)
    
• Fennec Reader Mode (Lucas Rocha)
  
  • Open question: Where else other than the browser to have Readability features? e-mail client? other apps?
    
  • extract articles, headlines, typeset for readability
    
  • readability.com API
    
• Readability stylesheets for reading (1 or many?)
  
• Ultra-high Density Display Support
  
• Very Low Density Display Support (B2G @ 320 x 480)
  
• Text-size-adjust standardization?
  
• We have our own text engine, but not our own fonts. Can we leverage that?