很早的时候,大约在上高中,就向往过有一个自己的网站,只是很简单的就行
直到大学毕业,学习 Web 开发,那时做了个人网站的第一个版本
现在仍是喜欢个人网站简单一些,最近重新实现了网站
不管看起来,还是实现方式上都很简单,页面上几乎没有添加任何不必要的元素与功能
界面与交互
对整个网站,想要实现的是:页面简洁、内容层次清晰、交互反馈明显
页面本身简单,主要通过间距
、对齐
来布局,以较大面积的空白
从视觉上分隔页面内各部分内容
鼠标指向链接时,有一个下划线变化的动画,为啥选这个动画呢?
- 动画效果简单,但足够明显、容易感知
- 网站中的链接主要有两类,正文中的链接和导航链接。两类链接交互时动画完全相同(都为链接),只是默认样式不同(正文中链接默认有主题色、下划线,导航链接为了简洁默认没有),这样实现了统一与区别
- 正文中链接默认带下划线是有想到:下划线是最常见的链接样式,符合认知习惯、方便移动端识别、也可以照顾有颜色识别障碍的来访者(尽管概率极低极低)
在 html 元素上添加了两条简单但有大作用的 CSS 定义:
- scroll-behavior 设为 smooth,在链接页内跳转时添加页面平滑滚动的过渡
- scroll-padding-top 设置链接跳转后的页面上边距,以避免跳转后目标内容离页面上边缘过近或出现遮挡的情况
点击图片可放大显示,与 Medium 处理图片方式一样,放大后页面向下继续滚动,图片自动还原,通过易用的 medium-zoom 实现
文字排版
对成篇文字,想要实现的是:易于阅读、层次分明、界限清晰
主要通过字体颜色、字体大小、上下边距
来实现
一、怎样确定的字体颜色?
纯白背景,纯黑字体,清晰是清晰,但在屏幕上密集显示出来容易感觉有些刺眼
文字和背景间的对比柔和些更易于阅读,先是添加了一个浅色背景
多次尝试后,发现当正文字体颜色对比率
稍超过 WCAG - 颜色对比 中的增强对比率(AAA) 7:1
时是一个较好的平衡点,可以让正文字体足够清晰,同时不会有刺眼感
二、怎样确定的字体大小?
想要实现的是:不同层级的标题与正文字体大小层级分明
- 以浏览器默认字体大小为 1rem,即为正文字体大小
- 能接受的最大字体大小为 2rem,即为一级标题(h1)字体大小
- 最多会用到 3 级标题,要让三级标题(h3)和正文仍有足够的字体大小层级对比,设为 1.4 rem
- 二级标题(h2)取一级标题和三级标题字体大小中间值为 1.7 rem
为了更好地区分二级与三级标题,分别加上了下划线与下虚线
三、怎样确定的内容上下间距?
想要的是实现的:章节、段落等内容间界限清晰
这里根据不同内容间逻辑上的亲疏关系来确定间距,即关系越紧密,相互间的间距应越小
从正文到一级标题,间距由近到远依次为:
- 细想下,行与行之间最紧密,所以距离最小,但要大到易于阅读,行高设为 1.7
- 段落间距要大于行间距,但不能大到段落间看上去有些松散,在行高基础上加了 1 rem 的下边距
- 标题下边距稍大于段落间距
- 标题上边距要大得足够到,标题与下面段落作为一整个小节后,与上下小节明显分开
- 上一级标题(h2)的上下边距要大于下一级标题(h3)的上下边距
开发细节
使用了最新的 Ruby 2.7 和 Rails 6.0,且不断保持更新,更多技术细节可看 Rails skeleton
使用了功能丰富又好用的 kramdown 来渲染 markdown 内容
有结合 Rouge 添加代码语法高亮
1
2
3
def say_hi
puts 'hi'
end
访问速度优化
部署使用的 Cloudflare、Heroku、Amazon S3 云存储 都是国外服务,国内访问起来可能会很慢
尝试尽量优化访问速度,检查网络请求,发现这么简单的网站传输资源仍超过 350 KB
,使用 webpack-bundle-analyzer 分析资源大小占比,发现占比较大的主要是 Font Awesome 图标, Bootstrap 及关联的 jQuery、Popper.js
但实际上图标只使用了不到 10 个,Bootstrap 也只使用了基础样式,意识到都没必要使用完整的库
于是,对用到的 Font Awesome 图标,下载对应的 SVG 文件,以 inline_svg 显示达到同样的效果;Bootstrap 样式只 import 必要的
一些文件,同时去掉没用到的 jQuery、Popper.js
另外其他的库 Clipboard 和 medium-zoom 也只 import 压缩后的 min
版本
这样下来,传输资源减少到 50 kb
,网站访问速度提升很多
日志检查
开发过程中,发现即使是再简单的功能,检查服务器运行日志仍是很有必要的,比如查看日志时发现并修复了一些意料外的问题
-
不必要的 HTTP 请求
点击目录链接在页面内跳转时会进行全新的 HTTP 请求,搜索了下是 Turbolink 的问题
-
不必要的数据库查询
每次访问都会因为认证而进行数据库查询,修改为请求的 Cookie 有相应的字段 :user_credentials 才进行查询
拖延
网站整体很简单,实际开发时间并没有多少,但整个开发周期却有些长
即使是这样一个小项目,也经历了拖延,想了下在以下情况下很容易拖延:
1、没有截止日期
没有明确的上线时间,就没有什么紧迫感
没有设为高优先级,偶尔想起的时候才做一点
对不紧迫的事情,最好仍设定一个截止日期,以更好的完成
2、不知道具体做什么
一开始没有想清楚把网站具体做成什么样
整体布局、页面细节,经常是一边做一边尝试、慢慢调整
遇到不知道怎么做才好时就停下来,一停就好长时间
做之前还是要大致规划好,想清楚,再开始做才更有效率
小结
尽管网站简单,整个做下来还是学到了一些新东西
在做的过程中,会发现知识盲区,会遇到意外问题,这些在真正做之前是很难想到的
以此为契机的学习,更有针对性,效果更好
不做什么也不会发生,做着做着就超乎想像