type responsively
play

Type, Responsively Design for Readability & Meaning on Any - PowerPoint PPT Presentation

Nov 23, 2022 •348 likes •915 views

Type, Responsively Design for Readability & Meaning on Any Screen DrupalCon Austin | #DrupalCon Jason Pamental | @jpamental 23rd May, 2014 http://hwdesignco.com Who Am I? + Co-founder of + Co-founder of + Co-host of + Co-parent of

  1. Type, Responsively Design for Readability & Meaning on Any Screen DrupalCon Austin | #DrupalCon Jason Pamental | @jpamental 23rd May, 2014 http://hwdesignco.com

  2. Who Am I? + Co-founder of + Co-founder of + Co-host of + Co-parent of hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  3. How Did I Get Here? + + = hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  4. What We’ll Cover + Lies & deceptions + An honest reconciliation + What is Responsive Typography + Making your typography responsive + Prototypes trump promises hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  5. When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  6. Not sure we can. + Encompasses all of what you know about type & its use, but + Typography on the web requires additional consideration (art & science) + Our canvas is fluid; constantly expanding & contracting + Reading on screens will only increase hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  7. It’s not what we don’t know that’ll kill us It’s what we willfully ignore hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  8. A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions 960px hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  9. A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  10. A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions “A page is not a valuable concept even for someone who wants to read a book.” Je ff Eaton (@eaton) hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  11. Take Away What We Can’t Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  12. Focus on What’s Left: Typography hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  13. Focus on What’s Left: Typography hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  14. Focus on What’s Left: Typography hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  15. Focus on What’s Left: Typography hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  16. Four Simple Steps + Performance : select fonts with care , load what you need & don’t block the page draw + Progressive : plan for failure , tune up the loading process & fallback fonts to minimize FOUT + Proportion : small screens demand subtle scale + Polish : Design IS the details: OpenType & then some hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  17. Performance Matters + Great typography isn’t ‘I used all of them’ + Load only what you need Trade Gothic Next LT Pro Bold this is a typeface this is a font + Each font has a performance cost, so budget wisely hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  18. Performance Matters hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  19. Performance Matters hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  20. FOUT is OUR fault hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  21. FOUT is OUR fault hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  22. FOUT is OUR fault + Use these: . wf-inactive / .wf-active + This CSS results in a blank screen during load: 
 body { font-family: “Trade Gothic”, helvetica, arial; } + Add this & give them content, then fonts: 
 .wf-inactive body { font-family: helvetica, arial; } + Adjust font-size , line-height , letter-spacing to avoid jumpiness + Making it easy since 2010 hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  23. Progressively Enhance Web fonts loaded hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  24. Progressively Enhance No web fonts, uncorrected hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  25. Progressively Enhance No web fonts, corrected hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  26. Progressively Enhance Web fonts loaded hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  27. Proportion: one size won’t do http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  28. Desktop geese & handheld gander + Small canvas requires subtle proportions + What works in print… works in print + Robert Bringhurst matters, but scale must adapt http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  29. For example… http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  30. For example… http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  31. A More Modern Scale http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  32. Measure & Scale http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  33. Measure & Scale http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  34. Measure & Scale http://bit.ly/jprwt hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  35. Measure & Scale + Use max-width on elements to keep text readable 
 @media (min-width: 58em) { 
 p { max-width: 38em; } 
 } + CSS3 brings character counts, but not universal (ch & cx) + EMs or REMs , but no PX + Don’t forget: use real content! 
 Because Lorem Ipsum is a poser hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  36. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  37. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  38. OpenType Demo hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  39. OpenType Demo hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  40. OpenType Demo hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  41. OpenType Demo hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  42. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  43. Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  44. Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  45. Responsive Web Typography hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  46. Responsive Web Typography + Yes, it’s a thing hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  47. Responsive Web Typography + Yes, it’s a thing + It’s about adapting to screen size , network speed & device capabilities hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  48. Responsive Web Typography + Yes, it’s a thing + It’s about adapting to screen size , network speed & device capabilities + It’s about designing for what’s next hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  49. Responsive Web Typography + Yes, it’s a thing + It’s about adapting to screen size , network speed & device capabilities + It’s about designing for what’s next • Last Winter Olympics: there was no iPad • The one before? No iPhone either hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  50. Responsive Web Typography + Performance • Stats, Platforms & Screen Tests + Progression (It’s the web. Stu ff breaks) • If the font fails, does your design hold up? + Proportion • It’s about composition (think: small paintings) + Polish hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  51. How Do I Do It in Drupal? + Type is tied to design + Belongs in the Theme + Needs layered approach + @font-your-face may or may not do enough hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  52. Do It In Drupal: A Layered Approach hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  53. Prototype, Don’t Promise hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  54. “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) FOWD London hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  55. Just out! http://bit.ly/rwtbook hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

  56. Thank You Jason Pamental (@jpamental) � Slides here: http://bit.ly/jpdcrwtslides � Please review the session! http://bit.ly/jpdcrwt Jason Pamental | @jpamental http://hwdesignco.com

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Designing with Web Fonts: Type, Responsively Jason Pamental (@jpamental) Co-founder of H+W

Designing with Web Fonts: Type, Responsively Jason Pamental (@jpamental) Co-founder of H+W

Designing with Web Fonts: Type, Responsively Jason Pamental (@jpamental) Co-founder of H+W Design hwdesignco.com | @jpamental | ARTIFACT | #artifactconf Tuesday, May 14, 13 A Bit About Me + Built first website for Mosaic & Netscape 1 + Do

502 views • 46 slides
Type, Responsively A More Modern Approach to Typography on the Web FOWD London | #FOWD Jason

Type, Responsively A More Modern Approach to Typography on the Web FOWD London | #FOWD Jason

Type, Responsively A More Modern Approach to Typography on the Web FOWD London | #FOWD Jason Pamental | @jpamental 08 April, 2014 http://hwdesignco.com A Bit About Me + Live in the smallest state in the US + Designed my first site before there

826 views • 40 slides
The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs

The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs

The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs (@ftlabs) Historical comparison 1880 1900 1920 1940 1960 1980 2000 2020 Ne sprint orks o ffl ine Fast start up Portable

806 views • 52 slides
The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs

The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs

The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs (@ftlabs) Historical comparison 1880 1900 1920 1940 1960 1980 2000 2020 Ne sprint orks o ffl ine Fast start up Portable

902 views • 54 slides
REDECHECK: AN AUTOMATIC LAYOUT FAILURE CHECKING TOOL FOR RESPONSIVELY DESIGNED WEB PAGES ISSTA

REDECHECK: AN AUTOMATIC LAYOUT FAILURE CHECKING TOOL FOR RESPONSIVELY DESIGNED WEB PAGES ISSTA

THOMAS WALSH 1 , PHIL MCMINN 1 , GREGORY KAPFHAMMER 2 1 UNIVERSITY OF SHEFFIELD, 2 ALLEGHENY COLLEGE REDECHECK: AN AUTOMATIC LAYOUT FAILURE CHECKING TOOL FOR RESPONSIVELY DESIGNED WEB PAGES ISSTA 2017 THE PROBLEM: RESPONSIVE LAYOUT FAILURES

146 views • 3 slides
AUTOMATIC VISUAL VERIFICATION OF LAYOUT FAILURES IN RESPONSIVELY DESIGNED WEB PAGES Authors:

AUTOMATIC VISUAL VERIFICATION OF LAYOUT FAILURES IN RESPONSIVELY DESIGNED WEB PAGES Authors:

AUTOMATIC VISUAL VERIFICATION OF LAYOUT FAILURES IN RESPONSIVELY DESIGNED WEB PAGES Authors: University of Sheffield Ibrahim Althomali Allegheny College Gregory Kapfhammer University of Sheffield Phil McMinn Presented by: Ibrahim

471 views • 31 slides
Drawing on Quicksand Think Responsively, Design Responsibly Future of Web Design Jason Pamental

Drawing on Quicksand Think Responsively, Design Responsibly Future of Web Design Jason Pamental

Drawing on Quicksand Think Responsively, Design Responsibly Future of Web Design Jason Pamental | @jpamental 8th October, 2013 http://hwdesignco.com Tuesday, October 8, 13 About Me + Jason Pamental principal, co-founder of h+w design + Love

411 views • 38 slides
Type Checking Grammar Rule Semantic Rule var-decl id : type-exp Insert (id.name, type-exp .

Type Checking Grammar Rule Semantic Rule var-decl id : type-exp Insert (id.name, type-exp .

Type Checking Grammar Rule Semantic Rule var-decl id : type-exp Insert (id.name, type-exp . type ) type-exp int type-exp . type := integer type-exp bool type-exp . type := boolean type-exp 1 array type-exp 1 . type := [num] of

613 views • 7 slides
SMD Type Raised SMD Type Solderless Type Thru-Hole Type 05/03/09 2 MiniGrid and SMT

SMD Type Raised SMD Type Solderless Type Thru-Hole Type 05/03/09 2 MiniGrid and SMT

E-tec test & production sockets 05/03/09 1 Ball / Land Grid Array Sockets type SMD Type Raised SMD Type Solderless Type Thru-Hole Type 05/03/09 2 MiniGrid and SMT solderball adapter for BGA, LGA & CGA sockets The main features of

691 views • 11 slides
Type u A type is a collection of values and operations on those values. u Example u Integer type

Type u A type is a collection of values and operations on those values. u Example u Integer type

10/11/17 CSCI 2320 Principles of Programming Languages Types & Type System Reading: Ch 5 & 6 (Tucker & Noonan) Type u A type is a collection of values and operations on those values. u Example u Integer type has values ..., -2, -1,

301 views • 12 slides
Type u A type is a collection of values and operations on those values. u Example u

Type u A type is a collection of values and operations on those values. u Example u

10/18/15 CSCI 2325 Principles of Programming Languages Types & Type System Reading: Ch 5 & 6 (Tucker & Noonan) Type u A type is a collection of values and operations on those values. u Example u Integer type has values ...,

440 views • 12 slides
Overview Document type declaration Element type declaration Element type content

Overview Document type declaration Element type declaration Element type content

Document Type Definition (DTD) 10/20/2006 Document Type Definition (DTD) Asst. Prof. Dr. Kanda Runapongsa (krunapon@kku.ac.th) Dept. of Computer Engineering Khon Kaen University 1 Overview Document type declaration Element type

941 views • 35 slides
type date = int*int*int type name = string type bday = name*date type bdayset = bday set val s

type date = int*int*int type name = string type bday = name*date type bdayset = bday set val s

SE 3M04 SE 3M04 Fall 2003 Consider the following declarations type date = int*int*int type name = string type bday = name*date type bdayset = bday set val s : bdayset from a system that stores names and birthdays. Jacques Carette,

307 views • 5 slides
INF 212/CS 253 Type Systems Instructors: Harry Xu Crista Lopes What is a Data Type? A type

INF 212/CS 253 Type Systems Instructors: Harry Xu Crista Lopes What is a Data Type? A type

INF 212/CS 253 Type Systems Instructors: Harry Xu Crista Lopes What is a Data Type? A type is a collection of computational entities that share some common property Programming languages are designed to help programmers organize

803 views • 32 slides
Type Inference 75 Definition Type Inference Type inference = Java compiler's ability

Type Inference 75 Definition Type Inference Type inference = Java compiler's ability

Type Inference 75 Definition Type Inference Type inference = Java compiler's ability To look at each method invocation + corresponding declaration In order to determine the type argument (or arguments) that make the

457 views • 11 slides
Hindley-Milner Type Checking Automatic Type Inference What can be inferred about type of f or x

Hindley-Milner Type Checking Automatic Type Inference What can be inferred about type of f or x

CSE340 Principles of Programming Languages Hindley-Milner Type Checking Automatic Type Inference What can be inferred about type of f or x from this definition? f(x) = x Automatic Type Inference f(x) = x f is a function that takes a single

1.31k views • 73 slides
Admissions and Visitors Center Tuesday, December 1, 2015 Pre-Proposal Conference Meeting Agenda

Admissions and Visitors Center Tuesday, December 1, 2015 Pre-Proposal Conference Meeting Agenda

Admissions and Visitors Center Tuesday, December 1, 2015 Pre-Proposal Conference Meeting Agenda Part I: General, Part II: Submittal, Part III: Project I. General Welcome Introductions Questions : efrere@uncc.edu Updates:

500 views • 21 slides
Oral and Multimedia Presentation Impacts of Society Student Name: __Gavin S. ___________

Oral and Multimedia Presentation Impacts of Society Student Name: __Gavin S. ___________

Oral and Multimedia Presentation Impacts of Society Student Name: __Gavin S. ___________ Mark of Teahcer 27/40 Oral 4 3 2 1 Speaks Clearly Speaks clearly and Speaks clearly and Speaks clearly and

70 views • 3 slides
3 Community-oriented Multiple shapes coming together to form one coherent shape. Rounded

3 Community-oriented Multiple shapes coming together to form one coherent shape. Rounded

3 Community-oriented Multiple shapes coming together to form one coherent shape. Rounded corners that give a sense of welcoming/inviting. Different colors and shapes to showcase diversity within the organization. Overlapping piece

410 views • 3 slides
Retrieve, Rerank and Rewrite: Soft Template Based Neural Summarization Ziqiang Cao 1 Wenjie Li 1

Retrieve, Rerank and Rewrite: Soft Template Based Neural Summarization Ziqiang Cao 1 Wenjie Li 1

Introduction Method Experiments Conclusion Retrieve, Rerank and Rewrite: Soft Template Based Neural Summarization Ziqiang Cao 1 Wenjie Li 1 Furu Wei 2 Sujian Li 3 1 Department of Computing, The Hong Kong Polytechnic University 2 Microsoft

674 views • 26 slides
rethinking software design Daniel Jackson CSAIL MIT SATURN Conference San Diego May

rethinking software design Daniel Jackson CSAIL MIT SATURN Conference San Diego May

rethinking software design Daniel Jackson CSAIL MIT SATURN Conference San Diego May 4, 2016 what is software design? designers & engineers designer engineer elements door, window, wall column, beam, truss comfortable,

1.01k views • 82 slides
6th Grade Chromebooks General Use Guidelines Each student will be issued a chromebook Every

6th Grade Chromebooks General Use Guidelines Each student will be issued a chromebook Every

6th Grade Chromebooks General Use Guidelines Each student will be issued a chromebook Every student is responsible for his/her chromebook Even if you let someone else use your chromebook, you are responsible for it. ABSOLUTELY NO

373 views • 9 slides
Pitch vs. loudness Emma Baron High pitch What is Pitch Pitch is as high or low a sound can go.

Pitch vs. loudness Emma Baron High pitch What is Pitch Pitch is as high or low a sound can go.

Pitch vs. loudness Emma Baron High pitch What is Pitch Pitch is as high or low a sound can go. One example of pitch would be a opera singer. A opera singer use their voices in two ways , their voice could turn out low or hight that is

218 views • 7 slides
Making Object Detection Work in Medical Imaging Idan Bassuk Segmentation Detection

Making Object Detection Work in Medical Imaging Idan Bassuk Segmentation Detection

Making Object Detection Work in Medical Imaging Idan Bassuk Segmentation Detection Classification 4 5 Mature technology 6 Mature, Accurate and Fast 7 Changing the world, one killer app at a time 8 Changing the world, one killer app at

570 views • 39 slides

More recommend