汕头网站开发：弹性网页设计之路

在网页设计的世界里，我们倾向于专注于现在和现在。在“ 弹性网页设计”中“杰里米基思强调了从过去学习的重要性，以便更好地为未来做好准备。那么，也许我们应该停止思考，超越现在的时刻？以下是Jeremy网页的摘录._设计增加了清晰度。使用颜色，排版，层次，对比度和所有其他工具，设计师可以采用无序的混乱信息，并将其转化为易于使用和令人愉悦的东西。就像生命本身一样，设计可以赢得对抗宇宙熵的小胜利，从混乱的原材料中创造出一些秩序。“凯尔经之书”是1200多年前创作的精美插图手稿。将它称为艺术品很诱人，但这是一项设计工作。本书的目的是传达信息; 基督教的福音书。通过使用插图和书法，这个信息在一个诱人的环境中传达，令人赏心悦目。

汕头网站开发设计增加了清晰度 使用颜色，排版，层次，对比度和所有其他工具，设计师可以采用无序的混乱信息，并将其转化为易于使用和令人愉悦的东西。就像生命本身一样，设计可以赢得对抗宇宙熵的小胜利，从混乱的原材料中创造出一些秩序。

“凯尔经之书”是1200多年前创作的精美插图手稿。将它称为艺术品很诱人，但这是一项设计工作。本书的目的是传达信息; 基督教的福音书。通过使用插图和书法，这个信息在一个诱人的环境中传达，令人赏心悦目。

设计在约束内工作。制作凯尔斯书的哥伦布僧侣用牛皮纸上的四种墨水制作，这是一种用小牛皮制成的材料。材料简单但明确。修道士的设计师知道油墨的色调，牛皮纸的重量，而且至关重要的是，他们知道每页的尺寸。

印刷品和革命

在过去的千年左右，材料和工艺已发生变化和演变。古腾堡发明的可移动式是一种生产革命。虽然创建第一本“凯尔经”书的第二份副本需要花费同样的时间来制作第一本书，但古腾堡圣经的多份副本可以用更少的劳动力生产出来。即便如此，许多设计模式，如落帽和柱子都是从照明手稿中传承下来的。基本的设计过程保持不变：了解页面的宽度和高度，设计师创造了令人愉悦的元素排列。

随着瑞士风格的兴起，印刷设计师的技术在20世纪达到了顶峰。JosefMüller-Brockmann和Jan Tschichold等设计师的作品体现了其结构化的布局和清晰的排版。他们根据前几个世纪的设计制定了网格系统和印刷尺度。

了解页面尺寸的比例，设计师可以最大限度地定位元素。该页面是一个约束，网格系统是一种强制命令的方式。

把你的才能带到网上

当网络在20世纪90年代开始征服世界时，设计师开始从纸张迁移到像素。David Siegel的创建杀手网站恰逢其时。它的巧妙TABLE和GIF黑客攻击允许设计师复制他们之前为打印页面创建的相同类型的布局。

这些TABLE布局后来变成了CSS布局，但基本思想保持不变：浏览器窗口 - 就像它之前的页面一样 - 被视为设计师强加订单的已知约束。

这种方法存在问题。虽然一张纸或牛皮纸具有固定的比例，但浏览器窗口可以是任何尺寸。网页设计师无法事先知道任何特定人的浏览器窗口的大小。

设计师已经习惯于知道他们正在设计的矩形的尺寸。网络删除了该约束。

如果它不是固定的，不要打破它

没有什么比未知的更令人恐惧了。前美国国防部长拉姆斯菲尔德的这些话应该是真正可怕的（虽然当时的普遍共识是他们听起来像胡说八道）：

有已知的知识。有些事我们知道我们知道。我们也知道有一些已知的未知数，也就是说我们知道有一些我们不知道的事情。但也有未知的未知因素 - 我们不知道我们不知道的那些。

浏览器窗口的比例只是网络上已知未知的一个示例。处理这种情况的最简单方法是使用灵活的单位进行布局：百分比而不是像素。相反，设计师选择假装浏览器尺寸是众所周知的。他们为一个特定的窗口大小创建了固定宽度的布局。

在网络的早期，大多数显示器宽640像素。Web设计人员创建了640像素宽的布局。随着越来越多的人开始使用800像素宽的显示器，越来越多的设计师开始创建800像素宽的布局。几年后，它变成了1024像素。在某些时候，网页设计师将960像素的幻数确定为理想宽度。

就好像网页设计社区正在参与共同的共识幻觉。他们没有承认浏览器窗口的灵活性，而是选择以一组宽度作为理想...即使这意味着每隔几年改变一次理想。

不是每个人都同意这个网络范围的备忘录。

道或道不

在2000年，在线杂志A List Apart发表了一篇题为“网页设计之道 ”的文章。它经受住了时间的考验。

在文章中，约翰·奥尔索普指出，新媒体通常是通过接受先前媒介的转义开始的。Scott McCloud在他的“ 理解漫画”一书中提出了同样的观点：

每种新媒体都是通过模仿其前辈来开始的。许多早期电影都喜欢拍摄舞台剧; 早期的电视就像是带有图片或缩小电影的收音机。

考虑到这一点，网页设计开始尝试重新创建设计师从印刷世界熟悉的各种布局，这并不奇怪。正如约翰所说：

“杀手网站”通常是那些驯服网络的野性，限制页面就好像它们是由纸制成的 - 网页桌面出版。

网页设计可以从已经通知印刷设计的几个世纪的学习中受益。马西莫·维格内利（Massimo Vignelli）的作品集中体现了瑞士风格，他的着名佳能开始了一系列无形资产，包括纪律，适当性，永恒性，责任感等等。该列表中的所有内容都可以应用于Web的设计。Vignelli的佳能还包括The Someibles列表。该列表以纸张尺寸开头。

网络不打印。纸张的已知约束 - 宽度和高度 - 根本不存在。网络不受预设尺寸的约束。约翰·奥尔索普的“网络设计之路”呼吁从业者承认这一点：

设计者在打印介质中知道并且经常在网络介质中需要的控件仅仅是打印页面的限制的功能。我们应该接受这样一个事实，即网络没有相同的约束，并设计了这种灵活性。

这种对武器的呼吁没有受到重视。设计师们仍然处于类似Matrix的共识幻觉中，每个人的浏览器宽度相同。这是可以理解的。相信一部令人放心的小说，特别是当它赋予了控制幻觉时，会有一种极大的安慰。

网页设计师坚持其固定宽度布局的舒适性还有另一个原因。该行业的工具鼓励采用类似纸张的方法来设计网络。

工具船

这是一个穷人的工匠总是责备他们的工具。然而，每个工匠都会受到他们选择的工具的影响。正如Marshall McLuhan的同事John Culkin所说，“我们塑造了我们的工具，然后我们的工具塑造了我们。”

当网页设计的学科出现时，没有专门为在网络上可视化布局而创建的软件。相反，设计师选择了现有的工具。

Adobe Photoshop最初用于图像处理; 触摸照片，应用滤镜，合成图层等。到九十年代中期，它已成为平面设计师不可或缺的工具。当那些相同的设计师开始为网络设计时，他们继续使用他们已经熟悉的软件。

如果您曾经使用过Photoshop，那么当您从“文件”菜单中选择“新建”时，您将会知道会发生什么：系统会要求您输入要在其中工作的画布的固定尺寸。在添加单个像素之前，已经做出了基本的设计决定，这加强了不灵活的网络的共识幻觉。

单凭Photoshop无法承担固定宽度思维的责任。毕竟，它从未打算用于设计网页。最终，软件的发布具有创建网页的特定目标。Macromedia的Dreamweaver是网页设计工具的早期例子。不幸的是，它根据所见即所得的想法运作：所见即所得。

虽然在使用Dreamweaver设计时，您所看到的就是您所获得的，但在网络上并不能保证您所看到的是其他人将获得的。再一次，鼓励网页设计师接受控制幻觉，而不是面对媒体固有的不确定性。

可以克服Photoshop和Dreamweaver等工具的内置偏差，但这并不容易。我们可能会认为我们控制着我们的工具，我们将它们弯曲到我们的意愿，但事实是所有软件都是固定的软件。正如未来学家Jamais Cascio所说，“像所有技术一样，软件具有内在的政治性”：

代码不可避免地反映了其创作者的选择，偏见和欲望。

难怪那些使用他们工具的设计师制作的网站反映了这些工具中的假设 - 围绕控制和驯服万维网已知未知数的能力的假设。

眼见为实

到二十一世纪的第一个十年中期，网页设计领域受到多种假设的支撑：

• 每个人都在用足够大的屏幕浏览，以查看960像素宽的布局;

• 每个人都有宽带互联网接入，减少了优化网页上图像数量和文件大小的需要;

• 每个人都在使用安装了最新插件的现代网络浏览器。

少数网页设计师仍在恳求流畅的布局。我把自己算在他们的数字中。我们的忍耐方式与街头角落里的厄运先知一样，穿着夹着“The End Is Nigh”的夹心板 - 一种不方便但无害的分心。

甚至有设计师建议Photoshop可能不是网络的最佳工具，我们可以考虑使用CSS和HTML直接在浏览器中进行设计。这种做法被批评为过于拘束。正如我们所看到的，Photoshop有自己的约束，但是那些已被设计师内化的设计师如此舒适，以至于他们不再认识到它的缺点。

关于设计Photoshop comps和在浏览器中进行设计的优点的辩论，如果不是一个能够永远改变网页设计世界的事件，那么它将在很大程度上保持学术性。

被困在手机里面

一个iPod。一部手机。和互联网沟通。一个iPod。一部电话......你收到了吗？这些不是三个独立的设备。这是一个设备。我们称之为：iPhone。

凭借2007年的这些话，史蒂夫乔布斯推出了一款可用于浏览万维网的移动设备。

具有网络功能的移动设备存在于iPhone之前，但它们主要限于显示一种称为WML的专用移动友好文件格式。很少有设备可以呈现HTML。随着iPhone及其竞争对手的推出，手持设备随着现代网络浏览器的出现而成为网络上的一等公民。这使网页设计领域陷入混乱。

构成整个行业基础的假设现在受到质疑：

• 我们如何知道人们是使用宽屏桌面屏幕还是窄屏手持屏幕？

• 我们如何知道人们是在家中使用快速宽带连接还是使用慢速移动网络进行浏览？

• 我们如何知道设备是否支持特定技术或插件？

移动设备的兴起使网页设计师面临着网络的真实本质，这是一种充满未知数的灵活媒介。

对这种新曝光现实的最初反应涉及分割。而不是重新考虑现有的桌面优化网站，如果移动设备可以被分流到一个单独的孤岛，该怎么办？这个移动贫民窟经常位于“真实”网站的单独子域：m.example.com或mobile.example.com。

使用术语“移动网络”代替更准确的术语“在移动设备上体验的网络”来支持这种细分的方法。在他们早先的共识幻觉的传统中，网页设计师不仅仅考虑移动和桌面作为单独的设备类，但作为完全独立的网站。

确定哪些设备被发送到哪个子域需要根据不断扩展的已知浏览器列表检查浏览器的用户代理字符串。这是红色女王的比赛只是为了保持最新状态。除了易出错之外，它也是相当随意的。虽然可能曾经很容易将iPhone分类为移动设备，但随着时间的推移，这种区别变得更加困难。随着iPad等平板电脑的推出，不再需要将哪些设备重定向到移动网址。也许是一个新的子域名--t.example.com或者是tablet.example.com - 以及一个像“平板电脑网络”这样的新术语。但是“ 电视网 ”或“支持互联网的冰箱网”呢？

我们是一个

为不同设备创建不同站点的做法只是没有扩展。它也与一个名为One Web的长期理想背道而驰：

一个Web意味着在合理的范围内为用户提供相同的信息和服务，而不管他们使用的设备如何。

但这并不意味着应该为小屏幕设备提供专为更大尺寸设计的页面布局：

但是，这并不意味着在所有设备上完全相同的表示形式提供完全相同的信息。

如果网页设计师希望忠于One Web的精神，他们需要在不同设备的情况下向所有人提供相同URL的相同核心内容。同时，他们需要能够根据可用的屏幕空间创建不同的布局。

一种通用的网页设计方法的共同错觉开始消失。它逐渐被接受不断变化的流体性质所取代。

正面回应

2010年4月，Ethan Marcotte站在西雅图的An Event Apart舞台上，这是一个为网站制作人员的聚会。他谈到了建筑界的一个有趣的思想流派：响应式设计，建筑可以根据使用建筑物的人们的需求进行改变和适应的想法。他解释说，这可能是一种制作网站的方法。

一个月后，他在一篇名为“ 响应式网页设计”的文章中扩展了这一想法。它发布在A List Apart上，这是十年前John Allsopp的网页设计A Dao发布的网站。Ethan的文章与John早先的口号相同。事实上，Ethan通过引用网络设计的Dao开始他的文章。

这两篇文章都呼吁网页设计师接受One Web的概念。但是，尽管A Dao Of Web Design在很大程度上被设计师拒绝了他们所见即所得的工具，但响应式网页设计却让设计师们迫切希望解决移动难题。

相邻可能

作家史蒂文约翰逊记录了发明和创新的历史。在他的“ 善意来自何处”一书中，他探讨了一种名为“相邻可能”的想法：

在生物圈不断扩大的时间线的每个时刻，都有无法解锁的大门。在人类文化中，我们喜欢将突破性的想法视为时间轴上的突然加速，其中一个天才跳跃了五十年，并且发明了一些被困在当下的正常思想无法想象出来的东西。但事实是，技术（和科学）的进步很少会突破相邻的可能性; 文化进步的历史几乎无一例外地讲述了一扇通往另一扇门的故事，一次探索宫殿一个房间。

这就是微波炉不能在中世纪法国发明的原因; 有太多的前面步骤 - 制造，能源，理论 - 来实现这种飞跃。没有万维网，Facebook就不可能存在，没有互联网就无法存在，没有计算机就无法存在，等等。每个步骤取决于下面的累积层。

当Ethan创造了响应式网页设计这一术语时，许多技术进步已经到位。正如我在前言中撰写的关于该主题的Ethan的后续着作：

这些技术已经存在：流体网格，灵活的图像和媒体查询。但是Ethan将这些技术统一在一个横幅上，这样做改变了我们对网页设计的看法。

1. 流体网格。从TABLE布局的日子开始，我们就一直使用百分比而非像素的选项。

2. 灵活的图像。Richard Rutter进行的研究表明，浏览器越来越擅长调整图像大小。图像的固有尺寸不必是限制因素。

3. 媒体查询。由于CSS的错误处理模型，浏览器随着时间的推移一直在添加功能。其中一个功能是CSS媒体查询 - 根据某些参数定义样式的功能，例如浏览器窗口的尺寸。

层已到位。在移动业的不断崛起的推动下，变革的愿望也已到位。所需要的是一个可以团结起来的口号。这就是Ethan为我们提供的响应式网页设计。

改变心态

响应式设计的第一个实验涉及改造现有的以桌面为中心的网站：将像素转换为百分比，并添加媒体查询以删除较小屏幕上的网格布局。但这种被动的方法并没有提供坚实的基础。幸运的是，另一个口号能够封装出更具弹性的方法。

为了应对移动设备的优势，Luke Wroblewski创造了Mobile First这个术语：

丢失80％的屏幕空间会迫使您集中注意力。您需要确保屏幕上显示的内容是您的客户和业务最重要的功能集。根本没有任何界面碎片或可疑价值内容的空间。你需要知道什么是最重要的。

如果您可以确定内容的优先级并使其在小屏幕的狭窄空间内工作，那么您将创建一个强大的弹性设计，您可以在更大的屏幕尺寸上进行构建。

Stephanie和Bryan Rieger封装了移动优先的响应式设计方法：

缺少媒体查询是您的第一个媒体查询。

在这种情况下，Mobile First不仅仅关注移动设备本身，而是专注于为内容和任务设置优先级，而不管设备如何。它不鼓励假设。在过去，网页设计师已经违背了对桌面设备的毫无根据的假设。现在，避免对移动设备做出假设同样重要。

Web设计人员无法再对屏幕大小，带宽或浏览器功能做出假设。他们留下了真正受他们控制的网站的一个方面：内容。

设计师马克·博尔顿（Mark Boulton）回应网页设计之路，将这种新方法融入历史背景：

拥抱网络的流动性。设计布局和系统可以应对他们可能遇到的任何环境。但我们能够做到这一点的唯一方法就是摆脱束缚我们脖子的思维方式。他们把我们拉回来了。 从内容开始设计，而不是画布。

这种内容丰富的思维方式与可追溯到“凯尔经”之书的画布式方法根本不同。它要求网页设计师放弃控制的幻觉，并为万维网创建一个实质上诚实的学科。

放弃控制并不意味着放弃质量。恰恰相反。在承认网络设计中涉及的许多未知因素时，设计师可以灵活的弹性方式制作出适合媒体的方式。

德克萨斯州网页设计师Trent Walton最初对响应式设计持谨慎态度，但很快意识到这是一种比创建固定宽度的Photoshop模型更真实，更真实的方法：

我对响应的热爱围绕着我的网站将随时随地满足您的想法 - 从移动设备到成熟的桌面以及介于两者之间的任何地方。

多年来，网页设计是由设计师决定的。用户别无选择，只能满足网站对特定大小的屏幕或特定速度的网络连接的需求。现在，网页设计可以是设计者和用户之间的对话。现在，网页设计可以反映网络本身的基本原则。

在万维网二十周年之际，Tim Berners-Lee为“科学美国人”撰写了一篇文章，其中重申了这些基本原则：

Web的有用性和增长的基本设计原则是普遍性。网络应该可供残障人士使用。它必须适用于任何形式的信息，无论是文档还是数据点，以及任何质量的信息 - 从愚蠢的推文到学术论文。它应该可以从任何可以连接到互联网的硬件访问：固定或移动，小屏幕或大型。

汕头网站开发