Mobile/Readabilityv2

Readability 2.0

Mission: Meet or Exceed iOS Readability

CURRENT STATUS & ACTION ITEMS

Where are we? As of 01/25

√ bug 831354 Ian has selected Open Sans and Charis for Content which now ship in nightly (fx21) √ We are investigating bug 833000 √ Kats has a prototype with improvements to font inflation element grouping, we have an initial analysis and he'll continue to refine bug 75725 as well as address D. Baron's comments √ Scott has a reflow-on-zoom with position maintenance build which is also under analysis

Next Steps:

• Investigate and resolve bug 833000 and determine if we can uplift fonts to Fx20
• Determine if Font Inflation element grouping is a sustainable solution and proceed accordingly
• Refine the reflow-on-zoom code and have QA continue to qualify it until we can enable by default in build

What do we need to do next?

• Make Progress on investigation of prioritized bugs: http://bit.ly/PyuDHu... some of the more important ones are:
  

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
bug 777089 consider changing size mapping function for font inflation

• Jumpstart Reflow on Zoom Investigation:bug 710298
  
  • This needs an add-on experiment
    
  • We would do reflow for double tap; we can set limits so we are not aggressive (1x-2x vs 6x)
    
  • Need support for shrinking/narrowing of frames to the platform (jwir3) and app logic heuristics (kats/jwir3)
    
  • Fold in a hacking effort before or after Boston WW (in Boston) or would going to toronto and just spending time on this be helpful?
    
    • For jwir3: Hacking effort after work week in Boston might be too soon - It would probably be better to have me take another trip to Toronto in the Oct timeframe (unless this is too late), as it would probably benefit me more if I had a chance to really dig into it on my own first.

[Martijn] Provide reduced test case for: bug 735149 - inflated font selection forces newline and covers up text behind divs

Efforts Ongoing

[UX] Heuristics Comparison: http://cl.ly/0p3X2A3U3F0N
[PM] Customer Reviews and Feedback
[sjohnson] look into readability.js and add to wiki
[mfinkle] spec reader mode details for scott to review

Schedule

18-36 weeks (incremental progress across v16, v17, v18)

Notes

• https://etherpad.mozilla.org/readability0706
• https://etherpad.mozilla.org/readability0716
• https://etherpad.mozilla.org/Readability0725
• https://etherpad.mozilla.org/readability0816

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 & Open Questions

• 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 Options

• Open 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?
  • Can we seek out people who left Apple for spec comments? They're likely still be bound by NDA.
• We have our own text engine, but not our own fonts. Can we leverage that?