it-swarm.cn

为移动Web浏览器设计

设计可在大多数现代移动Web浏览器上运行的网站的最佳方法是什么?

基于WebKit的浏览器是否足够?

8
rick schott

不,仅针对WebKit是不够的。首先要做的是考虑移动市场的两个细分市场:基于触摸的市场和不基于触摸市场的市场。这会影响您设计移动用户体验的方式。值得庆幸的是,基于触摸的触摸屏将显着向WebKit(Android,iPhone和WebOS)发展。其他将主要是IE Mobile(Windows Mobile 6.5上的IE Mobile 6和Windows Phone 7上基于IE7/IE8的新版本)和Opera =(移动和Mini),请参阅 Wikipedia上的移动浏览器列表 ,以获取有关渲染引擎和功能的更多信息。

对于基于触摸的平台, Sencha Touch 之类的库可以帮助您在所有设备上创建可比的体验,但是要在所有设备上创建均等的体验将非常困难。实际上,我建议您不要尝试。触摸和非触摸移动平台之间的差异变得如此之大,几乎就像UX尝试将基于桌面的UI适配到移动大小的屏幕上一样-在基于触摸的平台上可以正常工作,因为它们使用iPhone的“缩放”范式-但您将很难获得适用于较旧或非触摸式平台的任何有用方法。

但是,请考虑卢克(LukeW)的文章以及随后的 为移动设备设计 的演讲,这不一定是您的问题的答案,但可以认为是一个很好的原则:通过识别消费者想要做的事情开始设计在您的网站上,并快速轻松地提供这些内容。这在所有所有平台上都是一贯的好设计,因此从这个意义上讲,您可以将其用作指导移动设计的模式。

12
Rahul

昨天我使用iPhone 3进行了一些实验。这是我的经验:

  • 不要假设宽度为320像素,因此请使用可变宽度布局。

  • 使用正确的文档类型。我使用XHTML Mobile 1.2。但是我不确定这是否正确。

  • 使按钮很大。

  • 请勿悬停,因此请使用图标指示不同的ui元素做什么。

4
neoneye

“移动”一词正在手机领域之外发展,并开始包括平板电脑之类的设备,这些设备需要五到九英寸的触摸屏。此外,移动设计应考虑水平和垂直方向。除了Neoneye所说的以外,还有其他一些建议/建议。

  • 使用一些边距或填充以确保没有文本正好位于屏幕边缘。
  • 除了使用流畅的宽度布局(宽度可以从320像素变为1024像素)之外,请确保将使用的设计元素包装得很好。例如,按钮看起来比水平列表更好。
  • 文字需要更大一些,但仍然清晰可辨。我认为,良好的印刷风格至少在这里同样重要。 应用于Web的印刷样式元素 是很好的参考。
3
waymost

如果您的听众有更多的资格,那么您可以做出一些有根据的假设,即大多数客户正在使用主要设备或渲染浏览器。首先满足您的主要受众的核心需求。试图在“开始”之间将您的应用程序平均分配到所有平台上可能会太艰巨。

这是我遇到的一些有用的文章:

移动参考http://www.quirksmode.org/mobile/

2
hungrysquirrel