Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本。但是,要做最大限度相应的网页设计,有些误区你应当避免。

不要优先为桌面版设计

开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设 计 是件很轻松愉快的事情。但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题。甚至会造成返工,当然,大量的错误也会蔓延出来。

然而,基于移动设备开发网站看起来会消耗一些时间并且在刚开始会有些困难。这是因为它迫使你在包含什么内容上做出取舍,并且以一种你不习惯的方 式 去思考。然而,这样做会使得内容和设计整体上更优秀。粗略来讲,你可以首先尝试在比较小的设备上。一旦你在手机上做出了不错的设计,适配到更大的屏幕 上会 变得很轻松。

导航栏菜单的麻烦

当为移动端进行设计时,导航栏设计的问题可能会成为你的一个祸根,所以不得不避免产生麻烦。不想是固定宽度的设计,响应式设计的导航应当根据设备类型进行确定(所以智能手机的导航菜单可能和平板电脑,当然还有桌面版的导航菜单互有差异)。

许多设计者会发觉他们自己被这样一项任务搞的很崩溃——尝试设计一个可以适应所有屏幕的导航菜单。在很多情况下,设计者奋力将水平列表菜单转换为垂直列表菜单,尤其是在适配较小的手机屏幕时。然而,由于该导航栏并不是根据屏幕进行设计,这可能会导致一项很差的用户体验。

不应隐藏内容

响应式设计通常会有更少的空间展示图片和内容,但是这并不意味着你的内容应当被忽略。你不得不采取一种方式重新安排内容,使其能够保证易读性。 这 个比较容易实现,可以通过创建导航链接并且使用锚,是用户在一个页面中能看到他们一直在寻找的内容。那些通过CSS布局控制内容隐藏的应当明白,这些 内容 依然会被加载,因此,你通过为用户提供完整的观看体验也没什么大不了。简单而言,用户不应该由于他们所使用的设备而遭受开发者的“惩罚”。

单独的移动端网站地址

单独为移动端网站分配一个地址整个就是一个灾难,这摧毁了我们起初交互设计的目的,并且是可以论证的。当用户在访问网站时,重定向到移动端版 本, 结果是不得不浪费了很多宝贵的时间。此外,这也能非常严重地影响到你的搜索排名。但是,理所当然,使用不同的URL也有许多优势。它可以确保你能够 架构具 有更轻便页面的移动端网站,并且能够在智能设备上表现更好。该站点也能照顾到在特定平台上的性能和表现。不幸的是,具有单独移动端网站地址的消极 影响远大于积极影响。

糟糕的用户体验

你不能简单的把桌面版的内容压缩成移动版;这么做将会影响你的用户的体验,用户可能会抛弃你的产品。在手机的有限空间内创建一个友好的界面是十 分 重要的。你可以采取一些措施,比如,使用一个下拉菜单代替桌面上的导航条,这样会节省你的空间。如果你先设计的是移动端,那么这通常不会是一个令人头 疼的问题。

不要忽视跨情景的公约

当你在做一个响应式的设计,你不能只考虑台式和移动手机设备,你还应该考虑到其它类型的设备。人们可能会通过内嵌浏览器的智能电视或机顶盒来访 问 你的网站。在现在,甚至掌上电脑都有不同的类型。但是,这并不意味着你可以为所有的设备创建一个相同的用户界面,你最好是为不同的设备创建不同的网 站。你 所需要做的是创建一个响应导航和一个用户容易理解的设计。创建的这个导航可以清楚的保存设备的上下文环境。

不要忽视页面的加载时间

随着宽带的普及,网页开发者开始习惯在页面上大量的使用相对来说较大的资源。然而,当我们使用手机时,我们的用户使用的是较慢的2G和3G网络。同样的,那些保持minf国际的用户,他们是按使用的带宽量来付费的。

一个页面在台式机上很快的加载进来,但是,在手机上加载一个页面会花费很长时间或者去使用额外的、昂贵的带宽。更糟糕的是,当用户被迫去等待页面加载时,即使是几秒钟,他们会离开这个页面,同时你就会失去了你的流量。

不要为触摸屏设备开发

今天大多数手持的设备使用的是触摸屏,甚至是很多笔记本也开始使用触摸屏了。因此,当你设计响应式设计时,很重要的一点是不要忽略掉处理触摸的 重 要性。有以下两个方面原因:第一,可点击项,比如按钮要考虑到用户的手指的大小(不要让用户缩放点击)。第二,你要正确的处理触摸事件。这么做可以克 服300ms的点击事件延迟。

倾情推荐web开发工具WebStorm(最近打折促销,最低3.5折),及Bootstrap框架中文版用于web设计中!

Web响应式设计中应避免的八大误区

时间: 2024-10-15 08:32:56

Web响应式设计中应避免的八大误区的相关文章

响应式设计中的图片处理

响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应.预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而这也意味着目前我们为桌面浏览器而设计的网页,将会在他们的手机和平板上呈现出非常糟糕的使用体验. 但是随着实际应用状况的改变,响应式网页设计还是会出现一系列复杂的并发症.本文余下的部分,就是详细阐述如何在响应式网页中安置和处理多媒体元素,诸如图片和视频,最终的目的是帮你做出一个靠谱的网站,能让这

web响应式设计技能大盘点

响应式网页设计已经变成新的web标准,许多公司已经接受了这个挑战,并且已经建立起了专门的网页设计方案(比如只针对移动端的开发)或者已经开始试图解决跨平台的响应式网页设计方案. 1.计划 与往常一样,计划总是要放在第一优先级的.一旦你在纸上开始解决你的设计难题,你就已经准备好建立你的站点了. 2.充分利用好原型软件 推荐使用Adobe Edge Reflow,它能让你使用媒体查询,在程序内设置断点并设计适配桌面电脑.平板电脑和手机的布局.然后,你可以将CSS复制到另一个像Adobe Dreamwe

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想

响应式设计的现状与趋势

从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计:2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮.这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章(题为"Responsive Web Design"

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media

响应式设计+ rem

特点:手机,ipad,PC 所有的终端设备上完美展示: 核心点: //PC端样式调整 @media screen and (max-width: 1024px){ } //平板的宽度 @media screen and (max-width: 980px){ } @media screen and (max-width:720px){ } @media screen and (max-width:640px){ } //手机端 @media screen and (max-width:320px

最全的响应式设计资源库

阅读本文需 8 分钟 响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可. 本文的目的在于为大家集中推荐一些最有价值的响应式设计资源.包含了CSS框架.在线工具.准备阶段的工具等等. 推荐阅读:<不要落伍!来和小伙伴一起学习响应式网页设计><来试试响应式设计!25例优秀的响应式网页设计赏析><年终特典!当下最热门的网页设计趋势总结> CSS 响应式框架 这一部分主要介

漫谈一下响应式设计网站

响应式设计中的界面设计 对于界面设计,我们以前针对桌面产品的设计可能就是一个尺寸的,每个模块的位置比较固定,但是在响应式设计中,这些东西就改变了,设计师会根据产品 的需要设计多个版本的设计,在这些不同的版本中,模块A在1024的宽度下,可能会是黑色背景,但是到了768下面可能会变成白色背景,实现了在不同宽度 的不同展现.这里面颜色.背景.宽高等都可改变,但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致,因为在响应式设计的页面中,我们会使用流式布局,在固定版式通过绝对定位或者外边距负值的

如何保持响应式设计新鲜感

响应式网页设计很流行,而且绝无秘密可言.行家们倡导,各品牌趋之若鹜.这不仅是创建一个移动端站点,而是让你的网站适用于每种浏览器尺寸,不论桌面端.平板还是智能手机 响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站.在点开你的设计软件着手动工之前,你需要考虑很多.这是个额外步骤,最终成品却总能证明它的价值所在.很明显,设计师若不考虑响应式设计,网站就会倾向于呆板无趣 设计师绝对有必要保持自己的创意贯穿整个响应式站点.鉴于更多人在使用平板和智能手机,你总希望保证每个人都能访问你的网站.这里有一些提