《移动优先与响应式Web设计》一1.1 变了什么?

简介:

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第1章,第1.1节,作者: 【美】Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 变了什么?

移动优先与响应式Web设计
要解释移动平台为何突然爆发,我们就要回到2006年,上一堂美国历史课。若你想象不到当年是怎样的情境,就让我跟你重新介绍一下摩托罗拉的Z3—当年大热当红的RAZR的后继者(见图1.2)。

2006年,Z3在美国是一台高端的移动电话。功能包括短信、电邮、实时通信、200万像素镜头、音乐播放器、全彩屏幕和WAP 2.0/XHTML网页浏览器;能联机至AT&T的EDGE高速数据网络。用来上网,体验完全是—糟透了。


2

到底有多糟?由开启浏览器到完全加载网页(页面只有几个纯文本链接),需耗时两分钟。而现在网页刷新速度都以毫秒作度量单位,可以想象等待两分钟有多么痛苦。但令人痛苦的还不只是速度,还要连击手机键盘来选字,绝不轻松,就算使用T9等智能输入法也没有太大帮助。

但在不到一年的时间里,发生了一件事,从此改变了一切。2007年6月29日,史蒂夫·乔布斯召开发布会介绍首代iPhone。不论是果粉与否,都很难否认iPhone对移动网络的影响。当年只有这台手机能够流畅上网。看看AT&T 2006年至2009年的移动数据流量,就会清楚它有多受欢迎(见图1.3,当年,AT&T是iPhone的独家服务供货商)。


3

那个时期,AT&T的移动数据流量增长了4932%—难怪服务一直都不太稳定!用移动设备来浏览网页,是好是坏,颇为明显。

事实上,在2009年时,一台iPhone所用的数据相当于30台基本功能手机所使用的数据—难怪iPhone的数据月费计划是定额收费的。

移动平台的增长,不只是因为质量提升,也是因为价格的下调。现在就算负担不起计算机,也可以买便宜的移动设备,配以便宜的月费计划来上网。

网速更快,覆盖更广,使移动平台的发展如虎添翼。单在2010年,移动网速就提升了一倍。随着网速的增长,智能手机的数据流量也增长了1倍。这种趋势不会就此停下来。2010年至2015年,全球移动据流量将会增长26倍!

机会正蜂拥而至。

相关文章
|
14天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
20天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox的力量
【2月更文挑战第22天】 在当今多变的互联网景观中,创建一个能够适应不同屏幕尺寸和设备类型的响应式Web界面已成为前端开发者的核心任务。本文将深入探讨Flexbox——一个强大的CSS布局模式,它为构建灵活且易于管理的响应式设计提供了坚实的基础。通过详细解读Flexbox的关键特性及其在实际项目中的应用,我们将揭示如何有效地使用这一工具来提升用户界面的质量和性能。
|
1月前
|
Web App开发 编解码 前端开发
构建响应式Web界面:现代前端开发的实用指南
【2月更文挑战第22天】 随着移动互联网的兴起,响应式网页设计已成为前端开发者必须掌握的核心技能之一。本文将深入探讨如何通过灵活运用HTML5、CSS3和JavaScript等技术,构建出能够适应不同屏幕尺寸和设备的Web界面。文章不仅涉及理论概念,还包含具体实践案例,旨在帮助读者理解并应用响应式设计的核心原则,从而提升网站的用户体验和访问效率。