移动端优先的弊端【译】—— Tapha Ngum

1,089 阅读10分钟

虽然我是可以理解移动端优先开发背后的思想,但它总让我感到不舒服。

移动端优先是在开发桌面版的网页之前先开发它移动端版本,从理论上来说,它是一个非常棒的想法。

但在实际中就会出现很多问题。

在无数的开发者故事中,他们在听说了移动端优先方法(甚至学习如何布局)之后,但最终还是回到了桌面优先的开发方式。

根据Kelvin Powell(一个牛逼的前端教育者)开展的一项调查显示,大多数(61.5%)的开发者更喜欢桌面端优先的开发方式。

(该调查是在移动端优先方法被拥护近8年之后所得出的结论)

这种观点我也在许多围绕着网页响应式布局的留言板和在线讨论中经常看到。

有趣的是尽管有明确的证据表示大多数开发者们根本就不想用移动优先的方法来布局网站,但这个方法仍然作为首选方法。

让我们来探究一下为何如此。

为何移动端优先经常被拥护

移动端优先经常被吹捧为响应式开发最棒的方式,主要原因有两个。

1、在各种屏幕分辨率下能有更好的用户体验

第一个优点就是它为不同屏幕的分辨率提供更好的用户体验,因为它对大屏和小屏都进行了最佳的优化。理由是它通过只关注布局中最重要的元素,使之可以适应更小的屏幕尺寸。而且这种方法关注“渐进增强”。

但这样做的问题在于它根本经不起考验。移动端优先的方式最终会导致整个网站缺乏创意。大多移动端网页(以及它们做出的桌面端)最后都看起来和其他网页如出一辙。

我们很快可以知道为什么会这样(文章开头的那张图可以给你个参考)

2、更容易维护(也更容易写)CSS

移动端优先经常被认为是开发响应式网站的最佳方式的第二个原因,就是在大多数网站,“默认”的CSS样式(也就是那些写在媒介查询范围之外的样式)通常是针对更小的移动设备屏幕尺寸的。

一个响应式网站典型的CSS文件排列如下:

因为一个响应式网站典型的CSS工作流是在事后添加相关的媒介查询的样式(因为媒介查询应该写在CSS的最下方,就像上文提到的那样),从你的默认样式,也就是移动端的样式开始写,看起来似乎更合理。

同样我们也可以发现为什么这样是不对的。

让我们一起来深入探究,尽管这两个像样的论据支持使用移动端优先方法去开发响应式网站,但却不是最佳实现方式的关键原因。

为何移动端优先理论上很优秀,实践中却很糟糕

你正在为次优体验进行优化

移动端体验是次优的。这不是值得争论的一个观点。整体来说移动端版本的意义在于提供一个更小的,但仍具有桌面版的一些最佳有效的体验。

问题在于优化移动端体验,并没有使整体的体验达到最优,它只是提升了次优体验。从开始对移动端体验的妥协最终都作用在了桌面端上。

移动端优先使桌面端体验下降

在大多数情况下,桌面端页面是‘真实的’,大多数客户希望先看到桌面端页面。

桌面端优先注重于布局的问题,这是人们真正关心的,而移动端优先更注重的是CSS的维护问题,这只是开发者干的。

比起先着手于次优体验的优化(利于开发者),不如从整体上优化最佳的体验(利于用户),然后在进行优雅降级。

这是一种不自然的布局方式

因为从根本上来说,布局是一个直观的过程,任何需要你不得不“克服自己”的布局方法可能都是个坏主意。布局基本上是一个引导用户的过程,基于这个引导开发出一个界面,这才是顺理成章的。

为了使之有效,场景是关键,要能够最大限度的利用用户拥有的体验区域,给予更大的“表面积”,适当的满足场景和引导用户。

为此,最好从最大的场景开始开发。

比如,一场职业运动比赛。哪个能够给你提供最‘饱满’,更完整的体验?

是真实的,‘更大的’,更自然地现场比赛:

还是在电视上看?

这两种情况下,应该先优化哪个才能实现最佳的效果?

桌面端体验中包含了移动端场景中的基本信息,而移动端不一定具备桌面端的所有功能。

这就是为什么桌面端优先对于大多数开发者来说更加自然。这对于浏览网站来说,这是个足够的约束,且不会太过分。

给被移动端优先扼杀的创造力留下理想的空间。

移动端优先扼杀创造力

使用移动优先,有太多未解决的问题。

这些本来应该在桌面端解决的问题,但最终还是没能解决。

在桌面端,面临的挑战总是更大的,需要更多的创造力去解决这些挑战。因为你在小屏幕所需要解决的问题,仅仅是大屏幕的分形(或叫子集),所以最好先在大屏幕解决这些问题,这使得在随后的小屏幕和移动端布局上的问题变得更容易解决。

使用移动端优先方法,你可能会落入一个陷阱,那就是过于专注于页面的子集以至于人们无法了解页面的精髓。这个精髓就是大屏幕布局问题最原始的答案。

要想得到这种精髓,你就要像酿酒一样,必须把葡萄按比例压碎,然后逐渐经过蒸馏过程,最终酿成葡萄酒。想要移动端页面成为网站的核心,最好还是从桌面版开始,然后逐渐过滤或者缩小。

移动端优先使布局更加的公式化

因为移动端优先方法的约束程度以及这个方法导致的缺乏创造空间,开发者自然会寻找他们可以遵循的、经过验证的、准确的模板。

这不是一件坏事,因为在一定程度上我们都从这之中得到灵感。但问题在于,就像我们看到类似Bootstrap那种框架,太过于公式化的方法往往会导致一定程度上的雷同,使人们逐渐对此感到无趣。

移动端优先可能是导致我们看到的网站越来越雷同的原因之一。

这就导致了我们的网页活跃度全面的减少了。人们不容易被页面所以吸引,就跳出这些网站了。

想象一下90年代末,20世纪初的那些古怪而有无尽乐趣的网站,比如我们在GeoCities和Angelfire看到的那些网站,在考虑移动端优先的话,你觉得他们还能有现在这样的独特性吗?我持怀疑态度。

可选择的方法(桌面端优先)

我们要做的思想转变并不是从桌面端优先到移动端优先。

这也不仅仅是压缩桌面端的东西。

正确的思想应该是:一旦我们有一个桌面端的版本,为了使移动端仍具有和桌面端一样丰富的信息和体验,我们需要做出什么样的调整、重新排列或删除。

我们应该探究我们如何使移动端的体验和桌面端的体验一样好。

我们应该探究我们的桌面端页面要实现些什么,以及在更小的屏幕(即使只有一点点大)上如何实现与之相同的体验。

我们开发网站的方式应该从桌面端开始,然后按相同的感觉来进行缩小,先解决大的布局问题,再去解决小的。

我们应该从CSS文件底部开始我们的页面布局进程,使用桌面大小的媒介查询,而不是一开始以移动端来写全局的样式。

毕竟,一旦我们解决了桌面级最大的布局问题,在绝对小的屏幕尺寸下,我们可以使用更多的媒介查询(小屏幕的情况下)和默认的全局样式来缩小(增加代码)布局。把非必须的全部去除了。

终究还是感觉这是最自然的方法。

翻译后记

在阮一峰的网络日志中无意的看到了这篇文章,阅读之后发现原来响应式布局是有两种理念的,即文中提到的两种开发模式,一种是桌面端优先,一种是移动端优先。前者是全局写的桌面端布局,在媒介查询中写移动端布局,后者反之。响应式布局在我工作的两个公司里我用的都是桌面端优先,在全局写移动端样式然后在媒介查询写桌面端是闻所未闻,看的时候一度以为作者是不是写错了。。立刻去谷歌了一下发现确实有这种概念,从文中得知移动端优先竟已经被拥护了八年之久,看来知识面还是狭窄了。在如今注重业务逻辑开发的同时还是不要抛下看似简单其实也很重要的CSS,毕竟这是组成前端的重要部分。

首先感谢百度翻译,帮我理解了很多陌生的词语。其次就是老外的各种从句特别难翻译,虽然大体懂得他在说些什么,但是要用中文准确的表达感觉就要绕一大圈。另外一个让我痛苦的就是一些词语的翻译,比如context,要是直接参考百度翻译那就是上下文、语境,跟css感觉没半毛钱关系,但是用场景一词取代就感觉会稍微贴切一点。再比如,answer question 我把它翻译成解决问题,不然在布局问什么问题呢。。还有design直译也是设计的意思,但是文中我都是翻译成了布局。个人理解,欢迎指正。总之,确实不简单。

至于为什么要翻译。也是我突然一时兴起,毕竟想学好一门外语,最好的方式就是多用,多按这种外语的方法去思考问题,之所以选择翻译css相关的也是看它相对于其他的课题来说相对简单一点。收获良多

原文链接(翻墙才能看)

Mobile-First (and why it's a bad idea)