打印设计师转向网络......他们需要知道什么？

Question

我正在尝试为那些正在学习网页设计的印刷版学生编写指南.

Web开发人员知道但他们不知道的一些显而易见的事情:

• 您无法在HTML中旋转图形
• 所有对象必须是矩形,不能有圆形DIV
• 他们的曲目中的许多印刷效果无法实现

一些棘手的事情是:

• 他们可以有不同的不透明度吗？嗯,是的,不.
• 他们可以有圆角吗？也许.

有些东西不是技术难点,但有问题:

• 图像文件大小:我有一个学生希望在他们网站的每个页面上都有一个不同的大图形标题; 这在技术上不是问题,但这意味着访问者必须等待每次导航时加载新图形
• 可访问性:"为什么不只是将所有内容都设为图形,以克服HTML的局限性？"

请帮我填写我的列表,并为进行此转换的人添加任何提示或提示.

Answer 1

网页不打印

• 布局可以是流动的.
• 元素不必绝对定位
• 需要在多个浏览器中检查网页的兼容性
• 避免分裂; 从经验来看,从印刷到这个领域的人们通过蛮力做所有事情,而不是试图考虑优雅和语义目的的优雅解决方案
• 打印是视觉消费的 - 网络也是由有视力障碍的人消费的.无论市场份额有多小,都不要忘记lynx用户:)
• 语义很重要,了解它们

这就是我现在所能想到的......

Answer 2

来自同时完成印刷设计和网页设计的人(我认为两者都做得不错),看起来你似乎已经有了一个良好的开端.其他想法:

• Darko Z提到了这一点,但我认为值得强调的是必须识别和处理浏览器的不兼容性.在印刷行业中,有像PDF这样的标准格式,可以保证印刷品的外观与设计的外观相同; 此外,许多出版商将直接接受最流行的设计程序的原生文件格式,如Adobe InDesign,Quark XPress,甚至MS Word(用于cheapskates ;-P).关键是印刷设计师习惯于"设置并忘记它"的方法,他们认为一旦他们以某种方式设计某些东西,它就会保持设计.事实上,不同的网络浏览器会使相同的网页略有不同,这可能会成为印刷世界人们的主要痛苦.

• 以上附录:字体.出于显而易见的原因,您不能在网页设计中使用(或至少不能依赖)不常见的字体.

• 必须有效地使用屏幕空间,因为它的数量有限.而且我的意思是非常有限 - 无论你怎么努力,你都不能写出能让某人的显示器扩展5英寸或者在背面放置另一个屏幕的HTML ;-)它不像人们可以在两者之间来回浏览一本书的不同页面.阅读网页有点像通过双筒望远镜看羊皮纸; 你必须考虑到有限的视野来设计页面.

• 网页设计是动态和瞬态的; 他们熬夜了一段时间,他们变得无聊,他们被新设计回收/更换.所以你不会遇到错误.但这也意味着你需要设计未来的变化,例如使用CSS,这样你就可以轻松地改变整个元素类的外观.在印刷设计中有一些样式用途,但远不及在线.

Answer 3

字体和文字

• 您只限于一小部分字体
• 字体以不同的尺寸查看
• 段落应该延伸的可读性限制(在流畅的布局中)
• 写给所有类型的读者 - 有些人会浏览,有些人会详细阅读

图片

• 网站以不同的分辨率和屏幕尺寸查看 - 相应地进行设计
• 要在IE6中实现透明背景,请使用带alpha的PNG8(IE6不支持不同级别的透明度,它是100%透明或不透明)
• 使用CSS精灵
• 图像不应该用于大部分文本
• img标签应该用于具有语义值的图像,并且所有布局图像应该是CSS图像
• 每个img标记都需要使用alt属性进行验证

(X)HTML和CSS

• 浏览器渲染变化很大
• 验证CSS和(X)HTML,以便更有可能使设计跨浏览器友好
• 不要使用CSS hacks
• 使用正确的语义标记
• 页面应该能够在没有启用JavaScript的情况下工作
• 阅读雅虎的性能指南并使用YSlow
• Dreamweaver的设计模式不反映页面在真实浏览器中的显示方式

一般设计

• 在可用性,可访问性,设计和下载大小方面,更简单通常更好
• 应该在视觉上分解超过五个或六个项目的列表
• 一致性很重要 - 如果没有极好的理由,请不要更改导航等
• 在选择颜色时,请记住那些有色盲的人.这将影响您选择按颜色传达意义的方式.
• 将最重要的信息放在折叠上方(不滚动显示的屏幕部分)
• 网络是互动的.这会极大地影响您使用和显示信息的方式.您可以使用制表符,手风琴和类似方法隐藏和随后显示信息.
• 考虑主要和次要的行动呼吁.你想让用户做什么？你希望他们下一步去哪儿？