Proposed Site and Tracker single template HTML changes
As the content on these templates has evolved, the styling would be easier (and the templates more accessible and semantic) if we adjusted as the following:
Title (top priority)
# **33Across, Inc.** (33across.com)
<h1 id="-33across-inc-33across-com-"><strong>33Across, Inc.</strong> (33across.com)</h1>
- Separate tracker title and URL into h1 and h2, to be more semantic and make styling separate from other h1s possible, becomes
# 33Across, Inc.
## (33across.com)
<h1 id="-33across-inc-33across-com-">33Across, Inc.</h1>
<h2 class="url">(33across.com)</h2>
Top quote (nice to have)
> “Monetize mobile web traffic with mobile in-feed video” – [Source](a href="http://33across.com)</a>
<blockquote>
<p>“Monetize mobile web traffic with mobile in-feed video” – <a href="http://33across.com">Source</a></p>
</blockquote>
- Add "description" class to blockquote following h1 h2 pattern, to separate it from any other quotes in content, becomes
<blockquote class="description">
<p>“Monetize mobile web traffic with mobile in-feed video” – <a href="http://33across.com">Source</a></p>
</blockquote>
Images with captions (nice to have)
![A 33across video ad featuring orange smoke blowing across the screen](/trackers/33across.com/blowing-smoke.jpg)
> Don’t know about you, but it looks to us like they’re just blowing smoke. – Ed.
<p><img src="/trackers/33across.com/blowing-smoke.jpg" alt="A 33across video ad featuring orange smoke blowing across the screen"></p>
<blockquote>
<p>Don’t know about you, but it looks to us like they’re just blowing smoke. – Ed.</p>
</blockquote>
- The blockquote isn’t semantic, or really has any meaning, here. If possible, I think we should do:
![A 33across video ad featuring orange smoke blowing across the screen](/trackers/33across.com/blowing-smoke.jpg)
*Don’t know about you, but it looks to us like they’re just blowing smoke. – Ed.*
- Which would produce the slightly more semantic
<p><img src="/trackers/33across.com/blowing-smoke.jpg" alt="A 33across video ad featuring orange smoke blowing across the screen"></p>
<p><em>Don’t know about you, but it looks to us like they’re just blowing smoke. – Ed.</em></p>
- If we could take this pattern of p > img, p > em, and convert it into a figure, that would be the absolute dream (and I don’t think it should cause any issues, as people are unlikely to wrap text in emphases in the paragraph following an image.)
<figure>
<img src="/trackers/33across.com/blowing-smoke.jpg" alt="A 33across video ad featuring orange smoke blowing across the screen">
<figcaption><p>Don’t know about you, but it looks to us like they’re just blowing smoke. – Ed.</p></figcaption>
</figure>