适应网站设计原则

发布于:2018-05-05     来源:www.100vic.com     作者:广州网站建设-佰维网络    

  智能化自适应网站应用需遵循以下原则
  (1)避免增加用户额外的工作
  在一般定制服务时,用户甚至需要在一大张表单中进行选择回执填写,而用户访问网站时并不希望回答太多问题,所以自适应网站获取用户信息的方式只能是自动的。自适应网站是利用web服务器日志中存储的用户访问信息来实现对用户的浏览行为进行预测。
  (2)最小化网站管理者工作量
  尽管自适应网站力求实现网站的自动调整,但网站管理者仍然或多或少的要介入到整个网络结构的调整中,自动生成满足用户兴趣的页面链接。这就要求技术不能太复杂,尽可能降低网站管理员工作量。
  (3)不造成网站原始信息丢失自适应网站做的工作主要是在显示给用户的视图方面的调整,而不是整个结构的全面修改。因此尽可能采取只增加链接.不减少链接;只增加页面,不减少页面的办法,它是信息最优化的一种显示方式,而不是丢失信息。
  (4)保证相应时间
  系统的个性化调整无疑会增加系统处理时间,如果处理时间的增加带来的响应延迟超过了用严的容忍范围,那就是不“个性化”了。因此实现分析用户的浏览兴趣和目的时,算法要简单,保证服务器尽快响应。


  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样
针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。      4、页面使用相对字体  
    在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。    
  根据上面讲述的几点内容,我针对我博客的CSS进行了一些修改,发现可以从iPhone手机浏览到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,不知道怎样能更好地解决这个问题(更新:经过网友提示,在导航栏divNavbar
的样式里,加入 overflow:hidden; 一行即可解决这个问题)。      下图是使用
iPhone访问的,经过修改CSS
为自适应网页后的月光博客首页页面,看起来比原始的未优化页面好多了吧。  
    总之,根据上面四步进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。   以下是更详细的补充资料:    随着3G的普及,越来越多的人使用手机上网。
 
移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?   

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。  很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。  于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?    一、"自适应网页设计"的概念  2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。  他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。


关键字:​适应网站设计原则


文章出自:​-佰维网络 http://www.100vic.com 如转载请注明出处!


上一篇:自适应网站接入

下一篇:适应网站工作流程

最新资讯
MORE

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。