the beauty behind ebooks: css - ebookcraft 2015 - iris febres

75
Iris Amelia Febres ebookcraft March 10, 2015 #ebookcraft THE BEAUTY BEHIND EBOOKS: CSS

Upload: booknet-canada

Post on 15-Jul-2015

564 views

Category:

Education


2 download

TRANSCRIPT

Page 1: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

Iris Amelia Febres ebookcraft March 10, 2015 #ebookcraft

THE BEAUTY BEHIND EBOOKS: CSS

Page 2: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WHO AM I?

Page 3: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

A BIO IN 5 MINUTES• Live near Boston, Massachusetts after

foolishly transplanting from Miami

• M.A. in Writing & Publishing from Emerson College (2012 — Go Lions!)

• Worked on ebooks at O’Reilly & F+W Media

• Currently Director, Solutions Architecture at Aptara

• Teach ebook production at Emerson College’s graduate program

• Dabble in doodles & comics, love corgis

Page 4: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

http://thewithouse.com/wp-content/uploads/2013/11/corgi-3.jpg

Page 5: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WORKSHOP STRUCTURE• 2.5 hours* of CSS goodness

• Half “lecture,” half lab • Three parts

• Open questions for discussion • Reviewing samples, etc.

• Simple exercises

• *15-minute break in-between

Page 6: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WORKSHOP MATERIALSDownload the following materials for this workshop at

irisamelia.com/ebookcraft2015 ebookcraft_exercises.zip

Tools: • EPUBcheck (e.g., EPUB-Checker/Pagina) • Zip/Unzip scripts for EPUBs • iBooks/ADE/iPad (use Dropbox)

Page 7: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

TIERS OF CSS WE’LL REVIEW

• Simple reflowable (Fiction, novels)

• Complex reflowable (Nonfiction, cookbooks)

• Fixed Layout (CSS3 Animation)

Page 8: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

CSS IN 5 SECONDS

p { color: purple; }

selector

property

value

Page 9: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

THINKING OF “EBOOK BEAUTY”

• What makes an ebook beautiful ? • 2 approaches:

• Beautiful rendering • Beautiful markup

!

• How do we put them together?

Page 10: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

KEY THEMES

• Consistency

• Clarity

• Simplicity

Applies to what’s presented to the reader and what’s under the hood.

Page 11: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PART ONE: LET’S TALK ABOUT RENDERING

Page 12: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PART ONE: RENDERING

• Open question: What immediately comes to mind when I mention “beautiful/lovely/gorgeous rendering”?

• We think of aesthetic • Design • How it looks

Page 13: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PART ONE: RENDERING

• Open question: Do we associate this notion of “ebook beauty” to particular genres?

Cookbooks / Nonfiction / Fiction / Poetry

Page 14: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RENDERING IS ABOUT HOW THE TEXT PRESENTS ITSELF.

* Word and Image — everything we read and absorb

Page 15: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

COMMON DESIGN ELEMENTS

FONTS

Text size

Hierarchy

Line height S p a c i n g

Dingbats & flourishes

Borders & rules

Weight & Color

Alignment

[Images]

Page 16: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

“A GREAT UI IS INVISIBLE.” —PATRICK COX

http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/

Page 17: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WHAT DOES AN EBOOK’S “UI” DO?

• Establishes a tone for your ebook (branding)

• Establishes relationships with and within the content (hierarchy)

• Establishes a connection to the user (reader)

Page 18: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

DOWN TO THE DETAILS

Successful ebooks are all about the details, specifically, the elements the reader doesn’t necessary explicitly acknowledge

• Subtle • Warranted for the content

Page 19: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 20: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RESOLVE WITH REFLOWABLE

• We do not have page-by-page design available (yet) to us, so flexibility is key

• Reflowability comes with a double-edged sword

• However, we should take advantage of robust rendering engines (i.e., iBooks)

Page 21: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

OPPORTUNITIES FOR DETAILS TYPICAL EXAMPLES

• Dropcaps and initial lines

• Chapter headers with dingbats

• Journal entries or other passages with embedded fonts

• Line spacing for running text

• Margins & padding for running text

Page 22: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

DROPCAPS & INITIAL LINES

Why it’s important • Opportunity for print fidelity (are you happy now, editors!?)• Attention to detail

CSS: • float:;, line-height:;, font-variant:; http://www.magazinedesigning.com/wp-content/uploads/2013/07/drop-caps-initials-2.png

Page 23: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

span.dropcap { float: left; /** Allows for the reflow **/ font-size: x-large; line-height: 1; padding-right: .10em; }

h1 + p:first-letter { float:left; font-size:2.7em; line-height:0.8em; margin-bottom:-0.1em }

Page 24: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

CHAPTER HEADERS

Why it’s important: • A chance for pizzazz • Additional emphasis on the hierarchy• “Low-cost” supplement

CSS: • font-size:;• text-align:;• color :;• border (top and bottom)

Page 25: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 26: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 27: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PASSAGES/TEXT BLOCKS (E.G., JOURNAL ENTRIES)

Why it’s important • Distinguishes running text from segmented text• Opportunity for enhancing the narrative (and UX) with fonts etc.

CSS: • block (<div>/<section>) to block off the letter itself• text-indent:; for paragraphs• margin/padding:; for spacing relative to the running text• line-height:;,

Page 28: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 29: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RUNNING TEXT LINE HEIGHT & WORD SPACING

Why it’s important: • Controls space between lines of text, space between letters (respectively)• Gives your text breathing room • Makes your text more legible — but also allows for greater densityCSS: line-height:; / letter-spacing:; Value has no unit so that it is proportional to the font size

Page 30: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RUNNING TEXT MARGIN & PADDING

Why it’s important: • Gives your text breathing room• Gives you more control of the pageCSS: • margin:; — outside• padding:; — inside

http://www.kuahla.com/learnhtml/images/boxmodel.gif

Page 31: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

https://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9.jpg

Page 32: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RECAP: RENDERING

• What does this CSS demonstrate?

• Care for the content • Care for the reader

Page 33: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RECAP: RENDERING

• Attention, thought, and execution brings readers back to an ebook — or, arguably, its provider (cough you great developer you)

• It makes the book memorable, beyond the content itself

Page 34: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WHAT CATCHES YOUR ATTENTION?

Page 35: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PART TWO: LET’S TALK ABOUT MARKUP

Page 36: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

SWITCHING GEARS GOING UNDER THE HOOD

Page 37: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BENEATH THE SURFACE

• Successful implementation of CSS depends on the foundation laid in the source HTML.

• You can’t style clutter!

• You need beautiful markup.

Page 38: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WHAT DOES BEAUTIFUL MARKUP NEED?

• Semantic

• Efficient

• The Cascade

Page 39: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BEAUTIFUL MARKUP IS SEMANTIC

• Why semantics are important: • Standards • Ethics • Sanity

Page 40: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

THE BEAUTY OF AN EBOOK LIES IN HOW A READER

EXPERIENCES IT.

Page 41: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BEAUTIFUL MARKUP IS SEMANTIC

• Thoughtful breaking up of the content

• Thinking of function for complex books • Scenario to consider : Slow page turns

• Open question: When should semantics be put on the back-burner? Should it ever?

Page 42: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BEAUTIFUL MARKUP IS EFFICIENT

• Efficient markup does the work for you • Remember The First Virtue of a Great

Programmer

• Templates

• Maintainability

Page 43: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BEAUTIFUL MARKUP CASCADES.

Page 44: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 45: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

THE MUST-HAVES OF A CSS DOCUMENT

• Organization (emphasis on The Cascade)

• The minimum required (conciseness — exception for templates)

• Comments for your reference (information on when it was last edited)

Page 46: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BUT AT THE END OF THE DAY, YOU NEED GOOD MARKUP.

Page 47: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RECAP: MARKUP

foundation

finesse

Page 48: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

PART THREE: WHAT DO WE DO NOW?

Page 49: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

QA, QA, QA TEST, TEST, TEST

DRINK, DRINK, DRINK

Page 50: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

QA METHODS• Commenting out CSS rules for testing

(/** Comment here **/)

• Platform checks

• Deleting and re-adding EPUBs to iBooks (desktop); curséd caching

• Rely on Dreamweaver (Live/Design) sparingly

Page 51: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

DEGRISTLING THE SAUSAGE 2.0 COURTESY OF INDIA AMOS, AMPLIFY

Page 52: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 53: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

REMEMBER AMAZON (SORRY)

• Media queries for legacy devices etc.

Page 54: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

@media amzn-mobi { " background-color:none;" page-break-inside:avoid;" margin:2em;" padding:1em;}"hr { "" visibility: visible; "}

Page 55: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RECAP: WHAT WE DO NOW• Experiment!

• Document!

• Read your content and engage it.

• Communicate your findings.

• Drink!

Page 56: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 57: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

BREAK TIME! (WE’LL RETURN TO CSS IN ~15 MINUTES.)

Page 58: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

WELCOME BACK!

Page 59: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcrafthttp://cdn.cutestpaw.com/wp-content/uploads/2012/06/l-Professor-Corgi.jpg

Page 60: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

EXERCISE: CSS CLEANUPYour mission, should you choose to accept it…

1. Take Exercise_CSS-Cleanup.css and reduce its line count.

2. Organize the elements with comments.

Page 61: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

SAMPLE “ANSWER”

• There are many approaches to this (can be combined) • More content-driven (paragraphs, chapters,

sections, etc) • More semantics-driven (purely by the element)

• Generally: @font-face{}/@page{} at the top (global)

Page 62: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 63: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

EXERCISE: RUNNING TEXT T.L.C.

Your mission, should you choose to accept it…

1. Navigate to CSS_Exercises-1.xhtml within CSS_Exercises.epub within a text editor.

2. Give the text some breathing room with new CSS. Identify elements that need to be offset in some way via alignment or other means.

Page 64: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

SAMPLE “ANSWER”

Page 65: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

EXERCISE: BLOCK PARTYYour mission, should you choose to accept it…

1. Navigate to CSS_Exercises-2.xhtml within CSS_Exercises.epub within a text editor.

2. There are a number of elements here that need to be styled. Make sure you utilize the following rules (be playful!):

• border (radius, color, width, etc)"• background-image"

• margin & padding

Page 66: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

SAMPLE “ANSWER”

Page 67: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 68: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

EXERCISE: JUXTAPOSITION

Your mission, should you choose to accept it…

1. Navigate to CSS_Exercises-3.xhtml within CSS_Exercises.epub within a text editor.

2. Who doesn’t love Edgar Allan Poe? The answer: Children!

3. Your EPUB has the complete story of The Cask of Amontillado. Use your CSS skills to create a version of this Poe favorite like a children’s book.

4. (Yes, I’m a little insane.)

Page 69: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 70: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

Page 71: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

RESOURCES• #eprdctn

• Standard CSS for EPUB Files: MobileReads

• Font Places: fontsquirrel.com, dafont.com (stick to OTF/WOFF)

• CSS Reference: Tympanus.net

• CSS-Tricks.com

Page 72: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

TAKEAWAYS• Exercise_CSS-Cleanup_ANSWERS.css

• CSS_Exercises_ANSWERS.epub

• ebookcraft_CSSplay.epub

• SampleAnimation.epub & CSS3_Sample.epub (Do not distribute please!)

• CSS Cheat Sheet (PDF; forthcoming)

Page 73: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

CONTACT MEI love making new friends & colleagues. Please reach out!

Twitter : @epubpupil

Email: [email protected] or [email protected]

LinkedIn: linkedin.com/in/irisamelia

Page 74: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft

REFERENCES• Judging a Book by Its CSS (Iris Febres)

http://www.booknetcanada.ca/blog/2015/2/12/judging-a-book-by-its-css.html#.VPe4YGTF-RI

• Degristling the Sausage, BBEdit 11 Edition (India Amos) http://ink.indiamos.com/2015/02/12/degristling-the-sausage-bbedit-11-edition/

• Fun with Line Height! (Chris Coyer) https://css-tricks.com/fun-line-height/

• A Great UI is Invisible (Patrick Cox) http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/

• Mozilla Developer Network https://developer.mozilla.org/

Page 75: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

#ebookcraft