Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE

Frontend NE
March 05, 2020
Design
4
220

Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE

Thought HTML was done? Think again! Those who work on the web platform are ready to extend HTML controls with not only updated native web styles, so that we're no longer stuck in the Windows 95 era of design, but we're also starting to look at new HTML controls to help solve some of the problems developers encounter when trying to extend the current controls to fit their needs.

If you build for the web, you’ve probably had that moment when you get to a point you need to build and style your controls, the most common one being the select element. You try to use the native element and style it to match the rest of your design language but the amount of CSS required is exhaustive, and you can forget about extensibility or heavy customization of the controls.

In this talk, I’ll discuss the history behind why HTML controls can be so complex to style, the current state of styling them and their extensibility, and what the future looks like for controls, starting with the select element.

I’ll also touch on how developers and designers can get involved to help drive the future of this area of the web platform forward to ensure browser makers are building the right solutions to this problem.

Full event details: https://frontendne.co.uk/events/2020-03-05

Frontend NE

March 05, 2020
Tweet

More Decks by Frontend NE

See All by Frontend NE
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
200
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
940
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
140
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
530
Contain yourself - Docker for developers
frontendne
2
160
Design process of a website
frontendne
0
130
What the JAMstack?
frontendne
1
610
Talking the talk
frontendne
0
310
We need to talk
frontendne
0
180

Other Decks in Design

See All in Design
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
「これをゲームにしたい！」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
Web 組版の課題とその解法
yamatoiizuka
0
110
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
480
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは？
ncdc
2
250
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
440
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
850

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
323
20k
What's new in Ruby 2.0
geeforr
336
31k
Designing the Hi-DPI Web
ddemaree
276
33k
Statistics for Hackers
jakevdp
789
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Atom: Resistance is Futile
akmur
258
25k
How GitHub (no longer) Works
holman
304
140k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
16
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k

Transcript

  1. Standardizing <select>: What the future holds for HTML Controls

  2. Hi! I’m Stephanie. Program Manager for Microsoft Edge Developer Experiences

    @seaotta

  3. Hi! I’m Stephanie. Designer Front-end developer Dev and Designer Advocate

    @seaotta

  4. Designer Developer

  5. None
  6. None
  7. None
  8. None
  9. None

  10. Mock up Code

  11. None

  12. HTML Controls

  13. Standardizing <select> The Past: why HTML Controls are the way

    they are The Present: where we’re at now The Future: what’s to come with HTML Controls (select!)

  14. Some History HTML Form Controls

  15. 1995

  16. 1995

  17. 1995

  18. 1995

  19. Pre- 1995 <HTML> 1.0

  20. Pre- 1995 <HTML> 1.0

  21. The primary focus of the specification draft was to capture

    common HTML practice in web browsers as of June 1994. http://www.blooberry.com/indexdot/history/html20.html

  22. WorldWideWeb (Nexus) ViolaWWW Erwise MidasWWW MacWWW Mosaic Cello Lynx 2.0

    Arena AMosaic 1.0 IBM WebExplorer Netscape Navigator SlipKnot 1.0 MacWeb Ibrowse Agora (Argo) Minuet Web Browsers 1991-1994 Wikipedia
  23. None
  24. None

  25. 1995

  26. 1995

  27. 1995

  28. CSS IS AWESOME

  29. CSS IS AWESOME 1997

  30. 1999 <HTML> 4.01 CSS IS AWESOME ❤

  31. 1995

  32. https://www.456bereastreet.com/archive/200409/styling_form_controls/

  33. .form { -webkit-appearance: value; -moz-appearance: value; appearance: value; }

  34. None

  35. Recap Pre-1995: Lots of browsers pop up 1994: HTML 1.0

    draft expires 1995: HTML 2.0 becomes standardized spec Basic HTML form controls standardized No standard for styling Operating system dependency 1997: CSS Supported by HTML 3.20 not fully embraced by browsers 1999: CSS Supported by HTML 4.01 embraced by more browsers

  36. 1999 – present

  37. The Current State of Styling Native Controls

  38. It’s not bad…

  39. But it’s not great either.

  40. Feasibility of Styling Form Controls with CSS

  41. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Feasibility of Styling

    Form Controls with CSS Can be styled with few problems

  42. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend>

    Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks

  43. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend>

    <select> <option> <optgroup> <datalist> <progress> <meter> Color picker Date controls Dropdown widgets Range File picker Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks Good night and good luck.

  44. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend>

    <select> <option> <optgroup> <datalist> <progress> <meter> Color picker Date controls Dropdown widgets Range File picker Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks Good night and good luck.

  45. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend>

    <select> <option> <optgroup> <datalist> <progress> <meter> Color picker Date controls Dropdown widgets Range File picker Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks Good night and good luck.

  46. Browser Inconsistencies

  47. Browser Inconsistencies Chrome EdgeHTML Firefox Safari

  48. No extensibility

  49. None

  50. <video controls width="1080"> </video>

  51. <video controls width="1080"> </video>

  52. <video width="1080"> </video>

  53. Dribbble: Jordan Ranson

  54. Dribbble: Mark Hendriks Dribbble: Seb kay

  55. What do developers really want?

  56. Do they really want better form controls?

  57. None

  58. Initial Research 1400 respondents

  59. Initial Research: Demographics Full results: https://aka.ms/controls-survey

  60. Initial Research: Demographics Full results: https://aka.ms/controls-survey

  61. Top 10 Re-created Form Controls Full results: https://aka.ms/controls-survey

  62. Reasons Controls Are Created Full results: https://aka.ms/controls-survey

  63. JSConfEU Survey Which form control gives you the most frustration?

    Why?

  64. JSConfEU Survey Which form control gives you the most frustration?

  65. JSConfEU Survey Why?

  66. “ Requires hacky tricks

  67. “ Can’t style <option> elements at all to the extent

    we need to

  68. Too little control over styling across popular browsers “

  69. …but the amount of work it takes to implement an

    accessible alternative with complete feature parity is massive. “

  70. How painful is it?

  71. ImportantTM Research

  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None

  83. Clearly, there is an issue

  84. The Future

  85. ✨

  86. HTML isn’t done

  87. +

  88. New Styles & Accessibility Improvements

  89. Chromium Controls Visual Refresh

  90. New Native Components

  91. New native components

  92. New native components <virtual-list> https://aka.ms/virtual-scroller https://aka.ms/toggle-switch <toggle-switch>

  93. From proposal to standard 1. Proposal incubates in the WICG

    2. After incubation, multi-implementer interest is required before graduating to an HTML standard

  94. Tell other implementers what you want! 1. @mozhacks on Twitter

    2. Mozilla Firefox Platform Status: https://github.com/ mozilla/platform-status 3. @webkit on Twitter 4. WebKit Platform Status: https://webkit.org/status/

  95. Fixing the current problems with controls

  96. Form controls and their parts aren’t standardized

  97. How do you standardize a control?

  98. Open UI https://open-ui.org/

  99. Open UI’s Mission Maintain an open standard for UI and

    promote its adherence and adoption.

  100. Goals of Open UI • Document component names as they

    exist today • Define a common language for describing UIs and design systems • Eventual browser standards for web app components • Converging designer processes and developer workflows

  101. Standardizing controls and components is hard…

  102. None

  103. Open UI People who work on design systems Web platform

    engineers +

  104. Investigations: Peeling open <select>

  105. None
  106. None

  107. aka.ms/select-ou Select Working Draft

  108. aka.ms/open-ui Open UI Website

  109. aka.ms/open-ui Add a design system Open UI Website

  110. aka.ms/open-ui Add a design system Provide feedback

  111. We need you!

  112. We need you! • Provide feedback on the current HTML

    Control prototypes that Chrome has • Contribute to the form control investigations on Open UI • Tell browser vendors what you need from your form controls

  113. Follow these folks • @stubbornella – Google Chrome PM •

    @gregwhitworth – Microsoft Edge PM • @seaotta – Microsoft Edge PM

  114. We’re here to listen…

  115. …because these improvements are for you.

  116. Thank you! https://noti.st/seaotta @seaotta [email protected]