平野星原的个人博客

惊讶的发现WordPress博客在IE内核的浏览器下查看源代码，中文全显示为乱码。不知道什么时候开始的，以前一直用火狐没有用过IE查看源代码，而且不管什么浏览器网页显示一直都很正常，就没有注意到。

这次因为我修改了头部代码，简单的优化了一下（早该做了）。然后就发现用火狐查看源代码时，程序调用出来的keyword和description的内容都是乱码。于是转用IE查看，就发现更奇怪的事情，除了上面提到的两个meta标签里面的中文内容是正常的外，其他中文内容全部都是乱码…

当时就以为是修改的部分出了错误，于是上传备份的文件恢复。火狐是正常了，但IE却全部中文字包含连刚才正常的都是乱码了。看来和那部分修改无关，难道这个问题在IE下已经存在很久了？

于是马上开Google搜之，发现WordPress有这个问题的博主还不少，有人提到是插件出的问题。我使用的插件很少，逐一禁用检查过一次，结果就是插件并无问题。

最后把WordPress模板里面的所有文件检查了一次后发现原来有一些网页并非UTF-8格式，看来问题就出在这里。把所有非UTF-8格式的文件转换好之后替换，源代码终于都正常了。

这个问题解决了，但又有新问题。网页显示又有问题了，页面顶部多出了一行空白。把头部文件header.php替换回原来的文件就恢复正常了，但头部文件源代码里的中文又是乱码了…

再上Google搜索，原来关键就在UTF-8 BOM。把头部文件保存为不带BOM的UTF-8文件，问题就全部解决了。不同浏览器下源代码显示正常，网页也显示正常了。

这是找到的一段关于UTF-8 BOM和PHP的资料：

UTF-8编码的文件中，BOM占三个字节。如果用记事本把一个文本文件另存为UTF-8编码方式的话，用UE打开这个文件，切换到十六进制编辑状态就可以看到开头的FFFE了。这是个标识UTF-8编码文件的好办法，软件通过BOM来识别这个文件是否是UTF-8编码，很多软件还要求读入的文件必须带BOM。

可是，还是有很多软件不能识别BOM。我在研究Firefox的时候就知道，在Firefox早期的版本里，扩展是不能有BOM的，不过Firefox 1.5以后的版本已经开始支持BOM了。现在又发现，PHP也不支持BOM。

PHP在设计时就没有考虑BOM的问题，也就是说他不会忽略UTF-8编码的文件开头BOM的那三个字符。由于必须在<?或者<?php后面的代码才会作为PHP代码执行，所以这三个字符将会直接输出。

如果插件的文件有这个问题，将会导致在后台页面里激活或者不激活插件后显示白屏，如果是模版文件有这个问题，将会导致这三个字符直接输出，造成页面上方有一个小空行。国外的英文插件和模版一般都是用的ASCII码的编码方式，不会有BOM，只有国内的插件和模版会由于作者的不知情造成问题。

还有，大家修改模版的时候，由于输出页面使用UTF-8编码，那么修改模版的时候如果有加入中文字符的话，必须把文件转成UTF-8编码才能正常显示，这个时候如果所使用的编辑器自动加上了BOM的话，将会造成在页面上输出这三个字符，显示效果就要看浏览器了，一般是一个空行或是一个乱码。

不过开头提到的，在不正常的情况下修改的那部分，火狐查看中午字体是乱码而IE查看却是正常，到现在还不清楚为什么会这样…

Zac说过“是大量的，高质量的，原创的，相关的内容。可以这么说，没有内容就没有排名。”内容是SEO第一要素，所以网站包含丰富的内容是必须的。但很多网站似乎只记得要做给搜索引擎看，却把访问者抛在了一边。把页面挤满很多内容，但却由于太多而显得杂乱无章，一个个列表，一排排文字挤满了整个页面。

通常这样杂乱，臃肿的排版可用性和组织性很差，会让访问者无所适从最后离开网站，这样SEO效果再好也等于零，很容易被用户所抛弃。那么如何让页面保存简洁美观轻松，有足够的留白和恰当的长度，而又包含必须具备的丰富内容？

方法有很多，在这里我想说的是使用Tab标签功能的界面设计。很多网站已经将Tab标签就应用在界面设计上，因为“标签是极少几个将物理隐喻有效应用到用户界面中的例子之一”（Steve Krug——《DONT’T MAKE ME THINK》），它可以有效地对页面的内容进行合理准确的导航，运用得当便能鱼与熊掌兼得。

就像苹果的网站，设计中包含了大量的Tab标签元素。看Apple Mac Pro这个页面，页面的内容是介绍Mac Pro的性能。包括了应用性能和硬件性能两个大类和视频、图像图形和3D等九个小类，小类大部分都使用Tab标签分成几部分内容。每部分内容还有更细的分类，虽然不是Tab标签设计是实用了文字设计，但效果是一样的。这样一个拥有多级丰富内容的页面，通过Tab标签的应用，让页面没有一点拥挤的感觉，而且很清晰的展示了全部内容并传达了相应的关系。

再看看这个网站，介绍了一款基于Mac的网页编辑软件Coda。这是经典的应用Tab标签设计的网站。点击下面的内容框上面的New、Sites标签或者点击左右的箭头，都可以用很华丽的方式滑动显示下一个标签的内容。所以虽然网站设有很多留白，元素之间的间隔很宽松，但其实是在一个页面里包含了很多的内容。

合理的使用Tab标签设计，可以让网站展示大量信息的方式更加简洁美观，让网页设计与SEO优化不相冲突。其实这是一个很简单的问题，大部分人都知道怎么使用Tab选项卡，没有什么技术含量的。但还是到处可以看到设计得很拥挤的网站，所以憋了很久还是拿出来说说。

还有一个问题就是，Tab标签设计很多都使用了JavaScript。Google的网站管理员指南明确指出如果在html中过多的使用 JavaScript、Cookie、会话 ID、框架、DHTML 或 Flash 等复杂功能会使搜索引擎抓取工具在抓取网站时可能会遇到问题。不过只要记住出色的前端设计，只使用JavaScript控制页面元素的表现，而不参与页面的内容就可以了。看看前面说过的两个网站，查看他们的源文件，里面可以看到所有内容而不是一堆JS文件。

具体可以参考星箭发表在点石互动的JavaScript对SEO的影响及解决之道。

当我开始做网站的时候，table、tr、td什么的把我弄得晕头转向；当我走出校门开始设计网站时，摆在我面前的是DIV+CSS；当我能够完全 用DIV+CSS构建网站的时候，又看到了用户体验、可用性、浏览器兼容之类的问题；但现在，还没有完全解决前面的问题，我又遇到了SEO…

这段日子我每天都上各个和SEO有关的站点，BBS，寻找和下载与SEO有关的资料和电子书来学习，扩展对SEO的了解，并一边学一边拿公司的网站来实践。

其实SEO说到底就是让搜索引擎觉得，你的网站和你想优化的那个关键词有莫大的关系。只有这样，搜索这个关键词的时候你的网站才会拍到前面。而SEO成功的 基本要素，就是内容。围绕某个主题，也就是目标关键词的内容充实了，内容里面的关键词分配合理，再坚持不懈的保存更新与原创内容，加上其他优化的手段，网站必能拍到好的位置。不过为了具备充实的内容，为了SEO，有些网站堆砌了很多内容。一打开就是一大堆的文本，关键字。堆满整个屏幕。处理得好没问题，但很多时候给人的感觉却是拥挤与烦乱。

这里存在的问题就是网页设计与SEO配合得不好。

似乎存在这样一种现象，就是设计师不懂得SEO，而SEOer不懂得美工…出现这种问题应该只是设计师与SEOer沟通得不好。有很多问题通过很简单的技术就可以做到内容充实与美观同在。

比如如何让页面保存简洁美观轻松，页面有足够的留白和恰当的长度，而又包含必须具备的丰富内容；比如标题需要用文本这样能给搜索引擎读取到，但如何解决不同浏览器显示上的区别，如何使用访客电脑上没有的字体，还有中文字符的那些锯齿…

夜了，眼困，待续…

下面这张照片，在我的相册上从5月6日上传到现在27天，终于在这两天有两个又拍的用户收藏了这张照片，而且都在这两天，6月1号和6月2号两天。晚上看到的时候，那个激动啊…恨不得上前去紧紧的握住他们的手：谢谢支持！谢谢支持~然后鼻涕眼泪一起留，还拿出本子让他们签名…

为什么会这样呢，因为我不想对我的朋友说：喂~来看啊~是朋友的每天来看一次…那样很没意思，最多就告诉说我有这样一个相册在这里，基本是我更新最频繁的地方了，透过这里可以看到我的近况，然后就没再说什么了。 所以虽然我喜欢拍照，也上传了很多到又拍相册上来，但被浏览的量一直都很低，基本都是自己在看。

我觉得让他顺其自然好点，以后拍到好的照片，自然就有人来看了。一直这么想，一直都几乎是自己在看…

后来，也就是前几天，转折点来了。四川地震刚过后的几天，佛山有一个赈灾义演，我去看了。第二天就把在义演会场拍到的照片上传了。那天时间比较过，照片都写了详细的标签和标题以作介绍。意想不到的事情发生了，那几张照片，几天就被浏览了几十次（对于我算是很多的了），特别是其中一张满是观众的赈灾义演现场，被浏览的次数最多。

现在想想，应该是那个时候，这个是超级热门的话题，这些照片在佛山义演后隔天传上去，又标注有详细的标签和标题文本，容易被人搜索到的缘故吧。 关心的人多，与之相关的又容易被搜索到的，就会多点机会被人看到。然后带动其他照片，其他东西也多点机会被人看到…

最近很关注搜索引擎优化相关的知识。其实SEO也是如此。网站的内容所围绕的主题最好是被人关注的，网站本身需要优化以适合搜索引擎检索内容，收录页面好被人搜素到。再进一步通过连接的质量与内容的质量好坏，确定网站的权重，决定网站和关键词的相关程度，最终决定在搜索结果的排名。

这个过程中，及时地发布与受人关注的主题相关的信息是很重要的，应该可以在短期获得大量的浏览。赈灾义演现场的那些照片就是例子。 和赈灾相关的照片，是大多数人关心的主题，并且及时上传公布。网站的内容也应当如此；照片写上了包含主题关键词的标题，并标注了标签，方便用户搜索。对应的就是网站页面的优化，使其迎合搜索引擎…

稍不留神，让IE6绊了一下。本来想应用“!important”来区分IE6和其他先进浏览器的页面效果，但忘记了规则下面还有写一个一样的来给IE6应用，结果导致IE6浏览时出现问题。现在修复好了，还把原来留给IE6的虚线设计的漂亮一点。但做好后回过头想，觉得IE6的不标准真是给设计网站带来了很多麻烦。

像IE6这样祸害了无数人的浏览器，早就应该将其碎尸万段，并把微软赶出浏览器市场。可惜，这只能是一种妄想，目前国内使用最多的应该还是IE6。依然要把网站调整来调整去，只是为了迎合有一堆问题和漏洞但却是大多数人使用的IE6…

IE6该死的原因可谓数之不尽，单“不支持PNG格式图片”这一条，就足以判它死几十次。PNG这种早就该代替GIF的图片格式，就因为IE6不支持而在设计网站的时候被迫避免使用。

但虽然骂声一片，那么多人咬牙切齿的希望IE6挂掉，却是个很难实现的事情。除非等到当所有人都升级到Vista的，那遥远的一天…

所以现在只能用PS幻想一下…

一个网站，用户体验是相当地重要的~~差劲的用户体验是什么，我觉得应该是进来后找不到方向吧；或者容易走到一个地方被卡住了，得返回来才可以继续去其他地方。

好的用户体验，就是要让浏览者操作起来觉得很方便也不用太多的思考。就像进去一个商场，抬头就可以看到很醒目的商品类别的牌子，然后走过去就可以看到想要的东西。而且商场的通道必须都是互通的，这样就不用在挑选下一个商品的同时回到入口处，而是再次抬头就可以知道怎么去到了。

虽然这些是比较基本的，但我这个博客却犯了个基本的问题。如果打开单独的日志页面来看，就会发现要看上一篇或者下一篇日志，得回去主页…而且右边的侧边栏也没有最新文章的列表。这样浏览起来会有很不方便的感觉，即使是一开始已经用标签插件Simple Tags在每一篇日志下面添加相关日志的连接。但是依然感觉没有什么方向感。

所以我在独立日志页面文章内容的下面，添加了上下文的连接，方便直接在日志页面跳转到最近的其他日志。在侧边栏也添加了最新日志是连接。其实，很多主题都自带这些连接，但这个主题却偏偏没有。不过也是这样，才觉得这些真的可以让浏览者在站内跳转更加方便。

以后还考虑添加插件来实现记录和显示出浏览者看过什么地方，并推荐给其他浏览者这样的功能。就像商城网站上经常见到的“浏览此商品的用户还浏览了什么什么商品”这样推荐商品的方式来推荐站内的文章，应该有很好的效果。

当然用户体验还包括很多东西的，还需要不停是学习。有本书的标题点出了Web可用性研究的最高原则和目的，那就是：

Don’t make me think ！

页面“Web Design”弄好上线了~

一开始就是考虑这样展示设计过的网站，展示的内容就像页面上介绍的，包括为公司做的，学生时期做的，还有被打回来但自己觉得还不错的…

展示的方式就是一个网站一张缩略图，然后下面是几个按钮，可以打开完整的大图或者细节图来看，当然还要写上网站的介绍，如果有连接放上连接等等（现在还不完整，我会慢慢补上的）。

可是期间发现一个问题，单纯的给出文字连接在图片下面，简单的话不突出，复杂的话不好看…如果可以用CSS来控制就好了，但简单的修改连接属性，那整个网站的连接不都给改掉了。于是突然想到，如果在CSS文件添加新的样式，然后在页面编辑那里编辑源代码直接引用，觉得应该是可以的，虽然没有看到过有这样做的。

结果，真是可以的~现在这个页面图片左下角就是打开大图的链接，包含在蓝线白底的框框里面，美化目的达到~~~

为什么似乎没有人说过编辑页面在源代码那里直接引用CSS文件的样式呢？我看是因为都把页面和日志考虑在一起了。因为WordPress里面页面和日志的显示是一样的，连接属性也是一样的，如果这样写日志当然是非常麻烦且不必要。

不过我这个页面是特殊出来的，只有这里需要这样的样式，也就不管那么多了~