阅读更多

0顶
0踩

移动开发

翻译新闻 响应设计的技巧、秘诀与最佳实践

2011-12-31 15:51 by 正式记者 WebAppTrend 评论(0) 有4008人浏览
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

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JBPM一个任务提交给多个人处理(以角色分配任务)

    1.新建工作流,代码:<?xml version="1.0" encoding="...http://jbpm.org/4.4/jpdl"> <start g="37,3,48,48" name="start1"> &

  • JBPM中的任务分配 - Candidate-groups(候选组)

    当几个任务受理人有相同的任务节点时,可以划分为一个候选组(Candidate-groups)。该任务节点为多个人员,当其中之一完成后,流程就进入下一个节点。

  • jbpm4的多人会签(fork-join实现)

    会签分配给多个人,即创建了多个子任务,子任务要与主任务绑定,根据指定的会签人完成子任务,每次到完成子任务时要判断主任务的子任务个数有几个,当所有子任务都完成,主任务没有子任务时,就让主任务指向下一节点...

  • 说说在 jBPM 中,如何利用流程变量设置候选人、候选组或办理人

    候选人,多个以逗号分隔。一般设置为账号 ID。 candidate-groups 候选组,多个以逗号分隔。一般设置为部门 ID 或角色 ID。 assignee 办理人,一般设置为账号 ID。 在 *.jpdl.xml 中,形如: ... <...

  • jbpm的智能选择审批人及人工任务分配的实现思路

    在工作流中每一个人工任务的办理者被称作审批人,在原生的jbpm定义中,我们可以看到assignee和assignmentHandler这两个标签。 1 2 3 4 5 6 7 8 <taskname="review"g="96,16,127,52"> <assignmen....

  • jBPM4.4:分配任务的几种方式 在执行期间动态分配任务执行人

    进入到task,其实现在有多个task,是根据join中的multiplicity来确定的。   这些task任务安排的人员在candidate-groups(或者是candidate-users等)中定义。这个例子#{department},就是在foreach节点中,...

  • JBPM中任务分配的几种方式

    在jbpm中关于任务的分配常见的有以下四种方式: 1、Assignee 2、Candidate-groups 3、assignmentHandler 4、Swimlanes  第一种分配方式在上一篇的博客中已经简单的应用了一下,我们可以通过assignee方式直接...

  • 转一个关于JBPM JBPM4 基础

    Execution 状态: STATE_CREATED:实例化,介于创建与启动之间 ...STATE_INACTIVE_CONCURRENT_ROOT:并发任务的父任务,(fork节点) STATE_INACTIVE_SCOPE:父任务的限定作用域 STATE_INACTIVE_J

  • 说说在 jBPM 中如何部署流程

    当业务流程被设计好之后,会有许多相关的文件散落在工程中,这些文件包括: * 定义流程的 JPDL 文件。 * 根据图形化流程定义同步生成的流程图片文件(PNG 格式)。...jbpm4 支持将流程定义及其相关资源打包一个 JA

  • 一个关于Activiti或JBPM流程的回退的讨论

    而另外,E回退时,也需要B、C的任务删除(在某种情况下也可能不删除),现实中相当于我把任务完成后,同时提交给三个人去处理,其中一个人回退,不能把另一个任务的工作也回退回来处理。 在B点上回退,C需要销毁...

  • java jbpm工作流_jbpm工作流

    一、JBPM(java business process manager)1、工作流管理流程O--->定义工作流(使用流程设计器生成,png和xml文件,分别面向用户和系统)--->执行工作流(核心对象:流程引擎ProcessEngine)--->连接数据库(jbpm...

  • JBPM是一个强大的开源框架,用于业务流程管理和工作流管理

    JBPM是一个强大的开源框架,用于业务流程管理和工作流管理。它允许用户通过图形化工具设计和建模业务流程,并提供了一套丰富的API,使开发人员能够轻松地与流程交互。

  • JBPM

    jbpm(jboss business process managerament)是覆盖了业务管理,工作流,服务协作等领域的,一个开源的,灵活的可执行流程语言框架.既然它是一种工作流框架,我们就应该明白什么是工作流. 工作流就是业务的部分或者整体在...

  • JBPM4.4总结(一)——基础知识

    JBPM(Java Business Process Management),业务流程管理,是Jboss(现已被Redhat收购)旗下的开源工作流引擎,是覆盖了业务流程管理,工作流,服务协议等领域的一个开源的,灵活的,易扩展的可执行流程语言框架。...

  • JBPM架构解读

    核心引擎(Core Engine)是JBPM整个项目的核心,支撑着整个工作流的复杂行为的顺利执行,它是由纯JAVA编写的,在你的项目中,它可以作为你的项目的一部分嵌入到项目中,也可以被当作一个单独的服务进行独立部署,...

  • jbpm5学习资料(人工任务)

    一个用户任务节点代表一个原子性的任务,需要通过一个人角色来执行。 虽然jBPM流程中的人工任务包含有指定用户节点,但人工任务可以简单的看做是任何类型的外部服务,需要调用时作为工作任务项的一种特殊类型的简单...

  • JBPM4中常用概念总结

    1. 流程定义(Process Definition) 流程定义是记录在xml文件中的对流程的描述,...Process Definition使用id, key和version进行标识,jBPM中可能包含多个key值相同的Process Definition,key值相同的Process Definition

  • 说说在 jBPM 工作流中如何实现【会签】功能

    单步 - 只使用一个活动来处理。 多步 - 由多个活动所组成的。 单步会签比较常见,也容易实现,主要的解决方案是在会签活动的主任务基础上,动态创建若干个子任务来实现,它的具体解决方案是: 编写专门用于会签...

  • 纵观jBPM从jBPM3到jBPM5以及Activiti

    今年最大的事件莫过于jBPM的创建者Tom ...Tom Baeyens离开的具体原因尚不清楚,但他的离开产生了两个结果:一是jBPM的下一个版本jBPM5完全放弃了jBPM4的基础代码,基于Drools Flow重头来过;二是Tom Baeyens加入A......

  • 海尔智能电视刷机数据 U49A5 机编DH1W80A0305 务必确认机编一致 强制刷机 整机USB升级主程序

    务必确认机身编号与文件名机编一致,如不一致,请勿下载 机身编号一般在机子背面的贴纸上 升级方法: 1、下载数据,压缩包解压,将“Haier638Upgrade.bin”文件拷贝到U盘根目录下(U盘要求使用FAT32格式,建议4G-8G的品牌U盘,刷机成功率会高) 2、电视关机拔下电源,插入U盘,按住机身按键板上的“菜单”键不放,插电开机,直到LED灯开始闪表示升级正在进行,升级成功后机器会自动重起。 3、重启之后,重新交流上电,升级完成。 注意: 1、升级到结束,大约需要8-30分钟,中途绝对不能断电 2、升级重启第一次进入系统,请等完全正常进入开机桌面之后,才能拨下U盘

Global site tag (gtag.js) - Google Analytics