网站建设用户界面的新潮流: responsive design
作者: JC, 更新日期: 2017-06-10
现在的互联网和10多年前有很大不同了，虽然后台的架构可能没有太大的变化，但前端的用户界面部分，不仅仅需要满足桌面的browser了。因为现在的互联网用户终端趋于多元化，比如有智能手机，平板电脑，可穿戴设备等等。
Mobile是大趋势，今年整个Internet上用mobile设备的浏览量就要超过桌面了。说到mobile，其实主要还是指的各种phone。而tablet，我觉得可以划归为桌面。因为网站来说，针对tablet不一定需要做太大的修改。
我现在觉得作为web developer，必须要掌握responsive design的技巧了。responsive design，中文叫做响应式网页设计，或者也有叫做自适应式网页设计。说白了，就是用这种方法设计出来的网站，在各种设备上看，都是效果不错的。可以随着屏幕的大小而自动的调整网站的各个段落啥的。这样，web designer就可以搞一套html，而不用为不同的设备来设计不同的html page了。
那么responsive design怎么下手呢？用html5，css这种最基本的web开发语言肯定是可以的，但做起来太麻烦了。我最近发现了bootstrap这个开发框架，用它设计出来的网站大方漂亮。而且，开发responsive website挺简单的，因为基本上只要知道调用bootstrap里面的库函数就够了。
bootstrap目前貌似是最流行的responsive design的框架了。我的感觉是，它之于html5/css好比java之于C/C++。为了学习bootstrap，我还买了一本书，是这个 Step By Step Bootstrap 3: A Quick Guide to Responsive Web Design
学习完这本书后，我就把剑知网和AdvancedJ.com都修改了一下，用bootstrap来做，更加适合于网友在mobile上浏览，提升用户体验，进而可以增加seo效果。
下面谈一谈我用bootstrap建网站前台界面的体会。
1. Twitter Bootstrap虽好，但还需要很好的熟悉，才能有效的驾驭。
虽然用bootstrap，简单的东西可以搭建，但如果要customize的话，就不容易了。经常需要查网上人家是如何订制bootstrap的。每一个定制都是一个补丁， 感觉补丁打多了，还不如直接copy bootstrap的一些code，自己重新开发合算。
2. 维护是个问题
现在改版完了，感觉虽然用类似bootstrap这样的框架有一定的好处，但最好还是大部分用自己手工开发的html/css模块。因为好维护，界面看着还可以和其他网站的界面不一样，可以更好的树立品牌。(一个品牌就在于独特性，如果和人家很多地方相同的话，就不好树立品牌了)。另外，bootstrap软件经常更新的，所以，为了减小更新后给网站带来的问题，一来要熟悉bootstrap，二来要减少对bootstrap的依赖性，能用自己的模块就用自己的模块。
3. 小规模的逐步改版最好
网站改版看着简单，但其实细节的事情真不少。做过一遍以后，感觉像扒了一层皮那样累。而且，就没有太多的时间写作了。有时候想想，是否得不偿失呢？所以，最好就是小步快走的逐步改版，而不是一下子把所有的工作都停了，毕竟，网站的生命力在于文章，界面设计的美观不美观的，对mobile看着舒服不舒服的，只是个辅助作用。
4. 在微信上和一个用过bootstrap的朋友聊，得知用bootstrap来做网站的话， 目前有一定的局限性。就是相对简单的页面还可以，但有heavy transaction的页面就不行了，比如说，如果页面的表格很多，显示就会出问题。
5. 用bootstrap的css来修改网站，还意识到一点，就是，社会是分工合作的。不可能说一个人即做mobile site也做mobile app。光是mobile site的各种css，各种html，就能够把人累死了。所以，做mobile app来说，我是没有精力去做了。我觉得术业有专攻，一般做web application的，还是不要涉及做mobile app为好。这两个领域差的可能不小。而一个startup要想同时拥有网站和mobile app的话，需要外包给不同的人做才行。
另外，做网站，免不了需要加小icon啥的。这个资源是免费的icon library: Font Awesome，记录在这里，将来可能会用上。
还有个不错的资源，是一个很好的bootstrap模板网站: startbootstrap.com，Free Bootstrap Themes & Templates。
最后，说到web design，适当的读一些入门的关于design的书，会非常有好处的。这里就介绍一本不错的web design的书。
Web Design - Start Here: A No-Nonsense, Jargon Free Guide
作者有20多年的编程经验，在small business web design方面很有研究，所以写的这本书。从入门到精通，讲解了设计和优化网站的技巧。
Mobile是大趋势，今年整个Internet上用mobile设备的浏览量就要超过桌面了。说到mobile，其实主要还是指的各种phone。而tablet，我觉得可以划归为桌面。因为网站来说，针对tablet不一定需要做太大的修改。
我现在觉得作为web developer，必须要掌握responsive design的技巧了。responsive design，中文叫做响应式网页设计，或者也有叫做自适应式网页设计。说白了，就是用这种方法设计出来的网站，在各种设备上看，都是效果不错的。可以随着屏幕的大小而自动的调整网站的各个段落啥的。这样，web designer就可以搞一套html，而不用为不同的设备来设计不同的html page了。
那么responsive design怎么下手呢？用html5，css这种最基本的web开发语言肯定是可以的，但做起来太麻烦了。我最近发现了bootstrap这个开发框架，用它设计出来的网站大方漂亮。而且，开发responsive website挺简单的，因为基本上只要知道调用bootstrap里面的库函数就够了。
bootstrap目前貌似是最流行的responsive design的框架了。我的感觉是，它之于html5/css好比java之于C/C++。为了学习bootstrap，我还买了一本书，是这个 Step By Step Bootstrap 3: A Quick Guide to Responsive Web Design
学习完这本书后，我就把剑知网和AdvancedJ.com都修改了一下，用bootstrap来做，更加适合于网友在mobile上浏览，提升用户体验，进而可以增加seo效果。
下面谈一谈我用bootstrap建网站前台界面的体会。
1. Twitter Bootstrap虽好，但还需要很好的熟悉，才能有效的驾驭。
虽然用bootstrap，简单的东西可以搭建，但如果要customize的话，就不容易了。经常需要查网上人家是如何订制bootstrap的。每一个定制都是一个补丁， 感觉补丁打多了，还不如直接copy bootstrap的一些code，自己重新开发合算。
2. 维护是个问题
现在改版完了，感觉虽然用类似bootstrap这样的框架有一定的好处，但最好还是大部分用自己手工开发的html/css模块。因为好维护，界面看着还可以和其他网站的界面不一样，可以更好的树立品牌。(一个品牌就在于独特性，如果和人家很多地方相同的话，就不好树立品牌了)。另外，bootstrap软件经常更新的，所以，为了减小更新后给网站带来的问题，一来要熟悉bootstrap，二来要减少对bootstrap的依赖性，能用自己的模块就用自己的模块。
3. 小规模的逐步改版最好
网站改版看着简单，但其实细节的事情真不少。做过一遍以后，感觉像扒了一层皮那样累。而且，就没有太多的时间写作了。有时候想想，是否得不偿失呢？所以，最好就是小步快走的逐步改版，而不是一下子把所有的工作都停了，毕竟，网站的生命力在于文章，界面设计的美观不美观的，对mobile看着舒服不舒服的，只是个辅助作用。
4. 在微信上和一个用过bootstrap的朋友聊，得知用bootstrap来做网站的话， 目前有一定的局限性。就是相对简单的页面还可以，但有heavy transaction的页面就不行了，比如说，如果页面的表格很多，显示就会出问题。
5. 用bootstrap的css来修改网站，还意识到一点，就是，社会是分工合作的。不可能说一个人即做mobile site也做mobile app。光是mobile site的各种css，各种html，就能够把人累死了。所以，做mobile app来说，我是没有精力去做了。我觉得术业有专攻，一般做web application的，还是不要涉及做mobile app为好。这两个领域差的可能不小。而一个startup要想同时拥有网站和mobile app的话，需要外包给不同的人做才行。
另外，做网站，免不了需要加小icon啥的。这个资源是免费的icon library: Font Awesome，记录在这里，将来可能会用上。
还有个不错的资源，是一个很好的bootstrap模板网站: startbootstrap.com，Free Bootstrap Themes & Templates。
最后，说到web design，适当的读一些入门的关于design的书，会非常有好处的。这里就介绍一本不错的web design的书。
Web Design - Start Here: A No-Nonsense, Jargon Free Guide
作者有20多年的编程经验，在small business web design方面很有研究，所以写的这本书。从入门到精通，讲解了设计和优化网站的技巧。