响应式设计开发基本原则!

设计观点 2012-10-13 09:50:58

网页设计师似乎已经有了一个共同认识,为大量设备建立不同的网站几乎是不可能的。响应式网站是未来的趋势,除非这个移动设备需要一些非常具体的功能或完全不同的内容值得开发。

你可能已经知道响应设计,移动优先、优雅降级。这些都是建立广泛可访问站点和Web应用的主要工具和技术。在这篇文章中,我将集中着重讨论移动设计方面和一些亮点技术,从而增强您的桌面站点。移动优先并不意味着,你应该开始从320px屏幕宽度的向上延伸扩展。更多考虑的是从工作流程中所有可能的使用情况。

简单

即使在一个很小的屏幕,一个简单而整洁的布局,也要确保用户得到最好的体验。但是你只有这一种方法为手持设备的用户考虑吗?一旦你创建了一个伟大的无障碍和良好的流动性的移动网站,再回头看看对比下你的桌面版本。不要忘了触摸和鼠标是完全不同的性质。不要让您的用户仅仅因为需要在两个菜单项之间移动200px而扭伤了手腕。媒体查询才是你应该了解的。

放弃或隐藏

当你决定开发一个移动站点时,你就应该明白有些功能是没必要的?最好的做法就是放弃他们,不仅仅是为了节省一些像素和提供更好的用户体验。现在你问自己,有必要把桌面版本上的东西全部展现出来吗?那样会不会让用户感到迷惑或分心?也许这些选项应该是为高级用户而设计为隐藏在子菜单?也许用户只需要有4个主菜单,而不是6个主菜单项?

桌面浏览器的响应

对于我而言,尤其是当多任务时,更喜欢频繁的调浏览器窗口大小。有时,你不能浪费时间在某一个站点上,使用媒体查询创建网页时,要把桌面用户考虑在内。如果让我重新调整站点来适应视频或图像,我想,我不是唯一一个会发疯的。所以,请开始使用响应式媒体查询,会给你的站点带来更多变化。

排版方向

方向是一个基于当前正在纵向或横向位置看设备。通过媒体查询,你可以在不同方位分配不同的布局。一些桌面浏览器能根据窗口的宽度和高度的比例调整设备方向。这使您在开发时可以做一些很好的调整,以增强用户体验。

新的输入标签属性

HTML5有一些新特性能帮助移动用户填写表格。例如:如果你添加类型为email的字段,它会告诉移动浏览器提供像@字符或.com扩展性的电子邮件地址。请记住,它也有助于桌面用户。他们将得到他们以前填写的电子邮件地址提供的一个下拉菜单,甚至根据他们以前使用的细节,自动填充整体表格。

更少的导航,更好的用户预测

在移动设备上浏览,如果我从主页上看少了印象深刻的几个链接,我会很恼火并感到迷茫。我会问自己:我现在在什么位置?我能回首页重新开始吗?这是不应该出现的,用完整的URL栏和臃肿的文字描述当切换标签对于移动用户来说是不明智的。

滚动似乎比通过浏览菜单项更适合触摸屏用户。在可能的情况下,避免创建一个复杂的网站结构,不要试图预测用户可能寻找并尝试相关的菜单或命令。

拥抱新标准

我只是建议你让您的网站面向未来,尽可能地利用新兴的标准。CSS3的过渡和其他花哨的视觉效果,先进的互动HTML5的。这似乎是以后要走的,除了一些过时的标签,W3C已经支持相当一部分新特性了,所以我认为从长远看来这是一个不错的选择。

正如你看到的我没讨论过多的技术细节,但我一般都认为,拥有这方面技术的眼光会让你更加节省开发时间。要考虑跨平台而不仅仅为是移动设备。让您手持设备和桌面站点在某个内容上的行为更为紧密。

关键词 响应式设计 响应式开发 移动开发 响应式网站 移动设备

HTML5新技术将引领新一代Web革命!

设计观点 2012-10-03 09:50:51

Web开发的中可重用策略

设计观点 2012-10-21 12:05:30

扫码分享到微信

确定