以手机为重点建设网站

今天，更常见的是找到一个熟练的网络技术人员，他了解通过移动设备提供的桌面支持。这似乎是数十年来在桌面浏览器上与其他屏幕形成对比的一个症状。然而，有越来越多的案例表明，移动开发是新时代网站的最佳起点。

在本文中，我想讨论这个论点中的几个关键点。也就是说，首先从移动设备开始，可以让你深入了解设计布局如何在更大的屏幕上展开。优先考虑手机并不总是最好的解决方案，但在今天的互联网上，智能手机的使用似乎正在以惊人的速度增长。任何真正对构建语义布局感兴趣的网页设计师都会首先想到为移动设备编码网站。

简化所有页面元素

当我第一次开始研究移动网络时，我经常迷失在CSS媒体查询和JavaScript插件的海洋中。不幸的是，如果没有基础，这些工具就没有多大帮助。你必须从基本了解为什么要为移动设备设计开始，然后慢慢融入这些想法。

一个可靠的方法是考虑将您的网站限制为仅包含关键元素。当你可以将一个设计思想剥离成基本要素时，在移动屏幕上构建的过程就更加容易了。但是为什么你想从移动领域开始呢？

好的，它允许您以更清晰的角度看待每个项目的目标和用户目标。你必须扪心自问，我希望我的用户做什么？我的用户想要做什么

如果你能在移动设备上整合这样的布局，那么将更容易过渡到桌面环境。有一个古老的概念，对你的设计工作加以限制实际上会帮助你实现一个更狭隘的关注点。我绝对觉得这对手机网页设计来说是正确的，这让我们更有理由优先考虑智能手机。

了解用户需求

访客的要求会因人而异。无论你是在做个人项目还是在做自由职业者，花点时间思考网站上的活动都是至关重要的。

访问者大多是通过谷歌搜索或社交媒体进入网站的吗？想想布局中最流行的功能是什么（搜索、页面导航、登录/注销）。

有了这些想法，你可以准备一个更加互补的移动网页设计。优先考虑这一点意味着你在进入桌面web开发时会有一些知识。考虑到网站是为用户体验而建的，你应该花尽可能多的时间来规划这些功能。在纯HTML中测试运行几个不同的布局想法，看看它们在移动浏览器中的感受。

平板电脑

如果没有平板电脑，讨论移动网络是不完整的。iPad 3的新发布只会增加希望转型的用户的炒作。在笔记本电脑上浏览网站可能与在触摸屏设备上浏览网站有很大不同。

然而，很明显，大多数平板电脑并没有像手机一样的局限性。iPad 2的屏幕分辨率最多限制为1024×768，可以很好地显示现代布局。如果您选择关注所有移动设备，则需要提前计划每个分辨率设置。

我建议从尽可能小的屏幕尺寸开始，逐步增大。这可以通过CSS3媒体查询来实现，包括基于设备宽度的不同样式表。然而，也可以选择构建具有响应能力的单一布局。

编码响应布局

支持所有移动设备的最简单解决方案可能是构建具有响应特性的布局。这意味着整个网站和内部内容将重新形成，以适应特定的屏幕分辨率-即使用户调整其浏览器窗口的大小。

如果我们把重点放在移动设计上，那么建立一个响应迅速的网站就很有意义。您不需要为不同的设备包含特定的样式表，因为相同的HTML标记适用于所有屏幕。这也为首先从移动设备开始提供了完美的理由。一旦您知道您的布局在移动屏幕中正确呈现，修复与桌面浏览器相关的错误就更简单了。

进入这个话题的最好方法是看类似的例子。您必须了解响应性网站在手机和桌面上的表现，以及如何编写这些功能。我强烈推荐我们的40个响应式网站库，让你走上正确的道路。

切换导航

典型的桌面浏览器甚至平板电脑可能支持更复杂的链接层次结构。您可以使用jQuery通过下拉菜单或滑动效果来增强导航。如果你在屏幕上有互动的空间，这一切都很好。

然而，触摸屏设备不支持鼠标，更糟糕的是，很难将jQuery菜单移植到手机上。无论您是在构建响应式布局，还是在编写单独的移动布局，这两种方式都需要一些技巧来移动页面导航。但是要理解导航链接的位置没有“正确”或“错误”。

我发现将页面的构建块部分级联是最简单的解决方案。如果需要，您甚至可以使用简单的jQuery效果滑动打开隐藏的子菜单。请记住，没有太多的链接空间，因此您必须坚持使用导航中最流行的根项目。

或者，您可以将所有这些链接推到页面底部，并包括散列锚点，例如btmnav。一旦网站加载，这将减少布局顶部的空间。但如果游客不知道在哪里可以找到导航项目，这可能会让人困惑。

处理图像内容

在手机屏幕上使用页面内媒体可能是最难的。如果你正在考虑先为移动设备建造，那么很难估计你的照片应该有多大。

使用CSS属性最大宽度：100%可以将所有图像设置为收缩并扩展到最大点。这是在手机屏幕上回应用户的最佳方式，同时也支持桌面上的全尺寸图像。最棒的是，所有形式的媒体（包括HTML5视频）也将支持这一特性。

现在，另一种解决方案是构建一组面向移动屏幕的图像，另一组用于标准显示。这更为棘手，因为你需要支持Android和iOS设备，而iPhone还需要两倍于标准分辨率的视网膜图像。要了解更多关于这种方法的信息，请参阅本·弗雷恩（BenFrain）关于如何为视网膜显示器提供高分辨率图像的文章。

结论

从一开始就有很多理由关注移动网络开发。这是一个长期以来被广泛忽视的技术领域。谢天谢地，移动网络浏览的进步迫使设计师考虑这种不断增长的屏幕媒体形式。如果您有类似的想法，可以先在讨论区与我们分享。

来源：https://speckyboy.com/building-websites-with-a-priority-for-mobile/