Web-friendly site is...

- concise 没有多余的元素
- desirable 满足需求
- easy-to-use 易用性
- fast 加载和响应
- good-looking 美观

Tools

Firework is better than photoshop in web design.
It make every elements in pinpoint size and position.
Make sure each homologus element has the same size and gap.

使用能够精确设置元素大小和位置的FW而不是PS。
同类元素的尺寸和间距须保持一致性。

Page Setup

Resolution - 72
Color mode - RGB (PS Required)

文档使用网页RGB色彩，分辨率设置为72。

Grouping Elements

Think webpage as a 3D box.
Webpage has z-index, you will make a thorough sense which is on the top and which is on the bottom in your design, and group them.
Use same attributes such as font-family, font-size and line-height to those elements in homologus groups.

网页是有深度的（Z轴）。
在设计页面的过程中，须将不同层次的元素分组。对同类组别的元素使用一致的属性，如字体、字号和行高。

Layout

Use grid systems to make layout of webpages.

使用网格系统布局页面。

Colors

- Global color
- Primary colors
- Secondary colors
Make a optimal proportion of colors

设定全局色、主色和辅色，使用色盘测出最佳用色面积比例。

Try Color Scheme Designer >

Style - Background

Fancy background do not always come from fancy art painting, it also can make from simple pattern.
You will think about readability of text in the background as well.
What css can do in making background?
- Solid color
- Gradient
- Picture

背景是页面设计的基础，CSS支持实色、渐变及图片三种方式创建背景，使我们能够使用精巧的图形做出梦幻般的效果；同时，你还需兼顾背景与文字区分。

css3背景详解 >

Style - Border

Making good layout of text can take the place of dividing different part with border.

边框可用于布局和板块的区分，但不要将你的设计束缚于边框中，好的文字排版甚至可以不依赖与边框来实现页面布局。

Style - Shape

Border-radius can make rounded corners, but they can not be display in IE6, 7, 8.

网页设计中的模块大多是矩形，包括直角矩形和圆角矩形，但IE6、7、8无法支持CSS的圆角属性。

css3圆角详解 >

Style - Effect

Use shadow make your design be rich in levels
Let top one shadow on bottom one.
Shadow can not be display in IE6, 7, 8.

精致的阴影、投影效果可以增强网页的层次。
IE6、7、8同样不支持投影效果。

css3 阴影详解 >

Style - Interaction

Make it different when it is hover/click/...
Do not forget to design different styles when something is under the interactions.

别忘了为按钮等元素设计不同状态/鼠标动作的风格。

Text

Use suitable font-family, font-size, line-height, space between sections etc.

设定主要字体及备选字体，字号，行距及段间距。

Turn the icon into font via icomoon >

Save

Make transparent pics harmonious.
If it is a transparent GIF, modify each pixels of its edges and make it mix with background.
Make your design tiny.
Make your pics less colors, size and amount when you save them as a web-used formats.

使用网页用格式保存，选择更少的色彩保存能够使文件更小，别忘了处理透明的GIF的边缘锯齿。

Test

Test your website design from several aspect as follow
- Loading and respondence speed
- Size and amount of files
- User experience

可以使用YSlow之类的工具检测你设计的网页。
高效的加载，更小的文件和更少的文件数以及人性化的用户体验才是Web友好的页面设计。