10年网站建设优化实战经验
18217721733

从这5个点判断建站公司的网站案例做得好不好

上海知九信息 网站策划 SEO 响应式网站 浏览器兼容 前端性能 2020-07-30

网络上很多关于“怎么选择一个靠谱的网站建设公司”的回答都提到“看他们的网站建设案例”。但现实是,一个非专业人员并不具备评价网站建设水平的知识储备。网站做得好不好不等价于网站做得漂不漂亮,本文将带你从5大方面去判断一个目标网站的真实水平如何。

一、网站的策划和设计

好网站始于好的方案,需要经过精心的策划和设计。此处的设计并非视觉上的设计,而是网站结构设计、操作流程设计、营销思路设计、数据逻辑设计、页面布局设计等。这些是一个好网站最重要的属性,它们在根源上影响着网站的流量获取能力、用户使用体验和成交转化能力。下面挑选其中2点,针对企业官网类型做具体说明:

1、页面布局设计

页面布局需要考虑:主要信息展示、站内导航、操作互动方式、产品宣传引导、内容聚焦/延伸等,融入操作流程和营销思路。

很多网站的页面布局只体现了主要信息展示和站内导航,一种典型的结构是(如下图所示):顶部主导航+通用banner图+左侧二级栏目导航+右侧图文信息区+底部公司信息及备案,除首页外的所有页面都使用这个模板,有的连banner图都不换。这样的网站基本没有开展策划和设计工作,也不能算一个好网站。

网页布局负面案例

2、数据逻辑设计

数据逻辑表现为:满足什么条件、展示哪些数据、怎么展现数据。举几个例子:

  • 首页的新闻、资讯模块展示哪些新闻资讯?是最新的、总关注最高的、还是近期关注比较高的,抑或千人千面(基于用户标签)不同的用户展示不同的资讯?
  • 案例栏目是否需要支持条件筛选,以帮助用户快速找到贴合自身使用场景的案例,提高对用户决策的干预能力?支持哪些维度的条件筛选,筛选出的数据如何排序?
  • 新闻资讯页推荐哪些相似内容或延伸内容能够命中用户的兴趣或潜在需求,从而降低跳出率;这些页面获取到的自然流量推送哪个产品的宣传或活动,能够提高转化率?
  • 搜索功能是查询词模糊搜索还是需要分词后模糊搜索(如:搜索“装修注意事项”,标题为“新房装修水电施工注意事项”的内容A不能模糊匹配,将“装修注意事项”分为“装修、注意事项”两个词,内容A就能命中模糊匹配),结果怎么排序,无结果、结果偏少给出什么提示或引导?

小结:以一个用户的身份,好好去建站公司的案例网站中体验一番,感受它在策划和设计上做得如何,很快就能对其网站做得好不好有个初步但重要的判断。

二、网站UI设计

UI设计意为用户界面设计,其涉及视觉设计和页面编程两个方面。判断一个网站界面设计好不好有以下几个重点。

1、页面视觉体验

这是一个仁者见仁、智者见智的问题,但起码要做到文字大小适中、图片清晰美观、背景色和前景色对比度高(对比度低容易看不清内容)、精美的排版设置(尤其资讯文章页面,很容易忽视)、模块间合理的间距留白、以及自然不生硬的动画效果。如下图为某网站资讯页面的反面案例,其页面设计根本没考虑内容的排版,与本文的页面排版对比下即可感受到它的粗糙了。

网页内容排版负面案例

2、多设备响应和跨浏览器兼容

用户的设备是各种各样的PC、平板、手机,它们拥有各种不同的分辨率。网站能否在这些不同的设备上响应良好,不产生错乱、堆叠和图/文过大过小等情况,对用户体验影响巨大。

跨浏览器兼容也是比较重要的一点,因为新的编程技术标准可以更好更简单的实现各种效果、动画、交互,处理在各种设备上的响应适应,但任有少数人使用的老旧浏览器并不支持这些新的技术标准,因而可能产生未知的错误。

鉴于你可能缺乏相关知识和设备工具,我们整理了一些线上工具和技巧,免安装易操作,详见:http://www.web315.net/baike/67.html

3、使用代码来布局样式

为何要说这一点?因为有的网站建设公司直接将设计的图片大块大块的嵌入在网页中,代替了代码编程实现布局,省去了大量工作。这会造成网页总资源较大打开缓慢、多种尺寸屏幕下模糊失真、以及搜索引擎无法提取文字内容的后果。

怎么去识别这种情况呢,用鼠标去点选文字内容,不能被选中的基本上就是用图片替代了。

小结:对照以上3点去建站公司的案例网站试一试,如果这些基本的都做得比较糟糕,尤其是1和3两点,可以毫不犹豫的判定为劣质垃圾网站了。

三、网站的前端性能

网站的系统程序性能不容易被第三方感知,对中小企业网站来说也没太多担忧的必要,但前端网页的性能是可以感受到并且很重要的。

前端性能强劲最终表现为:打开速度快、用户操作响应快。常见的前端性能优化手段有:增加带宽、减少http请求、减少重定向、gzip压缩、设置浏览器缓存、裁剪尺寸合适的图片、图片低失真压缩、压缩CSS/JS、延迟解析JS、图片懒加载、网页异步加载、CDN加速、静态文件分离、分布式部署等。

根据我们的了解,大部分建站公司只会帮你考虑“增加带宽”、“gzip压缩”、“CDN加速”这几点,其中增加带宽和CDN加速是需要您额外花钱向云计算服务商购买的。

所以,打开你的浏览器,按下F12键(或Fn+F12)打开开发者工具窗口,选择“Network”或“网络”选项,打开案例网站看看加载速度吧(已访问过的需清除缓存或强制刷新Ctrl+F5),8秒内能加载完毕的都不算过分,可以通过其他一些手段进行后续优化。如下图示,为本站首页Network数据。

web315官网首页加载性能数据

如需更深入检测,推荐免费的线上检测平台GTmetrix,其采用著名的谷歌PageSpeed和雅虎YSlow前端性能评测标准,并给出了相应的优化建议。

四、网站安全

这部分重点看下前端各网页的表单(如:填手机号、留言等)是否对用户输入进行安全过滤和数据校验。数据检验指数据是否符合特定的规则,如电子邮箱格式必须为 xxx@xx.xxx 的形式;安全过滤指过滤掉会影响系统安全的一些特殊字符,比如编程语言中常用的 < > ' " $等特殊符号。

去案例网站的表单中,填写不符合特定规则的数据或输入一些特殊符号,观察是否有错误提示。好的网站一般都会进行数据校验和安全过滤。

至于后台程序和服务器的安全策略不容易被观察到,网络上搜索下有很多网站安全测试的工具,但没有太多参考意义。

五、SEO基础

网站建设之初就做好SEO的部署,比后期再进行SEO优化要方便一些。因为后期会涉及到现有网站结构的变动、已有数据的对接、已收录网页的链接变更处理、外链的重定向处理等等,情况会复杂一些。

良好的SEO基础有助于增加网站搜索引擎中的收录和排名,从而获取更多自然流量,下面教你如何判断一个网站的SEO基础做得好不好。虽然是一些SEO基础项目,但能够做到的建站公司其实并不多,能够做到如下几点,已经可以算不错了。

1、url静态化或伪静态

先介绍动态url有助于理解静态/伪静态url的表现形式。动态url形如www.web315.net/index.php?m=content&c=index&a=lists&catid=6,它的特征是链接中包含.php?.asp?等,后面跟了一串m=content形式的参数,后台程序会根据这些参数去执行,动态读取数据库,然后展现给用户。

网站静态化是将程序执行读取数据库后的内容生成如test.html的静态文件存放于服务器上,其访问url表现为:www.web315.net/baike/test.html或www.web315.net/baike/这样的形式。伪静态则不生成静态文件,url形式与静态链接类似。

在浏览器地址栏观察案例网站各个网页的url链接形式,是否与上面的静态url类似,是的话就是进行了静态/伪静态处理了。多数建站公司会给客户网站做静态化处理。

2、图片尺寸及alt属性

图片尺寸和alt属性优化多体现在栏目列表页面或文章/案例详情页面。下面以本站栏目列表www.web315.net/baike/页面为例(如下图),讲讲如何查看一个网站的图片尺寸及alt属性有没有做优化。

查看网页图片优化方法

还是打开浏览器,按F12(或Fn+F12),打开开发者工具窗口。点击顶部最左侧鼠标箭头图标(图中1处)——鼠标单击要查看的图片(图中2处)——鼠标移动到跳出的图片地址上(不需要点击,图中3处)——图中4处为图片在网页上的显示尺寸——图中5处为该图片被加载的原始尺寸。

图中3的后面即为图片alt属性。显示尺寸和原始尺寸应该差不多大小,可以有一定差距,如果尺寸相差悬殊意味着没有进行图片尺寸优化。从而每张图片都需要加载更大的尺寸,减缓加载速度。

去案例网站多试一些图片,看看有没有设置alt属性,图片尺寸有无进行优化。

3、Gzip压缩和浏览器缓存

如下图右侧最下面的红框中,即为缓存过期时间(具体操作见:查看缓存是否设置成功),在其下方隔一行看到Content-Encoding:gzip,意味着已开启Gzip压缩。

4、标签聚合

标签聚合也是SEO常规手段之一,如本文标题下的蓝底色标签,聚合了某一主题下的内容。其可以拓展内容的延伸,同时产生更多的网页,以便增加收录和排名。

小结:更多判断网站SEO基础好与坏的方法不再详述,能做好上述几点的网站建设公司,做的网站不会太差。

通过上面5大点,基本能半专业的判断一个网站的好与不好。而我们的定制建站基本是遵循和超越本文所列举的标准,欢迎咨询了解。