Web Design: How JavaScript Breaks UI, Evolution of UI

By Xah Lee. Date: . Last updated: .

So many “modern” pure JavaScript based websites screws up the page so that basic universal browser operations broke. For example:

Ctrl+click or middle click on a link to open in new tab, or 【Ctrl+n】 to open new page, will not always work. Perpetrator: Google's Google Plus, Twitter.

• Each site's images often has its own non-standard UI. Some lets you close it by Escape key, some not. The close box is sometimes on upper right, sometimes left, and drawn in different style. Perpetrator: Google's Google Plus, Twitter, Facebook, and all the social sites.

([Google Plus discussion https://plus.google.com/112757647855302148298/posts/3F83GiKEQCB])

When a key that works only sometimes, it's annoying, but also dangerous, because after a few times of non-working, you stop using that key. Instead, user goes for the sure way of using the more cumbersome mouse.

• When a page contains Video (Flash) such as YouTube, almost always your keys such as Page Down, don't work anymore, because the “focus” is on Flash or some particular JavaScript scripted element, so key input got stolen. You need to click somewhere outside the video first.

From user's perspective, it's plainly annoying. However, the thing is, these fancy sites don't care, for good reasons, because, vast majority of people, probably 90%, don't even know about basic keys. Control+Click would be considered advanced.

so, how do we take this? should this be considered the inevitable progress of UI, or is it simply crassness of the corporations?

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.