mindful user experience

Why Standards & the Future of CSS

Bruce Klopsteins -

Notes on the DTO sponsored presentation from Bert Bos Feb 2016 (co-creator of CSS)
Why Standards & the future of CSS - Bert's slides

Why standards

  • No vendor lock in
  • Stability

I should have asked about W3C vs WHATWG

I would be interested to hear more about the interplay between the World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG). The way I see it WHATWG moves a bit faster that W3C and is driven bit more by those wanting to implement and address developing needs earlier.

  • Interesting also that mailing lists remain the primary comms. tools for these orgs.

Sidenote - What is WHATWG

The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

Front end web = Open Web Platform (OWP)

  • interactive
  • cross-platform
  • same APIs for browser (cloud) based and locally installed applications

Good web design

  • Make it readable without CSS, JS, Cookies [interesting – assuming that the primary use of web is still text]
  • Keep the CSS small (in Bert’s experience 10KB should be enough for a complex style)
  • Design for the small screen, but don’t waste space on a big one
  • Apply WCAG
  • If a page has a big navigation menu, either:
    Put it at the end of the source
    Put a ‘skip to content’ link
  • Use media queries
  • Don’t set max width on body
  • Don’t use fixed width or font size
  • Don’t minify – let other people read and ‘steal’ your ideas
  • Use shorthand properties – easier for code maintenance

CSS – What things are in the pipeline

  • Catering for round displays (like watch faces) – positioning with polar coordinates (angle+distance)
  • Dealing with challenge of visual vs logical order and navigation. As someone who works on designing and testing for multiple modes of use this continues to be a tricky one.

Aside ~ Providing a predictable but not necessarily uniform experience across modes of use is tricky. For example a user with display and mouse/keyboard, vs. a user with a visual disability still using some of the display and a keyboard only, vs. a user with a visual disability still using some of the display and a keyboard and a screen reader, vs. a screen reader and keyboard only etc. It is heartening that the designers of the standard are grappling with this.

Page display of documents

Catering for

  • Paginated/scrolling modes of use

  • Mixed scrolling and paginated methods or a flip button

  • HTML to PDF formatting
    *Many vendors do book layout with HTML and convert to PDF e.g. Prince from Melbourne

  • Building in features for paginated display

              * page numbers
          * table of contents
          * footnotes
          * (good) page breaks
          * proper typographical support

See also Print-css.rocks – a tutorial and showcase for CSS paged media

Low level APIs Houdini access – to let advanced JavaScript users access the internals of browser engines

To improve things like scrolling behaviour, line breaking and justification, math layout
Here is a rough guide to the steps of code compiling to pixel painting in your browser

  • Document Object Model (DOM) – Tree
  • Painting and compositing – access here would allow some colour changes to be made
  • Font metrics – access here would please typography nerds
  • States (events)
  • Scrolling
  • Parsing, cascading, and inheritance
  • Page loaded and displayed in browser. – Tip using the JS event listener on document.onload is not always a great choice as it only happens after everything else here.

*Also thinking about adding a generic property to CSS like the data element in HTML

Questions from attendees

Frameworks like Twitter boostrap hot or not

  • Not a fan but depends on use
  • You get responsive design and fallbacks but big and bloated codebase
  • Try building an understanding of CSS fundamentals before using a framework

Preprocessors like SASS or LESS hot or not

  • Likes the idea but not always the implementation
  • Good that people can pick up and take what they want
  • Universally useful stuff like variables might be good to bring into the CSS standard