在信息技术限制下设计网站

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

在信息技术限制下设计网站技术,特别是信息技术发展迅速。人们已经适应了我们所使用的硬件和软件不断的、巨大的和快速的变化。通常的做法是适应这些变化,并使软件和硬件保持最新。

将浏览器升级到最新版本只需几分钟。操作系统每隔几年更新一次。每三年买一台新电脑是很正常的。

哦,是这样吗?

不出所料,仍然有很多人(实际上是很多人)跟不上现代技术的发展趋势。他们可能是你的哥哥姐姐,你的祖父母,你的老板。

他们可能出生和成长在一个计算设备不像今天这样“主流”的时代。他们可能是由于经济状况或地理限制而无法使用电脑或互联网的个人。在一个面向网页设计/网页开发的网站上阅读这篇文章(可能是通过一个现代的和标准兼容的网页浏览器)1比如Firefox或Chrome),你可能很难想象这些情况。

但是,特别是在主流领域,为技术背景有限的用户和客户设计是太常见了;个人被淹没在信息技术中,没有选择。当我们希望我们的网站不仅对精通技术的人有用,而且对没有什么IT背景的人也有用时,会发生什么?哦,是这样吗?

你的老式客户和他们的限制

有IT限制的客户并不像你想象的那么稀缺。如果你恰好像我一样为学术机构工作,你会发现相当多这样的人想要一个个人网站来展示他们的个人简介、研究和出版物、课程表、学生资源等等。你可能想知道为什么对信息技术不感兴趣的人会想要一个网站。

可能的答案是,要么是他们所在的机构根据法律要求(就像在我的国家一样),要么是他们想要与拥有自己网站的同事保持竞争力。他们可能会看到拥有一个网站的价值,而不管他们是否熟悉与之相关的底层技术和概念。所以你创建了一个美妙的网站使用最新的,最好的和最友好的用户内容管理系统(CMS)你可以找到。

以今天的标准来看,它看起来很时尚。它功能强大,满足客户的目标。但当把它呈现给最后的法官——我们的老客户——的时候,哦,灾难!

后来,你发现他们使用的浏览器是IE6。您用来从为它们设置的Flickr帐户异步和远程加载图像的漂亮的Ajax脚本不起作用,因为它们禁用了JavaScript。他们无法登录CMS的管理面板来编辑他们的帖子,因为系统需要他们启用cookie,而他们也关闭了这一功能。布局看起来很糟糕,因为我们都知道,IE6有完全浪费我们投入CSS完善的时间的倾向。

客户不理解为什么这里或那里的颜色不是更亮,或者为什么没有明显的新闻部分或他们的电子邮件地址的指示(所谓的“明显指示”,我指的是我们忘记使用的闪烁文本和旋转@符号动画GIF)。你的老客户和他们的问题有一个水平滚动条隐藏了20%的网站布局。“联系在哪里?”

等等,那是链接?它不是蓝色的,也没有下划线,我没有看到。”你的客户显然对你所做的工作感到困惑。你有点慌张,还有点沮丧。

你看了看日历,没错,上面写着" 2010 "脚本在网站上很常见,计算机屏幕分辨率不再是800×600,有一些很棒的基于标准的免费浏览器可以在几分钟内安装(或者至少是IE的升级版本),疯狂的gif动画是passé。但你的雇主似乎对这些事实视而不见。我们将何去何从?

1 .教育

花时间解释你的客户错过了什么是必须的,这是处理这件事的专业方式。你有义务教育他们这些进步和要求。教育你的雇主很重要,原因有二。

教育客户是工作的一部分

你尊重客户的需求,并希望他们从未来的网站中获得最大的收益。因为他们正在使用网络,他们最终可能会遇到他们拒绝/忽视的技术。此外,他们会记得你与他们分享的建议和信息,并会感谢你花时间向他们解释这些事情。

使用客户能够理解的隐喻是一种有效的教学和关系技巧。例如,由于我主要与研究人员和学者一起工作,我告诉他们使用IE6就像使用放大镜而不是显微镜(即现代浏览器)来浏览他们的细胞集合(即网站)。

你的职业声誉岌岌可危

如果你不花时间解释你建立的网站的“故障”,你可能会给人留下不专业和缺乏知识的印象。用你的专业知识来表明你明白发生了什么,并且你可以解决它以满足客户的需求。

第二步:接受有些人不会改变的事实

从我的个人经验来看,无论你的论证有多好,你可能都无法说服许多客户使用现代IT实践。即使我为他们安装另一种浏览器,人们仍然使用IE6;升级到最新版本的IE将是徒劳的尝试,因为系统不允许。我会调整他们的显示器分辨率,以适当地调整他们的屏幕,使图像不模糊或拉伸,但他们已经习惯了这种情况,他们很快就会回到800×600,即使网页看起来很畸形。

他们对JavaScript很谨慎。即使我花时间在他们的主电脑上为他们设置安全设置,他们还有其他设备,如家用电脑和笔记本电脑,这些设备无法正确设置。长话短说:如果您知道特定站点的客户端和受众将处于这些过时的IT环境中,那么您必须创建能够在这些环境中工作的设计。

步骤3:了解一般设计关注点

为了让一个网站在受限的条件下正常工作,我个人更倾向于完全依赖格式良好、干净的HTML和CSS。这确保了跨浏览器兼容性,并减少了呈现问题的可能性。

脚本

是否使用脚本是一个很大的难题。例如,JavaScript被用于社交媒体集成和第三方web服务等谷歌分析.如果客户端不关心社交网络,你当然可以不整合社交媒体,你可以使用服务器端分析软件来跟踪网站统计,但它仍然缩小了提供丰富和吸引人的网络体验的选择范围。

如果您希望使用脚本实现功能,请让您的客户做好准备。询问他们浏览器中是否激活了脚本。询问他们使用的是什么浏览器,并指导他们如何检查JavaScript或cookie选项。

更好的是:您可以编写一个脚本来检查这些选项特征检测如果你愿意的话。解释这些脚本的重要性,以及脚本如何增强站点的用户体验。如果你不能向你的客户证明脚本的使用——那么你真的需要它们吗?

当然,您应该始终为优雅的降级编写代码。在构建网站时,试着想象一下关闭JavaScript和cookie的情况:你的网站还能正常运行吗?导航等主要元素是否正确显示?

作为优雅退化的一个活生生的例子,看看这个jQuery幻灯片.在浏览器中关闭JavaScript,您将注意到内容仍然是可访问的。即使脚本关闭,站点也必须能够维持功能。

如果它看起来和工作起来不是最佳状态也没关系;重要的是,在这些情况下,你不会让JavaScript成为访问和使用网站的障碍。

内容布局

内容必须以统一的方式呈现。用户希望以模板化、标准化和可预测的方式查看网站内容,这意味着每个元素和组件(例如标题、页眉、导航菜单、正文文本和页脚)都不能更改,以避免混淆。简单越好。

页面布局

如果您需要设计较小的屏幕分辨率,而不能使用CSS3媒体查询,那么使用流动布局是个好主意,这样您的布局就可以根据用户显示器的大小进行调整。(阅读不同的布局类型)。这避免了部分内容水平隐藏的情况,这是由比用户显示器宽的定宽布局引起的。为了帮助解决流畅性和分辨率问题,尽量将标题和标志保持在一个地方(比如左边或中间)。

避免设置固定宽度,特别是网站宽度和主要文字区域。我个人将总布局宽度设置为70%左右,这样在宽屏上就不会太宽。我将垂直菜单宽度固定为标准值(通常为70%宽度的35%),并将其余空间留给主要文本。

与典型的固定宽度布局相比,它需要更多的数学运算——以及大量的调试工作——但对于您的客户来说,这是值得的。

网站导航

你的客户希望找到一个清晰的导航菜单,没有隐藏的秘密,所以试着把它分解成5-10页的列表,总结网站的内容。避免子类别,但如果它们必须,你可以使用CSS只下拉菜单,就像可爱的提供CSSPlay.如果你在索引页给出菜单类别的一行描述,这样用户就知道在哪里导航,以便快速找到他们要找的东西,这将是非常有用的。

代码语义和安全操作

正确的语法和元素的正确使用(标题,div,表格)有助于构建易于理解的布局。简单而漂亮的悬停效果(如背景颜色或边界变化)可以给页面一种时尚的感觉,而不需要脚本。同样的CSS背景图像的变化悬停。

在帮助用户区分网站的不同部分的情况下,您可以实现相当多的美学和功能,使用悬停状态来提示一个元素是可点击的。以一种别人能立即理解的方式来设计超链接是很重要的。蓝色加下划线,无论多么陈腐,都管用2

下划线(文字修饰:下划线;)或使用边界底部CSS属性的链接。使用不同于普通文本的颜色。最后,记得使用Web安全字体很容易读懂。

衬线还是无衬线?在易读性方面和在网络上,研究结果是不确定的。无论你使用衬线字体还是无衬线字体,都要确保字体大小不要太小。

La Cantina就是一个很好的例子,它包含了上面提到的想法。代码语义和安全操作

第四步:注意细节

如果没有脚本提供的漂亮而有用的UI效果,我们的网站将会有点平淡,但我们已经完成了我们的工作。不过,还有更多的问题等着我们解决。

浏览器测试

就IE6而言,我还没有遇到一种可能的方法来满足现代功能浏览器的需求,以及微软提供的噩梦。简洁明了的设计这将帮助您在IE6上获得良好的演示。只要有需要,我就为现代浏览器设计页面(向前兼容和标准兼容),然后当我创建我的第一个功能模板(HTML/CSS)时,我使用IE6和其他版本的Internet Explorer测试它IETester。如果有一些可以接受的渲染问题,在不完全破坏现代浏览器的情况下无法修复,我善意地向客户端解释,这是能够满足各种浏览器的最佳结果。向客户展示网站在其他浏览器上的外观是很重要的。

更具体地说,在流行的浏览器上向他们展示网站,比如最新版本的IE或Firefox——这是当今最常见的两种浏览器3.-并向他们解释这是网站通常的样子,你这样做是为了让网站设计经得起未来的考验。

本地文件中的脚本安全设置

对于存储的本地文件,IE上弹出的“出于安全原因禁用脚本”警告是一种棘手的情况。本地文件中脚本的安全性它通常发生在你在网站上线之前展示一个版本的时候(例如,在本地查看的静态原型)。如果你亲自向他们陈述,准备好解释为什么会发生这种情况,为什么这不是一种威胁,这是正常的。

如果你将文件发送给他们(因为当他们想要查看原型时,你并不总是有空),请确保提供关于如何管理该问题的明确指示。

老派和糟糕的设计偏好

如果你的客户坚持使用恼人的动图,这些动图从过去就一直困扰着你comic sans对于内容标题,您可以使用教育和培训来教导您的雇主这些类型的过时或俗气的设计实践。老派和糟糕的设计偏好使用功能性和面向用户的推理。你可以用一个和他们相关的比喻。

例如,如果我与研究人员和老师一起工作,我会让他们想象在一个有很多干扰的地方阅读一篇重要的研究论文/文件是多么困难,比如嘈杂的音乐,附近窗户里闪烁的灯光,或者有人在他们附近大声说话。他们难道不同意干扰越少越好吗?然后告诉他们,他们的网站和内容正是这样的:重要的文件(在线形式),有人需要阅读和获取信息。

吵闹的音乐、闪烁的灯光和大嗓门的同事在数字时代也有类似的表现形式,比如恼人的音效、GIF动画、糟糕的色彩选择和花哨的设计元素。建议在不牺牲用户体验的情况下实现相同目标的最佳实践和方法。例如,尽管他们要求在某个地方放置一个动画GIF,但他们的意图可能是让人们注意到一些重要的事情。

他们只是用自己熟悉的东西来描述自己的目标。为他们的问题寻找解决方案。例如,你可以建议使用独特的颜色,更大的字体来表示重要性,图标来帮助视觉认知,以及边框或下划线提供的区别用于突出显示网站的特定部分。

最后但并非最不重要的是,有些情况下,你为之工作的人会想要一个充满了过多的剪贴画和低质量照片的网站。我处理过最多的“多余”是要求将不相关的照片添加到不适当的地方,如徽标、标题和网页横幅。这会产生什么问题呢?

页面最终会超载、缓慢,老实说,还很业余。这些照片通常是客户在浏览网页时发现的图片(或通过连锁电子邮件转发给他们)。首先,要认识到他们的意图是好的。

这类要求并没有被提出你的工作简直是人间地狱.他们给你发照片可能是为了投稿和添加他们的的想法他们的的网站。无论是剪贴画、低分辨率的照片,还是在网上找到的图片,都要解释为什么它们不是个好主意。

例如,过度使用图像会导致不良后果页面响应时间,这反过来又降低了用户体验。这些图片可能受版权保护。这些图片可能质量太差,无法放在网站上。

它们可能会分散读者的注意力。把这样的情况变成积极的事情,可以加强你与客户的关系。不要把他们放在现场,开始不专业的长篇大论,摇着手指说教,而是感谢他们在设计过程中所做的努力。

记住,设计一个网站是一个合作过程

总结

在技术限制下创建网站可能是一个挑战,但你肯定能以满足每个人需求的出色结果完成它。请记住,客户的需求是第一位的,你将主要依靠你的技术和个人技能来完成项目。我期待在评论中听到你自己的技巧、建议和经验。

参考文献

  1. Firefox和Chrome用户占Six Revisions网站流量的70.48%。IE6用户占网站流量的比例不到0.3%。
  2. “为了最大限度地提高可点击性,要给链接文本上色并加下划线。[…]蓝色为链接提供了最强的信号[…]。可视化链接:7个设计指南
  3. IE8的使用率为27.90%,而IE6为16.18%。IE总市场份额为49.87%。火狐的占有率为29.95%,仅次于IE。

    网络浏览器的使用份额.2010年10月。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!