网站开发和设计者需要注意的10个问题

写在前面

我也是个Web开发者,看到这篇文章,挺有感触Chrys Bader,这篇文章适合已经学习过相关网站设计的朋友,以及正在从事此项工作的开发者,看一下这些,开发时注意以下这些东西,你的Web将会更加符合Web标准,也会使你的Web更受欢迎,当然也包括搜索引擎。

作者:Chrys Bader
翻译:htmlor

1. 使用Firefox

Firefox是你触手可及的最重要的平台,网站开发时必不可少。并不是说你非得把它作为默认浏览器――平时上网时,你想用哪个都行。

自Firefox问世,就有一些居家旅行必备扩展随之产生。如果你想事半功倍立竿见影,快用它们。
必备扩展

Web Developer (Chris Pederick)

这个扩展有很多功能,虽然多数已被FireBug(下文会谈到)涵盖,还是有一些颇为好用的。其中包括:

   * 缩放浏览器窗口
      简单迅速的缩放窗口,800×600、1024×768… 任何指定的尺寸。使用此功能,可以查看各种分辨率下网站的表现。到你的Google Analytics帐户里看看哪种分辨率的访问者最多吧,然后重点为它设计。(FireBug没这个功能)
      My Visitors' Resolutions
    * 编辑CSS/HTML无需刷新
      使用此功能,不必刷新页面即可修改CSS,并将结果实时呈现于页面。太节省时间了。(Firebug里有类似功能,但没这么方便)
      (htmlor注:靠,用了这么久居然都没发现这个好东西,真是太逊了~)
    * 查看页面加载的所有Javascript
      使用此功能,可以在一个页面内查看所有已加载的JS。查看自己或别人的JS代码,方便的很。(Firebug能显示出所有JS名称,但代码没有摆在一起,不方便查询)
    * 查看生成的源代码
      如果你有用AJAX或者Javascript改变页面内容,此功能绝对实用。因为通常的“查看源文件”模式下,是看不到动态生成的HTML代码的。(Firebug也有此功能)

Firebug (Joe Hewitt)

在办公室里,我们常常会问:“还记得没有Firebug时怎么过么?”它确实改变了我的生活。其主要好处如下:

    * 检阅DOM
      点击“Inspect”,然后鼠标放到页面元件上,就能看到此元件的HTML和CSS代码。
    * 显示样式继承的实时CSS编辑
      简直就是钱啊――这大大节省了布局设计的时间。例如,在Firebug 里可以选择一个DIV标记,点击margin属性后手工调整,上下键为加减1个像素,上下翻页键为加减10个像素。(htmlor注:任何数值属性都可以这样调整)还可以在当前样式添加新属性。效果满意之后,再把修改的CSS代码贴到实际文件中去。
    * 详尽的Javascript调试
      这里的JS控制台比Firefox自带的稍好。它更详尽,是默认控制台不错的替代品。
    * 查看页面加载的所有文件及总字节数
      对于优化站点加载时间来说,这很关键。你可以测试单个文件会加载多久,图片,JS文件,AJAX调用等。在“Net”部分的最后一行,可以看到页面加载文件的总字节数。

2. 保持兼容性

保持跨浏览器的兼容性很重要。对我来说,这是不怎么好玩的一件事。我之前说过最好在Firefox下开发,但也别忘了检查一下页面在IE6、 IE7、Safari(或者还有Opera)中的表现。还有,到Google Analytics里看看你的访问者都用什么浏览器。他们用哪些,你就得重点照顾哪些。

My Visitors' Browsers

在自己网站的Google Analytics帐户里,我亲眼目睹了IE6占浏览器比例的下滑,持续下滑。等到哪天它跌破5%时,我会开个party庆祝一下――因为再也用不着支持它了。

想要不那么费事的实现兼容,那就简单一点。比如你为了某种效果在一个浏览器里百般调试、费尽周折,它却很可能在另外的浏览器里不好好表现。这就要说到下一建议:少即多。

3. 少即多

把握好分寸。图形设计,编程,页面布局,任何事情都需如此。简单一点。

    * 图形设计
      现在有一种滥用渐变、斜角和阴影的态势。有时候事情如果没搞好,很可能是东西太多了。简简单单、大方得体就好。
   * 花哨的Javascript
      用一些很酷的JS效果增强用户界面很好,不过另一方面,它会造成用户的负担,尤其是那些没有像你一样拥有超级电脑的用户。此外,还有跨浏览器不兼容的麻烦。再强调一次,不要对JS倚重太过,什么事都靠它。如果实在想用JS,我强烈推荐jQuery

4. Javascript?就用jQuery

Javascript用来显示/隐藏信息很棒,它让页面空间开阔,不会挤成一堆。想以一种更新更酷更简单的方式操控JS?一定要试试jQuery
jQuery

jQuery的主要优点之一:兼容性已广受各大浏览器的考验。也就是说,其所有方法都能保证正常运行。优点之二:极其易用。

jQuery使用CSS的选择器操作对象,让你随心所欲的控制它们,一切尽在掌握。例如:

隐藏id为myDiv的DIV里所有的段落

$('#myDiv p').hide();
$('#myDiv p').hide('slow'); // 动画效果隐藏
$('#myDiv p').toggle(); // 点击显示,再点击隐藏

从这里了解更多jQuery。

其他类似的Javascript库也不少,有mootoolsprototypescriptaculous等。

5. AJAX要因地制宜

Web 2.0大潮中,AJAX炙手可热。很多人都问我“你懂AJAX吗?”,好像它是种独立的编程语言似的。说白了,AJAX只是一种手段而已,它通过与服务器端交互,无需刷新页面就能获取和更新数据。

我注意到最近有一种趋势:无论干什么都用AJAX。这并不总是明智的选择。原因?

    * 访问量。全盘应用AJAX,会损失掉宝贵的PV。
    * 可用性。这一点会有争议,但我认为大多数用户(可能不包括你)仍旧有个习惯:他们依然把页面刷新当作某些事件(如表单提交、页面跳转等)发生的迹象。

AJAX绝对有用武之地,而且某些情况下非它不可。不过重申一遍,少即多。把握分寸,适度使用Javascript和AJAX就好。
6. 搜索引擎喜欢结构化代码

现在有种风潮,人们想尽办法让自己的关键字在搜索结果中名列前茅。作为开发者,你有责任因势利导,用结构化代码尽可能优化网站以适应搜索引擎。

以下是一些重要的结构化标记:

    * H1 - 最重要的标题,搜索引擎最重视它。
    * H2,H3,H4,H5 - 重要性依次递减的标题。用它们恰当的传递信息,搜索引擎会根据字号给予相应的关照。
    * A - 链接。通常给它个TITLE属性比较好。

      <a xhref="http://blog.htmlor.com/" title="htmlor's blog">htmlor's blog</a>

   * IMG - 古老的图像标记。给它个ALT属性比较好,搜索引擎会把其属性值当作关键字。另外,当图像无法显示时,访问者会看到替代文字。

还有一些重要的标记:

    * TITLE - 此标记会作为搜索引擎查询结果的标题显示,应该认真对待。
    * META - 最好完善一下keywords和description,搜索引擎还是会读取这两项老掉牙的信息的。

      <meta name="keywords" content="编程,设计,武侠,小说,足球" />
      <meta name="description" content="关注新技术,趣文章,足坛风云;偶尔抒抒情,搞搞笑,装装深沉。" />

7. 布局用DIV 别用TABLE

其实这条我们都已习惯了,现在还用TABLE布局是会被人极度鄙视的。在列举表式数据时用用还差不多。

搞定DIV布局需要很多实践,不过一旦你掌握诀窍,它将变得俯首帖耳。由此获得的灵活性,比你能想到的还要多。

其实它非常简单,就好像 float 和 width 一样。

我在Virb写了个很简单的两栏布局教程,有兴趣就看看吧。
8. 少用行内样式

写代码时,通常会直接在元件标记上加几句样式,这比往CSS文件里加个Class或属性简单顺手一点。不过,最好别这么做,因为代码需要可维护性。

某些时候,你将不得不面对自己以前写的代码。自己的床自己得睡,自己犯懒自己遭罪。10年来,我认识到一个道理:现在额外花时间,将来特别省时间。这就说到了下一个建议:代码要考虑将来。

不好的

<p style="font-size:14px;margin-bottom:0;">第一个标题</p>
<p>正文内容</p>
<p style="font-size:14px;margin-bottom:0;">第二个标题</p>

好的

<style type="text/css" media="screen">
p.header{
  font-size:14px;
  margin-bottom:0;
}

</style>
<p class="header">第一个标题</p>
<p>正文内容</p>
<p class="header">第二个标题</p>

9. 代码要考虑将来

要给代码写注释。整洁,有序,别偷懒。如果觉得匆匆忙忙没心思,休息一会儿再回来写。

某些情况下(比如你的网站将来成功了),别人会来看的代码。而有时候,这个人会是你。

几年之后,看到自己当年没有注释、乱做一团的代码,你肯定悔不当初。为了避免将来的自怨自艾,现在就把复杂的代码注释一下吧。

注释也不要太多。那些简单到一目了然的代码根本没必要说明,否则泥沙俱下,真正有用的注释会淹没在重重文字之中。
10. 了解标准,但不必束手束脚

别再使用SMALL、CENTER、FONT等不推荐使用的标记了,这样不好。

听说SMALL标记还没被弃用――不过抱歉,我肯定它没几天了。

网站上的有效XHTMLCSS标志告诉人们,你遵守了某些规则。也许这让你感觉与众不同,但是,网站质量与此无关。去看看哪个成功的大网站能完全通过HTML标准验证? 所谓标准,其实跟不上新方法新技术的发展。

开发网站时,要尽量遵循HTML标准。不过有时候,可能需要跳出标准去实现某个功能,这样才能兼容所有浏览器。对此不必太过介怀,说到底,功能才是网站的根本。

如果实在想的话,可以用W3HTML验证器检查你的代码。
讲完了

考虑一下上述建议吧,我推荐的工具可以开始上手了。祝你好运!

(完)

发表评论

(required)