有关 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

相关文章

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者,全网30w+

9.8javaweb项目总结

1.主界面用户信息显示 登录成功后,将用户信息存储在记录在 localStorage中,然后进入界面之前通过js来渲染主界面 存储用户信息 将用户信息渲染在主界面上,并且头像设置跳转,到个人资料界面 这里数据库中还没有设置相关信息 2.模糊查找 检测输入框是否有变更,有的话调用方法,进行查找 发送检测请求,然后接收的时候设置最多显示四个类似的搜索结果