what are the structural elements of your website?
It takes about 50 milliseconds for a viewer to draw an opinion about a website. Wow!
To put that in perspective, that is 1/20 of a second. That statistic may sound a little extreme, but just recall some of your recent wanderings on the Internet. How long did it take you to click through an uninviting webpage?
Here are some of the major subjects covered in our section on structural elements.
With proper application, they can assist in giving a better first impression:
- how to use typography
- practice simplicity in page design
- why use a table of contents
- use of images and illustrations
- use of whitespace
- proper design for mobile use
how to use typography?
Even though a picture is worth a thousand words, it still takes words to communicate and connect with your users.
The fact is that 96% of the contents are by the written word.
In this section, we will cover the subject of typography, i.e., the use of fonts, and other characteristics such as word and letter spacing.
The cardinal rule of typography is to limit the number of font types. Many authorities on the subject say that limit of fonts should be no more than three. Our opinion is to limit the font styles to two at most, and using a single typeface is usually ample.
In this instance, a wider variety is not an improvement. Too many font styles only make the page look confusing and cluttered.
If you do use more than one font, make sure that they are complementary in look.
Also, use fonts that are familiar to the viewing audience. Fussy fonts are harder to read and take considerably more concentration than a standard typeface.
how to configure webpage line text?
Some experts say the line should consist of 50 to 60 characters, while others say that as many as 75 is correct.
We feel that the acceptable number is somewhere in the range of 60 to 70 characters per line without spaces being counted, as shown here.
The lengthiest lines on our site have a count of around 75 to 80 characters per line. This setting was the result of the column width we picked (1000 pixels) and how it related to the amount of text we have in each text block. The amount of whitespace we thought would be pleasing on either side of the row width also came into play.
If the lines are too short, less than 50 characters, there are too many eye movements occurring in a very brief period. This rapid movement may trigger eye stress or cause the eye to move erratically, resulting in the missed interpretation of the context.
Conversely, if the line of text has too many characters, the reader may find it too challenging to remain focused on the page's text. This situation is prevalent when there are large sections of nonstop copy to read.
These guidelines cover the application to a laptop, desktop, or tablet machine. For mobile devices, we suggest 45 characters per line or less, given the need to maintain ease of eye movement over a small viewing area.
But again, on small devices, the font's characteristics are vital for visibility and usability. So both aspects, typeface, and length of the line, are critical for small screen legibility. The best way to accomplish this relationship is to restrict the width of your text blocks.
line, character, and word spacing issues
The spacing between characters and between lines can help or hurt the readability of your webpages. At times, we neglect to recognize that crowding of letterings on a screen can drive viewers away. If reading a page strains your eyes, are you going to continue?
Let's start with spacing between lines.
The term used for this subject is "line-height." Roughly defined, line-height is the overall verticle distance of the line, including the text.
When correctly setting the line-height, the readability of the copy improves. The ease is due to the increase in the whitespace between the lines of text.
So what should the line-height be for text? The general rule is that line-height is a factor of 150%. Let's state the theory in more precise terms.
The overall height of the character, plus the whitespace above and below, is 1.5x the size of the font. So if the text size is 16 px (pixels), then the light-height is 24 px.
Our text is 16 px, which is the default font size for most Internet browsers. However, our actual line-height is higher at a ratio of 2.0x or 32 px for desktop and tablet screens. And for mobile devices, it’s 1.75x or 28 px. We just like a little more space to give our text a more airy look and more comfortable for the eyes.
Another term that you will find on this subject is the "em."
The historical origin of the em designated the space equal to the width of the capital "M" on early printing presses.
Ems are relative measures based on the overall font size selected for use. Using 16 px as a base font size of text, then 1.0 em would be equal to 16 px. So applying that to the line-height of 24 px in em's would be 1.5 em or 1.5x one em.
As stated before, this is a general rule. Much of the line-height and font size depend upon the font chosen. So here are some additional general rules that can help, or can confuse even further:
- Use increased line-height when using a massive amount of text.
- The longer the line length is, the greater the line-height should be.
- Shorter line lengths should have lesser line-spacing.
- Larger size fonts should have proportionately greater line-height.
- Ascending and descending font characters should have adequate space between them, and never touch.
- Smaller fonts require greater line-height than larger fonts.
is the spacing between letters and words important?
The ability to control the spacing between letters (letter-spacing) or words (word-spacing) on a webpage differs from kerning on a word processor. Some of the CMS applications allow the user to control the horizontal spacing between letters in pixels. Others use the relative method of the em. As in line-height, we suggest using the em.
A pixel is 1/96 of an inch and is not a relative or elastic measurement. Consequently, pixels will not scale relative to the screen size and will not adapt to the width of the browser.
Dissimilar to pixels, ems are comparative measures. They are relative or proportionate values based upon the size of the font selected. That is, an em is not an absolute value and will vary in size with a change in screen size or if the user deploys the zoom function of the web browser.
For most beginners, our suggestion is to leave the character spacing to the "normal" setting for both letter-spacing and word-spacing. Unless seeking some particular text effect, do not adjust letter-spacing or word-spacing. Maybe try line-height first to achieve the desired result.
use webpage headings and subheadings!
Like street signs, headings on a webpage are the directional signs for a site.
Without headings, the visitors will not know what subject they are about to enter, and if it is something that interests them.
Headings should be informative for the above reason. Make sure that your section titles are not "clickbait." A misleading caption to what is in the following copy can be a letdown to the viewer.
If your reader is unpleasantly surprised after reading the content that follows it, whose fault is it if they leave the site?
The headings and subheadings should be indications as to what the content of the section is. At the same time, these headings provide structure and clarity to not only the viewer but also help the search engines understand the subject matter.
Whether you are using a CMS, working with a page builder, or coding in HTML, the premise for using the proper heading structure is reliant upon HTML heading tags.
how to do HTML heading and subheading tags?
Heading tags are indicators in a webpage's code that generate organization from an SEO (Search Engine Optimation) standpoint.
They set a hierarchical structure for the context on the page, and range from h1 to h6. When viewed in code, they appear as <h1>, <h2>, and so on to <h6>.
Each heading should stand by itself, i.e., distinct and isolated from the body of the text; otherwise, its importance and description become ineffective.
To illustrate the concept of heading structure, let's draw the parallel to creating an outline for a news article or a single-page book report.
We start with the title of the piece, which has the h1 tag. There can only be one title for our hypothetical report; the same is correct for each webpage.
The h1 tag is the most important heading on the webpage, and it is of the utmost importance that it relates or translates to the page's content. To be useful for the reader and the search engine, it should also be at the top of the page.
Here are a few additional guidelines to keep in mind:
- Having more than one h1 negates the use of the tag at worst, or will confuse the search engine at best.
- H2 through h6 heading tags should proceed and help to identify the lesser topics. The typical webpage does not need to go into greater depth than h3.
- Corresponding in reverse value, the lower the number of the "h" tag is, the larger the size of the font character is. That is, h2 is taller than h3.
While header tags indicate the importance of the copy, it also controls the font size used for the headings. This change in font size is done by manual input when coding. But a CMS or a page builder handles it differently, and more efficiently, by assigning the proper tag using its drag and drop format.
As a general guideline, you can use the following schedule to reference the heading tag's importance and font size.
In this schedule, we show the font sizes in both pixels and the equivalent em format.
The above premise uses 16 px as its basis for the webpage body text. Which also tends to be the default font size for most web browsers.
As a final word on this issue, without the proper use of heading tags, there is the distinct possibility that visitors, and the search engines, may experience some confusion on your webpages.
The prior subject leads us thematically to another weighty topic in web design, simply termed simplicity.