如何设计一个移动响应式网站
建立一个移动网站或建立一个移动网站；这是许多讨论的前沿问题。有，然而，另一种选择：响应式网页设计。什么时候，为什么，以及如何去响应网站设计？

随着移动互联网用户将超过桌面互联网用户在美国2015，平板电脑变得越来越流行，甚至电视的互联网使用的增加，对公司所有的游客无论什么设备他们提供出色的用户体验是很重要的。如何响应设计帮助我们做这件事吗？好吧，让我们创建一个网站解决方案，适用于不同的屏幕宽度。它采用灵活的网格和聪明的方式向用户呈现相同的内容，但显示在一个适合该装置的宽格式内容。退房这个初学者的指南，响应式网页设计一个更详细的介绍。

你为什么要设计一个响应式网站？
有很多的选择要考虑当客户要求为他们的网站和移动解决方案，这些方案的适用性取决于业务需求和预算；考虑到任何现有的解决方案，或者他们已经有网站也很重要。创建一个响应式网站不是一个完整的移动战略，并不会回答每一个短暂的，但是，特别是如果你是从零开始的一个网站，你应该考虑这是一个非常严肃的选择。
为什么你决定创建一个网站吗？

你从零开始
发展一个新的网站或Web应用程序是一个具有挑战性的过程。你不知道这个网站会成功，直到它的生活和世界，所以创建一个单独的移动网站或与网站项目串联一个移动应用程序可以是一个很大的浪费时间和金钱。在你创建一个额外的移动网站或应用程序把你的新网站表现良好，它的效率更高。

你想保持低成本
固体反应的解决方案需要额外的设计和前端开发的时间，但不太严重影响应用程序的开发。这可能需要大约20%再开发一个响应式网站，但这仍然比创建一个额外的移动网站或应用程序更快。开发一个网站的这种方式，也意味着你只需要开发、管理和维护的一个网站，所以它可以降低这些成本太。

你想让它工作，即使新设备发布
手机网站需要能够识别用户的设备；在新设备发布，网站需要更新。为响应解决方案只承认浏览器的宽度，没有新的更新将需要作出的。这意味着它更面向未来的可扩展。

过程
让我们通过使用酒店网站的例子创建一个网站响应过程谈。这是去年九月，赤道发布新的麦克唐纳德酒店的网站。麦克唐纳德酒店是一个在英国和西班牙的47家酒店和度假村的英国连锁酒店。我们创造了新的网站，包括一个新的网站结构、内容广泛的酒店，和一个新的预订引擎。这里有步骤，我们经历了，你也应该考虑设计一个响应式网站的几点思考。
 

这些都是关键的步骤：
•研究范围：了解额外要求响应的网站
•线框图：电网结构和布局的网站在不同的屏幕宽度
•外观：风格的考虑
•建筑工地：HTML和CSS的问题

研究范围
研究一直是一个非常重要的阶段，在设计过程中，所以值得投入一点额外的考虑的人会使用不同的设备。了解这些不同的用户可以使用网站上的各种设备将帮助你决定该项目的重点是什么。

•不同的目标会在不同的设备上有一个用户？
像这样的问题开始变得多余。在过去我们认为移动用户已经任务驱动，我想找到酒店的地址；我想订的东西很快。但是现在，在任何设备上人们都会悠闲地浏览互联网，因为他们需要快速完成任务。这是值得考虑的，因为用户的目标，这样的思维可以帮助你优先考虑网站的内容，不相关的访问者是什么设备使用。
 

•我们需要做的功能和内容，技术方面的考虑吗？
想想任何复杂的功能，可以工作在不同的设备。虽然响应网站只会改变CSS根据宽度如果有复杂的因素，在很大程度上依赖于JavaScript，他们可能没有很好的转化在一个较小的装置，它可以隐藏这些价值。

线框图
背后的逻辑是如何改变风格应该可以定义一个点硬和它的魔力就会出现在网站的建设，但我们需要一种方法来开始定义布局的不同宽度的阶段。我们去看3的屏幕宽度，桌面，iPad和iPhone。我们觉得这些我们所要求的是什么，但对于你的项目，你应该考虑什么宽度为你考虑你可能需要看大屏幕电视的互联网使用重要的宽度。

在这一点上的项目，你应该已经到你需要在线核心模板，但你不需要所有这些模板的框架在不同的宽度。这里的主要目标是帮助定义背后的逻辑如何CSS会改变页面的外观，所以重点有非常不同的布局页面。我们看着我们的主页，所有的预订流程页面，酒店提供的网页页面，以及一些通用的布局。这些覆盖不同的列布局，内容类型和关键功能。

•入门指南
首先，每个按键宽度定义网格结构。我们创造了3页的屏幕宽度1024px（桌面），768px（iPad纵向），320px（iPhone画像），然后我们需要为每个这些宽度定义网格结构。
 
一个相等的列宽每个布局非常简单的网格结构使我们为组件包的宽度变化的计划更容易。

•创建主模板
当你创建的每个线框，你需要考虑柱和如何在这些组件会适应页面宽度缩小与mdashe。你有更少的空间，会发生什么？如果你有四个栏目的内容？当你改变一三列的宽度？应该有持续的沟通之间的设计师和前端开发人员回答任何问题，你可以做什么与视觉和CSS组件。

•从首页
你可能会觉得有另一个网页，比首页更高的重要性，但这是我们开始的地方。这是我们完成原线框。你可以看到移动页面长度相当大一点由于内容包装在一列。

•主导航
我们创建了一个简单的水平顶部导航会流体宽度与屏幕尺寸的变化。由于屏幕缩小菜单项会紧密地联系在一起，然后换行到下一行在必要的时候。本工程为台式机、笔记本电脑和平板的宽度，但会进一步下跌，我们想创建一个菜单，适合的设备。这给了我们菜单波及的移动设备的两列。

其他头组件是右对齐，只是移随页面宽度减小。
记得你是造型导航认为它将如何工作的屏幕尺寸的变化。一定的风格，如使用的标签，可能很难得到工作和好看的屏幕宽度减小。

•页脚
我们的脚是很简单的，只是想着你想要的内容，以及它将如何为宽度的变化，这种变化可以作为柱减少组件包装在对方那么简单。

•其他组件
我们简单的网格结构使其更容易规划出我们的组件。在首页我们使用水平滚动条，有四个部件，滚动在一次点击。我们的平板布局让我们保持这部分只是修改为只显示三项，然后在我们的手机宽度去掉滚动功能完全相反，显示每个项目的垂直。每个组件的设计可能需要不同的行为，所以想想访客将要使用的组件在不同的屏幕尺寸。手机用户更舒适的向下滚动页面比使用小按钮与页面交互。

•测试了
一旦你已经创建了你的第一个线框测试它在相关设备的直线距离。得到的图像在一个简单的网页，看看如何看一看，感觉向下滚动，很容易。这将让你知道如果你的线框图是早期工作。这样的测试给我们的线索很早是什么和不工作。如果你看看这个框应该很快看到我们的第一个问题。

当用户导航通过他们的网站只会看到这两个页面元素和mdashthe导航和搜索面板。这意味着用户可以如果页面已经被确定，以及在他们网站上。这是解决简单的把这些项目在显示/隐藏面板让用户进入内容更快。
将平板电脑和手机版用户测试的过程会给你很多有用的反馈。现在你的线框图的创建，测试，修改和认可它的时间，让他们看看你的屏幕宽度好。

外观和感觉的视觉效果
没有必要创建一个线框的视觉效果。主要的目标是覆盖所有的风格，将需要创建的HTML和CSS。会有一点点的一个线框和视觉交叉，一些风格，将为移动在没有一个最初的线框需要。

•设计页面：想保持你的风格简单的手机版有什么了不起的CSS3，你不需要很多的图像得到伟大的风格的影响，但还需要一点时间来加载。

•思考字体：确保你的字体大小会对每个设备的可读性。他们会有更大的移动设备以确保可读性。

同时，准备好你的视觉改变当它被翻译成网站的建立。总是应该在一个平面视觉和什么看起来很好的平衡工作，网站正在开发中。最终网站没有远离过我们的外观和感觉的视觉效果，看看这里你可以用Live网站比较。

建筑工地
建立HTML和CSS是一个挑战自己的一切，所以我不会讨论这是太多的细节，但这里有一些事情要考虑。

•影响图像大小：网站需要负载在全尺寸图像即使CSS尺度下来，所以尽量保持图像尺寸尽可能低。可以有一些漂亮的JavaScript技巧虽然使网站运行顺畅。在这个网站上我们最初装在最小的图像大小，然后使用JavaScript来决定是否一个较大的图像，然后需要。

•采用先进的CSS：
得到的背后，使用先进的CSS样式的理念客户是很重要的，让网站风格为浏览器能力降低并。这可以让你保持网站的加载时间低。

•不断的沟通是必需的：该项目将永远走的顺畅，球队和对方说话，从设计者和开发者很好的讨论问题和解决方案，尽快为他们打开。

所以，这一切意味着什么呢？
如果你想说服你的客户他们有新的网站设计和快速发展，首先应该考虑它是否真的对他们来说是正确的解决方案，那么你就需要能够说服他们的利益和交流，这将增加更多的时间项目。但是，我相信这是有更多的网站将在未来的发展。
我们都学到了很多，在这一敏感的网站开发项目。我们很幸运，有一个客户谁是我们热衷于创造一些新的和创新的，我们已经创建了一个网站，我们所有的骄傲。

牧羊人设计文章推荐：

集团网站建设栏目设置及集团公司网站建设方案
深入的图像优化事实与未来
作为一个自由设计师5个秘诀