Статьи

Лучшие практики уровня презентации

Ноябрь 6, 2017

С принятием рекомендаций W3C большинством производителей веб-браузеров веб-разработка на стороне клиента наконец достигла «критической массы» с точки зрения ожиданий того, как веб-сайты будут выглядеть и функционировать во многих веб-браузерах и версиях браузеров. Это стало возможным благодаря так называемым веб-стандартам.

Проще говоря, веб-стандарты — это набор методологий веб-разработки, которые предоставляют веб-контент максимальному количеству пользователей, обеспечивая при этом прямую совместимость и постепенное ухудшение качества просмотра. Веб-стандарты не только снижают стоимость разработки и делают веб-контент доступным для многочисленных устройств с доступом в Интернет, но также обещают оставаться жизнеспособными по мере развития современных браузеров и появления новых браузеров на рынке.

Преимущества включают в себя:

  1. Один набор кода, который может быть интерпретирован единообразно и согласованно всеми браузерами, совместимыми со стандартами (как дополнительное преимущество, модульность легче интегрируется с системами управления контентом и позволяет проводить несколько презентаций одного и того же контента);
  2. Семантическая разметка увеличивает поисковую оптимизацию (SEO);
  3. Постепенное снижение, логическое, иерархическое представление контента все еще доступно для браузеров, не способных поддерживать определенные технологии, и прогрессивное усовершенствование, которое позволяет современным, способным браузерам показывать больше контента и расширенные взаимодействия;
  4. Разделение трех основных клиентских слоев (разметка HTML, представление CSS и поведение JavaScript) позволяет упростить управление сайтом, повысить однородность и согласованность, а также снизить требования к избыточности и пропускной способности;
  5. Повышение производительности загрузки веб-сайтов за счет перевода традиционных элементов графического интерфейса в DHTML, использования методов инкапсуляции / наследования в CSS и JavaScript, разделения «слоев» для уменьшения избыточности и т. Д .;
  6. Accessibility of content. Accessibility is not just about disabled people! It is a design approach that allows web content to reach the maximum number of people, regardless of browser types (desk top web browsers, PDAs, text to speech readers) or user viewing preferences (text zooming, etc).

The Wrong Approach

Consider the «snippet» of HTML below and its associated CSS. Although the author has done well in separating structure from form and avoiding the use of HTML to create the presentation, this example is still lacking in several areas. The author is suffering from what is commonly known as divititis, or, using the HTML «DIV» element to tag all of the content. This creates several problems.

First, each DIV element is given an ID or CLASS attribute, which requires a nomenclature the author has to first invent and all subsequent developers will need to learn in order to modify this code. Secondly, the author has used presentation terminology in naming the CSS selectors. For instance: will «form-hdr-green» still make sense if a decision is made to have headers in blue? And finally, anyone reading this snippet must rely on the ID or CLASS attributes themselves in order to understand what this code represents. Without style sheets, this markup has virtually no semantic meaning, and, is therefore dependent on styles to give it meaning.

#my-module	{margin-bottom:10px; font-family:arial,sans-serif; font-size:12px}
.bdr-black	{padding-bottom:5px; border:1px solid #000}
#form-hdr-green	{color:green; font-weight:bold; font-size:14px; padding:5px}
.margin-lft	{margin:0; margin-left:10px}
#name		{float:left}
.field		{width:100px; margin-left:5px}
<div id="my-module">
  <div class="bdr-black">
    <div id="form-hdr-green">Submit Expenses</div>
      <div>
	  <form action="doSomething.php" class="margin-lft">
	  <div id="name">Your Name:</div>
	  <input type="text" class="field" />
	  <input type="submit" class="field" />
	  </form>
      </div>
  </div>
</div>

The Right Approach

The example from above can easily be re-written using hierarchical, semantic HTML and contextual CSS to achieve a more robust presentation:

#my-module		{margin-bottom:10px; font:12px arial,sans-serif}
#my-module fieldset	{padding:5px 0; border:1px solid #000}
#my-module legend	{display:none}
#my-module h3		{margin:5px; color:green; font-size:14px}
#my-module form		{margin:0 0 0 10px}
#my-module label	{float:left}
#my-module input	{width:100px; margin-left:5px}
<div id="my-module">
  <fieldset>
    <legend> Expense Report Form</legend>
      <h3>Submit Expenses</h3>
          <form name="myForm" action="doSomething.php">
              <label for="name">Your Name:</label>
              <input type="text" id="name" />
              <input type="submit" />
          </form>
  </fieldset>
</div>

The new code looks like the original when rendered in a browser window:

[img_assist|nid=3360|title=|desc=|link=none|align=none|width=651|height=94]

The new code improves the original design by several factors:

  1. The use of semantic HTML markup (such as FIELDSET and LABEL, etc) ensures graceful degradation in terms of providing meaningful content to non CSS capable browsers.
  2. Divititis has been eliminated and replaced with more compacted semantic HTML that more closely tags the content for what it actually represents.
  3. Style rules have been applied contextually, thereby eliminating the need for references. Notice that the CSS is nicely encapsulated, ensuring that only FORM tags which are children of «my-module» will receive a left margin of 10px. The markup is now much easier to read.

Notice that even without style sheets, the new code is semantically meaningful and will provide any user with access to content:

[img_assist|nid=3361|title=|desc=|link=none|align=none|width=651|height=117]

Obviously, this is a simplistic example, but it does illustrate how using a Web Standards approach to client-side development can improve performance by reducing the amount of code generated; streamline development time by creating an organized, structured presentation layer; and provide content to more Internet-enabled devices, regardless of what presentation technologies each device can support.

Adding Unobtrusive JavaScript

«Unobtrusive JavaScript» refers to the implementation of JavaScript behaviors in a way that enhances the user experience for those who have JavaScript capable browsers, but does not affect the core functionality for browsers that do not. Well written, unobtrusive scripts tend to use the same methods and attributes to find, add, and/or modify content on a web page:

Identify the attach point on the web page Create new markup/content to add to web page Place new markup/content relative to attach point
getElementById();
getElementsByTagName();
etc.		 createElement();
setAttribute();
innerHTML
etc.		 insertBefore();
appendChild();
etc.

Ideally, JavaScript should locate the HTML element upon which to attach an event, create all of the content/behavior to be delivered, and then inserts the new content/behavior into the web page. This approach to adding behaviors to a web page will ensure browsers that do not support JavaScript can still function properly. In the case of the form example from above, adding unobtrusive JavaScript is easy:

function enhanceForm() {
	// do something cool, then...
	document.myForm.submit();
}
<div id="my-module">
  <fieldset>
    <legend> Expense Report Form</legend>
      <h3>Submit Expenses</h3>
          <form name="myForm" action="doSomething.php" onsubmit="return false;">
            <label for="name">Your Name:</label>
            <input type="text" id="name" />
            <input type="submit" onclick="enhanceForm();" />
          </form>
  </fieldset>
</div>

The nice thing about this solution is the «onclick» event, located on the submit button, will override the default form submission (in part by using «return false» on the FORM element). If the browser is not DOM capable, then the form is still submitted in the traditional manner. In other words, JavaScript is used to enhance the user experience; it is not used to replace core functionality.

From here, we can actually take it one additional step further: removing the «onclick» event from the markup itself — after all, it is best to have behavioral events instantiated via JavaScript, not by the markup. To do this, an event handler must be called when the page loads, awaiting the user to click on the last INPUT element for «my-module:»

window.onload = function() {
	var doIt = document.getElementsByTagName("INPUT");
	doIt[doIt.length-1].onclick = function() {
		enhanceForm();
	}
}

Conclusion

Web Standards and Accessibility-based development should not be regarded as just additional tasks to be implemented — it is really a design approach that starts right from the beginning. Ideally, presentation layer developers should be brought into the design phase early on to work with visual and interaction designers in helping to create a user experience that is compelling and dynamic for those browsers that can handle it (progressive enhancement), while still providing logical content structures for those browsers that cannot (graceful degradation).

References

  • Designing with Web Standards, by Jeffrey Zeldman
  • Unobtrusive JavaScript, by Christian Heilmann
  • DOM Scripting, by Jeremy Keith
  • Graded Browser Support, by Nate Koechley (Yahoo! Inc.)
  • The Web Standards Project
  • The Web Standards Group
  • The W3C Web Accessibility Initiative (WAI)

33
Share: