Web Experience Tuning List | Web 体验优化

Robust: 健壮性

• Robust Client-Side JavaScript: Why do we need to talk about robust JavaScript and how do we achieve it?

易用性（Accessibility）

• Koa11y : Easily check for website accessibility issues.

• 2017-Web Content Accessibility Guidelines—for People Who Haven’t Read Them: In a single article—what gifts the Web Content Accessibility Guidelines 2.0 editors have bestowed upon us.

Polyfill

UI

TypeSet

• 移动端文字与排版设计的六个原则

• W3C 中文排版需求

• Sizzy ：A tool for developing responsive websites crazy-fast. Sizzy 是辅助开发者预览网页在不同屏幕分辨率下显示效果的工具，它能够在同一页上列举出目标网页在多个设备上的显示效果，从而加速响应式开发的速度。

• React SizeME: Make your React Components aware of their width, height and position.

• Reframe

• 专注于移动端样式库 Mobi.css

• Device.js : 面向不同的设备选用不同的布局代码

• 2013-Media Queries Are Not The Answer: Element Query Polyfill

• 2016-Element Queries: the Future of Responsive Web Design

• 网易和淘宝移动 WEB 适配方案再分析

• Scaling Responsive Animations

• 这可能是史上最全的 CSS 自适应布局总结

• developing-mobile-web-apps-when-why-and-how

• 10-tips-for-mobile-web-design-optimization

• The pro’s guide to responsive web design: Advanced techniques from top web designers to build better sites for any device.

Media Query: 媒介查询

• media-queries-for-standard-devices

• CSS Media Queries for iPads & iPhones

• Respond.js : 针对 IE6-8 的媒介查询

• sass-mediaqueries

• write-media-queries-sass

• approaches-media-queries-sass

• 2017-Media Queries Based on Element Width with MutationObserver

响应式布局与缩放

• understanding-css-grid-systems

• The future of layout with CSS: Grid Layouts

• 2017-Common Responsive Layouts with CSS Grid (and some without!): Example code for you to try out, change and make your own.

响应式尺寸

• 前端：REM 手机屏幕高清适配方案

响应式组件

• Autoresponsive React