从零写移动着陆页一：创建简单移动着陆页
还有谁记得 1999 年代的互联网设计吗？只支持一半的标准，怪异的浏览器，完全没有标准分辨率，一半的用户还在使用56k的调制解调器。好吧，过去的美好时光又来了——移动浏览时代。浏览器分辨率从240x320到640x1136?收到。设计标准应该有效，但没有?收到。有限的带宽?收到。幸运的是，我第一次确实经历了这些。在本教程中，我将向你展示如何在充满尖石的移动设计水域中导航，使移动登录页面在你所关心的每一个设备上都有效——超越97%的竞争对手。我们要做的在本教程中，我将带你过一遍设计一个简单的移动着陆页的过程。本教程分为两个部分：第一部分，我们带你专注于为一个手机设计一个着陆页，但是采用的是智能响应设计以确保在其他设备不存在大的问题。第二部分，我们在 BrowserStack 上测试，确保你的着陆页在每一个你关心的设备上都正常显示。注意：这只是一个设计案例，而不是真实广告活动中的着陆页。它和我自己跑的着陆页类似，并且包含任何移动着陆页响应式设计的原则。你需要什么在这个教程中，你不需要太多的工具，因为我们会采用旧式页面写法，从零开始建构页面。移动设计对文件大小十分敏感，并且调整工作量很大，我不推荐太多工具来参与。你需要的是：一个可以上网的手机，大部分人应该都有。一个图片编辑工具。一个可以存放着陆页以供访问的网络空间。我在我的服务器上创建了一个新的文件夹“MobTest”。如果你确实没有手机用于本教程，你可以适用 Chrome 来模拟手机效果。听起来要做的很多是的，并且这是好事。我积极寻找联盟营销中看起来像艰苦的工作——因为大多数联盟客是懒惰的。任何走出英语营销领域的人都知道这一点——每当开展宣传活动变得困难时，竞争就会少很多。例如，这就是为什么优化你的服务器和加速你的着陆页这么有效的一个重要原因。这是一项艰难而复杂的工作，所以大多数联盟客会想“操，我要留下那100K的图片和那5个CSS文件，它们能造成多大的损害?”所以优化着陆页是一个巨大优势。在移动领域更是如此。如果你已经经历了痛苦，购买了BrowserStack订阅，并且为了让你的登陆页在所有手机上看起来都是正确的，那么你在竞争中就有了巨大的优势。他们的着陆页可能在一半的目标设备上都无法读取。为什么这一切有效？本教程关注的是“如何”而不是“为什么”。我将简单解释一些事情，但还有很多地方要讲，所以我们将重点放在启动着陆页并在这里运行。下次，我将写一篇关于为什么所有这些都是可行的，以及你如何在任何你喜欢的着陆页中使用设计原则的文章。请继续关注!第一部分：为单个手机准备着陆页首先，拿出你的手机，做好准备。由于在手机上网和电脑端体验完全不同，我强烈推荐你通过手机访问着陆页而不是电脑，至少在设计的初始阶段。巨大的可用性问题并不一定是显而易见的，除非你在预览时使用的是与你广告对象相同的界面。基础版着陆页我们将从Web登陆器的代码开始，然后让它在手机上工作创建一个名为“MobLander.html”或类似的页面，并粘贴以下代码：这是我用的图片：在你的浏览器访问这个页面，你可以看到一个丑爆了，但是能用的页面：为手机调整宽度然后，在手机上访问一样的页面。基本上它看起来很小。这是我们第一个要修复的东西，只要在 #head# 标签下面添加这个代码：提示：逗号很重要，你可能会看到有的网站是用分号，不要这么做。有些手机会出问题。上传页面，然后在手机上刷新页面，你可以看到文本可以阅读了，但是着陆页超出了手机屏幕。所以，我们要修复它。我们找到 style 标签，然后设置宽度为手机屏幕宽度——别这么做。因为我们要针对所有移动设备设计，而不是针对一个设备，移动设计要考虑所有屏幕尺寸。如果你直接写死像素宽度，那么后面就麻烦大了。我们的做法是，你要把所有的尺寸都用百分比表示，这样就会针对任何屏幕宽度去自动调整合适的值。这里，我们这条调整style 标签里的内容：上传，重新加载。现在，宽度正常了，但是图片太大了，并且超出了屏幕的边界。让你的图片 Fliud图片在移动设计是巨大的痛苦。我们下篇文章会讲解更多。通常而言，你的选择是让它们尽可能的小或者让它们看起来合适。我们目前采用最简单的方法，尽管会增加一些加载速度。在style中加入下面一行：再修改这一行：为：现在，图片会合适的显示在你的手机屏幕，并且其他移动浏览器也是一样！要想试试效果，将手机翻转到横屏——你会看到图像会自动调整大小。这种技术的缺点是，在屏幕较小的手机上，你将加载比你需要的更大的图像。现在，将图片调整到1080像素宽——这是大多数手机浏览器的标准尺寸——并使用标准的图像优化(例如，在Photoshop中保存为Web)尽可能地缩小尺寸。文本仍然有点问题，我们继续。优化文本我们已经进行了一些调整，但是文字现在看起来太大了。所以，是不是也要按照百分比调整？遗憾的是，文本设置不像基于浏览器窗口设置那样合理，相反，它们会调整为手机默认字体大小的百分比。这通常是为浏览非移动页面而优化的，有时简直是夸张。我们的第二阶段，也就是为所有手机设置页面的时候，会调整文本大小。我们现在能做的就是让它尽可能的合理，尽可能的容易改变。在style里再加一行：这为我们未来的变化提供了一个基本的准备。取决于你的手机，它可能会或不会改变文本大小。看看有编号列表。它容易阅读吗?如果容易，那就行了。如果太小，就把数字写大一点——14pt或16pt。如果它太大，就把数字变小。调整到满意位置。下一步我们需要给标题一个样式。标题目前看起来太……大了，还有”You are currently in debt……“这一行。这里我们不希望设置单独的大小，我们在后面会做更多调整，这里我们采用没多少人知道的 REM 方法。将文本字体设置为主要字体大小的倍数。添加到 style 里：然后刷新看看效果如何，调整数字直到你满意，并且着陆页能够基本完整的适合你的屏幕。调整你的文案现在是比较难的部分。移动着陆页设计最大的挑战之一非会员试读20%,加入社区后可阅读全文 前排支持下 为毛老子总也抢不到沙发？！！ 前排顶，很好！ 我只是路过，不发表意见 发发呆，回回帖，工作结束~ 佩服佩服！ 专业抢沙发的！哈哈 发发呆，回回帖，工作结束~ 学习下