styleguide.html 6.84 KB
Newer Older
Better Builder's avatar
Better Builder committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html><html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
	<title data-set-text="title">Content authoring guidelines | Better</title>
	<link rel="stylesheet" href="/styles/magnific-popup.css">
	<link rel="stylesheet" href="/styles/global.css">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=LbyxjJleOL">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=LbyxjJleOL">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=LbyxjJleOL">
	<link rel="manifest" href="/site.webmanifest?v=LbyxjJleOL">
	<link rel="mask-icon" href="/safari-pinned-tab.svg?v=LbyxjJleOL" color="#0098fe">
	<link rel="shortcut icon" href="/favicon.ico?v=LbyxjJleOL">
	<meta name="msapplication-TileColor" content="#2d89ef">
	<meta name="theme-color" content="#ffffff">
	<meta property="og:title" content="Better">
	<meta property="og:description" content="Better is a privacy tool for Safari that protects you from trackers and privacy-eroding ads on the web.">
Better Builder's avatar
Better Builder committed
	<meta property="og:image" content="">
Better Builder's avatar
Better Builder committed
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
	<meta property="twitter:card" content="summary_large_image">
	<meta property="twitter:description" content="Better is a privacy tool for Safari that protects you from trackers and privacy-eroding ads on the web.">
<body data-set-attribute="class category" class="none">

	<header class="site-header" data-set-text="html header"><nav class="site-navigation">
			<h2 class="hide">Navigation</h2>
				<li data-set-repeat="navigationItem navigationList" data-set-attribute="class navigationItem.class" class="home">
					<a data-set-attribute="aria-selected navigationItem.selected; href" data-set-text="navigationItem.label" href="/" aria-selected="false">Home</a>
				</li><li data-set-attribute="class navigationItem.class" data-set-alias="navigationItem navigationList 1" data-set-dummy="1" class="news">
					<a data-set-attribute="aria-selected navigationItem.selected; href" data-set-text="navigationItem.label" href="/news" aria-selected="false">News</a>
				</li><li data-set-attribute="class navigationItem.class" data-set-alias="navigationItem navigationList 2" data-set-dummy="1" class="sites">
					<a data-set-attribute="aria-selected navigationItem.selected; href" data-set-text="navigationItem.label" href="/sites" aria-selected="false">Sites</a>
				</li><li data-set-attribute="class navigationItem.class" data-set-alias="navigationItem navigationList 3" data-set-dummy="1" class="trackers">
					<a data-set-attribute="aria-selected navigationItem.selected; href" data-set-text="navigationItem.label" href="/trackers" aria-selected="false">Trackers</a>
				</li><li data-set-attribute="class navigationItem.class" data-set-alias="navigationItem navigationList 4" data-set-dummy="1" class="support">
					<a data-set-attribute="aria-selected navigationItem.selected; href" data-set-text="navigationItem.label" href="/support" aria-selected="false">Support</a>
	<main data-set-text="html content"><h1 id="content-authoring-guidelines">Content authoring guidelines</h1>

<section id="copywriting">
<li><p>Be brief: do not quote the whole privacy policy; pick out interesting bits.</p>
<li><p>You can editorialise (with restraint). Sometimes you just have to laugh at the ridiculousness of some of the trackers that we’re covering. It also helps, when trudging through the cesspit of surveillance capitalism to retain our humour. And it also makes the pages more interesting to read (we don’t want to create a dry database). Please only add editorial comments for something unusually important or to highlight egregious abuses. A good rule of thumb would be: “would this make a good slide in a presentation to illustrate the problem with this particular thing or practice?” Editorial comments should be brief, marked with ‘– Ed.’ and limited to at most one per tracker.</p>

<section id="images">
<li>Use images (sparingly). Not every humdrum tracker page needs images. However, if you are making an editorial comment and you feel that a visual aid is important in highlighting the point, please feel free to use images. Images and screenshots should be 1,160px wide (to display well at their 580pt width on high resolution screens). Please resize and compress images properly. On Mac, <a href="">ImageOptim</a> is a great application for compressing PNGs and <a href="">PhotoBulk</a> is a convenient app for converting between formats.</li>

<section id="quotes">
<li><p>We use consistent quotation style in the content:</p>
<li>Outer quotes are typographical (curly) double quotes: “…”</li>
<li>Inner quotes are typographical (curly) single quotes ‘…’</li>
<p><em>e.g “At this time, we do not honor ‘Do Not Track’ headers and similar mechanisms.”</em></p>
<li><p>If quoted text has quote marks, they should be updated accordingly to match our quotation style. Please do not leave typewriter quotes ("…") in quoted text.</p>
	<footer class="site-footer">
		<div class="footer-wrap">
			<a href=""><img src="/images/indie.svg" alt="" class="indie-logo"></a>
			<h2>Made in Cork by <a href=""></a></h2>
			<p id="privacy"><small><strong><a href="/legal">Privacy Policy:</a></strong> We exist to protect your privacy.</small></p>
			<p><small>All content on this site, except <a href="/legal">our trademarks</a>, is released under <a href="">Creative Commons Attribution-ShareAlike 4.0 International</a>. <a href="" class="view-source">View Source</a></small></p>
			<div data-set-if="category isNot home" class="downloads">
				<a href=";mt=8" class="download-on-the-app-store"><img class="download-on-the-app-store-badge" alt="Download on the App Store" src="/images/download-on-app-store-badge-black.svg"></a>
				<a href=";mt=12" class="download-on-mac-app-store"><img src="/images/download-on-the-mac-app-store-black.svg" class="no-frame" alt="Download on the Mac App Store"></a>

	<!-- Scripts for performance visualisations -->
	<script src="/scripts/zepto.min.js"></script>
	<script> var jQuery = Zepto; </script>
	<script src="/scripts/jquery.peity.min.js"></script>
	<script src="/scripts/magnific-popup.min.js"></script>
	<script src="/scripts/better.js"></script>