Infinite, Unknowable Canvas

Turning Designs into Websites

Skyland Woll, Senior Engineer at Wide Eye

About Me

  • Senior Engineer
  • Try to help others, get people unstuck
  • Solve the common problems we face; make life easier for everyone
  • Make websites

Working with Engineers

  • Problem-solvers with a problem-solving mindset
  • Can be cautious about scope and effort
  • Try to keep best practices in mind
  • All different: some more frontend/visual, some more data-oriented

Common Engineering Principles

  • DRY: Do Not Repeat Yourself
    • Components
    • Avoiding repetition
  • Separation of concerns
    • Let respective tech take care of its business
    • Let HTML handle markup, CSS handle styling, JS handle logic
  • Progressive enhancement
  • Opinions and opinionated approaches

The web has rules

Semantics, accessibility, and usablility must always be considered.

We are making an interactive document that will live on a user's device for at least a moment.

The web can set you free

So much is possible in such a flexible, responsive medium.

 Think for a moment of all the sites out there on the web. There’s a huge variation in visual style: colour schemes, typographic treatments, textures and layouts. All of that variety is made possible by one simple pattern that describes all the CSS ever written: 
                        
                            selector {
                                property: value;
                            }
That's it. Jeremy Keith, Resilient Web Design

For example

                        
                            .site-heading {
                                font-size: 2.2rem;
                            }

And more complex rules

                        
                            body {
                                font-size: 1.2rem;
                                font-family: sans-serif;
                                font-weight: 400;
                                line-height: 1.5;
                                letter-spacing: 0.01ch;
                            }

Typography on the Web

  • Generally, all typographic styles will be created with CSS (Cascading Style Sheets)
  • There are some hard rules
  • Opinions and best practices too
  • Some gotchas

Accessibility + Usability

Almost all type on the internet is meant to be read.

Readability and contrast

  • Meet required min contrast for readable text
  • WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
    • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
    • Many tools are available to test contrast
  • Ensure body and readable text sections have usable line height (> 1.5)

Responsiveness

  • How do we respond to user needs and respect user preferences?
    • Accommodate zoom
    • Accommodate custom sizing, use REM and responsive units

Gotchas

  • IOS Input Font sizing and forced zoom
    • For this reason, always recommend using 1rem/16px or greater for input font sizing.
  • Font smoothing can be tricky
  • Firefox rendering issues (hopefully going away soon)

Semantics

Make it make sense!

Structure and Meaning

  • HTML elements have meaning!
  • Proper heading order is an a11y (accessiblity) requirement
  • Must ensure HTML is built and nested properly
    • Carefully consider what you put in your sandwich
  • Good semantics conveys meaning to both users and developers

Responsiveness

Having empathy for our users.

Responsive Sizing

  • Most common responsive consideration
  • CSS Breakpoints and media queries
  • Consider Intrinsic Responsiveness
    • Can a component be made to handle its own responsive concerns?
    • Can a component do this is a "smart" way?
    • Thinking in percentages, minimums, and maximums while ensuring good behavior in fluid, changing space can make for resilient components.

Other kinds of responsiveness

  • User needs and preference
    • Good accessibility practice is one way we respond to user needs
    • Reducing motion is another way to accommodate user needs with a reduced motion query
  • Can also respond to user's light/dark mode preference

Demo

  • Interpreting a design
  • Thinking in components
  • Accessiblity and tabbing
  • Considering all the things!

Bonus Content

Tools, Tips, People to Follow

Tools

Variable Fonts

People

More People