Kindle now applies font fixes during upload (font size, font family and text color)
Apple recommends positioning the text at the sentence or paragraph level, not at the word level (UX issues: selection + search)
CSS Hacks come with great responsibility.
Some “hacks” are utter abuse
/* Scrollable frame solution for FXL
1. In Object export, enter "subchapter" as epub:type
2. Add this snippet to your CSS
*/
div[*|type = "subchapter"] {
position: relative;
}
div[*|type = "subchapter"] > div {
overflow: auto;
}
Other stuff you should know
iBooks devs set a 2-second delay
Rendering is a heavy process, contents are cached aggressively
Fixed-layout is pre-rendered inaccurately
iBooks is all about perceived performance.
Your performance budget is pretty tight. This impacts ebook design dramatically.
EPUB is a spectrum. There are different ways to manipulate contents.
It’s hardware that makes a machine fast. It’s software that makes a fast machine slow. Craig Bruce
An #eprdctn Story
QA
File crashes iBooks on iPad Mini 2
File doesn’t crash iBooks on iPad 2, iMac, MacBook Pro, MacBook Air, etc.
Have you heard about EPUB files crashing iBooks? Friend
QA (v2)
Some files crash iBooks on Apple’s first gen Retina mobile devices
Those files don’t crash iBooks on Apple’s other devices
QA (v3)
Heavy use of JS in EPUB files crash iBooks on Apple’s first gen Retina mobile devices
Be a maniac, debug like you’ve never debugged before
Your #eprdctn computer will bite you in the arse
Your #eprdctn computer will bite you in the arse.
An incomplete #eprdctn gig
The Honor 5X is one of the best lower-priced large-screen smartphones available. The Guardian
Devices’ Technical Specifications
Cores
CPU
RAM
Mac Mini
2
2.8Ghz
16GB
iPad Mini 2
2
1.3Ghz
1GB
Honor 5x
8
1.5Ghz
2GB
Your laptop is a filthy liar. Alex Russell (Google Chrome software engineer)
The mobile issues we must pay attention to:
The network
Manufacturers are using cheap storage
It’s really hard to dissipate the heat coming out of the chips
Most of the cores are powered down most of the time (battery life)
The network
That’s a non issue, right?
EPUB files are stored locally, right?
Loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has to parse, interpret and run them. Addy Osmani (Staff Engineer at Google)
Cheap storage
Flash not really better than good old spinning metal.
Expect more or less the perf of the best HDDs.
Power
big.LITTLE
Low power cores are used aggressively, High power cores are used infrequently.
JetStream JavaScript benchmark (complex web apps)
Score
Blow
Mac Mini
174.68
iPad Mini 2
55.712
-68%
Honor 5x
20.796
-88%
JavaScript — get element by id (ops/sec)
Ops/sec
Blow
Mac Mini
43,224,096
iPad Mini 2
15,405,748
-64%
Honor 5x
2,725,418
-94%
Your mobile device is a filthy liar too. Benchy McBenchmark
JavaScript — get element by id (ops/sec)
Ops/sec
Blow
Mac Mini
43,224,096
iPad Mini 2
15,405,748
-64%
Honor 5x (liar)
2,725,418
-94%
Honor 5x (honest)
1,749,414
-96%
Recent iPhones and iPads will bite you in the arse too.
Torture numbers and they’ll confess to anything. Gregg Easterbrook
Real life EPUB + Honor 5x
Rendering takes at least 3 seconds in most apps
Turning a page takes 2 seconds in those apps
JS events fire with a huge lag in some apps
Some apps crash b/c more advanced scripts
ADE fails at displaying HD images in FXL
Mobile is Hostile
Devices’ Technical Specifications
Cores
CPU
RAM
Mac Mini
2
2.8Ghz
16GB
iPad Mini 2
2
1.3Ghz
1GB
Honor 5x
8
1.5Ghz
2GB
High-end eReader
1
1Ghz
512MB
EPUB is a spectrum. There is no average, there are extremes.
Stop designing for the lowest common denominator, that’s self-inflicted pain.
It looks like a lost cause but if we do things well who knows what could happen? Luis Enrique (Coach of the FC Barcelona team which defeated PSG 6–1 after losing 4–0)
Patterns and widgets a community creates and uses become de facto standards.
Vendors can’t ignore de facto standards.
We’re currently letting them set and have complete control over those.
How to build your own tools?
Knowledge is power. France is Bacon
It’s a little recipe I use in emergencies. Mac Gyver
We don’t have oil, but we have ideas. Valéry Giscard d’Estaing
It’s just a CSS file…
warning developers about possible accessibility risks and mistakes that exist in HTML code.
img[alt=""] {
outline: 4px solid gold;
}
img[alt=""] ~::after {
content: "Empty [alt] attribute. This is only okay for decorative images. Is it a decorative image?";
}