Reviews of Designing with Web Standards




                         @AvenirZheng
                 http://avenirzheng.net
• 为了让网站能“活”得更久
• 为了提高网站的可访问性
• 为了降低成本



• 让用户更爽!
• 让老板更爽!
• 让自己更爽!
二)让老板更爽!
三)让自己更爽!
• 用户体验
   - 速度
     除了少数有毅力和耐心的客户能够等到所有的页面打开,大多数人 早已因
   厌倦而离开 - 《网站重构》 P4



• 可访问性
    - 语义基础
    - 平凡的用户
• 主要内容先呈现
• REFLOW
• 主要内容先呈现
• REFLOW




           制作一个页面,首先要一个top,下面是一个bottom,中间是一
           个三列块的模式,left,main,right。特殊要求是这个页是一个
        ...
• 主要内容先呈现
• REFLOW
• 主要内容先呈现
• REFLOW    ① CSS选择符
              - 具体
              - 从右到左
              - 避免复杂
• 主要内容先呈现
• REFLOW           ① CSS选择符
                       - 具体
                       - 从右到左
                       - 避...
• 主要内容先呈现
• REFLOW           ① CSS选择符
                       - 具体
                       - 从右到左
                       - 避...
• 主要内容先呈现
• REFLOW           ① CSS选择符
                       - 具体
                       - 从右到左
                       - 避...
• 主要内容先呈现
• REFLOW           ① CSS选择符
                       - 具体
                       - 从右到左
                       - 避...
• 主要内容先呈现
• REFLOW
• 主要内容先呈现
• REFLOW       ② 精简DOM
                 - 避免复杂嵌套

               ③ position为absolute戒fixed




Reflow Timer
• 主要内容先呈现
• REFLOW       ② 精简DOM
                 - 避免复杂嵌套

               ③ position为absolute戒fixed




Reflow Timer
• 主要内容先呈现
• REFLOW    ② 精简DOM
              - 避免复杂嵌套

            ③ position为absolute戒fixed
• 用户体验
    - 速度


• 可访问性
   - 语义基础
     Classitis和divitis就像小说中不必要的修饰词语,以及花园中的杂草 -
   《网站重构》P149



   - 平凡的用户
• Div+CSS
• ALT OR TITLE
• Div+CSS
• ALT OR TITLE
• Div+CSS
• ALT OR TITLE
• DIV+CSS
• ALT or TITLE
• DIV+CSS
• ALT or TITLE




            帮忙加个图片提示吧
• 用户体验
    - 速度

• 可访问性
   - 语义基础
   - 平凡的用户
     给每个人提供相等的可访问性 - 《网站重构》P276
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界



  导航什么的都不见了
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
还记得刚才的alt or title吗?
① 快!
② 人人生而平等
一)让用户更爽!


三)让自己更爽!
• 效率
   - 自动化
       所有的繁重工作都由计算机来完成 - 《网站重构》 P156

   - 模板

• 成本
    - 分离
    - 优化
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
  http://www.qianduan.net/zen-coding-a-new-way-to-write-html-
  code.html
• Fiddler & Willow
  - 文件夹映射
  - HOST环境切换


• CSSGAGA [ HTTP://WWW.99CSS.COM/ ]
  - 自动压缩
  - 生成DATA URI
  - 合并CSS文件
• FIDDLER & WILLOW
  - 文件夹映射
  - HOST环境切换


• CssGaga [ http://www.99css.com/ ]
  - 自动压缩
  - 生成data URI
  - 合并CSS文件
• FIDDLER & WILLOW
  - 文件夹映射
  - HOST环境切换


• CssGaga [ http://www.99css.com/ ]
  - 自动压缩
  - 生成data URI
  - 合并CSS文件
• 效率
    - 自动化
    - 模板

• 成本
    - 分离
    - 优化
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
• 效率
    - 自动化
    - 模板

• 成本
    - 分离
     文档一次建立,随处可用 - 《网站重构》 P42



   - 优化
• 多终端
• 流量
• 维护
• 多终端
• 流量
• 维护
• 多终端
• 流量
• 维护
• 效率
    - 自动化
    - 模板

• 成本
    - 分离
    - 优化
     节省每一兆字节的流量 - 《网站重构》 P18
• 图片优化
• 压缩代码
• 不停地优化
• 图片优化    ① 图片压缩
          ② 格式转换
• 压缩代码
          ③ 其他
• 不停地优化
• 图片优化
• 压缩代码
• 不停地优化
• PngQuant
       - PNG32转PNG8-Alpha

• Smush It [http://www.smushit.com]
     - 在线
     - 支持各种图片格式


• PngOptimizer
     ...
• PngQuant
       - PNG32转PNG8-Alpha

• Smush It [http://www.smushit.com]
     - 在线
     - 支持各种图片格式


• PngOptimizer
     ...
• PngQuant
       - PNG32转PNG8-Alpha

• Smush It [http://www.smushit.com]
     - 在线
     - 支持各种图片格式


• PngOptimizer
     ...
• PNGQUANT
  - PNG32转PNG8-ALPHA



• Smush It [http://www.smushit.com]
      - 在线
      - 支持各种图片格式


• PNGOPTIMIZER
  - 无损...
• PngQuant
     - PNG32转PNG8-Alpha


• Smush It [http://www.smushit.com]
     - 在线
     - 支持各种图片格式



• PngOptimizer
    -...
• PngQuant
     - PNG32转PNG8-Alpha


• Smush It [http://www.smushit.com]
     - 在线
     - 支持各种图片格式



• PngOptimizer
    -...
• 图片优化
• 压缩代码
• 不停地优化
• 图片优化
• 压缩代码
• 不停地优化
• 图片优化
• 压缩代码
• 不停地优化
• 图片优化
• 压缩代码
• 不停地优化

 其他建议?
• 图片优化
• 压缩代码
• 不停地优化

 其他建议?
① 提高产能
② 节约成本
一)让用户更爽!
二)让老板更爽!
① 《网站重构》描绘了未来
② 有些东西被忽略和被误解
③ 网站重构需要实现价值
谢谢!
在这个领域,争论从未停止过   - 《网站重构》
Reviews of Designing with Web Standards
Reviews of Designing with Web Standards
Reviews of Designing with Web Standards
Reviews of Designing with Web Standards
Upcoming SlideShare
Loading in …5
×

Reviews of Designing with Web Standards

1,867
-1

Published on

WebRebuild年会深圳站分享主题,《重温网站重构》 - 郑焕义/AvenirZheng http://avenirzheng.net

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • WebRebuild年会深圳站分享主题,《重温网站重构》 - 郑焕义/AvenirZheng http://avenirzheng.net
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,867
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Reviews of Designing with Web Standards

  1. 1. Reviews of Designing with Web Standards @AvenirZheng http://avenirzheng.net
  2. 2. • 为了让网站能“活”得更久 • 为了提高网站的可访问性 • 为了降低成本 • 让用户更爽! • 让老板更爽! • 让自己更爽!
  3. 3. 二)让老板更爽! 三)让自己更爽!
  4. 4. • 用户体验 - 速度 除了少数有毅力和耐心的客户能够等到所有的页面打开,大多数人 早已因 厌倦而离开 - 《网站重构》 P4 • 可访问性 - 语义基础 - 平凡的用户
  5. 5. • 主要内容先呈现 • REFLOW
  6. 6. • 主要内容先呈现 • REFLOW 制作一个页面,首先要一个top,下面是一个bottom,中间是一 个三列块的模式,left,main,right。特殊要求是这个页是一个 门户网站的基本框架,访问量大于100W每日。因成本限制,网 络带宽可能满足不了此访问量,会出现滞连情况。
  7. 7. • 主要内容先呈现 • REFLOW
  8. 8. • 主要内容先呈现 • REFLOW ① CSS选择符 - 具体 - 从右到左 - 避免复杂
  9. 9. • 主要内容先呈现 • REFLOW ① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
  10. 10. • 主要内容先呈现 • REFLOW ① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
  11. 11. • 主要内容先呈现 • REFLOW ① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
  12. 12. • 主要内容先呈现 • REFLOW ① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
  13. 13. • 主要内容先呈现 • REFLOW
  14. 14. • 主要内容先呈现 • REFLOW ② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed Reflow Timer
  15. 15. • 主要内容先呈现 • REFLOW ② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed Reflow Timer
  16. 16. • 主要内容先呈现 • REFLOW ② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed
  17. 17. • 用户体验 - 速度 • 可访问性 - 语义基础 Classitis和divitis就像小说中不必要的修饰词语,以及花园中的杂草 - 《网站重构》P149 - 平凡的用户
  18. 18. • Div+CSS • ALT OR TITLE
  19. 19. • Div+CSS • ALT OR TITLE
  20. 20. • Div+CSS • ALT OR TITLE
  21. 21. • DIV+CSS • ALT or TITLE
  22. 22. • DIV+CSS • ALT or TITLE 帮忙加个图片提示吧
  23. 23. • 用户体验 - 速度 • 可访问性 - 语义基础 - 平凡的用户 给每个人提供相等的可访问性 - 《网站重构》P276
  24. 24. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  25. 25. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  26. 26. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  27. 27. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  28. 28. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界 导航什么的都不见了
  29. 29. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  30. 30. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  31. 31. • 我不喜欢用鼠标 • 手机流量费用太高了 • 听不见的世界
  32. 32. 还记得刚才的alt or title吗?
  33. 33. ① 快! ② 人人生而平等
  34. 34. 一)让用户更爽! 三)让自己更爽!
  35. 35. • 效率 - 自动化 所有的繁重工作都由计算机来完成 - 《网站重构》 P156 - 模板 • 成本 - 分离 - 优化
  36. 36. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  37. 37. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  38. 38. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  39. 39. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  40. 40. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  41. 41. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  42. 42. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  43. 43. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING
  44. 44. • PHOTOSHOP动作 • 批量替代 • 自动完成 • ZEN-CODING http://www.qianduan.net/zen-coding-a-new-way-to-write-html- code.html
  45. 45. • Fiddler & Willow - 文件夹映射 - HOST环境切换 • CSSGAGA [ HTTP://WWW.99CSS.COM/ ] - 自动压缩 - 生成DATA URI - 合并CSS文件
  46. 46. • FIDDLER & WILLOW - 文件夹映射 - HOST环境切换 • CssGaga [ http://www.99css.com/ ] - 自动压缩 - 生成data URI - 合并CSS文件
  47. 47. • FIDDLER & WILLOW - 文件夹映射 - HOST环境切换 • CssGaga [ http://www.99css.com/ ] - 自动压缩 - 生成data URI - 合并CSS文件
  48. 48. • 效率 - 自动化 - 模板 • 成本 - 分离 - 优化
  49. 49. • 对于周期较短的运营活动项目 • 内容结构趋同的专题
  50. 50. • 对于周期较短的运营活动项目 • 内容结构趋同的专题
  51. 51. • 对于周期较短的运营活动项目 • 内容结构趋同的专题
  52. 52. • 效率 - 自动化 - 模板 • 成本 - 分离 文档一次建立,随处可用 - 《网站重构》 P42 - 优化
  53. 53. • 多终端 • 流量 • 维护
  54. 54. • 多终端 • 流量 • 维护
  55. 55. • 多终端 • 流量 • 维护
  56. 56. • 效率 - 自动化 - 模板 • 成本 - 分离 - 优化 节省每一兆字节的流量 - 《网站重构》 P18
  57. 57. • 图片优化 • 压缩代码 • 不停地优化
  58. 58. • 图片优化 ① 图片压缩 ② 格式转换 • 压缩代码 ③ 其他 • 不停地优化
  59. 59. • 图片优化 • 压缩代码 • 不停地优化
  60. 60. • PngQuant - PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
  61. 61. • PngQuant - PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
  62. 62. • PngQuant - PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
  63. 63. • PNGQUANT - PNG32转PNG8-ALPHA • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PNGOPTIMIZER - 无损压缩
  64. 64. • PngQuant - PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
  65. 65. • PngQuant - PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
  66. 66. • 图片优化 • 压缩代码 • 不停地优化
  67. 67. • 图片优化 • 压缩代码 • 不停地优化
  68. 68. • 图片优化 • 压缩代码 • 不停地优化
  69. 69. • 图片优化 • 压缩代码 • 不停地优化 其他建议?
  70. 70. • 图片优化 • 压缩代码 • 不停地优化 其他建议?
  71. 71. ① 提高产能 ② 节约成本
  72. 72. 一)让用户更爽! 二)让老板更爽!
  73. 73. ① 《网站重构》描绘了未来 ② 有些东西被忽略和被误解 ③ 网站重构需要实现价值
  74. 74. 谢谢! 在这个领域,争论从未停止过 - 《网站重构》

×