必威体育下载克里斯蒂安·海尔曼

贴上“可用性”标签的帖子

在自动扶梯上绊倒

星期四,2月16日,2012年

我总是惊讶于网络上缺乏对渐进式增强的支持。每当你提到它,你面对很多“是的,但是……”你觉得必须捍卫一些应该根深蒂固的东西DNA任何在网络上工作的人。

自动扶梯

我和亚伦·古斯塔夫森在解释过去的进步时引用了美国喜剧演员的话。米奇·赫德伯格他的自动扶梯洞察:

自动扶梯永远不会坏——它只能变成楼梯。你永远不会看到“自动扶梯暂时失灵”的标志,只是“自动扶梯临时楼梯”。对不起,方便了。我们为你仍然可以站在那里而道歉。”

这才是真正的意义所在。我们的技术解决方案应该像自动扶梯一样——当技术出现故障或停电时(如果您看到CSS动画、转换、转换和JavaScript的强大功能),但它们可能不太方便使用。与现实世界中的自动扶梯不同的是,我们从来没有必要阻止它们来修理它们。

我们甚至可以从现实世界中的自必威体育下载动扶梯中学习到,当有一段时间无人使用时,自动扶梯会关闭,一旦有人踩到自动扶梯,我们就可以启动。在网上,我们称之为脚本加载或功能的条件应用。为什么要在前面加载很多图像,因为它们远离视区而看不到它们?

在现实世界中,你能看到一件有趣的事情,那就是当一个自动扶梯坏了,变成了楼梯时,人们进入它时会绊倒。我们的身体已经习惯于期待运动,我们的运动记忆会发出“啊?”当没有的时候。

这也发生在网络上。那些从来没有过没有快速连接、新的、闪亮的电脑或手机和最新浏览器的人很难思考这些情况——这感觉很奇怪。

旅行器

另一件有趣的事情是你在机场的水平走道。这是为了加速你的行走,不要替换它。但你仍然会发现人们站在那些抱怨他们的速度的人身上。

在网络上,这些人经常抱怨新技术很酷,但是他们永远无法在当前的客户机/开发环境中使用它。好,你不必这么做。你可以在两条走道之间行走,但仍然可以到达另一边——这只需要一点时间。

所以下次有人赞扬灵活的开发和设计实践时,你会不由自主地做出反应,要么谴责他们不使用最新和最酷的“每个人都有XYZ手机和浏览器ABC”,要么你只是不认为从一开始就有什么意义。HTML实现你的目标,重新使用你的结构和解释HTML正如“Gmail和Facebook也不这样做”一样,想想自动扶梯在现实世界中有多方便。

当你累的时候想一想(无障碍)。或者你带了很多行李(表演),或者你只是想在不喘不过气的情况下快速聊天。你自己的身体在不同的时间有不同的需求。逐步提高我们的产品,使我们能够满足许多不同的需求和环境。为一个人专门化和优化将会有一个更令人印象深刻的结果,但举个例子,当电梯不起作用时,它是毫无意义的——不管它看起来多么闪亮和令人印象深刻。

我们的工作是确保人们能够做他们上网的事情——从一开始就达到他们想要的目标。这可能方便快捷,也可能需要一些工作。我们的工作是确保人们不会得到一个更快更方便的方法的承诺,一旦他们尝试接受失败。

你可以评论谷歌Plus如果你想的话。

购物是不可能的——为什么人们不使用PayPal做什么?

星期三,11月3日,2010年

前几天我登录了贝宝,遇到了以下情况:

PayPal活动广告显示一位老太太正在谈论鼻毛脱除器

那是我早餐的最后一天,但我也很兴奋——我喜欢一年工资的想法,无论如何,我必须为我的一个朋友买一只老鼠。通常我会去易趣买个鼠标或者直接去支持向量机他从来没有让我失望过。但是嘿,让我们赢得额外的收入,正确的?

我做错了。我找到了两只我想买的老鼠,从皮克斯马尼亚还有一个来自诺威泰克.我点击了一下,然后被要求为每个网站注册。他们要我的地址,他们想要我的电子邮件,所有这些都隐藏在可怕的5步过程中。在我能买到我的鼠标之前,Pixmania甚至让我注册了他们的交易邮件列表。然后,我无法购买鼠标而不成为一个皮克斯迷用户-不,谢谢。NoVATEH更有趣的是,我能够通过整个过程,在付账前被告知,他们只能够把鼠标送到我的PayPal账户的地址,而不是朋友的地址——虽然我被要求先输入她的地址。

简而言之,我放弃了。我去了eBay,买了老鼠,签出使用贝宝和我做了。我不能赢得年收入,但我也保持理智。现在根本没有必要实施推广。我喜欢贝宝,我喜欢它的简单。为什么实施者不认识到我是从推广页面到他们的站点,只是让我用PayPal支付(因为这是促销的内容),然后发送我想要的产品就超出了我的范围。为什么贝宝花钱,推销像这样可怕的商店也超出了我的范围。

所以如果你用PayPal给你的商店--给我一个方法。你认识我,我可以和PayPal签到-不要让我再为你注册,要求所有的数据——填表格很烦人。我已经给了你一张空白支票,让我找个产品,点击并购买。

TTMMHTM:缩放和重新设计,用于访问的iPad,老游戏,HTML5聚乙烯填充物和独角兽

星期二,9月28日,2010年

今天早上让我快乐的事情:

清除“CSS唯一性感书签”演示代码

星期五,1月8日,2010年

在浏览我的谷歌阅读器时,我偶然发现了一篇文章,叫做纯粹的性感书签效果CSS.通常当我听到“纯净”CSS“我跳过,因为99%的解决方案不适用于键盘,因此在网络上使用是个坏主意。然而,这一个引起了我的兴趣,因为我不知道“像书签一样性感的效果”可能是什么。

事实证明,这不是色情书签,而是那些“与社交媒体分享”链接栏中的一个,你在博客帖子下面有一个链接栏,帮助那些在那里复制和粘贴受到挑战的人:

具有不同社交媒体选项的链接菜单

好啊,不会有那么大的问题。将链接列表作为一个很酷的滚动进行的技巧CSS只有2004年完成在第一CSS精灵文章.请注意,链接在列表中。

现在,新文章的HTML如下所示:

      

在我的书中有一些问题:

  • 这里没有正在发生的事情的语义结构。换行符并不意味着HTML所以本质上这是一个没有任何分离的链接列表。想象一下,在电子邮件中向朋友发送三个链接,或者把它们放到一个页面上。你会这样做吗:谷歌我可以要奶酪汉堡B3TA斯波顿?我觉得很困惑…
  • 链接中没有内容–何时CSS被关掉了,你什么都找不到。
  • 那里有相当多的班级代表。当另一个元素中的每个元素都具有相同的类时,就会发生可疑的事情。除非这个类用作微格式的句柄,你可以把它去掉,然后用级联CSS.因此,在本例中,您可以使用共享ClA{}并摆脱重复的课程。
  • 导航是一种结构化的东西,所以不是一个包含链接的DIV,使用列表怎么样?这样当CSS关闭,这仍然有道理。

这是我的替代品:

      

当然你应该换个空的Href具有实际链接的属性。

通常我使用ID而不是类,但是由于这个条可能在文档中使用过几次,让我们保持原样。

这个HTML现在是318字节,而不是294字节,这只是略有增加。但是:

  • 没有它是有意义的CSS
  • 它结构良好,甚至对屏幕阅读器也有意义
  • 链接是有意义的,因为他们说他们指向哪里。

让我们检查一下CSS

共享Cl{
_

.共享cl a
显示:块;
宽度:75 px;
高度:30px;
浮动:左;
_

.共享cl.共享sprite
背景:url(http://webdeveloperjuice.com/demos/images/share-sprite.png)no repeat_
.共享cl.sh su
右边距:5px;
背景位置:-210px-40px;
_

共享cl.sh feed
右边距:5px;
背景位置:-70px-40px;
_

.分享cl.sh tweet
右边距:5px;
背景位置:-140px-40px;
_

.共享cl.sh邮件
右边距:5px;
背景位置:0-40px;
_

共享cl.sh digg
右边距:5px;
背景位置:-280px-40px;
_

共享cl.sh面
背景位置:-350px-40px;
_

.分享cl.sh邮件:悬停
右边距:5px;
背景位置:0 1px;
_

.共享cl.sh源:悬停
右边距:5px;
背景位置:-70px 1px;
_

.分享cl.sh推特:悬停
右边距:5px;
背景位置:140px 1px;
_

.分享cl.sh su:悬停
右边距:5px;
背景位置:210px 1px;
_

.分享cl.sh digg:悬停
右边距:5px;
背景位置:280px 1px;
_

.分享cl.sh面:悬停
背景位置:350px 1px;
_

所以这里我们有很多重复。您还可以看到share sprite类的位置:如果您想向该部分添加一个元素,该元素是一个链接,但没有图像背景,那么您只需将该类去掉。这个,然而,这完全是错误的做法CSS.我们可以假设这个构造中的每个链接都得到背景图像,这就是为什么将图像应用于元素与共享ClA{}.因为每个链接都有一个类,所以您可以很容易地用例如.共享cl a.plain.

同样适用于右边距:5倍.如果这适用于除一个以外的所有链接,不要为其他人定义它,把它放在“奇数”处。相反,只对奇数应用,并保存大量代码。

决赛CSS

共享Cl{
溢出:隐藏;
边距:0;
填充:0;
列表样式:无;
_

.共享cl a
溢出:隐藏;
宽度:75 px;
高度:30px;
浮动:左;
右边距:5px;
文本缩进量:-300px;
_

.共享cl a
背景:url(http://webdeveloperjuice.com/demos/images/share-sprite.png)无重复;
_

A.SH-SU背景位置:-210px-40px;
A.SH-进料背景位置:-70px-40px;
a.sh-tweet背景位置:-140px-40px;
a.sh-mail背景位置:0-40px;
A.SH-DIGG背景位置:-280px-40px;
A.SH-面
右边距:0;
背景位置:-350px-40px;
_

a.sh-mail:悬停背景位置:0 1px;
a.sh-feed:悬停背景位置:-70px 1px;
a.sh-tweet:悬停背景位置:-140px 1px;
a.sh-su:悬停背景位置:-210px 1px;
.sh digg:悬停背景位置:-280px 1px;
A.SH-face:悬停
右边距:0;
背景位置:350px 1px;
_

从1028字节到880字节。只是通过理解CSS工作,以及如何利用级联优势。我很想摆脱选择器,同样,但它们是专一性所必需的。注意主选择器上的溢出——这修复了浮动在原始中未被清除的问题。CSS.通过使用负文本缩进,我们可以去掉显示的文本,也一样。我个人认为这很糟糕,你应该尝试显示文本,因为你不能期望最终用户知道所有这些图标。

例如:

文本
顶部边缘:3em;
字体粗细:粗体;
字体系列:Helvetica,Arial,sans-serif;
_

{文本A{
文本缩进:0;
高度:自动;
文本对齐:居中;
字体大小:11px;
填充顶部:35px;
颜色:×999;
文字装饰:无;
_

你可以看到解决方案在这里起作用

共享酒吧-由您清理。

对我来说,赞扬“仅CSS解决方案”是不够的-如果你真的喜欢CSS把它看作是比JavaScript更好的解决方案,那么你还应该展示人们如何使用它的特性来创建智能的,短而灵活的代码。

关于密码字段屏蔽和Jakob Nielsen

星期五,6月26日,2009年

Jakob Nielsen刚刚在AlertBox上发布了我们应该停止密码屏蔽(你知道,当用户输入密码时,显示星号或圆点而不是显示密码。

他的论点如下:

大多数网站(和许多其他应用程序)在用户键入密码时会屏蔽密码,因此,理论上可以防止不法分子越过用户的肩膀。当然,一个真正的技术娴熟的罪犯只需看一下键盘,然后记下哪些键正在被按下。所以,密码屏蔽甚至不能完全防止窥探者。
更重要的是,当你登录到一个网站时,通常没有人会回头看你。只有你,独自坐在办公室里,痛苦降低了可用性以防止出现问题。

这让我想知道尼尔森先生最后一次离开家和现实世界交流是什么时候。作为一个经常旅行的人,我经常看到人们登录酒店大堂的网站(例如,当他们登记航班并输入他们的奖励里程账户详细信息时)。在网吧里,或者在公共场所使用笔记本电脑。虽然很难找到键盘(尤其是快速排字机),但从他们的肩膀上看过去或(使用我的10倍光学变焦相机)甚至可以从房间的另一头看到他们在屏幕上输入的内容也没有问题。

然而,密码屏蔽不是一个100%的安全措施,但是任何在安全工作的人向你保证100%的安全是任何你应该信任的人。

我同意,尽管在移动设备上屏蔽密码会非常烦人,就像输入任何形式一样(我最喜欢的bugbear是opera mini uppercase——我在任何文本字段中输入的第一个词——不,这个我的用户名,不是句子)。

当我每隔几周修改一次密码时,我确实会不时地感到困惑,同样,所以我给自己写了一封greasemonkey脚本,它向任何允许我切换其显示的密码字段添加链接

密码淋浴油猴脚本由你。

这个,在我的书中,应该是浏览器的一个标准功能(或者我们在设计表单时应该遵循的一个惯例)–不在屏幕上以可读文本的形式显示敏感信息,因为我们认为没有人会看到我们。

我们也不要忘记,浏览器处理密码类型的输入字段与处理文本类型的输入字段不同。对于初学者,浏览器不会收集以前输入的信息,并提供这些信息作为自动填充字段的选项——这对于密码来说是非常危险的。