今天火狐因客户而成就,将来客户也因火狐而骄傲!
现在有没有回头路可走。该网站已经移动。更多的用户从更多的地方,比以往任何时候都更多的设备访问网络。这是什么意思为网页设计师和网站所有者?这意味着,我们在每个项目中,我们必须解决的一个手机网站制作战略。
你的手机网站制作会有所不同,取决于您正在使用什么类型的项目,但没有错,你需要一些战略,为您的网站(或您的客户的网站)在移动领域的职能。无论您是设计一个网站,主要是静态的(任何在网络上真正静态了?),一个内容驱动的新闻网站,或交互式web应用程序,它的最佳追求一个成熟的方法 - 一个包含周到看看您的移动网站的用户体验。
在这篇文章中,我的目标是要突出10个项目作为手机网站设计师,开发人员或网站所有者,您需要在您的移动网站设计项目开始考虑的关键。这些想法触摸一个进程的所有方面,从战略的设计和实施。但重要的是,这些点负责前面,以确保您的移动网站成功推出。
1。定义你需要的手机网站
移动网站设计项目通常是通过下列情形之一的:
这是一个品牌需要一个台式机和移动战略的新网站。
这是一个重新设计现有的网站,其中将包括一个新的手机网站建设。
这是一个移动网站除了现有的桌面网站,这将不会改变。
这些情况都带来了不同的要求,这将有助于您确定的最佳方法,你认为下面讨论的项目。
2。考虑企业的目标
在大多数情况下,你作为设计师/开发人员正在聘请由客户端来设计移动网站为他们的业务。什么是企业的经营目标,因为它们涉及到的网站,特别是移动网站?至于与任何设计,你需要优先考虑这些目标,然后在您的设计沟通的层次结构。当你的设计转换到移动,你需要借此更进了一步,只是一个为企业的首要任务目标和重点。
以网站为例,为现代。如果加载yuetech.com在桌面浏览器,你会看到的第一件事是大的,大胆的图像,唤起人们的情感连接到他们的车辆。此外,您会看到一个强大的导航,标注的各种福利,拥有现代,站点搜索和社会化媒体链接 。
现在打开www.yuetech.com在您的手机浏览器和你有一个精简版的网站 。然而,最突出的特点仍然是相同的:他们最新的车型,其次是其他几个(手机优化)的车辆图像,比较大的形象。你看不到复杂的导航手机版和其他标注。他们选择,把重点放在他们的主要业务目标,是要唤起人们的情感联系与他们的汽车,通过大胆的图像他们的移动网站。
3。继续之前的研究过去的数据
如果这个项目是一个重新设计(大多数手机网页设计项目,这些天),或添加到现有的网站移动网站,希望该网站已被跟踪与交通的google analytics(分析)(或其他指标跟踪软件) 。前潜入设计和开发研究的数据,这是明智的 。
分析事物一样的设备和浏览器的用户访问该网站,从。当你想,以确保该网站是与心中的设备支持内置,你可以作为高优先级的目标这些浏览器,当你从设计,通过开发,测试和发射。
4。实行响应性的web设计
有了这么多新的移动设备被释放,每年检查您的网站在一些web浏览器和发布的日子已经过去了 。你需要优化你的手机网站,为广大的台式机和移动浏览器,带来了不同的屏幕分辨率,支持的技术和用户基础景观。响应性的web设计在著名的文章中建议,您可以同时工艺的台式机和移动网站体验 。从该文章引用:
“,而不是剪裁断开的设计到每一个日益增多的网络设备,我们可以把它当作同样的经历的方方面面。”
利用像最新的和最前沿思想的web技术html5,css3,网页字体,你可以设计你的网站规模和适应任何设备上观看它的。这就是我们所说的web设计的 。
5。简单是金,但... ...
作为一个桌面网站设计移动格式转换时,拇指的一般规则,你要尽可能简化事情。这有几个原因。保持文件的大小和载入时间下降,始终是一个好主意,移动网站。无线连接 - 而比过去几年更快 - 仍然比较缓慢,所以您的移动网站负载,速度更快更好。
手机网络上的可用性的考虑,还要求一种简化的方法来设计,布局和导航。用更少的屏幕在您的处置房地产,你需要明智地选择你的元素的位置。总之:少就是多。
但是,上越网络可以创造美丽的手机网站设计,为移动优化。css3中为我们提供了一个惊人的工具创建梯度,下拉阴影和圆角一样的东西,而不诉诸笨重的图像。这并不是说你不能使用图像。
手机网站制作之间的简单性和美感的伟大平衡的这些例子。
6。单栏式布局一般工作最好
当你认为布局,单柱结构趋于最好的工作。这不仅与管理上的小屏幕空间有限的帮助,也帮助您轻松之间的纵向和横向模式之间的不同设备的各项决议和翻转的规模。
使用响应的网页设计技术,可以采取多列的桌面站点布局,使其适应单栏布局。新的移动网站做了这个伟大的工作。
7。垂直层次:考虑在可折叠的条款
您的手机网站制作是否有需要的移动网站上提交了大量的信息?组织在一个简单的和易消化方式的东西的一个好办法是成立一个可折叠的导航。单柱结构更进了一步,可以叠加在折叠模块,允许用户打开,他们感兴趣的内容,并隐藏其余大块的大型内容。
8。从“点击”转到
在移动网络,交互是通过手指而不是鼠标点击水龙头。这将创建一个在可用性方面非常不同的动态。
从桌面到移动网站设计转换时,您有重新审视的“点击”元素 - 链接,按钮,菜单等 - 使他们虽然桌面web适合与小和精确的积极链接(点击)的地区,移动网络的要求较大,大块,可以很容易地用拇指按下按钮。
此外,在移动网络中有没有悬停状态。大部分的时间,成立时发生悬停(如一个下拉导航菜单),它实际上是发生在移动设备上查看时,第一个抽头。第二自来水的移动网站上做什么第一次点击桌面上的网站。这可能会导致混乱,为移动用户,这意味着你需要为移动重新工作悬停状态。
9。提供交互反馈
说到互动,您需要确保您为您的移动网站的前端发生的任何行动提供了明显的反馈。
例如,当用户点击链接或按钮时,它是很好的做法有按钮直观地改变状态,以表明它已挖掘和行动已经开始。经常可以看到一个白色的链接打开完全蓝色的iphone时,挖掘。这种视觉反馈是大多数用户所熟悉,你会明智地利用它 。
另一个好的做法是,包括载入国家的行动可能需要多一点的时间来载入。使用动画加载图像来表示一些进展。大本营移动显示一个旋转的加载gif,因为它加载下一页的这个伟大的工作。
请记住,桌面浏览器有内置的各项指标表明,一些进展。移动浏览器不那么明显,所以重要的是要建设成为您的移动网站设计的视觉反馈。
10。测试您的移动网站
与任何项目一样,你需要尽可能多的设备上测试您的移动网站。不拥有所有这些设备,也可以是有点棘手想方设法准确地测试每个。这将涉及开发平台(如iphone 和 android) 。
手机网站制作就行了!
希望这篇文章提供了一些见解,因为你走上一个新的移动网站设计项目。