对于很多人来说，移动设备，尤其是手机，正在迅速成为互联网最热门航线。他们希望能够快速，方便地获取信息，帮助他们在旅途中做出决策，包括是否光顾您的业务。
不幸的是，并不是每个小型商业网站在手机上运作良好。许多无法快速加载，证明难以导航，并使关键信息很难找到。
为了让您的网站更多的移动友好的，请考虑以下三个步骤，它把一个优先考虑实用性，速度和轻松导航。
1.在蜂窝网络上测试您的网站。
关闭手机的Wi-Fi连接，以便使用您的无线运营商的数据网络。然后，启动Web浏览器并键入您的商家网站的网址。
现在，开始计数。如果完全加载您的主页需要5秒或更短时间，这是相当不错。如果它是10秒或更多，有很大的改进空间。
如果您的网站首先显示装饰闪屏，视频或大图片，则不适合移动设备。这些项目需要额外的时间来加载和获取有用的信息的方式。此外，如果您的首页具有Flash动画，它将不会在许多移动浏览器中显示，您的网站可能似乎什么也没有说。
如果您的手机只显示完整网站的微缩版本，这意味着移动用户必须捏合，缩放和滚动看看有什么。这是更多的工作，加上他们更可能意外点击错误的链接或按钮。当您的网站在移动设备上加载时，您的商家最基本且最重要的信息（例如地址，营业时间和电话号码）应该立即可见。
要获得最全面的结果，请对几种类型的手机重复此练习。考虑让您的朋友在观看时通过手机访问您的网站。观察，但不要教导他们在哪里滚动或单击。
2.从简单的改进开始。
根据测试的结果，您的网站可能需要进行重大检查或只是一些调整。如果重新设计似乎有必要，但是比你现在可以管理的更多，你可以开始一个快速和容易的修复。
如果尚未安装，请将以下信息放在网站首页的顶部：
商家名称
简要说明，如“税务会计师”，“汽车修理”或“精致法国餐饮”
街道地址
营业时间
电话号码查询或预订
电子邮件地址
链接到您的网站的移动版（我会在以后解释）
此信息应显示在任何背景或横幅图形上方，因此首先加载。毕竟，这是大多数移动访问者想要知道的。
将此信息显示为纯文本而不是将其包含在图像中有几个优点。在大多数移动网络浏览器中，只需点击电话号码即可开始通话。同样，点击街道地址即可启动手机的地图应用程序，点击电子邮件地址即可打开移动电子邮件应用程序。如果您让移动用户更容易，他们更有可能与您做生意。
3.构建一个用户友好的移动版网站。
创建网站的移动版本可以相当简单。如果您使用提供移动主题布局的工具构建您的网站，则只需选择一个主题并将其应用到您的网站。WordPress的，最流行的网站建设工具之一，有许多免费和廉价的手机主题。
您还可以构建一个单独的移动网站。有许多廉价服务的非技术人员都可以使用，包括Mofuse.com和Landr.co。两者都允许您创建并发布基本移动网站，每月不到10美元。
移动网站的网址与完整网站略有不同。移动版本通常以“m”开头。在常规网址之前，或以“.mobi”而不是“.com”结尾。如果移动用户键入您的常规网址或通过搜索引擎查看指向您网站的链接，则移动版本应自动加载。
但这并不总是发生在每个电话。在您的网站顶部包含指向您的移动网站的链接，反之亦然，以防万一。
不要为移动设备设计您的网站。相反，设计您的网站的所有设备，从小手机到巨大的客厅平面屏幕。
“几乎每个企业都需要适应任何屏幕上有效地到达消费者手中，说：” 珍妮华纳，全球公认的数字化设计和互联网发展趋势的顾问谁我对她的方式阿布扎比，在那里她拿了世界信息峰会大奖阶段，赶上了分享多屏战略，国际移动专家组成的庞大的观众面前。
“有两种基本的策略来构建在所有设备上显示良好的网站：响应和自适应，”她解释说。“响应式网站是大多数小型企业的最佳选择。以下是对含醉句句意味着什么的翻译，以及您的企业应该采取的关键步骤。
至少，调整您的现有网站为今天的Web用户。 没有一个企业不能忽视这样一个事实：超过十亿人主要从移动设备访问网络。即使您尚未准备好重新构建网站，以便在所有设备上实现最佳显示，也至少需要执行以下两个步骤之一：
简化您的网站设计。拉起你的网站在智能手机上（或查看它在谷歌的GoMoMeter），你可能会看到设计变更的需要。为了在移动设备上显示出色，华纳推荐更简单的页面设计，大字体大小，关键信息放在“折叠”，以及大，可触摸的按钮，防止手指。最低限度，她说：“只要把你的姓名，电话号码和一个地图的链接放在你的主页左上角就可以轻松找到。
创建您网站的移动版本。作为编辑网站的替代方法，您可以使用移动网站设计服务创建并行版本，其中许多是免费或低成本的。“但是有权衡，”华纳说。“如果您的移动网站有第二个网址，例如带有.m子域的网址，搜索引擎可能会找到它，也可能找不到它。Bing和Google都主张使用单一网址方法来实现可搜索性和搜索引擎优化。“但是，如果你喜欢你的网站或不能重建它，创建一个移动网站链接到你的主要网站不是最糟糕的策略，”华纳说。“最糟糕的策略是完全忽视你的移动用户。
更好的是，重建您的网站，以便在任何设备上显示。 这里是适应和响应网站设计的术语：
自适应设计是网站设计的高端。它由大型公司使用，大量投资，以获得最大的在线观众。“美国航空公司是一个很好的例子，”Warner说，自适应设计“检测和识别用户的设备，然后生成一个与设备能力匹配的页面。
响应式设计是使用CSS（层叠样式表）技术创建一个网站，自动调整以除最早的手机的所有设备正常显示的单一版本更实惠的解决方案。“一个敏感的网站允许你到达最活跃的Web受众，”华纳说。作为一个例子，她拉起来的网站波士顿环球报，点击浏览器窗口的右边缘拖动到左侧，从全屏页面缩小到一个地区智能手机的大小。无论她做多大的显示区域，地球仪的响应设计看起来不错，很容易阅读。
致力于面向未来您的网站
当您准备使您的业务拖延已久的投资，把网站重新设计的高名单上的，所以你就可以通过自己的手机，平板电脑，个人电脑，电视到达消费者手中，或者很快，冰箱门，浴室镜子等。
即使是DIY平台，从GoDaddy.com到WordPress和许多之间，开始提供工作在各种屏幕尺寸的设计。“只要确定你使用的主题标记为响应，”华纳说。
或者，她说，对于几千美元或更多，专业设计师可以创建一个良好的定制网站，“除非设计师不知道这个词是响应，在这种情况下，你需要一个不同的设计师。
最后，一旦您获得了技术正确，请注意创建伟大的网站内容。“记住，”华纳说，“特别是在移动设备上，人们访问您的网站有三个原因：节省时间，与他人联系，浪费时间。让他们快速，方便地访问，将您的联系信息放在前面和中心，给他们指向地图和路线的链接，然后添加视频或其他娱乐内容，让他们在您的网站上逗留只要他们想留下来。
这是如何面向未来的您的网站。
移动导航菜单设计中的一个共同挑战是导航菜单。如果该网站有很多的部分或网页，它变得具有挑战性，将所有的项目压缩成一个小的移动分辨率。导航最有可能结束运行成多行或按钮堆叠在顶部彼此。所以我要回顾一些设计解决方案，提供了一种快速教程如何创建一个jQuery移动导航。
问题
下面的截图显示移动的导航布局问题。如果导航有3个或4个按钮，如网页设计师墙，那么导航将不会包成2行。但如果导航包含6个或多个按钮，它们将在顶部彼此堆叠。
解决方案
1）下拉
一种常用的解决方案是将导航到一个选择下拉。我不喜欢这种方法因为<选择>元素不可设置样式和CSS。JavaScript插件选择允许您修改下拉菜单，否则你最终的默认系统下拉菜单样式。这也造成不一致的用户体验，桌面版和移动版显示链接标签显示一个下拉菜单。如果你喜欢这个解决方案，这是通过CSS技巧教程如何将菜单下拉。
2）显示为块
另一个快速修复是将每个菜单项设置为块元素，这样他们就显示垂直。但这种方法需要大量的头空间。如果导航有很多按钮，这是一个坏主意，因为在到达内容之前，读者必须向下滚动导航列表。
3）菜单图标
我要复习的最后一个解决办法是使用一个菜单图标/按钮来切换导航。我喜欢这种方法，因为它节省了三的空间（移动非常重要），它给你的造型与CSS完全控制。菜单图标可以与总体设计匹配。
jQuery移动导航（查看演示）
本教程向您展示如何创建一个jQuery在上面列出的网站看到移动导航。jQuery将用于在菜单图标，切换导航。这一招，不需要任何额外的语义HTML标签/联合。
HTML
下面是本教程中使用的示例导航HTML：
<资产净值ID =”导航包”>
< UL ID =值>
<李> < a href =“#”>按钮</a> </李>
<李> < a href =“#”>按钮</a> </李>
< / UL >
< /导航>
jQuery代码
包括一份jQuery和下面的函数在<HEAD>标签之间。该函数将前置<divid=“菜单图标”>在<资产净值=“#导航包ID标签”>。当#菜单图标元素被点击时，它就会滑下导航。
<脚本type=“text/javascript”src=“HTTP：/ / Ajax。googleapis。COM / / / jQuery的Ajax库1.7版jQuery。”> < /脚本>
<脚本type=“text/javascript”>
jQuery（document）。准备好（功能（$）{
/ * * /在菜单图标
$（“#导航包”）。在（' <divid=“菜单图标”>菜单中的< / DIV >”）；
/ * * /切换导航
$（“#菜单图标”）。在（“点击”，function() {
$（“#资产净值”）。slidetoggle()；
$（这个）。toggleclass（“主动”）；
}）；
}）；
< /脚本>
这将使HTML这样的代码（你需要检查元素或视图来查看生成的源代码）：
<资产净值ID =”导航包”>
<divid=“>菜单中的< / DIV >菜单图标
< UL ID =值>
<李> < a href =“#”>按钮</a> </李>
<李> < a href =“#”>按钮</a> </李>
< / UL >
< /导航>
CSS
我不打算解释CSS代码的每一个细节，因为它是非常直接的。相反，我会谈论的关键部分。
的#菜单图标的显示设置为：没有开始。我使用媒体查询到#菜单图标更改为显示：块如果视口的宽度小于600px。
CSS解释
在媒体查询中，我设置了导航显示：没有一个是在移动中隐藏的。当#菜单点击图标，可以切换导航为上述步骤在jQuery函数指定。
最后的演示
要看到最后的移动导航，查看演示，缩小您的浏览器窗口或检查您的手机。
最新推荐