关于响应式设计的常见误区
我每天浏览互联网,在多个设备。我用我的MacBook Pro、iMac,PC、iPad、iPhone和甚至是我的电视。所以它真的困扰我,当我看到网站,不适合大屏幕分辨率优化,或者花两分钟我的移动设备的负载。
我们都接受了响应式设计的概念。很少有人反对它。事实上,唯一有说服力的报告,最近听说是客户不愿意支付额外的时间。但与任何新的实践,神话已经长大,对位它。
让我们看看能不能破产的几个误区…
响应式设计是所有关于移动
对移动网络的爆炸,是响应设计背后的驱动力,但当我们认为响应式设计需要考虑的不仅仅是手机。随着视网膜显示器和视频游戏浏览器的推出,互联网用户正在观看大屏幕分辨率和不同情景的网站。
要考虑到不同的用户环境,设计和开发网站响应。你需要考虑什么设备用户使用:是在移动设备上或在家里看电视的用户?你需要考虑用户所在的地方:是在荒野里的杂货店或露营在线用户?有了好的内容意味着什么,如果你的网站需要十分钟的负载而你的用户是坐在沙滩上有一个玛格丽塔。
内容就是一切但环境到处都是,这是你完全无法控制。这就是为什么,实际上,你的内容应扩大到任何分辨率,大的或小的。我们有一套工具,将使我们能够操纵布局,优化文本大小和提高性能的任何语境,记得使用它们。
记得上下文转换所有的时间,这就是为什么它是平衡的视觉布局很重要,用户的需求,当接近一个响应式设计和性能。这不只是关于移动。
响应式设计并不适合每一个使用案例
我曾经认为,响应的网页设计并不适合每一个项目,这取决于使用情况。嗯,我最近修改了我的观点,我坚信,如果我们要以用户为中心的设计,我们需要考虑每个项目的开发商响应的设计方法。
固定宽度的网站可以在较大和较小的屏幕分辨率的限制。底线是,我们的网站应该是每个人无论什么设备或屏幕分辨率是使用方便,不受限制。
响应式设计是关于设备的断点
我注意到一种趋势,新兴的工业设计师和开发商正在建设网站响应规模一定的设备分辨率,我有罪,这也。三种最常见的设备当然是台式电脑/笔记本电脑、iPad和iPhone手机(或其他移动设备)。作为设计师,我们需要意识到响应式设计是关于设计断点和制作内容的可读性与向所有人开放,不只是特定设备的用户。
也就是说,如果你是一个软件程序的网站设计,它是有某种框架与断点工作重要。我建议创建你自己的。根据内容的优化你的布局。找出断点工作最好的最好方式是素描的线框图首先得到一个想法,然后你就可以开始制定你的软件选择像素。确保你的工作时,相同的网格线框图设计。
如果你像我一样,那么你的代码,你的线框图和创造一个生活原型。这给了我很大的帮助,因为我可以与我的响应工作流创建流体模型和添加断点的设计作为设计打破满像素PS图象处理软件。
响应式设计对字体
一个我在很多网站响应发现最大的问题就是字体抛出当设计师和开发者选择使用设备在设计断点断点的狼。在我看来,选择设备在设计显示了一个完全无视你发布的内容和用户消费内容。内容应保持其可读性,直到它已调整保持可读性。内容永远是王的易用性和内容的可读性应该是最优先的。
一个我喜欢处理保持内容的可读性响应的设计是使用相对字体大小的单位如EMS、填充方式、空间布局。响应式设计是所有关于均衡布局,在我看来,EMS是一个完美的结合。
EMS是扩展到父元素的字体大小的相对单位,他们可以帮你节省很多时间和麻烦,它们有助于保持你的整个布局结构。这是否意味着你问什么?这意味着,作为基础字体大小的增加或减少,布局调整均匀无回避什么了。
下面是一个例子,比方说我们发现了两个设计的断点,一个非常大的桌面显示器在超分辨率和一个小型的平板。我们还说我们根据字体大小16px等于1.0em我们撞基础字体大小到22px当网站被认为是在分辨率为3840×2160(高分辨率)和我们降低基础字体大小为14px在分辨率800 x 600(小笔记本/平板)。我们已经大大改变的类型和在两个指定断点我们网站布局的大小,一大一小。在一个22px基础字体大小大的决议1.4em标题意味着1.4em等于30.8px和在较小的基础字体大小的部分,1.4em等于19.6px。尽管我们的字体大小有显著更大的3840×2160我们不必担心布局打破了因为它也调整。比方说我们有一个50em包含元素的宽度,分辨率为800 x 600,将700px但在3840 x 2160的分辨率,它将创建。我们的填充和边缘将调整为好。在更大的分辨率有字体大小和布局设置在EMS允许我们设计大规模的比例使我们的内容更容易和更具可读性。
响应式设计意味着隐藏的内容
响应式设计的目的是让你的内容对所有人开放,甚至是残疾的,在所有的屏幕分辨率和设备。隐藏的内容从来就不是一个好主意,机会是,如果你要隐藏它,你不需要这样的开始。隐藏的内容使其无法读取到屏幕阅读器和你现在使你的内容与视觉或认知障碍的访问。记住,内容应在所有设备是通用的,不要惩罚你的用户通过限制他们可以在一个单独的设备视图。
也就是说,我还发现一些使用情况显示:无;就派上用场了。几乎所有的用例处理一些导航,我使用显示:无;在导航元素的变化形式不同的设备。这是不是一个好办法来限制或隐藏在不同设备上的内容,因为你最有可能的基础上,一些用户,在一个假设的决定,将有一个非常坏的经验。
响应式设计牺牲性能
有一些网站,我最近看的,表明缺乏同情心,对低带宽的用户。这些网站多数有相同的东西,大量的图片和大量的JavaScript库,很多这些网站可能已被优化,如果他们设计了一个移动的方法。
因为还有很多关于响应图像的讨论,对任何人承诺任何一个解决方案是很困难的。我理解的困境,但在等待一个完美的解决方案,是标准的在所有浏览器和设备是不是你当前的网站更容易使用在有限带宽的设备。找到一个解决方案,最好的解决你的问题并运行它。没有找到一个解决方案意味着性能问题的人,而完全失败的响应式设计的目的。
大型的JavaScript库,也可以在较小的设备导致的问题。试着找出一个方法叫他们有条件根据屏幕分辨率或设备类型。性能不应该说到响应式设计是一个事后的想法。
结论
Web已经爆炸了,随着手机和智能手机技术我们可以访问任何地方,在任何上下文内容的出现。为了确保我们能够达到我们所有的用户,给他们想要的东西是很重要的,当他们想要的。响应式设计是一个很新的技术,在我看来它是统一的网络内容的完美技术。
牧羊人设计文章推荐: