昌平做网站:为Mobile设计时必须考虑的问题

2019.05.24 昌平做网站

163

昌平做网站在过去的几年里,移动网页浏览呈指数增长。从2007年的5%左右,到今天的30%左右。2014年,访问移动互联网的人数预计将超过桌面用户。作为设计师,我们将不得不考虑访问我们创建的网站的移动用户。换句话说,我们不仅要为桌面用户设计,还要为移动用户设计。

手指比老鼠大!

就像标题上说的那样。我们手上的肥香肠比屏幕上的小光标还大。这意味着任何可点击的东西大块头!没有很小的链接,几乎是可点击的老鼠。我们说的是任何人都可以点击的大按钮。例如,与其有一个只包含文本链接的水平菜单,不如稍微修改代码,然后将整体NAV块可点击。只要在菜单中的“a”元素上使用“Display:Block”,就可以很容易地实现这一点。

移动屏幕很小。

智能手机屏幕比桌面屏幕小。这意味着你不能把你网站上的所有东西都推到一个小小的移动屏幕上。这意味着一些事情。不要使用多列!这意味着你不能把侧边栏放在你的网站上,除非你希望你的用户在侧边栏中斜视文本时失明。这样你就会失去很多有价值的顾客!忽略整个“折叠”的概念。它将不可能把你的网站上的所有东西都安装到移动屏幕上。

他们没有那么强大

智能手机不具备当今桌面电脑的处理能力。这种情况在今后几年将有所改变,但就目前而言,这是一个问题。现在,由于它们没有那么强大,您不可能期望移动电话执行复杂的javascript。例如,我使用jQuery同位素在我的网站上。它在台式机和笔记本电脑上运行得很好,但当我试图从手机上访问它时,浏览器就会崩溃。换句话说,javascript越少越好!

文件大小

再一次,智能手机的功能不如台式机或笔记本电脑。这也意味着他们不能下载大文件并立即执行它们。缩小你的代码。这将有助于减少文件大小,以及简化电话本身的口译过程。

清理HTML

这在任何计算机上都起作用;台式机、笔记本电脑、智能手机-这无关紧要。重要的是干净有效的HTML。虽然不总是可能拥有有效的HTML,但至少可以清除它。例如,这里有一个导航条:

<div id="navbar">
<ul id="navbar-ul">
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Link</span></a></li>
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Another link</span></a></li>
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">A third link</span></a></li>
</ul>
</div>

现在,看看下面的代码:

<ul id="navbar">
	<li><a href="#">Link</a></li>
	<li><a href="#">Another link</a></li>
	<li><a href="#">A third link</a></li>
</ul>

有点不同,不是吗?一点儿没错。干净的代码总是一件好事,智能手机也不例外。

看似明显

这似乎是显而易见的,但事情是这样的:不“:悬停”状态!求你了,不要误以为有一种方法可以在指头上飞来飞去。根本没有。如果您的站点上有下拉菜单,这可能会很烦人,但是您总是可以让菜单显示链接是什么时候。点击.

结语

昌平做网站这篇文章到此结束。如果你有任何问题,建议,或者只是,嗯,评论,看看下面的评论部分。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP