有关 Web 响应式设计的 7 点启发

2024-02-21 20:08
文章标签 设计 web 响应 启发

本文主要是介绍有关 Web 响应式设计的 7 点启发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开发者视角中的优秀并不意味着用户也有同样的感受。国外知名电子商务网站 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 响应式设计的 7 点启发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/732932

相关文章

springboot filter实现请求响应全链路拦截

《springbootfilter实现请求响应全链路拦截》这篇文章主要为大家详细介绍了SpringBoot如何结合Filter同时拦截请求和响应,从而实现​​日志采集自动化,感兴趣的小伙伴可以跟随小... 目录一、为什么你需要这个过滤器?​​​二、核心实现:一个Filter搞定双向数据流​​​​三、完整代码

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

springMVC返回Http响应的实现

《springMVC返回Http响应的实现》本文主要介绍了在SpringBoot中使用@Controller、@ResponseBody和@RestController注解进行HTTP响应返回的方法,... 目录一、返回页面二、@Controller和@ResponseBody与RestController

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解?二、应用场景三、实战案例注解方式编程方式总结 前言