作为成都网站建设专业公司提供网页制作、网页设计、开发、营销推广服务。
今年早些时候，我在我们公司的网站重新设计的开始阶段。 我们已经计划使用一个简单的响应方法，网页设计，这是我们***的解决方案为多设备支持。 在听到一些坦率的讨论，在活动中除了在波士顿召开的局限性和挑战的响应性的Web设计中，我意识到，我们的解决方案需要一个调整位。
值得庆幸的是，该项目摆在我们面前的是提高我们的响应工作流程进行试验，并推动自己理想的机会。 在这篇文章中， 我将详细过程 ，包括我们采取了一些的变化，我们前进的道路上，我们致力于建立一个更好的响应网站。
各种各样的设备被用来访问我们的网站是比以往任何时候都更加多样化。 （图片提供： 布莱克帕特森 ）
在我们的项目中的***步是做一个列表的优点和缺点，反应灵敏的方法，我们一直在使用。 我们的列表看起来像这样：
你可能会注意到这里是一个负责任的态度，我们确定的弊端是移动***的解决办法擅长的领域， 我们希望我们的新网站两全其美 -的优势，一个负责任的方法和专门的移动解决方案所提供的。
之间的响应的设计和一个专用的或***的移动设计的共同差异之一是传送到浏览器中的内容或功能。 专门的移动网站往往具有“正常”版本的网站上找到的内容只有一小部分。 这是一个正在进行的辩论的两种方法，，和只移动网站的支持者往往认为，他们是“重要”的内容，移动用户要访问。
这种思路的问题是，什么是“重要”的用户 - 任何用户 - 根据自己的情况的变化。 消除对内容的访问***基于设备有人使用，请务必疏远和挫败任何人不适合进入理想的情况下 ，你设想当你决定要包含在消除您的移动网站。
我们的信念一直是所有用户访问，该网站提供的所有内容，但我们要确保我们的网站，我们的用户，这的确是正确的答案。 为了帮助我们确定正确的方法，我们把我们的分析，发现要求我们的移动访客，让旅客在非移动设备上的内容类型之间没有明显的差异 。 这是流行的桌面用户的内容也同样流行的移动访客。
此外，我们坐了下来，与我们目前的客户，谁代表一个大的一部分我们网站的观众发言，并问他们一些问题，包括“什么内容你来我们的网站为当一台台式电脑吗？”和“如何在平板电脑上或手机吗？“采访显然比这个更深入的，但你可以看到我们问什么。 再次，我们发现，他们正在寻找的内容是一样的，不管他们使用的设备。
从我们的研究结果增强了我们的信念，为我们的网站，它提供了在所有设备上访问相同的内容，是一个负责任的做法是正确的选择。 这项研究还使我们能够确定我们的网站上的哪些内容没有被访问。 当我们发现网页没有被使用，我们的观众，我们将他们从我们的网站地图。 同样的， 这是最流行 的内容适当的治疗，在我们的内容层次结构，重新设计我们的布局计 划。
在我们的内容和数据采集与处理，对什么是重要的观众朋友们，什么是不启动的项目，我们能进入设计阶段我们网站的设计需要什么样的内容支持一个明智的计划。
我听说在浏览器中的参数设计，我很欣赏这种方法带来的许多的好处。 话虽这么说，试图在一些场合上的浏览器的设计，我发现我自己设计的工作流程是简单更适合在Photoshop中开始。 没有办法，我认为这是正确的决定，为大家，但它是正确的决定，对我来说，这是怎么回事，我开始了这样的设计。
对于敏感的设计，我使用的方法，我指的是“设计的***。”我开始设计的台式机版本的网站。 在这个版本中，我设计的排版，色调和整体的视觉方向 - 以及大屏幕的布局的网站。 有一次，我很高兴这个版本的设计，我的工作在小屏幕上或“移动”版本的网站，使用相同的视觉方向，但布局调整，适用于较小的屏幕。
在这个过程中，我有两个布局的网站会有所不同 - ***和***的屏幕版本的设计的可视化的例子。 这两个例子将指导我，因为我开始网站的前端开发。
“***”版本的新网站设计
“ 移动*** “的方针，以响应设计是不是一个新的想法。 这种方法，让你建立一个网站的移动体验和布局，然后再使用媒体查询进行调整，并随着屏幕尺寸的增加，布局，已经考虑了一段时间的响应性的Web设计的***实践。 虽然不是一个新的方法，它仍然是一个重要问题，再加上我们的计划“开始的内容，”它帮助我们解决的缺点，我们发现在我们的响应的项目之一-提供不必要的内容的问题。
的内容，我们保证我们网站的内容是相关的，适合所有用户，移动或以其他方式 。 这意味着，我们并没有担心提供大量的内容在标记中有隐藏在视觉上与CSS。 移动的方法意味着图像将被交付的设备，他们的目的是为。 例如，我们的新设计要求的水彩画质感的背景图形。
的形象，这是相当大的，只有在更大的屏幕（660像素及以上）的设计成为其中的一部分。 因为我们的CSS的手机设计开始，这个大的图形是***不会发送到小屏幕设备被激活，只有通过更大的屏幕，因为媒体查询，加载图像。 该媒体查询，它适用于我们的html元素的背景，看起来像这样：
@media only screen and (min-width: 660px) { html { background: url(/images/bg-watercolor.jpg) no-repeat fixed center top; } } 另外添加的背景图片，660像素触发这个媒体查询，还引入了许多其他布局的变化的网站，从我们所认为的小屏幕布局，将成为各种大屏幕版本的转换。
当我们开始使用反应在我们的Web项目的设计，我们专注于已知的设备和屏幕尺寸，和我们媒体的质疑往往反映了这些已知的设备（iPhone手机，ipad公司在纵向和横向，笔记本电脑，宽屏台式机等）。 随着时间的推移，我们发现，这是不是***的方法，因为它只解决了设备和屏幕尺寸普及的今天，而不是那些可能会在未来。 响应性的Web设计的优势之一是其面向未来的友好方面。 因此，要充分认识到，实力，我们提出了从建设到设备，而不是让设计决定我们的媒体查询断点。
移动***种方法建立了基线对我们网站的CSS。 在的地方，我们推出了网站在浏览器中，并调整我们的布局的***尺寸的（我们在CSS中设定的***宽度为320像素）。 慢慢地， 我们增加了我们的浏览器窗口大小的布局如何回应 。 当浏览器窗口的扩大，我们注意到，布局开始感到紧张。 在这些点上，我们需要建立一个新的媒体查询布局调整。
为了帮助我们使用这种方法， 我们创建了一个图形 ，并设置它为我们的桌面背景。 垂直线条显示的宽度为320像素（***尺寸），然后休息一下，每一百个像素开始，400，我们用这样的缩放浏览器窗口指导我们，以确定设计开始打破，然后用这些近似的像素值产生的，我们添加的CSS媒体查询。
此桌面背景可以用来帮助确定一个负责任的设计所需要的断点。
这种方法添加媒体查询，根据需要而设计的，而不是已知的器件尺寸，使一个网站，以更好地应对更广泛的屏幕尺寸。 它，然而，***填充的CSS文件，更多的媒体查询比，如果你使用设备特定的断点。 不过，尽管媒体询问，查询本身往往是非常小的，因为你是与每一个作出一些改变，而不是通常所需的设备特定媒体查询的巨大变化。
我们的网站，这增加在媒体的质疑是显而易见的，是导航。
处理导航的响应设计的***挑战性的方面之一。 对于我们的网站，我们基本上有四个主要领域的导航。
因为我们的CSS是移动***，我们做的***件事情之一是要建立我们的小屏幕布局的导航。 这意味着关闭显示所有的导航部分，除了主要的导航。
#helpNav, .subNav, footer nav { display: none; } 现在，我刚才所说，我们的目标是将内容传送到设备才将其关闭。“这是确实的目标，但我们的导航，我们不得不接受，这是我们需要做的。 我们无法找到另一个简单而易于维护的解决方案。 幸运的是，我们的内容提供，而不是显示原来只有几个列表，下载游客的影响是***的。
帮助导航是一个领域的网站，一直被认为对于大多数用户来说是不相关的，因为这些链接和门户网站仅仅是用于台式机的用户。 这是一个很大的假设，一个大胆的声明。 这样做的理由是，自己的门户网站，这是我们没有控制所有的第三方应用程序，是不是非常小屏幕的移动设备进行了优化 ，和他们提供的服务是面向企业客户提供支持的大屏幕上台式机。
这种情况告诉我们的决定，删除该段的小屏幕版本的几个月里，该网站一直活在我们没有收到任何意见或投诉，有关这一决定的，我们的用户群。 对于其他两个导航区域，我们的子页面的部分导航和我们的页脚导航，这个内容是为小屏幕设备的主要导航。 这就是为什么我们关闭默认情况下，这三个方面。
后来，随着屏幕尺寸的增大，我们得到过去660像素点的大屏幕设计开始显现，我们将风格这些导航领域的需要。
这是对我们的帮助的CSS导航：
#helpNav { display: block; position: absolute; top: 1px; right: 0px; width: ***; text-align: right; } #helpNav ul { padding-left: 10px; } #helpNav li { display: inline; padding-right: 6px; padding-left: 6px; background-color: #2f6a98; } #helpNav a { font-size: 12px; padding: 0 6px; color: #FFF; border-radius: 20px; } #helpNav a:hover { background-color: #f66606; } 而我们的子页面导航领域：
.subNav { display: block; width: 25%; float: left; } .subNav h4 { padding-bottom: 8px } .subNav ul { list-style: disc; color: #c65204; padding: 0 0 20px 20px; } .subNav li { padding-bottom: 14px; } .subNav a { color: #186483; font-size: 21px; font-family: 'RokkittRegular', Times, "Times New Roman", serif; line-height: 1; } ***，我们的页脚导航：
footer nav { display: block; margin-top: 40px; } footer nav ul { list-style: none; } footer nav li { padding-bottom: 24px; width: 19%; padding: 0 5% 20px 0; float: left; } .innerNav li { width: ***; float: none; padding-bottom: 4px; } footer nav a { color: #575454; font-size: 12px; } .innerNav a { font-weight: normal; } 你会发现，我们已经使用了我们的媒体查询中的像素值。 使用基于像素的媒体的质疑是，我们如何像许多前端开发，开始实施响应的设计，我们已经保持了一贯做法，我们的响应工作流程的一部分。 的精神，以“建设一个更好的响应网站，”不过，我要指出成正比媒体查询使用EMS ，引起我们的注意，在编辑这片上的一篇文章。 从本质上讲，以改善外观的网站在放大时，它强烈建议所有的像素值除以由body字体大小PX媒体查询转换成EM-媒体查询。
这精彩的 文章已经引起我们重新思考我们的基于像素的方法，媒体的质疑 ，这是另一个例子，我们如何继续改进我们的反应的方法。 虽然我们没有使用EMS在我们的媒体查询，在这个特定的项目，我们正在尝试与他们现在的做法是值得一提的。
我们的主导航的布局在顶部水平行的宽屏幕上。 在小屏幕上，这主要的导航结构的变化，是一个大的“菜单”按钮，在每个页面的顶部，在页面底部的导航链接。 要做到这一点，我们添加了一个链接的menuLink一个ID ，在头附近开始的标记，这是一个类的tabButton 。 然后，我们把一个部门的最末尾一个ID mainNav在标记。 在那个部门是我们主要的导航功能，这是一个简单的无序列表与一些其他的无序列表里面的子页面的部分菜单。 我们也有另外一个的ID的toTop ，回到页面顶部的链接作为锚。
小屏幕的布局呈现出“菜单”按钮，在顶部的布局。
继续我们的移动优先的方法，我们在顶部的小屏幕布局样式的菜单链接，看起来像一个按钮。
#menuLink a { float: right; margin: -56px 8px 0 0; } .tabButton a { color: #FFF; font-family: 'RokkittRegular', Times, "Times New Roman", serif; font-size: 20px; background-color: #45829b; padding: 10px 12px; border-radius: 10px; } .tabButton a:hover { background-color: #f66606; } 我们的主导航菜单设置为它的小屏幕上显示：
#mainNav { margin-top: 30px; width: ***; } #mainNav #toTop a { float: right; margin: 0 8px 0 0; font-size: 20px; } #mainNav nav { padding-top: 80px; } #mainNav ul { list-style: none; } #mainNav li { background: #45829b; border-bottom: 1px solid #abc7d2; padding: 4px 10px 4px 15px; } #mainNav li:hover { background-color: #f66606; } #mainNav a { font-size: 24px; color: #FFF; font-family: 'RokkittRegular', Times, "Times New Roman", serif; } 
我们的网站的主要导航，在小屏幕上的布局
我们的子菜单，设置为不显示最初，我们现在可以显示的页面，您的浏览器需要支持。 这些子菜单中有一个独特的的ID，如servicesTab ，和每个网站的部分应用到body标签中的一类。 “本公司”一节中的类是companyPage 。 我们使用这个类来设置样式，整个网站的部分。 我们使用类的子菜单部分打开的子菜单时，根据需要的部分是活动的。
.companyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #contactTab ul, .servicesPage #servicesTab ul { display: block; } 
子页面的导航显示的小屏幕布局
由于大屏幕的布局再次踢 - 660像素及以上媒体查询 - 我们***地改变主导航的布局。 首先，我们的menuLink和toTop按钮关闭显示器，因为他们不再需要：
#menuLink a, #toTop a { display: none; } 接下来，我们的风格mainNav水平实现大屏幕设计的页面的顶部：
#mainNav { position: absolute; top: 92px; margin: 18px 2% 0 2%; width: 96%; text-align: center; } #mainNav nav { padding: 5px 0; border-top: 1px solid #bacfd7; border-bottom: 1px solid #bacfd7; } #mainNav li { background: none; display: inline; border-bottom: 0; border-right: 1px solid #bebebe; padding: 0 6px 0 8px; margin: 4px 0; } #mainNav a { font-size: 16px; color: #45829b; } #mainNav a:hover { color: #f66606; } 这些样式设置一下我们的主导航。 但是，建设的设计，而不是到设备，随着屏幕尺寸的增长，我们将需要进行小的调整。 我们的主要导航的字体有8个不同大小的总的大屏幕布局，改变屏幕上的增长，因为我们有更多的工作空间。 弄清楚如何***地显示这导航，所以它是既易于使用和视觉上的吸引力是我们面临的挑战，而与此响应的设计工作。
最初，我们的字体大小被设置为16个像素。 一旦我们打了767像素的宽度，我们碰到，18个像素。
@media only screen and (min-width : 767px) { #mainNav a { font-size: 18px; } } 我们继续此图案的次数，增加***的字体大小27像素作为网站达到其***尺寸。 在这种方式中，网站的导航真正响应***的设计和所使用，以查看该设计的屏幕。
我们***的CMS是ExpressionEngine ，和这个文章的下一个部分的具体内容是指该平台，但我们完成了与ExpressionEngine的总体思路，无疑可以被应用到其他流行的CMS平台。
其中一个***的缺点，反应灵敏的方法是，你可以提供不同的标记在不同的设备或不同的源顺序。 这样做的缺点是什么，我们要克服我们的CMS。 在我们的实验和研究，我们偶然发现了一篇文章，题为“ 走向真正的自适应方式“ExpressionEngine 。“在这篇文章中详细介绍使用方法，我们能够使用的设备检测系统中的mobile或脚本来设置变量full 。 然后我们就可以有条件地加载到我们的网站标记的基础上满足这些变量。
通过进一步使用该设备检测，我们能够让其他的非常小的变化，以进一步改善用户的移动体验。 对我们来说，这是一种像逐步增强 ，我们创建了一个优质的解决方案，然后试图把它进一步提供更优化的经验。RWD和移动相结合的模板中，他认为混合和匹配各种技术，为您的移动战略，确保到阅读克里斯Coyier的类似的观点 。
当然，您可以使用这些变量在不同的设备提供***不同的标记和源订单，但我们最初的做法是有点不那么***。 因为我们已经决定，我们的网站将有机会获得所有版本的所有内容，我们最初使用这个变量的方法来进行轻微的调整，内容的多少将交付。 例如，在我们的网站的主页，我们显示的内容在网站内各种玩笑。 对于“文化”和“项目聚焦”部分，图像伴随着每一个职位。
这些图像是一个不错的啊，但肯定不是重要的 ，所以我们不提供这些图像为移动用户在所有。 现在，我不意味着我们使用CSS来关闭显示，这将导致数据被传递到浏览器无论如何，相反，我们使用的变量，我们已经建立了省略标记的图像，除非他们需要如图所示。
传情图像是不错的，但不是关键的内容或布局。
语法是很容易的。 一旦你建立了你的变量- 上述文章解释了如何做很容易加入了一个小脚本系统config.php文件-您可以使用这些变量，比如if声明。
{if global:site_version=='full'}<img src="{teaser-image}" alt="{title}" />{/if}{if global:site_version=='mobile'} {title} {/if} 这是ExpressionEngine的语法，但你应该能够读这一点，很容易地看到发生了什么事。 如果full变量满足，那么我们提供teaser-image从该文章的数据库中的条目。 如果mobile变量，而不是满足，那么我们提供的文章的title 。
我们使用同样的方法在主页的“新闻”和“博客”的部分，如果full变量满足只有一个，如果mobile提供三个简短的玩笑。 这种语法看起来像这样：
{exp:channel:entries channel="news" {if global:site_version=='full'}limit="3"{/if}{if global:site_version=='mobile'}limit="1"{/if}} 这里你可以看到，我们正在访问的的ExpressionEngine通道命名的news 。 我们用我们的变量，以确定如何从该通道将显示最近的许多项目，使用的limit参数。
在该网站的“文化”一节中 ，我们发表文章，往往伴随着大量的图像。 不同的传情网站的主页上的图像，图像中的文章本身的内容是至关重要的，因为它们有助于开展或加强文章的观点。 现在，虽然图像是重要的，他们也蛮大的 - 每一个宽650像素，和，大多数文章至少包括三个图像和多达10个。 由于移动设备的图像将显示在其原始大小的一半左右，下载全尺寸的图像将是相当可观的。 为了解决这个问题，我们再一次把我们的设备检测和变量。
对于每个文章中， 我们产生两组图像 ：一个尺寸在650像素宽和第二组在几乎一半大小。 然后，我们使用的变量，在我们的文章（但首先，我们需要在我们的页面模板允许ExpressionEngine代码），包括两组图像的标记 - 但只有一组没有交付给浏览器。 移动设备变得更小的图像，而***变得正常设置。
我们采取了类似的做法，主页的大型广告牌面积。 这些旋转横幅消息和图像来推动的重要项目，如即将举行的活动，新的服务和公告，在一个更大的方式比我们在其他地区的主页。 广告牌是另一个不错的，有元素只适用于大屏幕显示器。 再次，我们使用的变量提供的主要billboard部门，以及运行的JavaScript，合适的设备-有效地使我们能够发送到不同的设备和不同的标记，消除另一种的缺点，我们发现在开始此项目。
通过移动的方式和在我们CMS的帮助下，我们能够提供我们的主页738.3 KB为桌面用户，并大幅降低，只为移动用户174.4 KB。
其中的问题一直困扰着我，只有一个移动的方法和设备检测， 如果检测失败，会发生什么情况？是“正常”的版本传送到移动设备的网站，从而使您精心设计的移动体验空和空虚吗？ 这可能是一个主要的原因，我已经避免了移动***的解决方案，在过去使用的设备检测。
对于我们的新的响应工作流程，我们正在使用的设备检测，但我们的过程中我们已具备检测失败的情况下，由于某种原因，具有优良的回退。 因为我们使用的是一个负责任的做法，即使full版本被传递到移动浏览器的布局将适用于该设备，因为我们的CSS将相应地调整网站的布局。
此外，由于我们选择了一个移动***次构建，项目不打算为小屏幕，如巨型的背景图上面提到的，不被传递。 将失败的***的事情，我们所做的工作与我们的设备检测生成的变量。 如果最坏的情况发生，我们的检测失败，然后mobile版本只会得到一些额外的图像或一个小标记或JavaScript，它并不需要。 的经验仍然适用于移动。 不坏的一个“最坏的情况”。
几年前，一个客户说了些什么，我认为我一直坚持到这一天。 在谈到他的网站，他说：
“不要担心我的网站***。 只是工作的更好。 如果我们一直在努力变得更好，我们要在正确的方向。“
这个想法一直遵循多年来，让我想起了我从来没有解雇一个更好的解决方案，只是因为它是不***的。
我知道这是不是一个***的解决方案，我很确定，因为它是我们以前的响应工作流程的改善。 它帮助我们克服一些障碍，我们发现，我们现在可以把这些改进其他项目，我们正在努力。 是的，有仍然有很多的问题，我们还没有有效地解决，如交付更高质量的图像，HD显示器，以及使用的，基于媒体的质疑早在这片，但我们正朝着这个项目，并为他人正确的方向。
谁知道？ 也许有一天，有人将建立一个“***的网站。”在此期间，我们将重点放在进步，而不是***的，作为我们前进的道路上继续进行小的改进，致力于打造一个更好的响应网站。
你如何建立响应的网站吗？ 你使用的功能检测设备检测吗？ 你会建议使用一种或另一种呢？ 我们期待着您的宝贵意见！