这是一个创建于 2824 天前的主题，其中的信息可能已经有所发展或是发生改变。
Gee Law ’ s Blog 或者粘贴网址 https://geelaw.blog/
可以发现的几个网站设计的亮点（也就是产品经理常说的 细节）：
- 代码 vanilla ，没有库依赖，无浏览器 detection ，内容纯静态；
- 元素 sematic ，纯 CSS 实现 responsive design ，对 screen reader 友好；
- 支持无脚本环境，视觉效果无折扣，所有东西都完美 fallback ；
- 打印机友好，打印效果在不同视觉状态下一致（托 semantic + css 的福）；
- 剪贴板友好，可见元素和元素结构长得差不多（托 semantic 的福）；
- 支持 Windows 高对比度，部分图片有高对比度版；
- 支持 Windows 动态磁贴，固定到“开始”屏幕将轮播最近 5 条博文标题、摘要和主题图；
- 元数据丰富，支持 Open Graph 和 Twitter Card 以及 vendor-neutral 元数据。
不好之处也有不少：
- 支持高对比度的图片牺牲了部分 semantic 和剪贴板友好性；
- Disqus 部分不支持在更改主题后自动更改主题（如果强行 reset 会导致数据丢失）；
- 从博文 source build 网站的脚本写得很糟，不敢开源。
所以求关注我的 blog 啦～
 |
1
unique 2017-04-08 01:37:44 +08:00
还不错，挺极客的
|
 |
2
boolean93 2017-04-08 01:38:53 +08:00  1
Gee Law? 怎么读着像“基佬”？（逃）
|
 |
3
Kilerd 2017-04-08 03:10:48 +08:00 via iPhone
怪我不懂艺术，哪里好看了？
|
 |
4
freedomSky 2017-04-08 04:07:44 +08:00
@boolean93 我也这么读都出来了..hah
|
 |
5
hxtheone 2017-04-08 04:53:20 +08:00
并没觉得哪里漂亮
|
 |
6
wolfan 2017-04-08 05:07:10 +08:00 via Android
动态磁贴是怎么实现的？
|
 |
7
geelaw OP |
|
8
geelaw OP @wolfan 看 index.html 的 meta 和根目录下的 browserconfig.xml 以及 tiles/?.xml （?=1..5 ）这些文件。
此外要工作正常还需要一般的动态磁贴要求，例如 XML 不超 5 KB 、图片不超 200 KB ，这很容易忘记导致磁铁不能显示。 |
 |
9
wuling 2017-04-08 11:09:08 +08:00
要不是看了楼主说的这些优点，我会以为这是 10 年前的博客...
|
 |
10
minamike 2017-04-08 11:45:43 +08:00 1
移动端还行 桌面端的右边图片好违和 看起来好乱 还有那个切换亮色暗色的图标为什么要用屎黄色 阅读全文和 tag 的图标太写实 和扁平风格不符
|
|
13
geelaw OP |
|
14
geelaw OP  )这个是期待的显示效果，在其他操作系统（字体）下 emoji 会有不同的样式。此外右边的图似乎不太好搞，它是主题图，宽度永远是 300px ，高度根据左边的摘要、修改日期和标签产生的高度决定，所以会有点乱。但是我不想它控制高度，所以高度上可能有不一致的现象。我正在考虑解决，例如要求主题图的高度至少是一个固定数。 |
 |
15
Hackghost 2017-04-08 23:24:24 +08:00 via iPhone
捕捉茶园学长一只
|
|
16
geelaw OP @minamike 感谢您提出的图片乱的问题。我修改了条目列举的实现， so that ：
- 当且仅当宽视图且有图片时显示图片； - 如果显示图片，则图片宽度是 320px ，高度至少是 240px ； - 如果左侧文字多，则增加图片高度； - 如果左侧文字少，则在摘要和标签之间增加空白。 相比之前，设定最小高度让条目列举看起来整齐不少；此外标签、日期、评论数的显示也改变了一下，感觉新版本的更整齐。 吐槽一下 HTML 和 CSS 碎片化问题，我一开始用 flex-box 实现的，后来发现 Safari (El Capitan) 居然不支持！于是换回 CSS table 实现。 |
|
18
geelaw OP @minamike 居然忘了还有 vendor-prefix 可以用 orz ，懒得再改了，反正现在这个也能用。而且这样还可以兼容更多版本的 IE （虽然我没打算兼容 IE10-）。
|
|
19
boolean93 2017-04-09 16:42:52 +08:00 1
对了，提一个小建议，就是给个最大宽度，否则在我的 21:9 显示器上面看会很丑很丑
|
 |
20
dnsjia 2017-04-09 19:10:38 +08:00 via Android
|
 |
21
sensui7 2017-04-09 20:56:21 +08:00
所有链接改成磁贴的风格, 能否更好看一点? 特别是导航条的风格, 目前看来有点太普通了.
评论的链接放标题或者日期后面能否更好一点 各个元素的 margin 和 padding 是否能细调一下, 现在是否有点随意了呢? article 元素做成大磁贴, 是否能比现在简单的用分割线要好一点? |
|
22
geelaw OP @boolean93 感谢您的建议，我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式，并且打印的时候如果宽度大于 1600px 也会采用分栏（大约 720px 到 850px 一栏）。
|
|
23
geelaw OP @sensui7 感谢您的回复。
上面贴的图已经过时了。 磁贴的信息容量比较有限，展现了标题、摘要和题图之后就没什么其他的空间了（最多可以再用 badge 表现一下评论数），此外磁贴是一个大的点击目标，这样就不能列出标签、直达评论的链接了。另一种设定是采取双面 /peeking 的磁贴，一面是题图+评论数，另一面是标题和摘要，这样做的好处是很容易解决可访问性（对比度）的要求。但是可能因为 timing 不好让读者必须等待磁贴翻面。此外还有一些问题，例如有些文章是没有题图的，这些磁贴的图就不太好弄，再比如现在的题图都是按照 4:3 选择的，增加磁贴之后剪裁很成问题。 现在评论数就是在日期后面，之所以右侧放置是为了保持对齐，如果多次访问我的网站会发现昨今二日里气泡的位置改变了——从数字左边变到右边，这个也是对齐考虑，因为数字的加载需要一段时间，要让数字出现的位置尽量不改变其他元素的位置，否则会有跳动的感觉。 感觉主页可以考虑一下使用磁贴设计，现在的设计对 archive 页面比较合适。 |
|
24
sensui7 2017-04-09 23:04:15 +08:00
@geelaw 虽然我之前用的 lumia 手机, 但我对磁贴这一形式理解还停留在色块上, 你的回复让我意识到了交互性的特点, 感谢.
|
Select Language