网站建设用户界面的新潮流: responsive design

by JC on 2015-01-02 11:07 viewed: 328 times
跟着JC学习在美国做business, sales, marketing,请来订阅JC写的剑知商务快报
现在的互联网和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。

本文版权属于剑知商务网。未经我们同意的转载,将追究法律责任。

学习在美国做business, sales, marketing,请来订阅JC写的剑知商务快报

VIP俱乐部

美国business案例分析
美国网站推广技巧
独立电商网站如何推广
独立电商网站seo优化
Email marketing技巧
同其他VIP会员交流
详情请看: 如何加入VIP
About | Join VIP | FAQ | Privacy Policy
Copyright © 2016, All Rights Reserved.