开发者视角中的优秀并不意味着用户也有同样的感受。国外知名电子商务网站
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 839这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 755移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 845假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 902国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 821Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 939三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 701作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1218从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1279构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1287译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 934如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 979译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 877在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 1028很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 928很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 649当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 916译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 685为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 909概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
Bootstrap响应式模板是一种基于Twitter Bootstrap框架构建的网页设计模板,主要特点是其响应式布局,能够适应不同设备的屏幕尺寸,包括桌面、平板和移动设备。Bootstrap框架是目前最流行的前端开发工具之一,它提供...
【CSS3 SVG叶子虚线响应式布局代码】是一款利用现代Web技术实现的创新设计,它结合了CSS3和SVG(可缩放矢量图形)的优势,创造出动态且适应不同屏幕尺寸的布局。在这个项目中,开发者巧妙地用SVG来绘制细腻的叶子...
书中通过各种不同的网页模板示例,展示了如何运用CSS实现响应式设计、浮动布局、定位技术、盒模型等核心概念,让读者在实践中理解并掌握CSS的精髓。 XHTML是HTML与XML的结合体,它在《CSS禅意花园》中扮演着支持...
响应式设计确保网站在不同设备上都能良好呈现,加载速度快,内容易于阅读和互动。小企业尤其需要关注这一点,以确保所有用户,无论使用何种设备,都能无缝地访问和利用其网站。 4. **从Tumblr汲取灵感**:Tumblr的...
- **CSS3**:通过CSS3实现更丰富的样式效果,并利用媒体查询等特性来支持响应式设计。 - **JavaScript**:合理使用JavaScript来增加交互性和功能性,同时注意兼容性和性能问题。 - **前端框架**:使用如Bootstrap等...
Bootstrap框架包含了响应式布局、移动设备优先的Web设计哲学,并提供了一系列预设的样式、组件和JavaScript插件,帮助开发者快速构建美观且功能丰富的网站。 在这个项目中,`index.html` 是主页面文件,其中包含...
- **主要内容**:通过本书的学习,读者可以全面了解现代Web设计的关键要素,包括但不限于HTML和CSS的最佳实践、响应式设计原则、可访问性的重要性等方面。这将有助于提升设计作品的质量,使其在多样化的网络环境中更...
- **案例2:早期2011年的项目**:虽然具体细节未给出,但从时间点上看,这应该是Thomas Byttebier在响应式设计领域进一步探索的成果。这些项目可以帮助我们了解响应式设计在实际应用中的发展变化趋势。 #### 四、...
在响应式设计方面,考虑不同设备的显示效果,使四大名绣的韵味在手机、平板和电脑等多平台上都能得到良好的展现。 总之,将中国四大名绣的精髓融入web网页设计,不仅能够提升网页的艺术价值,还能够传承和发扬中国...
综上所述,这个压缩包提供了一个丰富的参考资料库,涵盖了网页设计的各个方面,包括但不限于色彩搭配、布局设计、交互元素、动画效果、响应式设计以及品牌一致性。无论是新手还是有经验的设计师,都可以从中汲取灵感...
Bootstrap是世界上最流行的HTML、CSS和JavaScript框架,用于开发响应式布局和移动设备优先的Web项目。这个"简洁响应式Bootstrap后台管理系统模板"是基于Bootstrap框架构建的,旨在为开发者提供一个快速开发高效、...
【Xenon扁平化bootstrap响应式win8后台模板源码】是一款专为现代Web应用程序设计的高效、灵活且美观的后台管理界面模板。这款模板充分利用了Bootstrap框架的强大功能,结合了扁平化设计风格和Windows 8的界面元素,...
7. **响应式设计**:在重构过程中,应考虑响应式设计,使网站能够适应不同设备和屏幕尺寸,确保在手机、平板电脑和桌面电脑上的良好显示效果。 8. **最佳实践**:书中会介绍一系列HTML重构的最佳实践,如避免使用...
【标题】"10套国外WEB2.0风格DIV+CSS网页模板下载"涉及的核心知识点主要集中在WEB2.0的设计风格、DIV+CSS布局技术以及网页模板的应用。 1. **WEB2.0设计风格**:WEB2.0是互联网发展的一个重要阶段,它强调用户体验...
响应式设计是一种让网站能够适应多种设备和分辨率的技术方案,其核心在于使用灵活的网格布局、图片尺寸及CSS媒体查询等手段确保内容在各种设备上都能正常展示。 #### 6. 常用工具介绍 为了更高效地完成Web前端开发...
【标题】"WIN8风格WEB页"所涉及的知识点主要集中在网页设计领域,特别是与Windows 8操作系统界面设计风格相关的Web界面设计。Windows 8引入了一种全新的界面风格,被称为“Modern UI”或“Metro UI”,它以简洁、...
这个压缩包文件“黑色漂亮的网页模板3294_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar”包含了用于构建现代网页设计的重要元素,特别是对于那些希望创建专业、吸引人的黑色主题网站的开发者来说。...
6. **响应式设计**:随着移动设备的普及,响应式设计变得至关重要。这些设计可能展示了如何让网站在不同屏幕尺寸上保持一致的用户体验,这对于现代网页设计来说是基础要求。 7. **用户体验(UX)与用户界面(UI)...
通过这个模板,开发者可以学习如何构建响应式、高性能的PWA,以及如何利用现代Web技术实现接近原生应用的用户体验。此外,熟悉PWA的最佳实践,如使用HTTPS、实现Add to Home Screen功能、优化首字节时间(TTFB)和...
在本项目中,CSS文件可能包含了多个类选择器、ID选择器和伪类,用于实现响应式设计,使网页在不同设备和屏幕尺寸上都能良好显示。理解CSS盒模型、布局模式(如流体布局、网格布局)以及媒体查询是提升网页视觉效果的...