为移动浏览器设计网页的提示?

时间:2010-07-05 11:15:57

标签: c# asp.net mobile

我正在设计专门针对移动浏览器的网络应用程序。虽然我之前在C#/ ASP.NET中编写过网页,但我从来没有专门针对有限的屏幕空间和移动浏览器的其他特性做过任何事情。所以我在这里寻找一些指示:

  • 我应该考虑哪些设计考虑因素(除了明显更小的屏幕)?
  • C#中哪些有用的功能可以为移动客户端带来良好的效果?
  • 如何确保为所有不同的移动浏览器提供相对统一的用户体验?
  • 你有其他任何提示吗?

谢谢!

6 个答案:

答案 0 :(得分:2)

  

我应该考虑哪些设计考虑因素   考虑到(除了   显然更小的屏幕)?

用户交互怎么样,例如很少有设备允许“悬停”,所以不要依赖于无法在移动设备上模拟的伪类,但不要完全忽略它们,所以移动设备可能会使用它们。

如果设备支持横向和水平观看,请考虑设计的方向。

某些类似iPhone的设备无法使用手写笔以毫米的精度操作,因此请勿将输入设置得非常小。

如果使用效果来启动UI,大多数移动设备都不会显示效果(例如jQuery提供的效果)......

最后测试,测试,测试!您可以在尽可能多的真实移动设备上进行测试,并在完成后考虑使用模拟器(例如BlackBerrysiPhone的模拟器),而这不会让您感觉到使用设备,它应该显示任何渲染问题。

答案 1 :(得分:2)

可能很明显,但请确保定义一个定制的手持式样式表。

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

虽然现代智能手机(例如iPhone)可以处理普通网站,但对于专用移动应用,可以更好地避免不断放大和缩小。但是,如果用户想要使用笔记本电脑/台式机访问应用程序,则值得设计两个版本。

答案 2 :(得分:2)

提供良好的移动设备体验主要是关于UI,而不是后端应用程序。

  • 使用移动设备样式表(media="handheld" - 元素上的link属性)
  • 尽可能少的HTTP请求:
    • 将所有脚本和样式表压缩为一个文件(一个用于.js,一个用于.css,即)
    • 尽可能少的图片
  • 请记住触摸设备和非触摸设备(例如按钮的大小)之间的差异
  • 请注意您在一个页面中放入的内容量。

答案 3 :(得分:2)

压缩,缩小,优化有几个原因。带宽不是很好,在桌面上加载几秒钟的页面在移动设备上可能需要30秒以上。移动设备上的缓存非常糟糕。一个例子是iPhone不会缓存超过25k的网站组件。因此,尽可能减少图像,脚本和样式表。

答案 4 :(得分:1)

您应该查看WURFL ,它基本上是一个巨大的xml文件,可以帮助您识别设备。您获取用户代理并使用其API检查文件,以获取该设备的所有功能和功能。我已经在许多项目中使用它并取得了巨大的成功。

答案 5 :(得分:0)

请勿重定向到网站的移动版本,否则会失去预期的目标。如果我想在网站上查看文章,请不要带我到移动主页。您可以带我到文章的移动视图,但完全劫持我的目标是不可接受的。

某个cr *** ed.com这总是令人难以置信的真气......