website/development/design_faq.html at 43d8ca429bdb541518d03ba512550d53d9e068f2 · boostorg/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Boost Website Design FAQ</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" href="/favicon.ico" type="image/ico" />
  <link rel="stylesheet" type="text/css" href=
  "/style-v2/section-development.css" />
  <!--[if IE 7]> <style type="text/css"> body { behavior: url(/style-v2/csshover3.htc); } </style> <![endif]-->
<script defer data-domain="original.boost.org" src="https://plausible.io/js/script.js"></script></head><!--
Note: Editing website content is documented at:
https://www.boost.org/development/website_updating.html
-->

<body>
  <div id="heading">
    <!--#include virtual="/common/heading.html" -->
  </div>

  <div id="body">
    <div id="body-inner">
      <div id="content">
        <div class="section" id="intro">
          <div class="section-0">
            <div class="section-title">
              <h1>Boost Website Design FAQ</h1>
            </div>

            <div class="section-body">
              <ul class="toc">
                <li>Links

                  <ul>
                    <li><a href="#faq-links-1">Why are links
                    "underlined"?</a></li>

                    <li><a href="#faq-links-2">Why are not "standard"
                    underlines used for links?</a></li>

                    <li><a href="#faq-links-3">Why are not all links
                    underlined?</a></li>
                  </ul>
                </li>
              </ul>

              <p class="faq"><a name="faq-links-1" id=
              "faq-links-1"></a><span class="faq-question">Why are links
              "underlined"?</span> The website follows some simple design
              principles to make the site as widely accessible as practical.
              The style for links within document text are underlined to have
              a non-color, clear, visual indicator that it is a link.
              Underlines provide the most familiar indicator to people
              because of the historical default usage by web browsers.</p>

              <p class="faq"><a name="faq-links-2" id=
              "faq-links-2"></a><span class="faq-question">Why are not
              "standard" underlines used for links?</span> The use of the
              bottom border provides for considerable more flexibility in
              style than the underline font style. It is important to have
              such freedom to be able to indicate the various states links
              can be in. In the case of the Boost design the bottom border
              underline is used to represent the difference between internal
              vs. external links, and between visited and unvisited links.
              All of which are orthogonal to the text being a link.</p>

              <p class="faq"><a name="faq-links-3" id=
              "faq-links-3"></a><span class="faq-question">Why are not all
              links underlined?</span> When it is clear from the context that
              the text is a link the underline is ommited to reduce visual
              clutter, as this is also within a context under which the text
              is already a collection of links. For such situations the
              design uses a link box context. All such links are placed
              within a light grey bordered box to indicate that the items
              within it are links.</p>
            </div>
          </div>
        </div>
      </div>

      <div id="sidebar">
        <!--#include virtual="/common/sidebar-common.html" -->
        <!--#include virtual="/common/sidebar-development.html" -->
      </div>

      <div class="clear"></div>
    </div>
  </div>

  <div id="footer">
    <div id="footer-left">
      <div id="revised">
        <p>Revised $Date$</p>
      </div>

      <div id="copyright">
        <p>Copyright Rene Rivera 2006.</p>
      </div><!--#include virtual="/common/footer-license.html" -->
    </div>

    <div id="footer-right">
      <!--#include virtual="/common/footer-banners.html" -->
    </div>

    <div class="clear"></div>
  </div>
</body>
</html>