资讯频道 → Web前端
阅读更多

8顶
2踩

Web前端

原创新闻 有关 Web 响应式设计的 7 点启发

2012-02-13 11:35 by 正式记者 WebAppTrend 评论(0) 有7001人浏览
web UI UX 响应式设计

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

开发者视角中的优秀并不意味着用户也有同样的感受。国外知名电子商务网站 Lot18 的高级前端开发人员Vince Allen，特别撰文讲述了采用响应式设计开发 Lot18 的背后故事和7条经验。

全文如下：

为Lot18 这样迅猛发展的电子商务公司工作是件激动人心的事情。知道几个月后，在开发团队面临一项重大决择的时候，我们狂热的情绪才逐渐平复下来。我们的困扰是：是在网站的原有引擎（该引擎很有可能在网站发布几个月后就难以为继）上继续开发还是重新搭建全新的平台（可以使用数年），我们选择了后者，只用了三个半月填鸭式地完成了一年的工作。

我们也知道我们的访客越来越多地使用多样性的方式来访问Lot18 ，并且这种趋势在逐渐增加。 Web 响应式设计是我们开发战略的核心，但是它使得我们不得不颠覆原本开发工作中的思维模式。

以下是我们在短时间内开发响应式网站得出的 7 点心得。

1.  要做的工作太多，找到主线

作为一个开发人员，总是需要适应不同的设备、浏览器和操作系统——从不缺工作。但是，为每个平台创建一个 APP 对于一个小公司来说并不是一个可持续战略。在开发、测试和部署每个代码块时，尽量简化和合理流程中的每个步骤。这样在关键时刻，使疲劳的你可以把精力集中到关键路径上。



2.  业务第一

对于电子商务网站来说，假期购物季是最忙的——尤其是对专注于食物和红酒的网站来说。数以千计的顾客筹划派对、选礼物，我们无法确定，是不是每个买家都坐在电脑旁，或者，能够花时间搜索响应的 App，并下载使用。

假设所有特定的用户都会使用同样类型的设备，用户每次访问网站或者被邀请到Lot18 用户的朋友都使用相似的设备，作出的这样的推测是不靠谱的。采取响应方式提升业务优先权，并把我们重新定位成开发团队。我们更加接近用户的体验，并不只是关注我们自己的时间表。

3.  不要追求跨平台，专注于开发功能

不针对每个平台进行开发，我们可以花更多的时间在为新网站开发功能上。举个例子，随着我们不断地调整我们的校验系统，我们可以把精力放在某个UI/UX 策略上，而不用担心某个特定设备的构造。这样，开发团队将会更加专注于功能的开发，并且更高效。



4.  每个人都是 QA

在小公司里，每个人都很忙，可能没有时间排查新版本中的bugs 和意外的复杂情况。在开发新响应式设计的时候，我们遇到非常棒的解决方法：每个人可以利用自己的闲暇时间测试网站。

如果某个人想按照进度测试网站，他们可以在上下班途中使用自己的手机或者平板——或者在家中用电视进行测试。这样更好，这种形式的测试更接近我们的用户使用网站的方式。

5.  保持本地 Apps 和移动 Web 的一致性

近期，Lot18 将会发布一款本地 iPhone App 。和大多数本地 Apps 一样，只不过这是为 iPhone 设计的，使用起来感觉更自然。

然而，即使专注于某个App 的用户也会通过 email、Twitter、Facebook 访问移动网站。响应式网站需要提供本地和移动 Web 体验的一致性、并强化整个品牌的体验。



6.  开发新的响应功能

网站发布之后，我们观察到人们在预览网站的时候，出现的一种新行为。一旦他们意识到网站对他们做出响应，他们开始进入游戏状态。

响应能力为网站的体验增加了更多因素，并随着用户使用不同的设计，或者从一种模式换到另一种模式，给用户提供不同的外观。

我见到的是情绪化的反应，可以被解释成“这太有意思了！”。总的说，这是正面的评价。

7.  你需要作出可靠的分析

最后，在比较统计数字的时候，很高兴得知用户与同样的内容进行交互。我们有了更多角度来观察用户的行为，从评测结果来看，这一点已经给我们带来了积极的变化。

我们最近发布遇到的最棒的事情就是，对于我们来说，这不再是一个“真正的”Lot18.com 。相反，所有的访客在 Lot18 的体验 —— 不管使用的是什么设备 —— 都有特别的收获。因此，我们的开发团队更靠近业务逻辑，能够作为用户服务这一部分的扩展，提供更好的在线商店体验 —— 在激烈竞争的电子商务网站中，这是个突出的优点。

原文出处：Seven lessons learned from responsive web design
8
顶
2
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 软件的涅槃

    黄柳青的银弹理论，软件之美，软件之变，软件之死

  • 《软件的涅槃》笔记

    软件的涅槃 软件之死 大型企业级应用软件已经死亡：建成即成闲置，无法实现客户期望、复杂的异构环境； 企业级应用的需求：个性化、灵活； 传统的企业级应用软件产品两种交互模式：套装（难以满足个性化需求）、开发定制（效率低）； 软件危机：僵化软件体系、落后软件生产方式、需求、环境； 软件之变 面向构件的软件体系：图形化，屏蔽软件代码层，松散耦合的构件组装方式、低关联度； 需求吻合度、上线时间、软件质量、...

  • 软件的涅磐

    http://dev.csdn.net/article/28/28508.shtm http://dev.csdn.net/article/28/28734.shtm http://dev.csdn.net/article/28/28737.shtm   软件的涅磐   作者：黄柳青   1999年，计算机科学家布鲁克斯（Frederick Phillips Brooks,Jr.）以近70岁的“高

  • 软件的涅磐---读后评论

    “构件”是一个有别于“对象”的，不同层次的封装，复用的级别也有不同。不同构件的粒度也和不同的行业，企业的需求的不同，有者直接的关系。“构件”其实是“原子”（高度封装的原子结构）的概念，不同物质，他们的原子结构不同，但是他们是组成任何物质的“单元”，当然，物质的组成也需要环境，也就是我们需要一个容器，一个基于“原子”单元的搭建平台，我们将我们所需要的“原子”，在这

  • 软件的涅磐（三）—— 软件之美

    软件之美 软件建筑之美 　　新春伊始，北京的气温略有回升。周末，颐和园里到处熙熙攘攘，游人如织。昆明湖畔，万寿山边，有气势宏伟、层叠绵延的重廊复殿，有自然绮丽、神韵似水乡江南的园林；饱览湖光山色之余，不禁大为慨叹中国古建筑之美。实际上，颐和园的众多建筑，大都是由标准化的构件组合搭建而成。 　　古建筑之美在《营造法式》中大抵可以寻根溯源。该书成于北宋时期（约公元1103年），凡三十六卷，乃中国古代建

  • 浏览器IE8将全面兼容Web网页标准

    据国外媒体报道，为了证明自己对软件互用性的承诺并不是突发奇想，微软本周一宣布，将改变新版Internet Explorer浏览器的开发计划，使其对网络标准更加友好。　微软表示，标准兼容模式将成为IE8的默认渲染引擎。微软...

  • WIN7操作系统下做好IE6,IE7的兼容性测试

    在系统中一般都是不能同时安装的，以前在XP上，用IETester 就可以同时让ie三个浏览器共存，但是，我在WIN7的系统下，安装IETester v0.4.4版本（目前最新版），网上宣称可以兼容WIN7，虽然但是实际情况运行起来还是...

  • html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题

    这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，...

  • 四款主流测试工具的测试流程

    主流测试工具的测试流程WinRunner1　启动时选择要加载的插件2　进行一些设置（如录制模式等）3　识别应用程序的GUI，即创建map(就是学习被测试软件的界面）4　建立测试脚本（录制及编写）5　对脚本除错及调试（保证能够运行完）6　插入各种检查点（图片，文字，控件等）7　在新版应用程序中执行测试脚本8　分析结果，回报缺陷　QuickTestPro1　准备录制打开你要对其进行测试的应用程序，并检...

  • CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    IE7,6与Fireofx的兼容性的处理实在是让前端WEB开发者为之而头疼的事情，建议尽量用符合W3C标准格式写代码，本文搜集整理了一些于此相关方面的知识，有此需求的各位朋友可以参考下，希望对大家有所帮助

  • 几个解决兼容IE6\7\8不支持html5标签的几个方法

    如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，...

  • IE6、IE7、IE8浏览器下的CSS、JS兼容性对比

    Internet Explorer 6中查看使用 Microsoft JScript 的网页，可能会遇到web浏览器速度较慢的性能问题。

  • IE系列浏览器兼容性测试点整理

    在web项目进行浏览器兼容性测试，论坑最多的，非IE系列浏览器莫属，且IE8是我们组开发的心中的痛，一提到有兼容性bug，第一反应：是不是IE的?卧槽，又是IE8! 　由于项目产品需要，管理后台和官网等web项目都需要兼容...

  • 写CSS样式做浏览器兼容时区别ie8和ie9的方法

    主要与大家分享了写CSS样式做浏览器兼容时区别ie8和ie9的方法，很简单，但很实用，学习前端web开发的朋友可以收藏下

  • Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

    Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

  • 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...

Global site tag (gtag.js) - Google Analytics