2356203327
admin@webkv.com
用户登录
source
产品 添加到您的购物车
HTML5设计师最佳实践
您的位置: 首页 / 教程 / HTML5设计师最佳实践

就网页设计趋势而言，HTML5今年肯定会大受欢迎，当然也是如此。这是新的，令人兴奋的，容易理解的，比任何事情都好。直到最近，我们不得不在兼容性和定义方面探索一个灰色地带，结果，早期采用HTML5的许多都是部分或完全的灾难。

首先要理解的是HTML5的结束和CSS3的开始。HTML5只是一个标记——一组定义文档应该如何构造以及浏览器应该如何解释文档的标准。HTML5没有承担表示和功能的所有责任，而是回到了基础，允许我们利用API和本地浏览器功能，同时寻找CSS来创建可视的外观。最后，我们留下了一个直接和简化的语言来创建网站和应用程序。

尽可能多地了解HTML5并遵循这些基本实践将帮助您生产具有高质量标记的网站，并改进总体设计和开发过程，而不会遇到困扰web十多年的常见陷阱。

1. 使用框架

框架和“样板”可以让你有机会使用一致的格式化代码库来构建项目，这些代码库已经过测试、验证，并且在大多数情况下是由行业领导者开发的。这些预先打包的启动器模板没有规定特定的设计理念，也没有强制您进入一个或者另一个布局，它们只是为您提供有效的HTML5文档和相关的CSS3样式表，其中包含所有必需的JavaScript库。

另一个选择是使用HTML5设计应用程序来构建有效的网站，而不用担心自己编码。不幸的是，只有少数工具可用，如Adobe的Muse和Edge预览（暂时还没有完全发布）和单用途web生成器。为了响应各地前端设计师的呼吁，Wix在3月26日发布了第一个功能齐全的HTML5网站构建应用程序，允许您在线创建完整的网站。该工具可以显著地改变您的设计方式，为您提供用于创建和样式化元素的可视化编辑器，使用拖放来安排布局和添加小部件。您还可以访问交互式画布元素和动画、CSS3效果和外接程序库，如HTML5音频、视频、幻灯片演示、表单等等。访问WiX网站了解更多信息，注册成为第一个探索这种新技术的网站。

使用框架或HTML5应用程序的好处是一个更有效的工作流和一致的结果。理解HTML5的语义、限制和可能性仍然很重要，但是作为一名前端设计师，将注意力集中在自己最擅长的事情上并不感到羞愧。

资源:

2. 理解文档类型

如果您选择编写您自己的文档，或者将现有站点转换为HTML5，那么理解HTML5文档类型的依赖项和要求是极其重要的。简单的改变<!DOCTYPE>标签 和 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 到 <!DOCTYPE html> 不会神奇地转换标记，它只允许浏览器将文档检测为HTML5并期待HTML5标记。它也不应该与打开的<html>标签混淆。在文档head中常见的其他元素也发生了变化，包括字符编码、<script> 和 <link> 元素。一个基本的HTML5文档head的核心应该是这样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="style.css">
</head>

资源:

3. 负责任的使用元素

在开始使用HTML5构建站点之前，请确保您了解每个新元素的用途以及它在布局中的位置。这些是HTML5中引入的主要元素，在构建布局时，几乎应该使用这些元素：

<header>

不要与<head>混淆，此元素指定元素或布局的头部或顶部，并且可以独立使用或在其他元素中使用。

<hgroup>

在<header>内部使用，<hgroup>指定一组header标记，以帮助保存排版层次结构，并允许浏览器将它们作为组而不是单独进行优先级排序。例如，您可能有一个H2元素作为页面标题，然后使用另一个H2作为文章标题，接着是作者的H3。第二个H2和H3应在<hgroup>和<header>中。

<nav>

此元素指示导航菜单，并且在大多数情况下应该封装无序列表。元素<nav>元素可以独立使用，也可以在其他元素中使用，如<aside>。在你的内容中组合在一起的一组链接不足以使用nav元素。站点导航或子导航确实属于导航元素。

<section>

用于将主题相关内容分组在一起。听起来像一个div元素，但它不是。div没有语义意义。在用段落元素替换所有div之前，总是问自己：“所有内容都是相关的吗？”

<article>

这个标签代表一个独立的内容片段，如博客文章或新闻文章。它几乎总是放置在<section>中，但它不是必需的。

<aside>

与<aside>或页面上显示的主要内容不直接相关的侧边栏或任何包含内容的区域相比，<aside>是最容易比较的。站点的结构将取决于如何使用<aside>，但是通常的做法是使用它来包含次要元素的无序列表，或者将它放在<section>中，使用<aside>来包含每个“块”内容。然而，仅仅因为某些内容出现在主内容的左边或右边，还不足以成为使用<aside>元素的理由。扪心自问，如果不减少主要内容的含义，可以删除该内容中的内容。

<footer>

与页眉一样，<footer> 用于指定元素或布局的足部或底部。它可以独立使用，如大多数用于版权信息的网络布局中所见，或者在其他元素中指定“页脚”内容，如作者、日期、类别等。

<figure> & <figcaption>

由于没有很好地理解和充分利用，<figure> 基本上取代了对 <div class="caption"> 元素的需要，该元素用于将视频或图像包装在包含描述的填充样式的框中。例子：

<figure>
<img src="pic.jpeg">
<figcaption>
<p>This is a caption.</p>
</figcaption>
</figure>

所有这些元素在CSS中被样式化为基类，并且只需要在文档中重复使用额外的ID或类，或者需要将特定的样式应用于一个元素。

当正确使用时，HTML5元素极大地减少了DIVs和其他不必要元素的需要。要构建最有效的标记，请尽量避免使用 <div>，并且只在没有其他合适的元素时返回。请记住，在HTML5中，span和table是完全有效的结构元素，为了移动兼容性，最好使用它们来支持浮动元素。

下面是一个基本的HTML5文档结构的例子：

<header>
<h1>My Site</h1>
<nav id="menu">
 <ul>
  <li><a href="#" title="link1">Link1</a></li>
  <li><a href="#" title="link2">Link2</a></li>
  <li><a href="#" title="link3">Link3</a></li>
 </ul>
</nav>
</header>
<div id="main">
<section id="content">
 <article>
  <header class="post">
  <hgroup>
   <h2>Title</h2>
   <h3>by Author</h3>
  </hgroup>
  </header>
   <p>Article content...</p>
 </article>
</section>
 <aside>
  <ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </aside>
</div>
<nav id="paged">...</nav>
<footer>...</footer>

CSS看起来像这样：

header {...}
h1{...}
h2{...}
h3{...}
nav {...}
#menu {...}
#menu ul {...}
#menu ul li{...}

……你明白了。并非所有HTML5浏览器都支持所有CSS特性，因此熟悉常见问题并在将其实现到设计中之前验证您不确定的任何内容非常重要。

 

在编写标记时，HTML4的最佳实践仍然可以被传递到HTML5世界。即使HTML5对案例、引用和标签关闭更宽容，继续：

资源:

4. 向后兼容计划

所有当前的webkit浏览器（如Firefox、Chrome和Opera）、移动浏览器和Internet Explorer 9都支持现有规范中的大多数HTML5特性。HTML5本身被设计为尽可能向后兼容，建立在现有特性的基础上，并允许平滑的降级。以HTML5 Shiv的形式提供回退支持的度量仍然是一个好主意，它是一个小JavaScript，可以帮助老的浏览器正确地解释一些较新的规则和元素。在您的样式表声明之后，将shiv添加到文档头中。

除了脚本之外，为Internet Explorer提供条件语句是明智的，因为许多Web用户仍然局限于这些较老的浏览器版本。通过为IE版本分离特殊样式和修复程序，在版本过时后，您可以很容易地删除它们。

例子:

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->
<!--[if lt IE 9]><script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Unless you use a CSS reset, ensure you include a line in your stylesheet that applies a display:blockstyle to your HTML5 elements, like so:

除非使用CSS重置，否则请确保在样式表中包括一行，该行将 display:block 应用于HTML5元素，如下所示：

header, hgroup,nav,section,article,aside,footer {display:block;}

资源:

5. 从解决方案分开

无论您是否决定使用框架，请将99%的设计保持在样式表中。本质上，没有浏览器样式表，当浏览器浏览时，页面应该崩溃成一个完全未格式化的混乱。这听起来很糟糕，但是这种分离对于维护正在进行的开发并确保代码具有最好的验证机会非常重要。维护标记为独立于样式的站点是非常容易的。例如，在标记中改变使用 <font color=""> 站点的颜色需要多次冗长的更改。通过专门使用CSS，这些更改减少到一个文件，只有很少的实例。

HTML5没有HTML4中的表示属性，如 <frame> 或 <font>，并且改变了解释几个标记的方式。此外，许多标记已经完全从HTML5中移除，因此保留差异的引用非常重要。以下是一些要避免的事情：

  • 永远不要使用内联样式。示例 <div style="border: 1px">
  • 使用段落 <p> 代替 </br> 在新行上排列内容。
  • 避免在设计文本元素时使用 <em> 和 <strong>，永远不要使用HTML5折旧的 <i> 和 <b> 对于主题开发人员来说，这可以通过Post Formats应用到编辑工具中创建的内容，而不是依赖于像 B and I 这样的传统编辑操作。
  • 使用一个段落类，它包含缩进文本的足够填充，并为实际引号保留 <blockquote> 标签。

以下是删除的HTML4元素的完整列表：

TagWhat it did
<acronym>Defines an acronym. Removed because it creates confusion. Use abbr instead.
<applet>Defined an applet. Use object instead.
<basefont>Use CSS to define main body font. Use CSS to define font size.
<big>Use CSS to set font size.
<center>Use CSS to align text or elements.
<dir>Defined a directory list. Use ul.
<font>Use CSS classes
<frame>Defined a frame. Damages usability and accessibility.
<frameset>Defines a set of frames. Damages usability and accessibility.
<isindex>Defines a single-line input field. Use HTML5 form controls instead.
<noframes>Damages usability and accessibility.
<s>Defines strikethrough text. Use CSS.
<strike>Defines strikethrough text. Use CSS.
<tt>Defines teletype text. Use CSS.
<u>Defines underlined text. Use CSS.

HTML5还删除、改变或折旧超过50个属性。允许使用以下属性，但最好使用另一种解决方案：

  • border 属性对 <img> 当存在时，需要具有“0”的值。这是内嵌样式的另一种形式，因此使用CSS代替。
  • language 属性对 <script> 需要有值 “javascript” 如果使用，不能与类型属性冲突。最好删除这些属性。
  • name 属性对 <a> 应该改为ID属性。
  • summary 属性对 <table> 贬值。HTML5草案定义了几种可供选择的解决方案。
  • width 和 height 属性对 <img> 其他元素不再被允许包含百分比。最好在这里使用CSS。

这些属性已被删除，不应使用：

  • rev 和字符集属性 <link> 和 <a>.
  • shape 和 coords 属性对 <a>.
  • longdesc 属性对 <img> 和 <iframe>.
  • target 属性对 <link>.
  • nohref 属性对 <area>.
  • profile 属性对 <head>.
  • version 属性对 <html>.
  • scheme 属性对 <meta>.
  • archive, classid, codebase, codetype, declare 和 standby 属性对 <object>.
  • valuetype and type 属性对 <param>.
  • axis and abbr 属性对 <td> 和 <th>.
  • scope 属性对 <td>.
  • summary 属性对 <table>.

这里是折旧HTML4属性的完整列表。用HTML5中的CSS替换它们：

AttributeUsed with Tag
aligncaption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
alinkbody
linkbody
vlinkbody
textbody
backgroundbody
bgcolortable, tr, td, th and body.
bordertable and object.
cellpaddingtable
cellspacingtable
charcol, colgroup, tbody, td, tfoot, th, thead and tr.
charoffcol, colgroup, tbody, td, tfoot, th, thead and tr.
clearbr
compactdl, menu, ol and ul.
frametable
compactdl, menu, ol and ul.
frametable
frameborderiframe
hspaceimg and object.
vspaceimg and object.
marginheightiframe
marginwidthiframe
noshadehr
nowraptd and th
rulestable
scrollingiframe
sizehr
typeli, ol and ul.
valigncol, colgroup, tbody, td, tfoot, th, thead and tr
widthhr, table, td, th, col, colgroup and pre.

资源:

要了解为什么要进行更改，以及哪些策略对于获得与HTML5相同的效果最有效，请访问关于非一致性特性的官方HTML5草案。

6. 可及性设计

虽然可以用一种为辅助技术(ATs)的用户提供良好用户体验的方式使用表示标记，但是这样做比简单地使用语义标记要困难得多。

WAI ARIA specification 定义了一组专门的 “里程碑” 角色，这些角色可以与HTML元素组合，以帮助辅助技术向用户提供他们能够使用来更容易地识别和导航页面内容的各个部分的特性。要实现角色，只需添加角色属性和元素的适当值即可。

下面是HTML5网页设计中常用元素的列表和相应的角色：

Language featureRecommended role valueRestrictions
alinkRole must be either link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, or treeitem
addressNo roleIf specified, role must be contentinfo
articlearticleRole must be either article, document, application, or main
asidenoteRole must be either note, complementary, or search
audioNo roleIf specified, role must be application
buttonbuttonRole must be either button, link, menuitem, menuitemcheckbox, menuitemradio, radio
detailsgroupRole must be a role that supports aria-expanded
embedNo roleIf specified, role must be either application, document, or img
footerNo roleIf specified, role must be contentinfo
h1-h6 element that isn’t inside hgroupheading role, with the aria-level property set to the element’s outline depthRole must be either heading or tab
header elementNo roleIf specified, role must be banner
iframe elementNo roleIf specified, role must be either application, document, or img
img element whose alt attribute’s value is present and not emptyimg roleNo restrictions
li element whose parent is an ol or ul elementlistitem roleRole must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem
object elementNo roleIf specified, role must be either application, document, or img
ol elementlist roleRole must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
output elementstatus roleNo restrictions
section elementregion roleRole must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status
ul elementlist roleRole must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
video elementNo roleIf specified, role must be application
body elementdocument roleRole must be either document or application

资源:

7. 使用CSS代替JavaScript和精灵图背景

HTML5的主要目标之一是为通过JavaScript实现的组件、效果和技术提供本地浏览器支持。随着CSS3的引入，标准Web设计中的许多日常技巧现在可以不用JavaScript来创建了。来自HTML5专家Paul Irish的技巧解释了如何将CSS3转换与HTML5混合：“CSS转换在两种状态之间提供了有吸引力的视觉转换。大多数样式属性可以被转换，比如操纵文本阴影、位置、背景或颜色。您可以使用到伪选择器状态的转换，如：hover或从HTML5表单、：.lid和：valid（例如表单验证状态）。但是它们更强大，当你把任何类添加到一个元素时都可以触发。

以下是CSS3中过渡的外观：

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

通过添加 totheleft 和 totheright 类的切换，可以移动该框。将此代码的数量与JavaScript动画库的代码进行比较。在浏览器中的动画呈现如何影响硬件的图形处理能力方面，性能也有所增加。

HTML5也使我们在可拖动属性上扩展了功率。

这个属性可以添加到任何元素，并且当与CSS结合时，允许我们创建本地拖放功能，而不依赖于JavaScript插件或API。

CSS3 brings a new way of creating visual information for the web that can replace a large percentage of elements used in design including buttons, sprites, vectors and virtually any interface element. Here are a few of the things you can do with CSS3 in HTML5 that you needed JavaScript or plugins for in the past:

CSS3提供了一种为web创建视觉信息的新方法，它可以取代在设计中使用的大部分元素，包括按钮、精灵图背景、矢量图和几乎任何接口元素。以下是您可以在HTML5中使用CSS3做的一些事情，您过去则需要JavaScript或插件才能完成：

  • Linear and radial gradients
  • Border-radius for rounded corners
  • Box-shadow for drop shadows and glow
  • RGBA for alpha opacity
  • Transforms for rotation
  • CSS masks

资源:

8. 为多媒体提供回放功能

<audio>、<video>和<canvas>标记是最早流行的HTML5元素之一，这主要是因为移动友好媒体越来越需要替换Flash和其他内容。尽管这些元素简化了嵌入媒体的过程，但它们依赖于浏览器天生的回放内容的能力，因为没有插件，如Flash或Java被调用。每个浏览器（当前）都有它自己的限制在什么类型的媒体，它可以处理和如何执行呢。值得庆幸的是，HTML5允许通过<source>标签对这些元素进行回放。

Opera的Bruce Lawson解释说：“在这个例子中，Opera、Firefox和Chrome将下载Bieber大师最新的脚趾敲击杰作的Ogg版本，而Safari和IE将获取MP3版本。Chrome既可以播放Ogg，也可以播放MP3，但浏览器将下载他们理解的第一个源文件。

在开启和关闭标记之间的回放内容是将内容下载到桌面并通过单独的媒体播放器播放的链接，并且它只显示在不能播放本地多媒体的浏览器中：

<audio controls>
<source src=bieber.ogg type=audio/ogg>
<source src=bieber.mp3 type=audio/mp3>
<!-- fallback content: -->  
<a href=bieber.ogg>Ogg</a>
<a href=bieber.mp3>MP3</a>
</audio>

同样的概念也应用于<video>元素，以便诸如IE7之类的老浏览器的用户将看到YouTube视频，而那些使用最新Opera、Firefox或Chrome的用户将直接从网站获得本地播放器和内容：

<video controls>
<source src=video.webm type=video/webm>
<source src=video.mp4 type=video/mp4>
<!-- fallback content: -->
<iframe width="480" height="360" src="https://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen>
</iframe>
</video>

资源:

9. 简化表格

已经存在广泛的和wll编写的资源，这些资源记录了HTML5中表单中新增的元素和属性，因此这里没有理由重复它们。HTML5表单的主要部分同样是它们使用本地浏览器功能进行处理和验证的能力，而不是依赖于脚本或插件。HTML5还简化了表单的编码方式，消除了对输入字段的闭合斜杠的需要，并添加语义属性以帮助表单字段对浏览器更有意义。至少，HTML5表单应该遵循以下规则：

    • 用 <label> 标签将所有标签名称括起来。
    • 使用新的 email和 url 输入类型来定义这些公共字段。
    • 使用 placeholder 属性来提供输入提示。
    • 使用 required 请求验证。
    • 删除 name 属性以支持需要 id 的地方
<form method="post" action="index.php">
  <form method="post" action="index.php">
   <label>Name:</label>
   <input id="name" autofocus placeholder="Your name here">
   <label>Email:</label>
   <input id="emailaddy" type="email" placeholder="Your email here" required>
   <label>Message:</label>
   <textarea id="message" placeholder="Your comments here"></textarea>
   <input id="submit" type="submit" value="Submit">
</form>

下面是HTML5中新形式的简要概述：

新的表单属性:

  • autocomplete
  • novalidate

新输入属性:

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height and width
  • list
  • min, max and step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

资源:

10. 性能设计

地球上87%的人有手机，超过60%的人使用它来浏览网页。如果不创建移动网站，则需要考虑站点的负载时间和与移动设备的呈现和处理能力的兼容性。

提高性能的第一步是尽量减少代码并将代码组合成尽可能少的文件。由于此过程使得稍后进行更新非常令人恼火，因此始终保留站点的“未最小化”副本，并将其作为发布前的最后一步进行合并。最小化包括将所有样式表和JavaScript组合到一个文件中，或者删除不需要的字符和空格。

特别是在JavaScript的情况下，优化文件和加载顺序将获得最好的结果，因为浏览器在下载JavaScript时不能做任何事情。除了HTML5 Shiv之外，所有脚本都应该从文档的页脚加载，而不是从样式表头部的传统位置加载。您还应该避免链接到外部脚本，即使使用Google公共库进行链接已经成为一种常见做法。

这种策略并非对所有脚本都是可能的，这取决于它们彼此的兼容性，但是你越能得到最后一次的加载，效果就越好。

资源:

验证

虽然我已经提到有效代码一次或两次，这是所有这些实践中最不重要的。许多设计师误解验证是判断好坏的判断。相反，进行验证的代码并不意味着它是好的，而在最前沿的结构和HTML5语义的使用方面，没有验证的代码可能是惊人的。事实上，大多数完美编码的HTML5网站将无法验证，因为100%的规范目前尚未实现。

验证仍然是一个好的实践，因为它可以指出需要纠正或适应的错误或可能的问题。经常验证以避免你的支持灾难或未来的不良反馈。

结论

希望你学到了一两件事，并且觉得使用HTML5更舒服。还想回到Fireworks的兼容适应吗？不要忘记查看新的WIX应用程序，看看它能做什么来启动你的下一个网站项目。

 

原文：http://www.instantshift.com/2012/03/27/html5-best-practices-for-designers/

: , , , ,
上一篇文章 一个静态html5单页的制作 下一篇文章 65个新鲜创意有灵感的组合网站设计

相关文章

菜单
99 queries in 1.293 seconds.