关注前端开发
HTML5、CSS3、Javascript

8招让你的网站对移动设备更友好

目前,移动浏览功能不断普及提高,开始优化你的网站以更好地适应移动平台和它的局限性将是你的第一要务。有很多简单的方法可以提高你的移动浏览网站,同时又不过多的改动你的网站,本文探讨其中最流行且可以对可用性产生巨大的影响的8个。

流式布局

让您的网站液体宽度布局是使您的网站的朝着对移动设备友好的重要一步。它不仅摒弃了你的网站周围的多余的死空间,他还可以使之在许多不同平台和分辨率下查看。那么究竟流体宽度是什么意思呢?

流体宽度,顾名思义,就是您的网站可以根据浏览器的大小伸展活着缩放宽度。它实施的容易程度取决于您的当前设置和布局。如果你有一个简单易用的布局,修改变CSS样式表中的宽度属性为以百分比来达到其效果是你唯一要做的。

没有杂乱的广告

杂乱的广告是移动平台上的重大问题上,即使网页原本的布局没有被破坏,最终用户看到的广告可能比内容还多。有一个简单的修补程序来隐藏这混乱的现象而不必创建一个特定版本的移动网站。你也可以创建针对手持设备的css样式表,通过判断终端的分辨率大小来调用。

无论你使用一个,你应该永远记住,大多数手持移动设备有实际情况的限制,这意味着屏幕尺寸只能容纳很少一些东西,这极少的东西就是访问您网站的用户希望看到的那部分内容。

集中的内容

集中你的内容是因为这是移动设备的用户立即看到关键。很多针对移动设备的网站的往往会粘在了很多不必要的混乱的东西,例如图像或广告,但由于网站管理员必须了解,展示访问者最关心的内容才是重点。

如果用户是从手机访问您的网站并没有连接到有线网络上,带宽受到一定的限制,这意味着用户将选择他或她想要访问的网站,而不是他们的访问那些在桌面上的网站。

这意味着,你需要确保你的网站在利用手机浏览占用少量的带宽,这意味着图像应该是有限的,并且文字内容应为重点。假使您的网站是内容是基于图像的呢?

如果你的网站主要是基于图象,你的第一要务是建立一个独立的移动网站,针对移动平台进行优化——通过降低图像的大小和高度压缩。一种替代方法是创造适用,允许第三方应用程序的移动设备的移动应用(app),这对为您的用户来说可能是一个有用的工具。

跨平台的友好链接链接和效果

随着新的网络工具和影响继续扩大,很难没有漂亮的悬停提示或下拉导航或甚至一个链接通过JavaScript弹出的小窗来展示信息。然而,对移动设 备的用户来说,这些效果和工具可能无法在他们的平台使用,这就带来了许多无用的链接和工具。一个简单的解决办法,就是始终为不能查看或使用他们的用户提供 替代方案。

一些移动设备允许Javascript,但在你的网站无论如何都不能使用你原有的效果,所以最好的办法是检测连接到您的网站的平台类型,禁用或改变某些类型的工具和效果一遍适应得更好。

保持您的网页简短,结构紧凑

用于移动设备的长页面肯定是一个巨大的倒退,因为加载页面需要花费大量的时间。因此,保持你的网页简短、结构紧凑可以使你的网站跨平台可访问——即使在一台网速极低的设备上。因为,用户最不愿意做的事情是等待网页加载,而不是花时间浏览网站。
彻底的导航

众所周知,由于其键盘或虚拟键盘用起来一点也不方便,输入在大多数移动设备就实实在在成为一种痛苦。因此,为您的网站建立一个彻底的导航是一个关键 环节,它可以使您的网站的移动体验更加友好。如果您提供的大量的内容,你需要确保用户可以通过浏览找到他们而不必用使用搜索引擎。如果你不能在不适用搜索 的情况下找到到你网站的某些部分,很有可能用户也不能。

醒目而清晰的内容

今天,许多新的移动设备是触摸屏,这意味着用户将可以使用他们的手指来导航他们的设备和您的网站。如果您的网站的内容和链接不够醒目,不够清楚,通过你的网站导航将是一个痛苦。

要防止这种情况很容易,试着去消除那些分散在文章或段落的链接,因为它们被纯文本包围而难以点击或按住。相反,把这些链接放置到文本主题的上方或下方,同时保证他们足够大,用户就可以没有困扰的用手指点击它们。

简短且易记的链接

这是另一种输入相关的问题,如果用户要输入一个长URL才能到你的网站,很有可能他们不会这样做。如前所述,使用键盘或虚拟的键盘打字不适合长文本 块,所以一定要确保你的网站有一个简短易记的域名。此外,在您的网站尽量避开输入工作也是理想的,因为通常他们通过快速指引或参考信息访问您的网站。

原文(英文)链接:http://designreviver.com/tips/8-ways-to-make-your-website-mobile-friendly/

转载请注明出处大前端 » 8招让你的网站对移动设备更友好

分享: