Difference between revisions of "Tutorials Style Guide - Example Page Layout"

From Help Wiki
m
m
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
<div class="intro">  
+
<div class="lead">  
[[Image:Mac calawah1.png|50px|left]]Brief overview to orient what this tutorial is about. May not always be necessary. Adding an application's icon as a small image can also help orient readers.</div>
+
[[Image:Mac network icon.png|50px|left]][http://www.webpagecontent.com/arc_archive/174/5/ Page Summary]: Succinct description of what this page is about. Could be two lines worth but shorter is better. Adding an application's icon as a small image can also help orient readers.</div>
 +
<div class="gradientshadow"></div>
  
==Title of tutorial "chunk" (level 2)==
+
===Title of tutorial "chunk" (level 3)===
 
[[Image:Mac calawah1.png|thumb|250px|right|Figure 1]]
 
[[Image:Mac calawah1.png|thumb|250px|right|Figure 1]]
 
[[Image:Mac calawah2.png|thumb|250px|right|Figure 2]]
 
[[Image:Mac calawah2.png|thumb|250px|right|Figure 2]]
Line 11: Line 12:
  
  
===Subheading (level 3)===
+
====Subheading (level 4)====
 
Brief overview to orient what is being done in this section. May not always be necessary.
 
Brief overview to orient what is being done in this section. May not always be necessary.
 
# Numbered step  
 
# Numbered step  
# Numbered step with link to larger version of figure graphic. [[:Image:Mac calawah1.png | Figure 1]]
+
# Start steps with the verb or action to take
# Numbered step
+
# Use bold menu steps such as '''File > Export > Export as PDF'''
# Numbered step with link to larger version of figure graphic. [[:Image:Mac calawah2.png | Figure 2]]
+
# Keep it brief, this is not a place to get chatty
# Numbered step with link to larger version of figure graphic. [[:Image:Mac-calawah3.png | Figure 3]]
+
# Use [http://en.wikipedia.org/wiki/Hyperlink hyperlinks] embedded in the steps to take folks to relevant articles but don't over do it
# Embedded images work well when small[[Image:Mac network icon.png]]  
+
# Embedded images work well when small[[Image:Mac network icon.png|30px]]  
 +
# Urls should be written out fully '''https://studentfiles.evergreen.edu'''
  
  
===Subheading (level 3)===
 
Brief overview to orient what is being done in this section. May not always be necessary.
 
# Numbered step. Use bold text when indicating menus for clicking, i.e. '''Go > Connect to Server'''
 
# Urls should be written out fully'''https://studentfiles.evergreen.edu'''
 
  
 +
 +
====Additional subheading with collapsed content====
 +
For pages with perhaps TOO much content, collapsing non-critical sections can help users not feel so visually overwhelmed
 +
{{Collapsed|
 +
* Use the a collapsed section for "nice to know" information
 +
* Do not put critical info in here as it may not be seen by users
 +
}}
 +
 +
 +
__NOTOC__
 +
__NOEDITSECTION__
  
 
===See also===
 
===See also===

Latest revision as of 13:05, 12 July 2016

Mac network icon.png
Page Summary: Succinct description of what this page is about. Could be two lines worth but shorter is better. Adding an application's icon as a small image can also help orient readers.

Title of tutorial "chunk" (level 3)

Figure 1
Figure 2
Figure 3

Brief overview to orient what is being done in this section. May not always be necessary.


Subheading (level 4)

Brief overview to orient what is being done in this section. May not always be necessary.

  1. Numbered step
  2. Start steps with the verb or action to take
  3. Use bold menu steps such as File > Export > Export as PDF
  4. Keep it brief, this is not a place to get chatty
  5. Use hyperlinks embedded in the steps to take folks to relevant articles but don't over do it
  6. Embedded images work well when smallMac network icon.png
  7. Urls should be written out fully https://studentfiles.evergreen.edu



Additional subheading with collapsed content

For pages with perhaps TOO much content, collapsing non-critical sections can help users not feel so visually overwhelmed

Collapse-small-silver.png
show less
Expand-small-silver.png
show more
  • Use the a collapsed section for "nice to know" information
  • Do not put critical info in here as it may not be seen by users



See also