千橙网络,让网站成为销售利器,打造好看又好用的网站设计,拉近您与客户的距离。
你的网址是?
这也是自从智能型手机与平板电脑开始流行以后常遇到的问题:太多的网站不是为移动装置设计,所以需要使用者不断放大缩小才能顺利观看。
一般的解决方案:那就另外制作个移动版网页,把手机过来的流量导到这个版本去。
在不影响原本网站的开发架构下,移动版网页往往是另外“加”上去的,所以往往是用近似但不同的网址,
例:千橙网络网站www.taqcwl.com 、移动版www.taqcwl.com/3g/
所以,同一个内容的网页,用不同的装置打开、会有不同的网址。
这会有什么问题呢?想想你今天在网站上看到一篇好文章,但是分享到微信上后朋友抱怨说在他的智能型手机上不会自动转成移动版网页?反之,你朋友用手机分享了一篇链接,结果你在电脑上打开,内文却是超小又超挤的手机版字体?
(前者比较少发生,因为大半的网站主会帮你转址;但后者的发生机率就颇高)
更别提其他因为网址不同而带来的杂七杂八问题了。
所以最近Responsive Web Design-响应式网页设计这个名词开始流行了起来。
响应式网页设计,简单来说就是网址不变,网页内容会自行根据观看装置的大小自动调整。
譬如以下这个网站:
当我用电脑打开时(屏幕分辨率1280×960 ),我看到的画面长这样子
而当我把浏览器宽度缩减时,我看到的画面会自动调整成这个样子:(宽度调560 px以下)
看起来好像有点厉害,但实际上说穿了也不稀奇,这就是用了些CSS 3 media query的技巧。在CSS 3里你可以针对不同的萤幕宽窄设定不同的CSS样式,在支持CSS 3的浏览器上就可以自动调整。如果再加上HTML 5与javascript的配合,能够达到的效果就更多(譬如可以侦测装置是否旋转、现在状态为直立或横放而执行不同的javascript )。
因此响应式网站的目标就是,在同样的URL之下,不管你今天是拿笔记本电脑还是手机,整个网站能够让所有装置的使用者,都顺畅无碍的使用所有网页与功能。
听起来很好,但是真的去弄,才遇到一个更大的问题是….浏、览、器。
你用什么浏览器?
讲到浏览器就不能不提IE系列。恶名昭彰的IE系列直到IE9才“号称会”支持以上CSS 3的功能。
不过这还好解决,如果你想让旧版的浏览器也支持这样的media query功能,可以在网页上外加这个css3-mediaqueries javascript ,据称挂了之后就可以让IE 5+ 、Firefox 1+与Safari 2等旧型浏览器都支持上述功能,我是没试过(不用IE久矣),有兴趣的人可以找来用看看。
比较麻烦的问题反而是许多在电脑上执行得好好的javascript library在移动装置上可能无法顺利执行。这个地方就因人而异。我遇到的问题是某个在电脑端网页就可以执行的事情,在iPhone内建的Safari上就因为种种技术问题而必须要拆成两个网页才能完成。这么一来等于是手机版会多一个网址,那这不就违反响应式网页的目的了吗?
还有浏览体验
还有一点是我个人的观察。在电脑端的网页上,常常有很多超链接,但是在手机或ipad上,超链接却不是很受欢迎。
原因很简单,因为在电脑上大家有鼠标,但在手机与平板上却是用触控。原本大家很习惯的超链接,到了手机上立刻很难点击,原本要点链接A而误触链接B的情况比比皆是。在移动装置上大家还是比较喜欢用按钮(或者至少是一个大区块),但“电脑版本的超链接到了手机版上会变按钮”可就不是简单两三行CSS就能解决的事情。有时候你怎么瞧就是不好看,搞不好重新设计全部版本的layout还比较快。
如果再考虑使用情景的问题就更搞不完。手机屏幕大小有限、一个画面能呈现的信息量也有限,我自己用手机时往往恨不得只要几个click就可以直接点到我想要的资讯,根本不会想用手机来做很复杂的事情,更遑论把电脑版的每一个网址都搬到移动装置上来,针对不同的使用情景,开发App ,有时候可能是更好的选择。
可App也不是万能,譬如,它就没有网址可以让你在微信上分享。
未解的问题
我一直觉得这其中应该预示着许多消费者行为与移动互联网产业的模式改变,不过这些改变需要时间,而且有些问题…我也没答案。就如同这篇文章提到的移动版网页,显然是一个待解的难题。
不过,这应该可以确定一件事,就是几年内所有的公司会需要网页开发人员来开发移动版网页。这…在现在低迷的就业市场中算是好事吧?