开发者视角中的优秀并不意味着用户也有同样的感受。国外知名电子商务网站
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
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 801这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 715移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 789假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 869国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 786Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 898三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 663作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1176从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1243构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1248译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 893如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 943译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 847在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 988很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 881很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 614当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 877译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 643为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 881概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
:wine_glass: 滴水 一个用于Expo / React Native Web的简陋,响应Swift的设计系统。 受React的极大启发。...响应式 通用(Android,iOS,Web等) 与世博会合作 与Vanilla React Native一起使用 与Next
FCC响应式网页设计课程 完成 FCC致敬页面 完成 FCC调查表 进行中 FCC产品着陆页 FCC技术文档页面 FCC个人投资组合页面 Scrimba HTML和CSS基础课程 完成 行星网站v1 进行中 额外目标 了解有关在开发中使用的Git和...
Kong雀CSS Peacock是一个现代化的响应式CSS样板库,可以启动任何基于Web的项目。 它简单,轻巧,包含构建现代网页所需的所有基本组件。 受启发与兼容安装您可以使用将Peacock CSS链接到您的项目中: ...
:warning: 弃用通知它将被贬低,因为我们在下面开发新的东西:仪表板 用于在网络上开发响应式仪表板项目的最流行HTML和CSS框架。 受到的启发。 现在它将与一起使用。 该项目使用目录用法易用性: <link rel=...
在响应式Web应用程序中,这可能会导致冗长而复杂的组件,在这些组件中,我们将针对特定的媒体查询(例如isMobile或isDesktop 。 Mediamux是一个React Hook,它返回一个接受任意数量参数的函数,并返回与当前活动...
Kekocho是一个完全响应的单页应用程序(SPA)Quora克隆,是一个“获取和共享知识”的平台,该平台允许用户提出问题并从具有该领域经验和知识的人那里获得答案。验证码应用程序的身份验证部分包含两个单独的部分。...
前端则采用了响应式设计,使得系统能够在不同设备上提供良好的用户体验。 毕业论文方面,详细阐述了项目的背景、意义、技术选型、系统设计与实现过程,并对项目进行了深入的分析与讨论。论文结构清晰,逻辑严密,既...
CSS是任何项目中最好的部分响应式设计Go Nimbly启发的配色方案和设计。 看起来很熟悉吗?设计决策 带有滚动动画的启动页面启动页面已添加,以提供更大的显示空间请注意:初始页面的山丘特意是两种不同的颜色,以...
这是一个响应式电影搜索网络应用程序,使用 和 。快速入门指南启动该项目的说明:前提条件该项目与 。 从开始指南。安装一旦安装了React: 克隆存储库打开一个终端在终端上运行npm install以安装本地依赖项运行项目...
静态响应式网址导航网站:backhand_index_pointing_down_light_skin_tone: 没有绑定任何后台语言 基于bootstrap主题氙气 index.html(完整功能后台模板) simple.html(阉割版后台模板) index-simple-recommend....
一个简单的 3 层响应式移动应用程序,其架构灵感来自史蒂文霍金理论 这个项目只是一个为坎帕尼亚地区提供社交活动的应用程序基础设施。 每个点的架构都受到了著名物理学家史蒂文霍金的理论的启发,因此我们找到了对 ...
学习仪表板概述基于MERN堆栈的交互式Web应用程序,用于个人和小组学习的跟踪和可视化管理该项目是由在大流行中学习和工作的新方式所启发。... 实施响应式设计。 :man::laptop: 任务和计时器功能的主要贡献者。
二十五 TwentyFive是一个最小的时间跟踪工具,专注于简单性和出色的UX... 响应式设计 永久计时器(您可以关闭窗口,它将继续计数) 在实时试用 作者 由设计和开发。 学分 该UI受Juani的启发很大(尽管它已经从头开始进
-有关使用Kendo UI构建响应式应用程序的信息。 -有关使用Kendo UI保存和导出pdf,png和xls文件的信息。 有关Kendo UI如何与AngularJS集成的信息。 ## Kendo UI软件包: Kendo UI正式维护2个Bower程序包:Kendo
于是就根据之前自己设计的简历动手开发了响应式Web版简历 这样在我们下次修改的时候我只需要简单的修改html里面的内容即可了 该项目使用了gulp 、sass、 compass进行项目的构建,使用Flexbox做响应式布局 Fork或者...
最小的响应式设计-可以自定义或拆开 样式化的组件 SEO友好组件 JSON-LD模式 OpenGraph共享支持 网站地图生成 谷歌分析 渐进式Web应用 离线支援 RSS订阅 用于使用StandardJS整理Javascript Stylelint支持样式化组件...
Java Web Service开发-事件搜索和票证建议 受启发 开发了一个交互式网页,供用户搜索事件和购买票证(HTML,CSS和JavaScript) 基于搜索历史记录和收藏记录的改进的个性化业务推荐 后端 使用RESTful API创建Java ...
特征简单、易于使用、包含电池的 API类型安全的React式编程模型跨平台支持(Windows、macOS、Linux 和Web )响应式布局内置小部件(包括文本输入、滚动条等!)自定义小部件支持(创建您自己的!)使用性能指标调试...
城市形象是响应式设计。 描述 搜索 通过StarTable,用户可以轻松搜索米其林星级餐厅,以查找可用的预订。 一个人可以通过位置,餐厅名称或美食进行搜索。 订座 每个餐厅页面内都有预订表格。 用户选择时间并提交...