自贡企业网站移动端适配与响应式设计实践指南

自贡富顺县有一家做农产品电商的公司叫蜀农优选他们的网站是三年前做的当时只考虑了电脑端的展示完全没有做移动端适配这两年手机购物的比例越来越高已经占到他们流量的百分之七十多了但是手机上打开他们的网站字很小要点来点去才能看清图片也排版混乱体验非常差运营的小刘跟我抱怨说好多客户反馈手机上不好用估计流失了不少订单。

为什么移动端适配这么重要

现在的数据表明中国互联网用户中有超过百分之九十五的人是通过手机上网的自贡也不例外你在街上看看大部分人都是低头族用手机查东西购物看资讯。如果你的网站在手机上体验不好那意味着你可能失去了绝大部分潜在访客这不仅仅是用户体验的问题更是直接的业务损失。搜索引擎也早就推出了移动优先索引也就是说Google和百度主要是用移动版的网页来做索引和排名的如果你的网站没有移动端版本或者移动端体验很差那你的搜索排名就会受影响。还有一点就是现在很多自贡的企业在做推广的时候投放的信息流广告朋友圈广告大部分流量都是来自手机端如果落地页在手机上体验不好那你投的广告费就白花了。

移动端适配有几种常见的方式第一种是单独做一个手机版网站比如m.example.com这种方式需要维护两套代码成本高而且容易出不一致的问题现在已经不太推荐了。第二种是用响应式设计也就是同一套HTML通过CSS媒体查询来适配不同屏幕宽度这是目前最主流的做法优点是只需维护一套代码缺点是对老的复杂网站改造起来工作量不小。第三种是用动态 serving 的方式服务端判断设备类型返回不同的HTML这种方式灵活但对服务器端开发能力有要求。对于自贡的大多数企业网站我强烈推荐用响应式设计方案不管是新网站还是老网站改造这都是最划算的选择。

响应式设计的具体实现方法

响应式设计的核心是CSS的Media Query也就是媒体查询你可以针对不同的屏幕宽度设置不同的样式规则。

图片也要做响应式处理用srcset属性或者picture标签让不同宽度的屏幕加载不同尺寸的图片手机端加载小图节省流量PC端加载大图保证清晰度。字体大小也要用相对单位或者媒体查询来调整手机上正文一般设为16px以上太小了用户看着费劲。导航菜单在手机上通常要改成汉堡菜单就是那个三条横线的图标点击之后展开菜单列表这个可以用CSS或者少量的JavaScript来实现。表格在手机上是个难题因为屏幕窄了表格放不下解决方案是横向滚动或者把表格改成卡片式布局在小屏幕上每一行显示为一个卡片。小刘按照这套方法把蜀农优选的网站改成了响应式的设计手机端的转化率提升了将近百分之四十他说早知道效果这么好应该早点改的。

总结

总之移动端适配已经不是可选项而是必选项了现在的互联网就是移动互联网你的网站必须在手机上有好的体验。自贡的企业主们赶紧检查一下你们的网站在手机上是什么样子如果不好看不好用尽快找人改过来这个投入绝对值得。