响应设计的技巧、秘诀与最佳实践

标签: 设计 技巧 最佳实践 | 发表时间:2011-12-31 15:51 | 作者:
出处:http://www.iteye.com
Web设计者间广泛流行着一个概念,即响应设计(Responsive Design)。它是一种采用流体布局和Media queries(媒介查询)技术来创建网站,使其能够适应各种尺寸大小屏幕的技术,Ethan Marcotte使用 responsive design 这一术语描述它。如果你之前从未听说过响应设计,那么你可以好好读读Marcotte的介绍文章。


简而言之,响应设计就是运用流动网格、流体布局和@meta queries使得现在(及将来)的页面能够适应不同尺寸的屏幕。无论用户是通过手机、iPad或是更大的台式显示器来访问你的网站,它们都能够恰如其分地显示。

响应设计将成为一个非常有吸引力的工具,正如Luke Wroblewski所说的, 设计需要遵循移动优先原则。也就是,从小屏幕开始考虑。先理清你的网站的核心,然后一点点开始构建。从骨架开始构建能够保证网站的质量,促使开发人员关注用户所关注的问题。

你打算如何构建一个响应良好的网站呢?这个问题因人而异,但是还是存在一些通用的方法。为了帮助你开始响应设计,这里列出了一些初期设计时的最佳实践,都是从大量的Web资源中总结出来的:

  • 使用@media属性控制你的屏幕布局,但是需要记住,只有这些并不是一个真正的响应设计。
  • 使用流体布局,以便适应各种屏幕的尺寸。不要将你的设计限制在iPhone或是Android上,不要将它切割为平板电脑版本和桌面电脑版本。布局设计需要更加灵活可变,否则,如果某个新的屏幕尺寸突然变成潮流,你的网站将无法应对。
  • 根据你的网站的具体内容 设定网格。封装好的网格系统可能并不适用于你的应用。这类网格的最大问题就是它们可能与你的具体内容不符。 根据网站内容设计你的布局,而不是根据canvas(或是网格)。
  • 从小屏幕开始。从最小的屏幕开始设计,然后逐步在浮动元素中加入@media规则,满足更大的平板或是桌面浏览器的窗口需要。从一个窄的单列布局开始设计移动浏览器网站,然后再逐步扩大。
  • 使用 Respond或是 CSS3 Media Queries这类JavaScript库引导@media查询,因为在旧版本的浏览器中可能不支持直接的@media查询。从最小的屏幕开始然后逐步扩大意味着,桌面浏览器需要处理@media,确保使用Respond这类辅助工具能够支持旧版本的浏览器处理@media。
  • 不要指望Photoshop,在浏览器中构建你的组件。使用Photoshop构建动态的布局压根就没有可能性,应该在浏览器中实现。
  • 使用img { max-width: 100%; } 控制图像大小。对于大规模的图像,可以考虑在小屏幕中使用 Responsive Images这类工具缩小图像的大小,然后在大屏幕中使用JavaScript还原大图像。
  • 延迟加载。可能你的网站中有些辅助元素,能够优化你的网站,但并不是必须的。这类元素可以在下载完基本内容后再 使用JavaScript加载这些元素
  • 不用处处要求完美。即使做到了上述建议,你可能还是会漏掉某些使用不支持JavaScript的旧版本浏览器的用户。现在这样的用户已经越来越少了,如果他们在桌面浏览器中看到了移动版本的布局,这也并不就是世界末日。你的网站已经具备很好的可用性了。
记住,响应设计是一个非常年轻的概念,新的理念或者新工具每天都可能涌现。不要将上面的建议当做是一些硬性或是速成的规则,它只是一些引导指南罢了。

英文来源: Tips, Tricks and Best Practices for Responsive Design



感谢 WebAppTrend 投递这篇资讯

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [设计 技巧 最佳实践] 推荐:

名片设计最佳实践和技巧分享

- - 译言-精品外文翻译 - 最新译作
日期:2012-9-22  来源: GBin1.com. 名片设计在现代设计中占有非常重要的地位,最大的问题在于使得名片设计与众不同. 不一样的名片设计往往能够让你的客户或者朋友更加容易的认出你的公司和品牌. 在以往的文章中,我们也曾经分享了很多名片设计实例,在今天的文章中,我们将按照不同的设计类别来介绍更多优秀的名片设计技巧和实践,帮助大家了解如何能够设计出不同一般的名片.

响应设计的技巧、秘诀与最佳实践

- - ITeye资讯频道
Web设计者间广泛流行着一个概念,即响应设计(Responsive Design). 它是一种采用流体布局和Media queries(媒介查询)技术来创建网站,使其能够适应各种尺寸大小屏幕的技术,Ethan Marcotte使用 responsive design 这一术语描述它. 如果你之前从未听说过响应设计,那么你可以好好读读Marcotte的介绍文章.

数据库设计的最佳实践

- - CSDN博客数据库推荐文章
1、使用定义明确的表或列名,并保持一致(例如,School、StudentCourse、CourseID). 2、使用单数形式的表名(即,用StudentCourse而非StudentCourses). 表代表了实体的合集,不需要复数形式. 否则你将在定义表时不得不使用“{”、“[”等字符(即为了访问表Student Course,你须得书写“Student Course”.

ActiveMQ架构设计与最佳实践

- - 深入一点,你会更加快乐
    ActiveMQ是最常用、特性最丰富的消息中间件,通常用于消息异步通信、调用解耦等多种场景,是JMS规范的实现者之一.     ActiveMQ提供两种可供实施的架构模型:“M-S”和“network bridge”;其中“M-S”是HA方案,“网络转发桥”用于实现“分布式队列”.     Master-Slave模型下,通常需要2+个ActiveMQ实例,任何时候只有一个实例为Master,向Client提供"生产"、“消费”服务,Slaves用于做backup或者等待Failover时角色接管.

RESTful API 设计最佳实践

- - 文章 – 伯乐在线
项目资源的URL应该如何设计. 用哪种HTTP方法来创建一个新的资源. 实现分页和版本控制的最好方法是什么. 因为有太多的疑问,设计RESTful API变得很棘手. 在这篇文章中,我们来看一下RESTful API设计,并给出一个最佳实践方案. 资源集合用一个URL,具体某个资源用一个URL:. #资源集合的URL /employees/56.

5大移动网页设计之最佳实践

- everfly - 互联网的那点事
本文来自SocialBeta内容贡献者wisp,原文译自Mobile Web Design: Best Practices,更多移动产品设计方面的资料,请查看SocialBeta移动互联网栏目. 移动设备的兴起正在给互联网带来一场新的革命,虽然说移动网页设计原则不会有多大变化,但是却有着明显的区别.

20个数据库设计的最佳实践

- - ITeye资讯频道
1、使用定义明确的表或列名,并保持一致(例如,School、StudentCourse、CourseID). 2、使用单数形式的表名(即,用StudentCourse而非StudentCourses). 表代表了实体的合集,不需要复数形式. 否则你将在定义表时不得不使用“{”、“[”等字符(即为了访问表Student Course,你须得书写“Student Course”.

海尔电商峰值系统架构设计最佳实践

- - 博客园_知识库
  多数电商平台都会经历相似的过程,流量和业绩每年以几倍至十几倍的速度增长,每年都要接受几次大规模、全方位的系统检阅,例如双11、周年庆等购物狂欢节,期间流量和订单可能是日常的十几倍甚至几十倍,产生的峰值对平台形成极其强烈的冲击,对电商平台的架构带来巨大的考验. 因此,对电商平台的规划和架构工作不仅要高瞻远瞩,而且要细致入微,否则将导致平台无法满足高速增长的业务发展,细微处的失误也可能造成严重后果,不仅影响业务指标的实现,还可能导致对系统进行重新架构,劳时费力又伤钱.

Dropbox可伸缩性设计最佳实践分享

- - InfoQ cn
  Dropbox的运维工程师 Rajiv,跟大家分享了可伸缩性设计的 最佳实践第一讲. 众所周知, Dropbox是一款非常易用的网络存储云端产品,现已达到40,000,000的用户. 令人惊奇的是, Dropbox公司对于服务器集群的运维人员投入在一到三个人. Rajiv就系统的可伸缩性设计,尤其在资源有限、流量快速增长的情况下,将最佳实践分享给大家.

jQuery最佳实践

- andi - 阮一峰的网络日志
上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).