除非你现在正处在世外桃源,否则你不可能没有听说过web设计者间最近广泛流行的响应设计(Responsive Design)。Ethan Marcotte使用responsive design这一术语描述一种新兴的技术,它采用易变的布局和媒体查询扩展网站,使得网站能够动态适应各种尺寸大小的屏幕。如果你之前从未听说过响应设计,那么你可以好好读读Marcotte的介绍文章。
简而言之,响应设计就是使用非固定的网格、非固定的布局和@多媒体查询使得现在的(以及将来的)web能够适应不同尺寸的屏幕。无论你的用户使用的是一个电话,一个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
译文来源:http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展
请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的Q Q群:193775364
分享到:
相关推荐
EMC资料EMC设计秘籍培训资料EMC设计技巧最全面的EMC设计经验文档36个合集: A)电磁兼容测试与对策技术研讨会(2006年10月27日,深圳).pdf B)强制性产品认证与产品的电磁兼容性能测试(93页).pdf C)电快速瞬变脉冲群...
EMC培训教程-EMI-EMC设计秘籍 目 录 一、EMC 工程师必须具备的八大技能 二、EMC 常用元件 三、EMI/EMC 设计经典 85 问 四、EMC 专用名词大全 五、产品内部的 EMC 设计技巧 六、电磁干扰的屏蔽方法 七、...
第3章 设计与实现 48 3.1 马尔可夫链算法 48 3.2 数据结构的选择 50 3.3 在C中构造数据结构 51 3.4 生成输出 54 3.5 Java 56 3.6 C++ 59 3.7 Awk和Perl 61 3.8 性能 63 3.9 经验教训 64 第4章 界面 67 4.1 逗号分隔...
第3章 设计与实现 48 3.1 马尔可夫链算法 48 3.2 数据结构的选择 50 3.3 在C中构造数据结构 51 3.4 生成输出 54 3.5 Java 56 3.6 C++ 59 3.7 Awk和Perl 61 3.8 性能 63 3.9 经验教训 64 第4章 界面 67 ...
RF产品设计过程中降低信号耦合的PCB布线技巧.pdf WiFi产品的一般射频电路设计(重要).pdf 【全志科技】射频天线设计指导文档v1.0.pdf 东南大学射频讲议——收发信机.pdf 东南射频集成电路讲义 - 东南大学射频与光电...
《平面设计排版、构图技巧》秘籍,平面排版,平面设计,平面构成
《众妙之门——网页排版设计制胜秘诀》囊括了字体抗锯齿技术,网页排版的原则,网页字体的设置技巧,CSS字体堆栈指南,CSS3的新特性,网页字体服务推荐以及排版工具介绍,等等。 还在为网页排版苦恼吗?想设计出...
描述了阿里云在企业专有云混合云最佳实践,并提供了实际生产案例,值得参考。
PCB设计秘籍按PCB布局布线、散热技巧、接地指导、抗扰度等角度进行分类整理,针对在各种器件、应用环境下,提供了一些实用的PCB设计指导以及常见问题解答
EMC设计秘籍EMC设计秘籍EMC设计秘籍EMC设计秘籍EMC设计秘籍EMC设计秘籍电子产品设计工程师必备手册
提升JSP页面响应速度的七大秘籍绝招提升JSP页面响应速度的七大秘籍绝招提升JSP页面响应速度的七大秘籍绝招
EMI设计资料开关电源EMI设计技巧电源EMI处理方法文档60个合集: Design guide for EMI & ESD .doc Design guide for EMI & ESD.doc EMCEMI设计秘籍-电子工程师杂志.pdf EMI Safety训练课程.ppt EMI EMC快速诊断与对策...
网页制作常见问题解答[一] 网页制作常见问题解答 [二] 网页制作常见问题解答 [三] 网页制作常见问题解答 [四] 网页制作常见问题解答 [五] 网页制作常见问题解答 [六] ...一分钟网页设计技巧
这份实用指南详述了如何从头到尾地设计软件自定义的测试系统,并且将使用技巧和经验贯穿始终,甚至包括如何实现易于维护的线缆连接,是一份上佳的指导手册和实用指南。
第3章 设计与实现 48 3.1 马尔可夫链算法 48 3.2 数据结构的选择 50 3.3 在C中构造数据结构 51 3.4 生成输出 54 3.5 Java 56 3.6 C++ 59 3.7 Awk和Perl 61 3.8 性能 63 3.9 经验教训 64 第4章 界面 67 4.1 逗号分隔...
全书共分9章,包括应用程序的基础生成技巧、面向对象程序设计、程序开发技巧、泛型、用户界面的设计与开发、控件的设计技巧、列表类型控件的设计技巧、人机界面的设计技巧以及工具栏、菜单及状态列等内容。...
现在,Bob McCune撰写的这本 AV Foundation开发秘籍--实践掌握iOS & OS X应用的视听处理技术 为你铺就一条精通掌握这些卓越技术的高效途径。McCune生动的讲解和精彩的GitHub示例项目已帮助数以千计的苹果开发者领略...
麻将技巧秘籍~麻将秘笈.doc
提升JSP页面响应速度的七大秘籍绝招.txt 提升JSP页面响应速度的七大秘籍绝招.txt
下象棋技巧秘籍宝典大全.doc