首页

Categories

Archives

Archive for the '网页设计' category

网站设计和用户体验

昨天在办公室和一个来自乌克兰的站长交流,他说他现在正在搞的一个网站,总的创意是“lost&found”,就是那种失物招领的网站,网站的每个注册用户都可以生成自己独立的代码,然后可以打印成一条小的标签,贴在你的手机、DC、钥匙甚至是狗狗的项圈上,如果这些东西丢了被别人捡到的话,他可以按照上面的网址和失主进行联络。

乍一听,我觉得是个不错的主意,因为你可以卖这些标签,每个人可能都会有这种丢了东西找不到的时候,那个着急上火阿,如果有人给你消息说东西在哪,你肯定喜出望外。

可是,回家路上我就在想,要是一个80岁的老太太捡到你的手机,她想还给你,可是她家没有电脑那该咋办,你让她上网吧去给你发信息?如果你在标签上印的是一个联系的电话,她直接就打那个电话不就完事了。

这里就是一个问题,做网站的,尤其是做技术的,往往把一些事情按照自己的想法来考虑,没有想到用户需要的是最简单、最有效率的应用。有些站长把页面做的天花乱坠,这里飘,那里闪的,可是普通的用户到了你的网站是不会关心这些的。一些bad design的网站非常的受欢迎的原因之一就是简单实用,像温哥华天空的信息版,不需要注册用户,只要把你要发布的信息填上,发送就可以了,即使是60岁的阿妈,只要能看懂中文,她就可以在上面发条信息说要出租房子。

当然,我不是说网站的技术手段没用了,关键是要用在用户的体验上,让用户感受到技术带来的便利,像Google和Yahoo的主页,都是简洁的,可是背后的技术含量给用户带来的方便才是它们能够吸引客户的最重要的因素。

[tags]网站设计,用户体验[/tags]

CSS菜单的好处

今天靠到WMW上的一个帖子做到用文本做的导航菜单使他的排名上升了许多,这是一个值得借鉴的例子。

很多网站的菜单导航系统都是用图片来做的,加上JavaScript的跳转菜单。这样的网站应该还是比较多的,用Firework、ImageReady或其他许多工具都可以很容易地做出很漂亮的页面。虽然每个链接的图片上都有ALT属性可以设置,但是从链接的相关性来说,图片还是没有文字的高。搜索引擎现在毕竟还是读文字比读图片来的准确和容易。这些页面还会有大量的JavaScript的代码。

CSS的使用可以使这些问题得到解决,使网页的实际内容和网页的布局完全分开,降低网页的代码数量,提高实际内容的比重。设计良好的CSS菜单完全可以做得和原来的菜单一模一样,用户体验应该差别不大。

有这样的网站的不妨可以一试,虽然JavaScript菜单可以搞出各种炫目的特技,但是我个人还是喜欢简洁的美观的CSS菜单,CSS所可以达到的效果也是同样的精彩,我经常看看CSSZenGarden上有哪些新的设计,有些创意真是令人叫绝。

[tags]css menu[/tags]

框架网页

这两天察看网站的统计日志,发现有一个来源有点特别:

http://ad4.sina.com.cn/sina/ziguang/henan/frame.html?url=http://www.neteaglecn.com/

输入这个地址看一下,明明是自己的主页,仔细一看下面,多出了一条新浪的广告,这明显是一个利用框架网页来获取别人的内容而做广告的,也就是frame hijacked。

这种事见得不少,可是这个从新浪来的hijacker就觉得奇怪了,我实在是不知道为什么。要防止你的网页被框架网页嵌套,目前好像还没有太完美的方法,只有在网页的开头加上下面的JavsScript:

<script language="javascript">
<!–
if (top.location != location) top.location.href = location.href;
//–>
</script>

加这段代码的时候要注意想想你自己的网页是不是会受到这些代码的影响,比如你的广告代码等等

update:
确实会有问题,当你写帖子时用预览模式的话,会把WordPress的框架也去掉了。

[tags]frame hijacked,网页框架[/tags]

CSS菜单一款

一款纯CSS定义的菜单,无需任何图片,在IE6,Firefox 1.5 Netscape 7,Maxthon,Tecent中均运行良好。

css文件如下:

UL#topnav {
CLEAR: both;
HEIGHT: 2em;
padding: 0px;
font-weight: bold;
text-transform: capitalize;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
UL#topnav LI {
LIST-STYLE-POSITION: inside;
FLOAT: left;
MARGIN-RIGHT: 20px;
LIST-STYLE-TYPE: none;
padding: 2px;
margin-left: 0px;
}
UL#topnav LI.b5 {
MARGIN: 0px
}
UL#topnav LI A {
DISPLAY: block; WIDTH: 154px; COLOR: #fff; LINE-HEIGHT: 1.6em; TEXT-ALIGN: center; TEXT-DECORATION: none
}

UL#topnav LI A:hover {
BACKGROUND-COLOR: #fff
}
UL#topnav LI.b1 A:hover {
COLOR: #71b50a
}
UL#topnav LI.b2 A:hover {
COLOR: #d81630
}
UL#topnav LI.b3 A:hover {
COLOR: #e18329
}
UL#topnav LI.b4 A:hover {
COLOR: #004883
}
UL#topnav LI.b5 A:hover {
COLOR: #099
}
.b1 {
BACKGROUND-COLOR: #71b50a
}
.b2 {
BACKGROUND-COLOR: #d81630
}
.b3 {
BACKGROUND-COLOR: #e18329
}
.b4 {
BACKGROUND-COLOR: #004883
}
.b5 {
BACKGROUND-COLOR: #099
}

html文件为:

<ul id=”topnav”>
<li class=”b1″><a href=”#”>Home</a></li>
<li class=”b2″><a href=”#”>Page</a></li>
<li class=”b3″><a href=”#”>Page</a></li>
<li class=”b4″><a href=”#”>Page</a></li>
<li class=”b5″><a href=#”>Page</a> </li>
</ul>

菜单的效果如下:

[tags]CSS menu,CSS菜单[/tags]

网页错误代码列表

Successful Client Requests
200 OK
201 Created
202 Accepted
203 Non-Authorative Information
204 No Content
205 Reset Content
206 Partial Content
Client Request Redirected
300 Multiple Choices
301 Moved Permanently
302 Moved Temporarily
303 See Other
304 Not Modified
305 Use Proxy
Client Request Errors
400 Bad Request
401 Authorization Required
402 Payment Required (not used yet)
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable (encoding)
407 Proxy Authentication Required
408 Request Timed Out
409 Conflicting Request
410 Gone
411 Content Length Required
412 Precondition Failed
413 Request Entity Too Long
414 Request URI Too Long
415 Unsupported Media Type
Server Errors
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

[tags]error code[/tags]

nofollow标签

在很多知名的博客上面有很多人写了留言,并在留言中加上了自己的网站的链接,更有甚者的是在留言上做起了各种广告。这样做的目的无非是想在搜索引擎中增加链接的数量。但是,Google,Yahoo,MSN等搜索引擎都已经注意到了这种spam,一个新的html标签属性”nofollow”就是用来解决这个问题的。搜索引擎也呼吁各主要的博客软件增加这一“nofollow”属性,来消除这种垃圾链接。

nofollow属性的应用很简单,例如原先的链接:

<a href="http://www.site.com/page.html">Visit My Page</a>

增加nofollow属性后,链接变为:

<a href="http://www.site.com/page.html" rel="nofollow">Visit My Page</a>

加上nofollow属性后,搜索引擎就能够判断这个链接不是网站的所有者增加的而是另外的人加上的,这个链接将不会被用来计算链接的数量,从而使这种spam的制造者的原先企图失去意义。

[tags]nofollow,anti spam[/tags]

反潮流的网站设计风格 - Ugly Design

Plenty of Fish网站的成功,我们可以看到设计界面一般的网站同样能获得成功。

其实,互联网的生态和现实生活中的生活是紧密相关的。有的人喜欢龙虾鲍鱼的大宴席,也有人喜欢水煮活鱼的大排挡。那种设计一般的网站也许给人的感觉更加真实,更加容易获得一种信任,它向用户传递这样的信息:“你可以相信我,我不大懂得各种复杂的技术,我没有雇佣一个开发的团队来开发我的网站,我仅仅用最简单的方法提供我的服务,这就是我的目的。”给人的感觉是你和这个人在交流,而不是网站,人往往是相信具体的人胜过相信网站。

现在往往很多设计的美仑美奂的网站,功能是五花八门,很多功能都是技术人员开发和想到的功能。可是,大多数的上网用户并不是精通电脑,他们一般只会用那些默认工具(IE),使用最基本功能。那些复杂的命令又有多少人会去用。Google的成功实际上也要归功于它的网站界面的简洁,客户到你的网站来,做的就一件事,搜索,那么一打开网页即可以搜索,而且只有这一个功能,不用到处去找在哪里输入,即便是搜索,大多数的用户也只会输入他们要查询的词,然后查询;懂得”site:neteaglecn.com”,”inurl:neteaglecn.com”…这样的复杂一点的命令的用户还是少数。

这些界面设计平平的成功网站的共同特点就是:使用简单,速度快,功能好用。这就是他们成功的秘诀,以用户为中心的设计。

[tags]interface,web design[/tags]

如何建立一个对搜索引擎友好的成功网站?(上)搜索引擎优化SEO系列

现在建立网站不是件难事,各种各样的软件和书籍以及众多提供个人网页的站点,让许多对计算机一窍不通的人也可以创建自己的网页。最近Google推出的Page Creator所引发的热情更是使Google不得不暂停了一段Page Creator的申请。可是如何建立一个成功的网站,不是简单的用那些软件把你的产品图片处理一下放到网页上,这样的方法,最后只能是导致失败。

总结一下经验,要建设一个对搜索引擎友好站点,可以有以下的步骤:

目标的确定:

确定拟建立网站的目标是什么,是通过网站销售产品、通过网站提升企业的形象、通过网站建立与客户的沟通渠道等等,目标的确立为你下一步采用哪种的技术,应用什么样的布局提供一个参考的基准。

资料的准备:

搜集你自己的产品或服务的所有文字及图片的资料,将这些资料分类,设定好文字和图片的对应关系。用搜索引擎查询一下相关的产品或服务的关键词,看看这些关键词的热门程度如何;可以用一些关键词的工具,像Google AdWords的关键字工具,找出与你的产品或服务相关联的关键字。对你的文字资料进行相应的调整,使文字资料能够集中描述相应的关键字。

申请域名和主机服务:

尽量地使用你的产品或服务的品牌作为域名,保持品牌的一致性。申请主机服务时要考察一下提供主机服务的商家的服务质量和技术支持,确保在出现问题时随时能够联系到技术支持。当然,服务器的速度和配置也是最重要的因素,如果服务器的速度太慢,搜索引擎可能在得到反应之前就离开了。

有些人认为在建好所有的网页后再去申请主机服务,但我认为应该先申请好主机服务再开始网页的设计。虽然前一种方法可以省去一些费用,但是,在实际的网络环境下开发你的网页,可以让你了解网站的响应速度和调整程序的兼容性,这种费用是值得的。

网页设计:

网页的设计应该以简单明了为主,每一页突出相应的关键字作主题。采用CSS来控制你的布局和颜色,这样可以减少网页中的代码。网页应在各种类型的浏览器中进行测试,确保在几种主流的浏览器中能够兼容。

网页的文件大小应控制在10k~15k之间,尽量避免使用或少用Flash和JavaScript,目前的搜索引擎还是不能很好地抓取Flash的内容。(国内的网站的特点就是长、飘、闪)

网站结构:

网站的目录结构不宜太多层次,一般最多到三层,建立目录时应该用相关的关键字作为目录名称。有些专家建议干脆把所有的网页都放在根目录下,虽然这种方法有争议,但确实有利于搜索引擎抓取所有的网页。

(待续)

[tags]web design,网页设计,SEO[/tags]

如何将动态的网址(URL)转换成静态的网址?

目前的主要搜索引擎都支持抓取动态的网址,但是,静态的含有关键字的网址对于网页的搜索和排名依然还是有着重要的意义。因此,将动态URL转换成静态的URL是许多站长进行搜索引擎优化(SEO)时必须做的一步。

目前将动态URL转换成静态的URL主要是应用正则表达式来讲动态的参数替换成静态的,编写这样的正则表达式对有些朋友可能有点难度。有一个站点所提供的工具,可以直接生成这样的正则表达式。

mod_rewrite RewriteRule Generator

输入你的动态URL,选择你所想要的模式和生成的静态URL的网页名称,按”Generate RewriteRule”即可得到你所需要的正则表达式,将得到的表达式拷贝到你的.htaccess文件中即可。

[tags]mode_rewrite,dynamic url,statics url,静态网址,动态网址[/tags]

网页的第一印象

加拿大的研究人员发现,上网的用户在第一次浏览一个网站时,会在50毫秒内就会对一个网站的做出直观的判断,根据Halo效应,这将影响到客户对网站的可靠性,可用性的判断,并最终影响他的购买决定。
First Impressions Count in Website Design

Summary: Web designers have as little as 50 milliseconds to capture the interest of potential customers. Through the halo effect, first impressions can influence subsequent judgments of website credibility and buying decisions.

[tags]web design,halo effect,网页设计[/tags]