移动端网站是为智能手机和平板电脑设计和优化的网站。由于移动设备具有许多不同的屏幕尺寸和分辨率,因此适合移动设备的网站的内容应能够相应地进行调整,以便用户可以阅读适当大小的内容并使用不同的设备轻松浏览网站。
在发明智能手机之前,人们使用台式电脑浏览网站。网站管理员用于设计可以在桌面上很好显示的网站。但是,随着智能手机的普及,越来越多的人改变了习惯。截止到2019年7月,全球移动设备市场份额为55%,领先于台式电脑市场份额(45%)。为了使移动用户与您的网站保持互动,您网站上的文字应易于阅读,链接和导航也应易于点击。这将有助于降低跳出率并提高移动用户的转化率。
1、响应式网页设计
响应式网站可以识别正在查看其的设备,并自动更改其布局以适应该设备的屏幕尺寸和分辨率。市场上有数百种适用于主要CMS的响应主题,例如WordPress,Magento,Drupal和Joomla。您可以安装自适应主题,然后再次检查新主题在台式机和移动设备上的外观是否都很好。
2、大字体和按钮
当您在6英寸的屏幕上浏览网站时,发现内容太小而无法阅读很烦,您必须不断放大和缩小内容。更糟糕的是,您可能还会发现按钮彼此之间的距离太近,并不断点击错误的按钮。为了使访问者免于受此困扰,适合移动设备的网站应使用至少14像素的字体,以便于阅读。号召性用语按钮应放在醒目的位置,并且要大到足以用手指轻敲。确保在按钮之间留出足够的空间,以防止访问者意外点击错误的按钮。
3、坚持使用标准字体
字体是网站设计的关键元素之一。自定义的,有创意的字体可能会帮助您的网站看起来更好,但是您的移动访问者必须将新字体下载到他们的手机和平板电脑上才能正常访问该网站。这会减慢您网站的加载时间。更糟糕的是,某些访问者可能只是拒绝下载请求而立即离开您的网站。一个适合移动设备浏览的网站应使用大多数设备中预先安装的标准字体。您还必须确保所使用的字体清晰且易于在您的网站上阅读。
4、消除弹出窗口
适合移动设备浏览的网站应避免使用弹出式窗口。用于关闭弹出窗口的“ X”按钮通常很小,无法用手指轻敲。当访问者试图关闭它时,他们可能会不小心单击弹出窗口并转到新的着陆页。这很烦人并且阻碍了用户体验。如果您需要使用弹出窗口,请仅在访问者单击链接时显示它。访客更有可能接受带有所需信息的弹出窗口。另外,请确保弹出窗口易于关闭,以便它们可以继续无缝浏览您的网站。
5、不要使用Flash
Android和iOS设备均不支持Flash。您显示为Flash动画的网站内容无法在任何移动设备上正确显示。它还会减慢页面的加载时间并对网站的SEO产生不好影响。如果您的网站仍在使用Flash,则应改用HTML之类的兼容技术。
6、简化菜单和表格
移动网站的菜单应该简洁明了,并且适合一个屏幕,这样访问者就不必滚动或放大和缩小即可查看所有导航选项。您还应该使表格尽可能短,因为在智能手机上键入更加困难。消除表单中不需要的字段。当要求您的访客填写移动表格上的数字字段时,可以选择使用键盘而不是全键盘。为每个表单字段禁用自动更正,以避免智能手机将用户输入的名称更改为其他常用词。
7、压缩图像和CSS
对于移动设备,加载时间通常更长,因为移动设备的带宽比台式机的带宽小得多。为了使页面加载时间尽可能短,您应该将图像压缩到尽可能小的文件大小,同时在所有设备上仍保持清晰的外观。消除不必要的沉重图像和闪烁的灯光。通过缩小文件大小,您的页面将加载得更快,并改善用户体验。
8、使用百分比
通过百分比配置HTML元素的宽度,可以使这些元素适合不同的屏幕尺寸。这有助于在许多不同的设备上提供一致的观看体验。相反,如果以像素为单位指定宽度,则当屏幕尺寸更改时,这些元素的宽度不会更改。如果您设置的宽度(以像素为单位)大于手机屏幕的尺寸,则访问者将不得不水平滚动。用户体验将被破坏。
总而言之,一个适合移动设备的网站应该具有响应能力,简化的菜单和表格,使用标准字体,大字体和按钮。应避免弹出窗口和Flash。使用百分比来配置宽度,并使图像和CSS文件的尺寸尽可能小。