现在企业网站建设基本都会考虑手机访问，但不少项目对“响应式”的理解仍然停留在一个很简单的层面：电脑页面做好以后，让程序自动适应手机宽度，图片缩小、文字换行、三列变成一列，就算完成了移动端。技术上这种页面确实能够在手机上打开，实际使用时却经常出现另一种情况：页面没有变形，但客户需要连续滑动很久；电脑端一眼能看懂的产品结构，到了手机上变成十几屏内容；复杂表格几乎无法阅读；重要咨询入口被挤到页面最下面；首页动画很多，却让手机打开速度明显下降。
响应式网站真正要解决的不是“页面能不能缩到手机屏幕里”，而是企业原来的内容到了更小的屏幕以后，什么应该优先出现、什么应该简化、什么交互必须重新设计。 对企业官网来说，手机端和电脑端可以使用同一套内容与后台，但不应该机械使用完全相同的阅读方式。
一、电脑端的信息顺序到了手机上，经常需要重新判断
电脑屏幕宽，一屏可以同时出现标题、图片、产品、参数和按钮，客户能够快速扫视多个区域。手机屏幕则完全不同，同一时间真正能够看到的信息很少，所有内容基本都要按照从上到下的顺序依次阅读。
这意味着电脑端“左右布局”到了手机端以后，不能只考虑谁在上、谁在下，还要判断哪部分内容对客户更重要。
例如企业首页电脑端左侧是大幅产品图片，右侧是企业核心业务和咨询按钮，视觉上没有问题；到了手机端，如果程序默认按照代码顺序先显示一整张大图，再出现业务介绍，客户打开网站以后第一屏可能只有图片，看不到企业究竟做什么。图片并没有错，但信息优先级已经发生变化。
产品详情页更加明显。电脑端左边产品图片，右边型号、参数和咨询按钮，下方再放产品介绍；手机端如果连续排列五六张产品大图，客户可能滑动很久才能看到真正关心的参数。更合理的方式往往是保留一张主图或者简单图片浏览，把产品名称、核心参数、适用场景和咨询入口尽量提前。
企业做响应式官网时，可以把每个核心页面都问一遍：
如果用户只能在手机第一屏看到三四条信息，最应该让他先看到什么？
这个问题比“字体缩成多少像素”重要得多。
对于企业官网，手机端通常更应该优先保证企业身份、核心业务、产品方向、关键参数、案例证明以及下一步入口的清晰度。发展历程、详细荣誉、长篇企业文化等内容仍然可以保留，但没有必要全部占据最前面的阅读位置。
二、导航、产品分类和复杂表格，是手机端最容易暴露问题的三个地方
很多企业网站在电脑上有完整的多级导航：产品中心下面七八个系列，每个系列继续分二三级栏目。鼠标移动以后可以快速展开，在电脑上使用尚可；手机没有鼠标悬停，如果只是把整个菜单原样塞进一个折叠按钮里，用户打开导航以后可能面对几十个链接。
所以产品数量较多的网站，手机导航不能只完成“折叠”，还要考虑是否需要减少一级菜单、分步进入产品分类、增加明显的返回路径或者把最常访问的产品系列放在更前面。
产品筛选也是一样。电脑可以同时展示左侧分类、顶部参数、右侧产品列表，手机没有这么大的横向空间。如果企业有上百个型号，参数筛选最好做成独立展开层或者筛选按钮，让用户在需要时打开，而不是把十几个筛选条件全部堆在产品列表之前。
第三个经常出问题的是表格。
制造业、科技企业官网经常存在大量产品参数。电脑端一张六七列的表格可以完整显示，手机屏幕上却根本放不下。如果只是让用户左右拖动， technically 能看，但体验通常很差。
这时候应该根据实际数据重新判断展示方式。
一些关键参数可以改成“参数名称 + 参数值”的纵向结构；多个型号需要横向比较时，可以保留真正影响选型的少数参数，把完整技术表作为资料下载；非常复杂的数据表则可以允许横向滑动，但要明确提示用户，并固定关键列。
响应式设计不是要求所有设备显示完全相同的视觉布局，而是保证相同的信息在不同设备上都能被有效理解和使用。
三、手机端最值得重新设计的往往是“行动入口”
企业官网最终通常希望客户继续完成某个动作：咨询产品、拨打电话、提交需求、查看地址、下载资料或者进入微信小程序。
电脑用户有鼠标、键盘，可以同时打开多个页面；手机用户的行为更直接，看到感兴趣的内容以后往往希望马上操作。如果联系方式仍然只放在网站最底部，用户看完一个产品以后必须返回顶部或者滑动几屏才能找到电话，体验就会明显下降。
因此企业网站手机端可以根据业务特点设计更加直接的行动入口。例如产品详情页在重要信息之后直接提供“业务咨询”“查看相关案例”“下载资料”；服务型企业可以提供电话或需求表单；线下企业可以增加地址和地图入口。
但移动端按钮也不能越多越好。
有的网站手机底部同时固定“电话、微信、在线咨询、留言、返回顶部、QQ”六七个按钮，占据大量屏幕空间，真正内容反而被挡住。企业应该根据客户最常使用的沟通方式保留一两个主要入口，而不是把所有联系方式全部做成悬浮按钮。
如果企业同时经营微信小程序，手机端网站还可以根据业务关系提供合理入口。例如官网负责产品、方案、案例和专业内容，当客户需要预约、会员服务、产品查询、售后工单或者具体业务操作时，再进入微信小程序。这样官网和小程序各自承担不同任务，不需要把所有小程序功能重新塞进网站页面。
南京安优网络科技有限公司同时提供企业网站建设与微信小程序定制开发，在项目规划中会根据企业实际业务判断官网和小程序分别承担哪些功能，避免两个平台重复建设。
四、响应式网站还要考虑图片、动画和加载速度，而不仅是视觉适配
企业官网越来越重视视觉效果，大图、视频背景、动画和高清案例确实能够提高品牌表现，但电脑宽带环境下看起来流畅的页面，到了手机网络环境未必仍然合适。
例如首页首屏使用几十兆的视频背景，办公室电脑连接高速网络时几乎感觉不到问题，但客户在移动网络下第一次访问，可能先看到几秒空白。一个产品详情一次加载二十张高清原图，也会让手机流量和打开时间明显增加。
因此响应式网站通常还应该进行资源层面的优化，而不是同一张图片无论什么设备都原样加载。
根据项目情况，可以使用适合网页展示的图片尺寸、延迟加载非首屏图片、控制首页动画数量、减少没有实际价值的大型脚本，并合理处理视频内容。移动端并不代表所有效果都要取消，但每一个效果都应该判断它是否真的帮助客户理解企业，而不是单纯增加页面重量。
还有一个容易被忽略的问题是图片里的文字。
有些企业Banner所有标题和产品介绍都直接做在一张图片中。电脑端图片足够大，文字可以阅读；到了手机端整张图片缩小以后，图片里面的文字也一起变小，即使页面本身“响应式”，内容仍然无法阅读。
更合理的方式通常是让重要标题和说明使用网页文字，通过CSS控制不同屏幕下的字号、行距和位置，图片主要承担视觉作用。这样不仅更适合不同设备，也更方便企业以后修改内容。
五、判断一个响应式网站做得好不好，最好用真实任务测试
网站开发完成以后，不要只让设计师和程序员检查“有没有错位”。
企业可以直接拿几种真实任务测试手机端：
第一次进入网站，十秒内能不能知道企业是做什么的；
能不能快速找到某一类产品；
进入产品详情以后，核心参数是否容易看到；
能不能找到对应案例和解决方案；
联系电话是否可以直接拨打；
提交表单时字段是否过多；
复杂内容是否需要频繁左右缩放；
菜单展开以后能不能快速返回上一层；
页面加载过程中是否出现明显等待；
客户看完一个页面以后是否知道下一步去哪里。
如果这些任务能够顺利完成，响应式设计才真正发挥作用。
南京安优网络科技有限公司成立于2012年，累计服务2000+企业，提供南京企业网站建设、网站改版及微信小程序定制开发服务。在企业官网项目中，移动端适配不仅包括页面宽度调整，还需要结合企业内容结构重新考虑导航、产品展示、参数阅读、图片资源、咨询入口和后台内容维护方式，定制开发项目支持100%源代码交付。
企业网站的手机端不是电脑网站的缩小版。
电脑端解决的是如何在更大的空间里高效组织信息，手机端解决的则是如何在有限屏幕里让客户先看到最重要的内容，并尽可能少走弯路完成下一步操作。
一个真正成熟的响应式网站，不应该让客户意识到“这是手机版网站”，而应该让他无论从电脑还是手机进入，都能够自然地找到自己需要的信息。
上一篇：南京企业官网首页到底应该放什么？先解决客户的5个判断，再考虑页面效果
下一篇：没有了