Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Responsive Times Call For Responsive Measures

jbrewer
September 18, 2012

Responsive Times Call For Responsive Measures

Slides from my talk at Smashing Conf.

jbrewer

September 18, 2012
Tweet

More Decks by jbrewer

Other Decks in Design

Transcript

  1. Our job is to give content form in such a

    way that, despite the context or device it is consumed on, the clarity and purpose of the content is not compromised.
  2. The DNA of the web is a fluid, hyperlinked document

    with default typographic hierarchy
  3. “We should embrace the fact that the web doesn’t have

    the same constraints (as the printed page), and design for this flexibility.” John Allsopp “A Dao of Web Design”
  4. “Make pages which are adaptable. Make pages which are accessible,

    regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors… This means pages which adapt to the needs of a reader.” John Allsopp “A Dao of Web Design”
  5. “The two together—page and textblock—produce an antiphonal geometry. That geometry

    alone can bond the reader to the book.” Robert Bringhurst “The Elements of Typographic Style”
  6. “How do I paint a painting that doesn’t begin and

    end at the edge but rather starts to take in and become involved with the space or environment around it? ...I mean we ordinarily start with canvas as a fact, as more than a fact. We start with it as a truth so deeply hidden that we don’t even question it.” Robert Irwin, Seeing Is Forgetting The Name Of The Thing One Sees
  7. The viewport is a container and content fits to it,

    then flows from there (iPad books? etc)
  8. Proportions P = page proportion: h/w T = textblock proportion:

    d/m Page size w = width of page h = height of page Textblock m = measure (width of primary textblock) d = depth (height) of primary textblcok l = line-height n = secondary measure (width of secondary col) c = column width, where there are even no. of columns Margins s = spine t = top margin e = fore-edge (front margin) f = foot margin g = internal gutter (on a multi-col page
  9. vw Equal to 1% of the width of the viewport

    vh Equal to 1% of the height of the viewport vmin Equal to either vw or vh, whichever is smaller vmax The opposite of vmin http://www.w3.org/TR/css3-values/#viewport-relative-lengths
  10. Magic formula $ratio = vw/vh; $textblock = vw/$ratio; $idealFontSize =

    $textblock/30; $scale = [], $ratio, $idealFontSize, $increment;
  11. 1024x768 $ratio = 1.333; $textblock = 768.192048012px; $idealFontSize = 25.6064016px;

    $scale = [6.169921875, 8.2265625, 10.96875, 14.625, 19.5, 26, 34.666666666666664, 46.22222222222222, 61.629629629629626, 82.17283950617283];
  12. We can determine the ideal width for a textblock based

    the ratio of the viewport and some geometry!
  13. 1. A modular scale based on a ratio (starting from

    your Ideal Font-size) 2. Fluid grids (media too) 3. Ideal measure with accompanying line-height. 4. Great content* * not necessary, but a damn good idea