当第一部iPhone发行时，风靡科技界。 从那时起至今已有近5年的时间了，智能手机市场也Swift普及，甚至连Microsoft都已与其Windows 7 OS和合作伙伴一较高下。 如今，随着智能手机上互联网用户的增多，人们常期望移动网站的数量急剧增加。

但是，为移动Web设计是与普通Web设计完全不同的操作。 我们的网站是为大屏幕设计的，但是与之相比，智能手机的屏幕尺寸实在太小，从而导致烦人的可用性问题。 更好的移动网站设计和流畅的用户体验非常需要新的设计标准和实践 。

在本指南中，我们将为智能手机的移动浏览器设计一个用户友好的网站。 我将为您设计最佳实践和有用的开发人员工具，以设计一个更好的移动网站，因此，让我们在跳转后开始学习吧！

规划强大的用户体验

建立移动网站时，务必时刻牢记您的用户 ，因为最终会设计和创建供用户欣赏的网站。 用户期望移动网站的行为与台式机环境相似是很常见的，因此，在构建成功的移动网站时， 保持用户友好体验应该是您的主要重点。

有许多可用性概念供您的用户考虑。 这些注意事项包括屏幕大小 ， 嵌入式图像 ， 超链接 ， 字体大小和页面导航 。 我们已经撰写了有关移动可用性设计的文章，以帮助您更好地利用网站。 除了指南之外，您还需要时刻保持警觉，以获取改善网站的新想法 。

计划良好的用户体验还意味着您应该考虑用户将如何与您的网站进行交互 。 在台式机上，您的网站可以与鼠标和键盘进行交互，但是在智能手机上，用户将在您的网站上点击 ， 轻拂和滑动 。 您可能需要以一种用户可以通过这些物理动作轻松访问站点信息的方式来设计站点。

保持页面简短有趣

任何网站的内容都是页面内容 。 您的每个网页都为用户提供了大量有用的信息 ，例如文本，照片或视频。 您还将发现运行在几页上的新闻文章和博客文章，这可能有助于分解文本，但不建议在移动设备上使用，因为该技术需要更多页面加载，这意味着用户需要更多等待时间 。

除非绝对需要，否则建议您将页面内容简短 。 您还应该考虑通过将字体样式设置为更大的尺寸并可能将图像移到一边 来使其看起来更甜美。 内容全屏显示自然会引起人们的注意，更不用说优化实际上使扫描页面变得更加简单。 这也是单列布局完美适合账单的原因。

在大多数情况下，移动浏览器无法像台式机浏览器那样快速加载网页，这可能会使您的读者烦恼，这就是为什么您需要优化内容和网站以实现高速内容加载的原因。 您可以在保留全部内容的同时缩短文章的长度，或者只是删除不必要的图像 。 把重点放在简单而不是美丽上 。

对于希望在页面之间移动的访问者，您的核心导航是救生器。 在移动设备上，屏幕链接本质上会显得小得多，因此点击起来会困难得多。 解决此问题的一项重要调整是最大化导航链接的字体和空间 ，也许会占用整个块区域。 或者，您可以将导航栏设计为类似于真实iPhone应用程序的选项卡栏 ，如上面展示的那样。

构建移动CSS样式

既然我们知道如何优化移动网站以获得更好的可读性和可用性，那么谈论CSS样式将是很好的。 每个CSS样式表都包含许多选择器，这些选择器的属性与字体，大小，位置和显示设置有关。 当涉及到移动设备时，您应该注意块的放置方式 。

要开始的一项工作是将网站的包装器宽度重置为percent 。 通常以像素为单位来定位位置，行高，字体大小和div的宽度，但是在处理移动设备时，您希望页面保持流畅并在每个设备之间自然转换 。 将容器div设置为100％的宽度将使内容在纵向/横向模式之间轻松填充，而不会在边缘流动 。

如果您是希望重新构建整个布局的人之一，请确保使用reset击中所有内容 。 此外， 段落，标题和导航链接都应设置为显示：块； 这样您就能获得线性打印风格的感觉。 重新定位边距和填充以消除布局中的膨胀 。 如果可能，请避免使用表格 ，因为这些表格往往会导致设备之间的错误结果。

大图像也是设备之间的麻烦。 您的大多数网站图片将呈现大于480px的像素，您可能不希望它们破坏容器。 第一种选择是将其宽度设置为100％，以便图像可以自然调整大小 。 当然可以为您的网站创建不同的图像集，并基于浏览器代理以不同的方式呈现它们，但是说实话，这只会增加您的工作量，因此请仅在确实需要时才使用该技术 。

为iPhone设计网站

移动市场份额相当大且分散，但苹果的iDevices占有很大份额。 iPhone和iPad都是具有内置触摸屏功能的移动互联网就绪设备。 它们具有相同的默认Web浏览器，Safari和大量其他选项。

对于特定于iPhone的网站，您需要确定屏幕尺寸。 对于旧型号的iPhone ，固定屏幕尺寸设置为320px x 480px， 对于iPhone 4和iPhone 4S ，固定屏幕尺寸设置为640px x 960px 。

iPhone屏幕限于空间。 您应该拥有一个内容块，可以根据需要持续很长时间 。 将元素放在同一列中可以省去您的麻烦，并允许流畅的布局“填充”纵向和横向模式 。 为此，您可能需要开发另一个模板，并找到一种方法来检查您的访客是否正在使用iPhone。 下面PHP小片段应该可以正常运行：

<?php$b = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");if ($b){ // user is on an iPhone  }
?>

基本上，逻辑为HTTP代理提取我们的全局$_SERVER变量，并检查单词“ iphone ”是否出现在任何地方。 如果是，那么我们知道访问者正在使用iPhone，从那里我们可以放置稍微不同HTML甚至是全新的模板布局！ 这也可以用来包含iPhone专用的样式表 ，更改页面标题，删除图像或几乎任何动态效果。

当涉及提供新样式时，有一种更简单的方法。 如前所述，iPhone的最大屏幕尺寸为960px。 因此，使用新的CSS3媒体查询，您可以将样式直接添加到站点的主要样式表中，该样式表仅在iPhone上显示。 下面是一个小的示例代码：

@media screen and (max-device-width: 960px){
/* iPhone css */
}

这是可行的，因为CSS现在可以检测浏览代理及其属性 。 屏幕最大宽度是也可以检测到的属性之一。

iPhone设备的全方位移动网站并不是很难设计的，有太多示例可供参考，例如CSS iPhone 。 让自己忙于学习 ，不要害怕尝试UI设计中的新技术 。

移动jQuery脚本

大多数前端Web开发人员都熟悉jQuery库。 它为编码效果，动画，下拉菜单以及许多其他浏览器内功能提供了一些奇妙的速记，而随着jQuery Mobile的发布，它变得更加强大。 不建议直接跳入技术并在网站上随处加载效果，但出于测试目的，高级功能可以很好地发挥作用。

jQuery Mobile与常规jQuery有所不同，它为您提供了一个完整的构建环境。 当使用它们的文件时，它们不仅是JavaScript，而且是按钮，链接和过渡效果CSS样式。 您仍在用HTML代码编写网页，但是jQuery Mobile团队提供了许多可选的UI设计功能 。 我们可以使用此框架做很多事情，但是由于该框架仍处于beta中 ，因此我们坚持简单的效果。

DevGrow博客上的一个小教程提供了一些很棒的示例。 官方网站还提供了演示供您试用。 请注意，我们使用HTML属性data-transition来添加具有任何预定义值的动画效果。 其中包括滑动，弹出，翻转，淡入淡出等。请查看小的DevGrow示例，以了解这些效果。

效果和过渡非常简洁，您可以使用jQuery完全构建整个移动界面这一事实对于该平台也是一个巨大的进步，但是对于仅处于测试版的平台，我不建议您使用jQuery构建整个移动网站他们的资料库，尤其是在撰写本文时，并不是所有主流智能手机 （尤其是Windows Phone 7）都支持它，但是随着时间的推移，它肯定会变得更好。

最终，我建议在任何项目上进行实时部署之前，先熟悉这个新的移动框架。

有用的开发人员工具

移动开发人员不仅在研究编码和设计资源。 对软件工具和IDE的需求也很高，更不用说功能强大的移动框架了。 Web开发是一项艰巨的任务，需要投入大量精力，但是利用其他工具将使您的工作变得更加轻松。

寻找一种方法来检查您的移动网站的呈现方式吗？ 如果您没有可访问互联网的智能手机，这将是一个巨大的痛苦。 或者，您只是不想每次将更新推送到服务器时都使用智能手机来测试站点。 好吧， Opera Mobile Emulator是一款出色的软件，可以测试您的移动网站。

该仿真器确实支持约20种移动配置文件，例如Samsung Galaxy S，HTC Desire，甚至是平板电脑（例如Motorola Xoom）。 也可以设置自定义分辨率和像素密度，以进行严格的测试。 最重要的是，您无需进行过多的配置工作，只需单击几下，您就可以开始了。

下载是完全免费的，该软件可以在Mac OS X和Windows环境中运行。 他们的开发人员正在努力创建适当的Web标准并调整其移动渲染引擎。 如果您正在寻找额外的工具来帮助您，我建议他们使用其他开发工具 。

很少有通过HTML5开发的用于构建可靠的移动应用程序的API。 值得注意的是，移动领域一直缺乏这些类型的网站，这恰恰是PhoneGap如此出色地填补利基市场的原因。 他们的平台使您可以轻松地将基于HTML5的应用程序构建为6个不同平台上的本机应用程序 。

该过程首先压缩您的代码，然后将其通过PhoneGap的应用程序框架传递。 从那里，您的应用程序可以到达移动市场的很大一部分，包括Android，iOS，Windows Phone 7和BlackBerry。

如果您有点困惑，请不要担心太多。 他们的支持页面整齐地概述了过程，并提供了指向有用资源的链接。 已经开发的应用程序已经以漂亮的库样式组合进行了编译。 查看其完整的应用程序集合 ，然后您可以按设备将其与屏幕截图进行排序。

Aptana网站是了解他们的开发工具的首选位置。 最新的套件版本Aptana 3.0.3具有用于Web开发，CSS样式和HTML标签嵌套的完全集成的IDE，而最好的部分是：Aptana完全免费下载！ 他们提供了适用于所有3种主要操作系统（包括Linux）的软件包，这对开发人员来说是极大的便利。

Aptana之所以与众不同，是因为您能够以多快的速度开发小型Web应用程序并测试您的设计。 通过Studio Studio，您可以快速开发和测试在Ruby on Rails，PHP，Python或仅HTML / CSS上运行的Web应用程序 ，并且其代码突出显示功能最近得到了改进， 包括新HTML5和CSS3标签库 。 它还带有Git集成，内置终端，代码调试器以及其他一些漂亮的功能。

移动GUI套件和图标

没有免费赠品四处闲逛的网络将是什么？ 对于网页设计师而言，用户界面的重要性高于一切。 简单的GUI很难获得，只有最具创意的设计师才能提出可行的解决方案。

但是，有许多免费而优质的资源可供您的Web设计人员进行测试。 这些GUI工具包主要是为Adobe Photoshop或Fireworks设计的，您可以在其中移动元素并将其导出为平面图像文件。

图标是非常方便的资源。 设计师正在创建免费布景，并比以往任何时候都更频繁地在线提供它们。 这样的一个网站Glyphish展示了免费和专业图标。 这些设计基于用于移动模板和应用程序设计的单个主题。

我们收集的移动设备原型模板将为您在网站和应用程序开发过程中提供极大的帮助。 在拥有强大的图形界面之前，您不应该开始编码，而这些Web工具包将使您从正确的道路入手。

翻译自: https://www.hongkiat.com/blog/designing-for-mobile-devices/