TRT: Design

CSS

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Defaults
2.0 Headings
2.1 Spacing
3.0 Blockquotes
4.0 Tables
5.0 Lists
6.0 Tags
-------------------------------------------------------------------*/
/* 1.0 Defaults */
#main .post-10 hr {
	border: 1px solid #ccc;
	margin: 2em 0;
}

/* 2.0 Headings */
#main .post-10 .postcontent h1, #main .post-10 .postcontent h2, #main .post-10 .postcontent h3, #main .post-10 .postcontent h4, #main .post-10 .postcontent h5, #main .post-10 .postcontent h6 {
	line-height: 1.4;
	font-family: Lucida, Georgia, serif;
	margin-bottom: 15px;
	margin-top: 0;
	padding: 0;
	text-rendering: optimizelegibility;
}

#main .post-10 .postcontent h1 {
	font-size: 2.75em;
}

#main .post-10 .postcontent h2 {
	font-size: 2.3em;
}

#main .post-10 .postcontent h3 {
	font-size: 1.7em;
}

#main .post-10 .postcontent h4 {
	font-size: 1.4em;
}

#main .post-10 .postcontent h5 {
	font-size: 1.1em;
}

#main .post-10 h6 {
	font-size: 1em;
}

#main .post-10 pre {
	background-color: #efefef;
	line-height: 2;
	padding: 2em;
	word-wrap: break-word;
}

/* 2.1 Spacing */
#main .post-10 p {
	line-height: 1.6;
}

/* 3.0 Blockquotes */
#main .post-10 blockquote {
	background-color: #fafafa;
	border-left: 8px solid #cccccc;
	padding: 1em;
	margin: 0 0 1.25rem;
}

#main .post-10 cite {
	color: #898989;
	font-size: 14px;
	font-style: italic;
}

/* 4.0 Tables */
.postcontent table th, .commentcontent table th {
	background: none;
}

#main .post-10 table {
	background: white;
	border: 1px solid #cccccc;
}

#main .post-10 table thead tr th, #main .post-10 table thead tr td {
	font-weight: bold;
	background: white;
}

#main .post-10 table th, #main .post-10 table td {
	border: none;
	padding: 1em;
}

#main .post-10 table tr:nth-of-type(odd) {
	background: #f9f9f9;
}

/* 5.0 Lists */
#main .post-10 ul, #main .post-10 ol {
	margin-left: 20px;
}

#main .post-10 ul, #main .post-10 ol, #main .post-10 li {
	line-height: 2.1;
}

/* 6.0 Tags */
#main .post-10 a {
	color: blue;
}

#main .post-10 a:hover {
	color: green;
}

#main .post-10 abbr {
	border-bottom: 1px dotted #333333;
	cursor: help;
}

#main .post-10 code {
	background-color: #f8f8f8;
	border: 1px solid #dfdfdf;
	color: #333333;
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	padding: 5px 10px;
}

HTML

While we understand not every reviewer is comfortable giving design feedback, we encourage you to look through this list of design recommendations while reviewing themes. Using the <a href="https://codex.wordpress.org/Theme_Unit_Test">theme unit</a> <a href="https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml">test data</a> will also help identify issue with basic design elements.
<h2 id="typography">Typography <a href="#typography">#</a></h2>
<strong>Is the type large enough to comfortably read?</strong>

Body text should generally be 14px (or comparable size in ems/rems) or larger on desktop, unless using a font with a generous x-height.

<strong>Do paragraphs have enough line-height?</strong>

If you squint your eyes, can should still be able to see some space between lines.

<strong>Is there enough difference between headers and paragraphs to distinguish them from each other?</strong>

A good rule of thumb is 1.3-1.4 on headers and 1.4-1.6 on body text. Ex: <code>line-height: 1.4;</code>

<strong>Is the line length of the text comfortable, or does it stretch too far across the page?</strong>

Line length on larger screens or wider layouts should generally be between between 45-75 characters per line.
<h2 id="color">Color<a href="#color">#</a></h2>
<strong>Is the color contrast high enough?</strong>

Check if the type is readable against its background.

<strong>Could someone with color blindness still view the site and be able to distinguish between sections and read the text?</strong>

Color should not be the only way of conveying important information. <a title="Designing for color blindness" href="http://webaim.org/articles/visual/colorblind#designing" target="_blank">[ref]</a>

For many people with color blindness, reds and greens look the same. Theme authors should avoid putting the two colors on top of each other. Ex: don't put green text on a red background.

<h2 id="design-details">Design details<a href="#design-details">#</a></h2>

<strong>Can you tell if the theme has an intended audience?</strong>

"General" or "multipurpose" themes are often hard for new user to set up easily. Consider designing niche themes.

<strong>Is the design responsive?</strong>

<strong>Do the details (drop shadows, gradients, etc.) distract at all from the content?</strong>

<strong>Are any icons included in the theme vector?</strong>

Use svgs with <a href="http://www.grumpicon.com/">appropriate fallbacks</a>, or an icon font.

<strong>Is animation used appropriately?</strong>

Animation should be used only to call attention to the most important elements on a page, or to show change.
Animation should not be used purely for decoration.


<h2 id="design-references">References <a href="#design-references">#</a></h2>

For more information on design, please watch the following presentations on WordCamp.tv:
<ul>
	<li><a title="Sara Cannon: Designing for the Modern Web" href="http://wordpress.tv/2012/08/26/sara-cannon-designing-for-the-modern-web/" target="_blank">Sara Cannon: Designing for the Modern Web</a></li>
	<li><a title="David Hickox: Designing for Content" href="http://wordpress.tv/2014/09/05/david-hickox-designing-for-content/" target="_blank">David Hickox: Designing for Content</a></li>
	<li><a href="http://wordpress.tv/2014/11/02/michael-arestad-visual-hierarchy/" target="_blank">Michael Arestad: Visual Hierarchy</a></li>
	<li><a title="Michelle Schulp: A Website Is Not A Poster: Designing Successfully For The Web" href="http://wordpress.tv/2014/02/06/michelle-schulp-a-website-is-not-a-poster-designing-successfully-for-the-web/" target="_blank">Michelle Schulp: A Website Is Not A Poster: Designing Successfully For The Web</a></li>
	<li><a title="Aaron Jorbin: Color Theory for Web Developers" href="http://wordpress.tv/2014/07/01/aaron-jorbin-color-theory-for-web-developers/" target="_blank">Aaron Jorbin: Color Theory for Web Developers</a></li>
	<li><a title="Sara Cannon: Typography and User Experience" href="http://wordpress.tv/2014/11/01/sara-cannon-typography-and-user-experience/" target="_blank">Sara Cannon: Typography and User Experience</a></li>
</ul>

You can also read these articles:
<ul>
	<li><a title="Responsive Web Typography" href="http://www.elliotjaystocks.com/blog/responsive-web-typography/" target="_blank">Ellot Jay Stocks: Responsive Web Typography</a></li>
	<li><a title="What Developers Need to Know About Theme Design" href="http://themeshaper.com/2015/02/27/theme-design-for-devs/" target="_blank">Mel Choyce: What Developers Need to Know About Theme Design</a></li>
</ul>
<h2 id="common-elements-style-examples">Common Elements Style Examples<a href="#common-elements-style-examples">#</a></h2>

The following is not an exhaustive list of elements that should receive style treatment but it does identify those that should be given attention. The CSS used in the examples are a reference point and not intended to be the exact styles used in every theme.

<div style="margin: 3em 0;"></div>

<h4><strong>Headings</strong></h4>

Pay special attention to typography and type treatment, which really underscores and compliments your theme's content.

<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>

<hr />

<pre>h1 { font-size: 2.75em; }
h2 { font-size: 2.3em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.1em; }
</pre>

<hr />

<h4><strong>Heading & Paragraph Spacing</strong></h4>

<div style="margin: 3em 0;"></div>

<h3>First Paragraph Header</h3>

<p>Cillum wisi incididunt nihil molestie pellentesque? Error totam, aliquam mollitia, cillum! Augue provident debitis egestas laborum, rerum tenetur nisi! Voluptas ex eros adipiscing. At facere.</p>
<p>Nostrum primis senectus dui eros hic, alias torquent ea dictum dolores ea provident nostra tempor dolore! Id autem? Ante proin tristique! Venenatis reprehenderit ullam primis.</p>

&nbsp;

<h3>Second Paragraph Header</h3>

<p>Cillum wisi incididunt nihil molestie pellentesque? Error totam, aliquam mollitia, cillum! Augue provident debitis egestas laborum, rerum tenetur nisi! Voluptas ex eros adipiscing. At facere.</p>
<p>Nostrum primis senectus dui eros hic, alias torquent ea dictum dolores ea provident nostra tempor dolore! Id autem? Ante proin tristique! Venenatis reprehenderit ullam primis.</p>

<hr />

<pre>
h1,h2,h3,h4,h5 {
    line-height: 1.4;
}
p {
    line-height: 1.6;
}
</pre>

<hr />

<h4><strong>Blockquotes</strong></h4>
Single line blockquote:
<blockquote>Stay hungry. Stay foolish.</blockquote>
Multi line blockquote with a cite reference:
<blockquote>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.'</blockquote>
<cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite>

<hr />

<pre>blockquote {
    background-color: #fafafa;
    border-left: 8px solid #cccccc;
    padding: 1em;
    margin: 0 0 1.25em;
}

cite {
    color: #898989;
    font-size: 14px;
    font-style: italic;
}
</pre>

<hr />

<h4><strong>Tables</strong></h4>
<table>
<thead>
<tr>
<th>Employee</th>
<th>Salary</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>$1</td>
<td>Because that's all Steve Jobs needed for a salary.</td>
</tr>
<tr>
<th>Jane Doe</th>
<td>$100K</td>
<td>For all the blogging she does.</td>
</tr>
<tr>
<th>Fred Bloggs</th>
<td>$100M</td>
<td>Pictures are worth a thousand words, right? So Jane x 1,000.</td>
</tr>
<tr>
<th>Jane Bloggs</th>
<td>$100B</td>
<td>With hair like that?! Enough said...</td>
</tr>
</tbody>
</table>

<hr />

<pre>table {
    background: white;
    border: 1px solid #cccccc;
}

table thead tr th, table thead tr td {
    font-weight: bold;
    background: white;
}

table th, table td {
    border: none;
    padding: 1em;
}

table tr:nth-of-type(odd) {
    background: #f9f9f9;
}
</pre>

<hr />

<h4><strong>Nested Lists</strong></h4>
<ul>
	<li>List item one
<ul>
	<li>List item one
<ul>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
</ul>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ul>
</li>
	<li>List item two</li>
</ul>
<ol>
	<li>List item one
<ol>
	<li>List item one
<ol>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
</ol>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ol>
</li>
	<li>List item two</li>
</ol>

<hr />

<pre>ul, ol {
    margin-left: 20px;
}

ul, ol, li {
    line-height: 2.1;
}
</pre>

<hr />

These supported tags come from the WordPress.com code <a title="Code" href="http://en.support.wordpress.com/code/">FAQ</a>.

<hr />

<h4><strong>Link</strong></h4>
This is an example of a <a title="WordPress.org" href="http://wordpress.org">link</a>.

<hr />

<pre>a {
    color: blue;
}
a:hover {
    color: green;
}
</pre>

<hr />

<h4><strong>Strong and Emphasis Tags</strong></h4>
The strong tag shows <strong>bold</strong> text and the emphasize tag should <em>italicize</em> text.

<hr />

<pre>strong {
    font-weight: bold;
}

em {
    font-style: italic;
}
</pre>

<hr />

<h4><strong>Abbreviation Tag</strong></h4>
The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously".

<hr />

<pre>abbr {
    border-bottom: 1px dotted #333333;
    cursor: help;
}
</pre>

<hr />

<h4><strong>Cite Tag</strong></h4>
"Code is poetry." -- <cite>Automattic</cite>

<hr />

<pre>cite {
    color: #898989;
    font-size: 14px;
    font-style: italic;
}
</pre>

<hr />

<h4><strong>Code Tag</strong></h4>
The code tag defines a piece of computer code like this CSS: <code>word-wrap: break-word;</code>.

<hr />

<pre>code {
    background-color: #f8f8f8;
    border: 1px solid #dfdfdf;
    color: #333;
    font-family: Consolas,"Liberation Mono",Courier,monospace;
    padding: 5px 10px;
}
</pre>

<hr />

<h4><strong>Preformatted Tag</strong></h4>

The pre tag will preserve both spaces and line breaks and is often styled similar to the code tag.

<hr />

<pre>&lt;pre&gt;
.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
&lt;&sol;pre&gt;
</pre>

<hr />

<pre>pre {
    background-color: #efefef;
    line-height: 2;
    padding: 2em;
    word-wrap: break-word;
}
</pre>