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

Standardizing 'select': What the future holds f...

Frontend NE
March 05, 2020
Design
4
250

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
230
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.1k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
170
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
570
Contain yourself - Docker for developers
frontendne
2
180
Design process of a website
frontendne
0
170
What the JAMstack?
frontendne
1
740
Talking the talk
frontendne
0
340
We need to talk
frontendne
0
210

Other Decks in Design

See All in Design
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
680
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
130
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
490
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
360
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
800
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
170
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k

Featured

See All Featured
A better future with KSS
kneath
238
17k
4 Signs Your Business is Dying
shpigford
180
21k
Docker and Python
trallard
40
3.1k
Navigating Team Friction
lara
183
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.8k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Faster Mobile Websites
deanohume
305
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k

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]