如何建立兼容手机或移动装置的网站

如何建立兼容手机或移动装置的网

 

一个兼容移动性的网站是为优化智能手机和平板电脑的体验而设计。由于不同移动装置的屏幕大小和解析度不同,网站设计和网站内容最好能作出相应的调整,以优化用户的网站浏览体验,使用不同装置仍可轻松浏览网站。

 

在智能手机面世之前,大家都习惯使用桌面型电脑浏览网页。网站管理员普遍都只需专注于设计美观的桌面版网站。但随着智能手机的普及,越来越多人改变了浏览网页的习惯。根据 StatCounter 的数据,2019年7月全球移动装置的市场占有率为 55%,较多于桌面型装置市场占有率的 45% 。一个网站即使在桌面上显示良好,不等于能在屏幕细小的移动装置上也容易浏览或点击。为了令移动装置用户与您的网站保持互动,网站上的文字大小应易于阅读,导航和连结也应易于点击。这样有助于减低跳出率并提高移动用户的转化率。另一方面,Google 亦曾指出,兼容移动装置的网站对网站排名 SEO 相当有利。因此,由现在开始,网站管理员都必须改善网站,兼容移动装置。

 

响应式网页设计 (Responsive Web Design)

 

响应式网页设计可识别不同装置的浏览器而作出自动调整,令版面设计可迎合不同的屏幕尺寸和解析度。市场上的大型CMS 内容管理系统(Content Management System) 如WordPress,Magento,Drupla 和Joomla 等,都提供过百种响应式网页设计主题,用户可安装合适的主题,并重新检查是否兼容桌面版及移动版网站。

 

更大的字体和按

 

当您在 6 英寸的屏幕上浏览网站时,如果网站内容的文字和图片显示太细小而无法阅读,便需要不停放大和缩小版面,这个重复动作会令人感到不耐烦。更差的是,网站上的按钮太细,或者按钮之间的距离太近,导致不能击中或不断点击错误的按钮。为减少网站访客受到这种困扰,一个兼容移动装置的网站应该使用至少 14pt 的字体大小,以便阅读。而按钮应该放在当眼的位置,有足够的大小适合用手指点击。同时亦要确保在按钮之间预留适当的空间,以妨浏览者意外点击错误的按钮。

 

使用标准的字

 

字体是网站设计的关键元素之一。自定及有创意的字体会令您的网站看起来更吸引,但当用户使用移动装置浏览您的网站时,便需要先下载特定的字型到他们的电话或平板电脑上,才能正常访问该网站。这样会令加载网站的时间更长,而更糟糕的是,某些访问者可能会拒绝下载特别字体并立即离开您的网站。一个适合移动装置的网站,应使用大多数装置都已预先安装的标准字体,同时亦要确保网站所选用的字体是清晰且易于阅读的。

 

取消弹出式视

 

一个兼容移动装置的网站,应该避免使用弹出式视窗,通常关闭这些弹出式视窗的「X」按钮都非常细小,难以被手指击中。当浏览者尝试关闭它时,可能会不小心击中弹出式视窗的内容,并登陆到新的网站中。这种视窗会令人感到厌烦,同时影响到用户体验,如果真的有需要使用弹出式视窗,请尽量让用户自由选择,按下连结才弹出,通常在这种情况之下,他们会比较易于接受弹出视窗的资讯内容。另外,请确保弹出式视窗易于关闭,以便他们可以继续浏览您的网站。

 

不要使用 Flash

 

Android 和 iOS 作业系统均不支援 Flash,而大部分移动装置均使用这两个系统。如果以 Flash 制作整个网站内容,则无法在大部分的移动装置上显示。此外,使用 Flash 亦会减慢网站的加载时间,因而令 SEO 受到负面影响。如果您的网站仍在使用 Flash,我们强列建议您以 HTML 这类型兼容式的代码取替。

 

简单的网站目录和表

 

手机的屏幕尺寸比桌面电脑小得多。如果您的网站使用延伸目录并具有很多选项,可能并不适合在细小的移动屏幕上显示。因此,移动版的目录设计应尽量简洁,并保持在一个屏幕大小内可展示,令网站浏览者无需滚动、放大或缩小去查看内容。如果您的网站载有表格,亦应保持简短及确保使用者能易于输入资料,删去不必要的资料栏。因为使用手机来输入详细的资料较难及繁复,设计表格时可提供副助,例如当要求使用者输入纯数字的栏位,可设定为数字键盘而非全键盘,另外亦可取消自动更正,以避免智能手机自动将使用者输入的资料切换至其他常用词。

 

压缩图像和 CSS

 

碍于移动装置的频宽通常比桌面型电脑较小,移动版网页的加载时间通常较长,为了使页面加戴时间缩短,您可尝试将图像压缩到最小的文件大小,同时在所有设备上仍保持清晰的外观。另外,消除不必要的文件大小较大的图像或闪烁灯光效果。通过缩小文件大小,可加快页面加载时间,并改善用户体验。

 

使用百分

 

设定网站的 HTML 元素如宽度时,应尽量使用百分比,以便这些元素可因应不同屏幕大小而作出调整,有助于在不同的装置设备上提供一致的观看体验。相反,如果以像素为单位设定宽度,当屏幕尺寸改变时,这些元素的宽度是不会随之而变更。如果您设置的宽度像素大于手机屏幕的尺寸,会令用户浏览时将需要水平滚动页面,严重影响用户体验。

 

总而言之,一个兼容移动装置的网站,应具有响应能力、简化的目录和表格、标准字型、大字体和大按钮。同时应避免弹出式视窗和使用 Flash,并使用百分比来配置网站及其他元素的宽度,尽量将图像和 CSS 文件大小减到最小。

 

声明: 博客仅为信息分享,绝非推荐,网站不参与交易,内容均仅代表个人观点,仅供参考,读者务必认真考虑后下手并自担风险;一分钱一分货仍是恒久不变之真理,任何IDC都有倒闭和跑路的可能,月付和备份是最佳选择,VPS大学有专门介绍网站备份的文章,数据是无价的,经常备份,养成好习惯;本文由( VPS大学 )原创编译,转载请保留链接并注明出处;其他问题,请加入VPS大学QQ交流群 230888568 ,一起解决问题。