互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 互联网知识

查看其它板块

网站写响应式好还是手机和PC端分开来写好？

作者：狐灵科技 | 2019-07-30 22:07 |点击：

手机和PC端分开来写，为了方便，下面简称为PC和移动分离。这个问题我们之前在另外一篇文章中讨论过，但是感觉还是不够全面，所以从另外一个角度（伪前端？）再来深入探讨一下。
 
在《打造高可用性的移动产品》一文中，作者提到过：“移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计。”
 
可见响应式与移动开发不是硬币的正反面。它们是为了解决同一个技术问题而被创造出来，它们是同一种技术思想的分支延伸。
 
既然无情的回到了原点，我们先来看看我们当初想要解决的问题：“屏幕尺寸越来越多，不同设备的交互特质也有着巨大的差别，我们希望我们的网站能够在移动手机、平板、桌面电脑，在键鼠、触摸、无障碍设备上都有优秀的用户体验。所以，我们需要网站的用户界面在不同的平台上有所不同。”
 
响应式设计 (Responsive Web design)方案
 
目前普遍的认知是，把主要依靠 CSS （主要是 Media Query，网格与Typography系统），辅以少量的JS，来对各种屏幕尺寸进行响应的做法，称之为响应式布局。
 
这种主要依靠CSS和少量JS的方案有很多优点，比如：
  • 设计风格和细节能被复用，大大降低了设计成本 - 美工开心
  • 前端只需要维护一套CSS代码 - 前端开心
  • 桌面端与移动端的设计十分接近，令用户感到“熟悉” - 用户开心？
  • 不需要任何服务器端的支持 - 后端开心
  • 与业务耦合程度低，复用程度高 - 后端开心
看起来就是，大家都开心，所以很多著名的开源项目（例如：Bitwebcms、Bootstrap、Foundation）都进行了跟进。
 
但有些地方也并不是那么完美的：
  • 功能需求复杂时，光靠响应式无法支持复杂的需求
  • 前端代码执行效率低（我们测试过，大概低3-5%）
  • 桌面端的交互和移动端的交互很难针对平台作出差异
 
 
假如你的网站（或者系统）在桌面和移动上的功能和用户体验几乎一致，就像大部分的企业站网站、博客和信息展示网站，或者活动、专题页等偏重信息传达而轻交互的网站，那么响应式绝对是最佳解决方案。
但是（永远有个但是），如果我们很有钱，也很有时间，想要做更多的移动端设计，比如减少信息层级、增强手势操作、让网页更接近一个应用程序？于是，为了更复杂的需求，为了我们的网站能更牛逼的匹配各个屏幕，聪明又勤劳的工程人员们又提出了这些解决方案：
 
RESS （Responsive Web Design with Server Side Components）翻译过来就是通过服务器端组件的响应式网页设计，简单的说，就是让服务器后台掺乎进来。RESS的赞同者大都认为基于前端的响应式方案只是一种妥协和不彻底的行为。有大神总结到：“ UI 只是在很被动的进行「调整」，而不能真正达到各个平台的最优。好的设计应该达到「这个设备该有的体验」（Device Experiences）。 ”服务器端的好处是服务器端为同一个URL动态的生成不同的内容：包括HTML，JS，CSS，甚至是字体和图片等资源。这样可以规避前端响应带来的执行效率低下和页面打开速度慢的问题。（我个人并不觉得太慢~）
 
 
有些人还在在 JS 中实现两套逻辑，分别兼容桌面和移动设备。通过 UA、特性检测在前端做设备判断，对资源进行异步加载，渲染不同模版，使用不同的业务逻辑，针对不同的平台加载不同的UI和业务模块等等……
 
 
那么现在，我们的网站可以更牛逼的 “响应” 各个平台了。然后悲剧发生了。您会发现，不怎么在乎成本的老板，也会向你开始抱怨太慢。后端、前端和美工慢慢的开始抱怨多了起来。大家又有了新的想法，我们为什么不干脆把移动网站和桌面网站分开到两个系统中？如果你的需求真的都到这一步了，你的移动网站已经不是一个普通的网站了，也应该可以被称作 WebApp了。把移动设备网站彻底分开也许真的非常适合你。如果开发资源足够充足，咱们还可以让专门的团队来维护专门移动端的网站。（嗯，事实上，不差钱的BAT 就是这么干的）
 
于是又一个昂贵的概念诞生了，独立的移动版网站。不过，它真是那么独立么？至少，是和桌面版用的同一个根域名吧。多数情况下，这个时候会需要使用到独立的二级域名。那么问题来了，难道我们要让所有用户在计算机上自觉访问 http://taobao.com ，然后手机上都自觉访问 http://m.taobao.com？所以，我们还是要根据访问设备做一次 “响应”（设备检测），然后进行 URL 重定向，才能将不同设备的用户带到那个为他们准备精心的那个网站。所以从根本上说，手机和PC端分开来写，只是响应式设计的一种再次的发展和延伸罢了。他们的界限没有某些响应式技术的黑粉眼中那么清晰，其实也不需要那么清晰。
 
如果不能兼顾两种平台的主要差别，就不是好的办法，无论是响应式还是PC和移动分离。
 
这不是一个二选一的问题，而是一个平衡度选择
如没特殊注明，文章均为狐灵科技原创,转载请注明   "网站写响应式好还是手机和PC端分开来写好？
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

响应式好不好 为什么一些大公司没用响应式

下一篇———————

bootstrap响应式设计visible-sm、hidden-xs等的使用
多一份免费策划方案，总有益处。

请直接添加技术总监微信联系咨询

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信