从零写移动着陆页一：创建简单移动着陆页

ttyml

还有谁记得 1999 年代的互联网设计吗？
只支持一半的标准，怪异的浏览器，完全没有标准分辨率，一半的用户还在使用56k的调制解调器。

好吧，过去的美好时光又来了——移动浏览时代。

浏览器分辨率从240x320到640x1136?收到。

设计标准应该有效，但没有?收到。

有限的带宽?收到。

幸运的是，我第一次确实经历了这些。

在本教程中，我将向你展示如何在充满尖石的移动设计水域中导航，使移动登录页面在你所关心的每一个设备上都有效——超越97%的竞争对手。

我们要做的

在本教程中，我将带你过一遍设计一个简单的移动着陆页的过程。

本教程分为两个部分：

第一部分，我们带你专注于为一个手机设计一个着陆页，但是采用的是智能响应设计以确保在其他设备不存在大的问题。

第二部分，我们在 BrowserStack 上测试，确保你的着陆页在每一个你关心的设备上都正常显示。

注意：这只是一个设计案例，而不是真实广告活动中的着陆页。它和我自己跑的着陆页类似，并且包含任何移动着陆页响应式设计的原则。

你需要什么

在这个教程中，你不需要太多的工具，因为我们会采用旧式页面写法，从零开始建构页面。

移动设计对文件大小十分敏感，并且调整工作量很大，我不推荐太多工具来参与。

你需要的是：

一个可以上网的手机，大部分人应该都有。

一个图片编辑工具。

一个可以存放着陆页以供访问的网络空间。我在我的服务器上创建了一个新的文件夹“MobTest”。

如果你确实没有手机用于本教程，你可以适用 Chrome 来模拟手机效果。

听起来要做的很多

是的，并且这是好事。

我积极寻找联盟营销中看起来像艰苦的工作——因为大多数联盟客是懒惰的。任何走出英语营销领域的人都知道这一点——每当开展宣传活动变得困难时，竞争就会少很多。

例如，这就是为什么优化你的服务器和加速你的着陆页这么有效的一个重要原因。这是一项艰难而复杂的工作，所以大多数联盟客会想“操，我要留下那100K的图片和那5个CSS文件，它们能造成多大的损害?”

所以优化着陆页是一个巨大优势。

在移动领域更是如此。如果你已经经历了痛苦，购买了BrowserStack订阅，并且为了让你的登陆页在所有手机上看起来都是正确的，那么你在竞争中就有了巨大的优势。他们的着陆页可能在一半的目标设备上都无法读取。

为什么这一切有效？

本教程关注的是“如何”而不是“为什么”。我将简单解释一些事情，但还有很多地方要讲，所以我们将重点放在启动着陆页并在这里运行。

下次，我将写一篇关于为什么所有这些都是可行的，以及你如何在任何你喜欢的着陆页中使用设计原则的文章。请继续关注!

第一部分：为单个手机准备着陆页

首先，拿出你的手机，做好准备。

由于在手机上网和电脑端体验完全不同，我强烈推荐你通过手机访问着陆页而不是电脑，至少在设计的初始阶段。巨大的可用性问题并不一定是显而易见的，除非你在预览时使用的是与你广告对象相同的界面。

基础版着陆页

我们将从Web登陆器的代码开始，然后让它在手机上工作

创建一个名为“MobLander.html”或类似的页面，并粘贴以下代码：

这是我用的图片：

在你的浏览器访问这个页面，你可以看到一个丑爆了，但是能用的页面：

为手机调整宽度

然后，在手机上访问一样的页面。

基本上它看起来很小。这是我们第一个要修复的东西，只要在 #head# 标签下面添加这个代码：

提示：逗号很重要，你可能会看到有的网站是用分号，不要这么做。有些手机会出问题。

上传页面，然后在手机上刷新页面，你可以看到文本可以阅读了，但是着陆页超出了手机屏幕。

所以，我们要修复它。我们找到 style 标签，然后设置宽度为手机屏幕宽度——别这么做。

因为我们要针对所有移动设备设计，而不是针对一个设备，移动设计要考虑所有屏幕尺寸。如果你直接写死像素宽度，那么后面就麻烦大了。

我们的做法是，你要把所有的尺寸都用百分比表示，这样就会针对任何屏幕宽度去自动调整合适的值。

这里，我们这条调整style 标签里的内容：

上传，重新加载。现在，宽度正常了，但是图片太大了，并且超出了屏幕的边界。

让你的图片 Fliud

图片在移动设计是巨大的痛苦。我们下篇文章会讲解更多。通常而言，你的选择是让它们尽可能的小或者让它们看起来合适。

我们目前采用最简单的方法，尽管会增加一些加载速度。在style中加入下面一行：

再修改这一行：

为：

现在，图片会合适的显示在你的手机屏幕，并且其他移动浏览器也是一样！要想试试效果，将手机翻转到横屏——你会看到图像会自动调整大小。

这种技术的缺点是，在屏幕较小的手机上，你将加载比你需要的更大的图像。现在，将图片调整到1080像素宽——这是大多数手机浏览器的标准尺寸——并使用标准的图像优化(例如，在Photoshop中保存为Web)尽可能地缩小尺寸。

文本仍然有点问题，我们继续。

优化文本

我们已经进行了一些调整，但是文字现在看起来太大了。所以，是不是也要按照百分比调整？

遗憾的是，文本设置不像基于浏览器窗口设置

加入社区,可阅读全站10w+资源

您尚未登录，请登录后操作

 非会员试读19%,加入社区后可阅读全文