两个中文网站就像几块画笔,你能自如地进行 Web 结构设计。但是,Web 结构设计和油画不一样的地方是,并非其他人单厢如你所想地认知你的中文网站。
互联网既非常大又有名,电子设备却愈来愈小,愈来愈精致。从那时起,你要在不影响经典作品质感的大前提下修正它的大小不一,以适应环境更小的画笔。
这是积极响应式结构设计的余力。从那时起,他们在 PC 端和智能手机端下载许多中文网站的新体验都较好,但并并非一开始是这样的,合作开发者透过十多年测试才达到这一点儿,而且他们仍在每晚改良。
在责任编辑中,他们将研讨积极响应式 Web 结构设计的历史,介绍中文网站合作开发是怎样随着时间发展的。
互联网晚期
还提过互联网晚期大部份中文网站看上去都很酷吗?仅在互联网上正式发布自己的网页就已经是几项非常大的创举了。即便只是用 Geocities 或 Angelfire 这些最先的T8300服务项目做的网页,你能将其展现给朋友,那实在是世界上最棒的事之一。
从那时起候结构雕塑家的工作非常简单:现代人根本无法透过台式计算机玩游戏,电子设备的解析度和x1080就那么三种,所以结构雕塑家能在两个萤幕上任一产业布局,而无须太害怕其他萤幕的体积。
Yahoo 2001 年的网页
从那时起,中文网站经常强逼使用者使用图形界面应用程序。再次结构设计整座中文网站以适应环境一些不常用体积的电子设备是几项繁重的各项任务,许多公司都不愿花这个心力。
CSS 出现以后
在过去的 20 年左右的时间里,大多数合作开发者都从 Web 合作开发入门编程,也是说他们要学习 HTML 这一构建中文网站的基本要素。
用最基本的术语来说,HTML 元素是在默认情况下彼此堆叠的矩形框。透过几个装有文本和图像的盒子,你能实现简单的效果。
从那时起候他们能使用的 HTML 标签很少,包括 h1 – h6 标签,图像标签,列表,表格,段落等等基本的标签(从那时起可能使用 CSS 替代了)。
以下是两个最基本的 HTML 网页:
<html><head> <title>FreeCodeCamp</title></head><body> <h1>FreeCodeCamp</h1> <img src=“logo.jpg” height=“150” width=“150” align=“right”> <p>Text goes here</p> <p>Text goes here</p></body></html>两个基本的 HTML 网页
从那时起候没有结构化或统一的方式产业布局 HTML,但是好在 HTML 透过特殊标签提供了一些自定义功能。
大部份这些标记甚至沿用到今天,虽然其中一些因为太基础已经在 HTML5 中被弃用。例如,有两个 <marquee> 标记,用于创建滚动的文本、图像和其他 HTML 元素。
从那时起,仅透过 CSS 就能达到相同的效果。但是从那时起,合作开发者要为每个功能创建单独的标签。(有趣的事实:如果你搜索 “marquee 标签”,会看到 Google 制作的两个复活节彩蛋。)因此,结构设计人员需要一种结构化的产业布局元素的方式,需要是灵活的且完全可定制。
所以,级联样式表(Cascading Style Sheets,CSS)出现了,这是对 HTML 元素产业布局的一种标准。
级联样式表或 CSS 是一种产业布局任何 HTML 元素的方式。CSS 有一组预定义属性,能应用于任何 HTML 元素。这些样式能直接嵌入在两个 HTML 网页中,也能用作外部 .css 文件。
这是网页结构设计的两个重要里程碑。从那时起,结构设计人员能选择更改 HTML 元素的每个属性,并将它们放置在所需的位置。
当萤幕开始缩放
到这里,结构设计人员已经能完全控制网页了,他们需要确保两个网页在不同体积的萤幕上均显示良好。
图形界面端今天仍然很流行,但是大多数人是使用手持移动电子设备上网。从那时起,结构设计人员要处理的宽度减小了,但高度却变得更高,因为与图形界面端相比,触摸屏电子设备上滚动显示网页非常方便。
中文网站要考虑积极响应式 Web 结构设计了。
积极响应式 Web 结构设计是一种网页结构设计方法,可使网页在各种设备以及窗口或萤幕体积上都能较好地呈现。
对于较小萤幕的处理,最常用的方法是侧边栏。边栏就像两个抽屉,其中保留了链接和其他不太重要的内容。结构设计人员只需将大部份辅助内容放到侧边栏,使网页看上去干净。但其实侧边栏最初并并非为此目的而结构设计的。
在此以后,<frameset> 和 <frame> 标签非常流行,因为它们允许结构设计人员嵌入外部网页。但是,与从那时起流行的 <iframe> 标签不同,这些标签反应迟钝,因为它们无法适应环境不同的萤幕体积,即便在较小萤幕上也是保持原产业布局,看上去很糟糕。
<frameset rows=“100,*”> <frame src=“header.html”/> <frameset cols=“33%,33%,*”>Nested frameset
<frame src=“subframe1.html”/> <frame src=“subframe2.html”/> <frame src=“subframe3.html”/> </frameset></frameset>在图形界面端,输出看上去完全正常,但在移动电子设备上却不行。
framesets 在图形界面端和移动端的显示
向积极响应式结构设计过渡
那些陈旧的、非常大的、包含成千上万个网页的中文网站面临着两个难题:积极响应还是不积极响应。
网页结构雕塑家们都知道:从较大萤幕切换到较小萤幕挺麻烦的——画笔变小,而画作要保持不变,要么需要删除画作的某些部分,要么使其适应环境。
由于从那时起候没有关于积极响应结构设计的指导准则,结构雕塑家通常采用一种幼稚的方式,将元素放置在萤幕的各个部分。
例如,使用 <table> 标签。
从许多方面来说,使用 <table> 标签进行产业布局并非一种好的做法,例如:
表格不适合产业布局,而是以紧凑形式显示列表数据<table> 标签和 <frameset> 标签一样,不能积极响应,因此无法适应环境较小的萤幕体积表格需要在加载完大部份单元格之后才能渲染,而使用 <div> 标签进行产业布局,则能独立加载大型中文网站案例
让他们看看一些大型中文网站怎样处理这一难题。
以 YouTube 为例,你可能已经看过 YouTube 的图形界面版,内容许多,包括顶部的标题,左侧的边栏,彼此堆叠的视频以及页脚。大多数内容对于移动端使用者来说是无须要的。
YouTube 在图形界面端和移动端的显示
YouTube 可能采用了积极响应式结构设计,将多余的元素隐藏在某个地方。
如果你结构设计过中文网站,就知道中文网站性能的重要性。你放在
YouTube 是两个老中文网站。修改已有代码可能会破坏一些内容。因此,YouTube 采用了一种动态服务项目。
动态服务项目是服务项目器检查网页是在图形界面端还是在移动端打开的一种方法,然后,它会根据电子设备类型动态地为网页提供服务项目。
这种方法易于实现,因为结构设计人员无须处理不同的萤幕体积。但它也经常不受欢迎,因为如果配置不正确,可能会由于重复的内容问题而影响 SEO。
对于移动端版本,通常使用 m.<site-name> .com 这样的子域名。
类似地,Facebook、Wikipedia 和其他大型中文网站也采用这种方式。积极响应式 Web 结构设计是一种理想的解决方案,但是比较难以实现。
其他一些中文网站决定不采用积极响应式结构设计,而是构建两个移动应用程序。考虑到未来发展,构建移动应用程序是一种合理的方法。但是安装移动应用程序需要使用者的信任,因为相比 Web apps,它们能访问更多数据。
此外,本地移动应用程序的问题是它们的合作开发成本很高,因为一套结构设计和功能要要适应环境不同的平台。
积极响应式 Web 结构设计策略
上面说的是已有站点所面临的问题。对于新中文网站,积极响应式结构设计已成为与其他中文网站竞争的必要条件。
谷歌最近还推出了移动优先索引,也是说,在移动电子设备上搜索时,谷歌会优先选择移动端友好的中文网站,这是需要做积极响应式涉及到另两个原因。
移动优先
假设你有两个装满东西的手提箱,将物品从较小的手提箱转移到较大的手提箱更容易呢,还是从较大的手提箱转移到较小的手提箱更容易?
在移动优先的策略下,首先使中文网站与移动电子设备兼容,然后再看在过渡到更大萤幕时怎样修正。
移动优先策略
关于这个策略的两个误解是,现代人认为它的意思是“仅适用于移动电子设备”。其实移动优先并不意味着仅针对移动端进行结构设计,这只是一种安全、容易的方法。
与图形界面端相比,移动萤幕上的可用空间要小得多,因此要用以显示核心内容。
此外,移动使用者更频繁地切换网页,因此立即吸引他们的注意很重要。由于网页上的元素较少,并且重点放在内容上,因此网页能更整洁。
Web 结构设计的未来
互联网正以惊人的速度发展,现代人正在将业务转移到线上,竞争比以往更加激烈。有人在讨论企业是否真的还需要移动应用程序。随着渐进式 Web 应用程序(PWA)和各种 Web API 的出现,互联网比以前更加强大。从那时起,PWA 能实现大多数功能,例如通知、定位、缓存和离线兼容性。
PWA 是一种基于网页的应用,使用 HTML,CSS 和 JavaScript 等常用 Web 技术构建。
创建 PWA 的过程非常简单,但这超出了责任编辑的范围和核心思想,我
安装 PWA
你可能已经注意到上面 Chrome 应用程序中的“添加到主萤幕”按钮。对于普通中文网站,它只不过是主萤幕上的快捷方式图标。但是,如果中文网站是 PWA,则能做很多非常酷的事。
你不需要安装 Web 应用程序即可运行 PWA,它就像本地应用程序。另外,PWA 能作为独立的 Web 应用程序运行,顶部没有 Chrome 地址栏,这样就更像应用程序了。PWA 也能在图形界面端工作,这使其成为任何新应用程序的理想之选。它能在具有 Web 应用程序的任何平台上运行,安全并且具有大部份基本的本地功能。
需要明确说明的是:PWA 不能替代本地应用程序。本地应用程序将继续存在。PWA 只是实现这些功能的一种简单方法,它让你无需实际构建移动应用程序。
展望 Web 的未来
他们能看到,随着技术不断发展,互联网变得愈来愈容易访问,玩游戏的使用者数量呈指数增长。
Web 结构设计趋势的转变更倾向于性能和使用者新体验,并且将持续如此。他们还将朝着 Web 3.0 迈进。
Web 3.0 是下一代互联网技术,在很大程度上依赖于机器学习和人工智能(AI)的使用。它旨在创建更多开放的、连接的且智能的中文网站和 Web 应用程序。
这意味着一切都将被连接起来,机器也将联网,类似于爬虫爬取中文网站信息并认知网页的上下文。而两个良好、干净、精致、着重于内容的网页结构设计将帮助机器更好地认知事物。互联网是两个开放的地方,充满创新的事物。他们可能正在向两个意识控制的互联网迈进!
结语
积极响应式结构设计
纵观互联网发展史,他们能看到一些曾经流行的技术逐渐变得过时,现代人仍在持续构建更好的互联网。在这个时代,使用者新体验已经成为首要
互联网充满魅力,他们能从许多很酷的中文网站得到启发。让他们保持热情,继续前进。
原文链接:https://www.freecodecamp.org/news/history-of-responsive-web-design/
作者:Abhishek Chaudhary
译者:Chengjun.L
直播活动预告
9.12 周六上午 10:00 – 11:30,思科软件工程师 S1ng S1ng 继续直播做 freeCodeCamp 的 JS 中级算法题目。他会在活动中分析不同的解题思路,帮助大家学习和巩固 JS 基础知识。
扫码在 freeCodeCamp bilibili 直播间观看、讨论
非营利组织 freeCodeCamp.org 自 2014 年成立以来,以“帮助现代人免费学习编程”为使命,创建了大量免费的编程教程,包括交互式课程、视频课程、文章等。他们正在帮助全球数百万人学习编程,希望让世界上每个人都有机会获得免费的优质的编程教育资源,成为合作开发者或者运用编程去解决问题。
你也想成为
freeCodeCamp 社区的贡献者吗
欢迎点击以下文章介绍
✨✨招募丨freeCodeCamp 翻译计划成为 freeCodeCamp 专栏作者,与世界各地的开发者分享技术知识在 freeCodeCamp 专栏阅读更多