2019-05-30 22:17:39 +02:00
<!DOCTYPE html>
< html lang = "en" >
2019-12-13 11:23:02 +01:00
{% block head %}
2020-07-09 13:29:27 +02:00
< head >
< title >
{% block title %}{{ title }}{% endblock %}
< / title >
< meta charset = "UTF-8" >
2022-06-09 12:05:04 +02:00
< meta http-equiv = "Content-Security-Policy" content = "default-src 'self'; script-src 'self' 'unsafe-inline' *.offen.dev platform.twitter.com; frame-src 'self' *.offen.dev platform.twitter.com; style-src 'self' 'unsafe-inline'" >
2020-09-11 21:51:21 +02:00
< meta name = "referrer" content = "origin" >
2020-07-09 13:29:27 +02:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2020-07-09 13:47:48 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=5" >
2020-07-09 13:29:27 +02:00
< meta name = "description" content = "{{ description }}" >
< meta property = "og:site_name" content = "{{ SITENAME }}" >
< meta property = "og:locale" content = "{{ DEFAULT_LANG }}" >
< meta property = "og:title" content = "{{ title }}" >
< meta property = "og:description" content = "{{ description }}" >
< meta property = "og:type" content = "website" >
< meta property = "og:url" content = "{{ SITEURL }}/{{ href }}" >
< meta property = "og:image" content = "{{ SITEURL }}{{ image_url or '/theme/images/offen-logo-social-media.jpg' }}" >
< meta name = "twitter:image:alt" content = "Offen logo" >
< meta name = "twitter:card" content = "summary_large_image" >
{% if template != 'archives' %}
< link rel = "canonical" href = "{{ SITEURL }}/{{ href }}" >
{% endif %}
< link rel = "shortcut icon" type = "image/x-icon" href = "/theme/images/favicon.ico" >
{% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/fix.css", "css/fonts.css" %}
< link rel = "stylesheet" href = "/{{ ASSET_URL }}" >
{% endassets %}
< link rel = "preload" href = "/theme/fonts/rubik-v9-latin-regular.woff2" as = "font" crossorigin >
< link rel = "preload" href = "/theme/fonts/rubik-v9-latin-500.woff2" as = "font" crossorigin >
{% if OFFEN_ACCOUNT_ID and not no_stats %}
2020-07-22 14:00:09 +02:00
< script async src = "https://offen.offen.dev/script.js" data-account-id = "{{ OFFEN_ACCOUNT_ID }}" > < / script >
2020-07-09 13:29:27 +02:00
{% endif %}
2021-03-04 09:33:12 +01:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "/feeds/all.rss.xml" >
< link rel = "alternate" type = "application/atom+xml" title = "Atom" href = "/feeds/all.atom.xml" >
2020-07-09 13:29:27 +02:00
< / head >
2019-12-13 11:23:02 +01:00
{% endblock %}
2021-05-14 08:51:04 +02:00
< body class = "{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid no-js" >
< script >
document.body.classList.remove('no-js')
< / script >
2020-04-27 21:51:46 +02:00
< div class = "cclr-bg-white-dark" >
< div class = "menu w-100 cclr-bg-yellow-mid" >
2020-01-02 17:12:10 +01:00
< section class = "nav-bar" >
< div class = "nav-container" >
2021-05-14 08:51:04 +02:00
< div class = "icon flex" >
2020-02-01 13:16:43 +01:00
< a class = "link dim" href = "/" > < img src = "/theme/images/offen-icon-white.svg" alt = "Offen logo" width = "37" height = "40" class = "logo" > < / a >
2021-03-16 21:17:18 +01:00
< header >
< a class = "link dim" href = "/" > < p class = "fLogo normal ma0 ml2 white" > Offen< / p > < / a >
< / header >
2020-01-02 17:12:10 +01:00
< / div >
2020-07-09 13:29:27 +02:00
{% if not funnel %}
2021-05-13 09:58:06 +02:00
< nav id = "navigation" >
< div class = "nav-mobile" >
2021-05-14 08:51:04 +02:00
< span id = "nav-toggle" >
2021-05-13 09:58:06 +02:00
< span > < / span >
< / span >
< / div >
2021-05-14 08:51:04 +02:00
< ul class = "nav-list" >
2020-12-28 16:28:30 +01:00
{% if not index %}
2020-07-09 13:29:27 +02:00
< li >
< a class = "b link dim cclr-fnt-black-mid" href = "/" > Summary< / a >
< / li >
2020-12-28 16:28:30 +01:00
{% endif %}
2020-08-03 15:28:33 +02:00
< li >
< a class = "b link dim cclr-fnt-black-mid" href = "/blog/" > Blog< / a >
< / li >
2020-07-09 13:29:27 +02:00
< li >
2020-08-03 15:28:33 +02:00
< a class = "b link dim cclr-fnt-black-mid" href = "{{ ROADMAP }}" rel = "noopener" target = "_blank" > Roadmap< / a >
2020-07-09 13:29:27 +02:00
< / li >
< li >
< a class = "b link dim cclr-fnt-black-mid" href = "/about/" > About< / a >
< / li >
< li >
< a class = "b link dim cclr-fnt-black-mid" href = "{{ GITHUB_REPO }}" rel = "noopener" target = "_blank" > GitHub< / a >
< / li >
< li >
2020-12-28 16:28:30 +01:00
< a class = "b link dim cclr-fnt-black-mid" href = "{{ DOCS_URL }}" rel = "noopener" target = "_blank" > Docs< / a >
2020-07-09 13:29:27 +02:00
< / li >
< li >
< a class = "b link dim" href = "/get-started/" > Get started< / a >
< / li >
< / ul >
< / nav >
2020-01-31 21:58:30 +01:00
{% endif %}
2019-08-30 19:20:07 +02:00
< / div >
2020-01-02 17:12:10 +01:00
< / section >
< / div >
2020-07-09 13:29:27 +02:00
{% block content %}{% endblock %}
< footer >
{% if funnel %}
< footer class = "w-100 cclr-bg-mint-mid ph4 pb4" >
< div id = "bg-pattern" >
< div class = "flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6" >
< div class = "w-25-l mt3 mr3 cclr-fnt-black-mid" >
< p class = "ma0" >
< a class = "b link dim cclr-fnt-black-mid" href = "/" > Offen< / a >
< / p >
< p class = "ma0" > Fair web analytics< / p >
< / div >
< div class = "w-25-l mt3 mr3" >
< / div >
< div class = "w-25-l mt3 mr3" >
< / div >
< div class = "w-25-l mt3 tr-l" >
{{ BUILD_DATE | strftime('%B %Y') }}
< / div >
2020-07-05 16:37:37 +02:00
< / div >
2020-01-02 17:12:10 +01:00
< / div >
2019-12-22 12:56:02 +01:00
< / div >
2020-07-09 13:29:27 +02:00
{% else %}
{% block outro %}
< div class = "w-100 cclr-bg-yellow-mid" >
2020-08-06 11:57:07 +02:00
< div class = "pt3 pb4 bg-pattern" >
2020-07-09 13:29:27 +02:00
< div class = "mw8 center" >
2019-08-21 12:53:01 +02:00
2020-08-06 11:02:17 +02:00
{% if bottom_cta == 'index' %}
2020-08-06 11:57:07 +02:00
< div class = "flex flex-wrap justify-center tc ph3 pv5" >
< div class = "ph4-ns cclr-bg-yellow-mid" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 ma0 mb3 lh-title" >
2020-08-05 22:37:56 +02:00
< a class = "b link dim cclr-fnt-black-mid" href = "/" > How do fair web analytics work?< / a >
< / h2 >
< a class = "b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href = "/" rel = "noopener" > Open summary< / a >
< / div >
< / div >
2020-08-05 20:58:15 +02:00
{% endif %}
2020-08-06 11:02:17 +02:00
{% if bottom_cta == 'blog' %}
2020-08-06 11:57:07 +02:00
< div class = "flex flex-wrap justify-center tc ph3 pv5" >
< div class = "ph4-ns cclr-bg-yellow-mid" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 ma0 mb3 lh-title" >
2020-09-14 10:59:43 +02:00
< a class = "b link dim cclr-fnt-black-mid" href = "/blog/" > Continue reading< / a >
2020-08-05 22:37:56 +02:00
< / h2 >
< a class = "b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href = "/blog/" rel = "noopener" > See all blog posts< / a >
< / div >
< / div >
2020-07-09 13:29:27 +02:00
{% endif %}
2020-04-27 21:51:46 +02:00
2022-03-24 14:39:22 +01:00
{% if bottom_cta == 'protocol' %}
< div class = "ph3 ph0-m pv5" >
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
< a href = "/blog/offen-protocol/" >
< img alt = "Introducing the Offen Protocol" src = "/theme/images/offen-blog-0210-offen-protocol.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
< a href = "/blog/offen-protocol/" class = "link b dim cclr-fnt-black-mid" > Introducing the Offen Protocol< / a >
< / h3 >
< p class = "ma0" >
A new vocabulary for software that aims to handle usage data in a transparent manner. < a href = "/blog/offen-protocol/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
{% endif %}
2021-06-28 17:15:00 +02:00
{% if bottom_cta == 'disclose' %}
< div class = "ph3 ph0-m pv5" >
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
< a href = "/blog/analytics-txt/" >
< img alt = "Disclose what you collect" src = "/theme/images/offen-blog-0180-analyticstxt.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
< a href = "/blog/analytics-txt/" class = "link b dim cclr-fnt-black-mid" > Disclose what you collect< / a >
< / h3 >
< p class = "ma0" >
Why we drafted a standard that allows you to disclose information about your use of analytics software and user tracking. < a href = "/blog/analytics-txt/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
{% endif %}
2021-03-07 21:19:16 +01:00
{% if bottom_cta == 'cookie' %}
< div class = "ph3 ph0-m pv5" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
2021-03-07 21:19:16 +01:00
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
< a href = "/blog/privacy-cookies/" >
< img alt = "Privacy focus? Consider the cookies" src = "/theme/images/offen-blog-0140-privacy-cookies.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
< a href = "/blog/privacy-cookies/" class = "link b dim cclr-fnt-black-mid" > Privacy focus? Consider the cookie< / a >
< / h3 >
< p class = "ma0" >
Using cookies does not necessarily equal tracking your users. Learn how you can use cookies to respect the privacy of your users. < a href = "/blog/privacy-cookies/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
{% endif %}
2020-10-28 21:31:50 +01:00
{% if bottom_cta == 'quality' %}
< div class = "ph3 ph0-m pv5" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
2020-10-28 21:31:50 +01:00
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
< a href = "/blog/opt-in-quality/" >
2021-01-04 11:14:47 +01:00
< img alt = "Opt-in for quality insights" src = "/theme/images/offen-blog-0120-opt-in-quality.jpg" >
2020-10-28 21:31:50 +01:00
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
2021-01-04 11:14:47 +01:00
< a href = "/blog/opt-in-quality/" class = "link b dim cclr-fnt-black-mid" > Opt-in for quality insights< / a >
2020-10-28 21:31:50 +01:00
< / h3 >
< p class = "ma0" >
Collecting data only with user consent has a less obvious implication: the quality of insights from web analytics increases. < a href = "/blog/opt-in-quality/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
{% endif %}
{% if bottom_cta == 'matomo' %}
< div class = "ph3 ph0-m pv5" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
2020-10-28 21:31:50 +01:00
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
< a href = "/blog/matomo-alternative/" >
< img alt = " Why Offen is a valid Matomo alternative " src = "/theme/images/offen-blog-0100-Matomo.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
< a href = "/blog/matomo-alternative/" class = "link b dim cclr-fnt-black-mid" > Why Offen is a valid Matomo alternative< / a >
< / h3 >
< p class = "ma0" >
This brief comparison of both tools gives you a first insight into the field of fair and lightweight web analytics. < a href = "/blog/matomo-alternative/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
{% endif %}
2020-08-06 11:02:17 +02:00
{% if bottom_cta == 'fair' %}
2020-08-06 11:57:07 +02:00
< div class = "ph3 ph0-m pv5" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
2020-08-06 11:57:07 +02:00
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
2020-08-22 17:51:00 +02:00
< a href = "/blog/privacy-friendly-and-fair-web/" >
2020-08-06 11:57:07 +02:00
< img alt = "Let's build a web that is privacy friendly and fair" src = "/theme/images/offen-blog-0080-beta.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
2020-08-06 20:40:44 +02:00
< h3 class = "f3 normal lh-title ma0 mb2" >
2020-08-22 17:51:00 +02:00
< a href = "/blog/privacy-friendly-and-fair-web/" class = "link b dim cclr-fnt-black-mid" > Let's build a web that is privacy friendly and fair< / a >
2020-08-06 11:57:07 +02:00
< / h3 >
< p class = "ma0" >
2020-10-28 21:31:50 +01:00
What does the term 'privacy friendly' actually stand for? Mostly it's just about technical issues that don't tackle the underlying problem. < a href = "/blog/privacy-friendly-and-fair-web/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
2020-08-06 11:57:07 +02:00
< / p >
< / div >
< / div >
< / div >
< / div >
2020-07-09 13:29:27 +02:00
{% endif %}
2020-04-27 21:51:46 +02:00
2020-08-06 11:02:17 +02:00
{% if bottom_cta == 'budget' %}
2020-08-06 20:40:44 +02:00
< div class = "ph3 ph0-m pv5" >
2021-03-16 10:22:16 +01:00
< h2 class = "f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid" >
2020-08-06 20:40:44 +02:00
Also on our blog
< / h2 >
< div class = "mw7 center flex flex-wrap ph5-ns" >
< div class = "w-100 w-50-l" >
< figure class = "ma0 pr3-l mb3 mb0-l" >
2020-08-22 17:51:00 +02:00
< a href = "/blog/hosting-offen-on-budget/" >
2020-08-06 20:40:44 +02:00
< img alt = "Hosting Offen on a budget" src = "/theme/images/offen-blog-0070-budget.jpg" >
< / a >
< / figure >
< / div >
< div class = "w-100 w-50-l cclr-bg-yellow-mid" >
< div class = "pl3-l" >
< h3 class = "f3 normal lh-title ma0 mb2" >
2020-08-22 17:51:00 +02:00
< a href = "/blog/hosting-offen-on-budget/" class = "link b dim cclr-fnt-black-mid" > Hosting Offen on a budget< / a >
2020-08-06 20:40:44 +02:00
< / h3 >
< p class = "ma0" >
2020-10-28 21:31:50 +01:00
Here are some real world options for hosting Offen on a budget. Let's compare how they relate in terms of ease of deployment, performance and pricing. < a href = "/blog/hosting-offen-on-budget/" class = "link b dim cclr-fnt-black-mid" > Read more< / a >
2020-08-06 20:40:44 +02:00
< / p >
< / div >
< / div >
< / div >
< / div >
2020-08-05 20:58:15 +02:00
{% endif %}
2020-04-27 21:51:46 +02:00
2020-08-06 11:57:07 +02:00
2019-08-30 15:00:27 +02:00
< / div >
2019-08-20 16:42:19 +02:00
< / div >
< / div >
2020-07-09 13:29:27 +02:00
{% endblock %}
< div class = "w-100 cclr-bg-black-mid gray ph4 pb4" >
2020-04-27 21:51:46 +02:00
< div class = "flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6" >
2020-07-09 13:29:27 +02:00
< div class = "w-25-l mt3 mr3 cclr-fnt-yellow-mid" >
2020-04-27 21:51:46 +02:00
< p class = "ma0" >
2020-07-09 13:29:27 +02:00
< a class = "b link dim cclr-fnt-yellow-mid" href = "/" > Offen< / a >
2020-04-27 21:51:46 +02:00
< / p >
2020-06-09 06:29:03 +02:00
< p class = "ma0" > Fair web analytics< / p >
2020-04-27 21:51:46 +02:00
< / div >
< div class = "w-25-l mt3 mr3" >
2020-07-09 13:29:27 +02:00
< p class = "ma0" >
< a class = "link b dim gray" href = "mailto:{{ CONTACT_EMAIL }}" > {{CONTACT_EMAIL}}< / a >
< / p >
< p class = "ma0" >
< a class = "link b dim gray" target = "_blank" href = "/theme/{{ PGP_KEY_FILE }}" > PGP Key< / a >
< / p >
< p class = "ma0 mt2" >
< a class = "link b dim gray" href = "/blog/" > Blog< / a >
< / p >
< p class = "ma0" >
2020-12-28 16:28:30 +01:00
< a class = "link b dim gray" href = "{{ DOCS_URL }}" rel = "noopener" target = "_blank" > Docs< / a >
2020-07-09 13:29:27 +02:00
< / p >
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ GITHUB_REPO }}" rel = "noopener" target = "_blank" > GitHub< / a >
< / p >
2020-04-27 21:51:46 +02:00
< / div >
< div class = "w-25-l mt3 mr3" >
2020-07-09 13:29:27 +02:00
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ PATREON_URL }}" rel = "noopener" target = "_blank" > Patreon< / a >
< / p >
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ LINKEDIN_URL }}" rel = "noopener" target = "_blank" > LinkedIn< / a >
< / p >
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ TWITTER_URL }}" rel = "noopener" target = "_blank" > Twitter< / a >
< / p >
2021-10-22 13:56:53 +02:00
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ MASTODON_URL }}" rel = "noopener" target = "_blank" > Mastodon< / a >
< / p >
2020-07-09 13:29:27 +02:00
< p class = "ma0 mt2" >
2021-02-26 09:31:53 +01:00
< a class = "link b dim gray" href = "/legal-privacy/" > Legal & Privacy< / a >
2020-07-09 13:29:27 +02:00
< / p >
2021-10-22 13:52:42 +02:00
< p class = "ma0" >
< a class = "link b dim gray" href = "{{ OFFEN_AUDITORIUM_URL }}" rel = "noopener" target = "_blank" > Access your usage data< / a >
< / p >
2020-04-27 21:51:46 +02:00
< / div >
< div class = "w-25-l mt3 tr-l" >
2020-07-09 13:29:27 +02:00
{{ BUILD_DATE | strftime('%B %Y') }}
2020-04-27 21:51:46 +02:00
< / div >
2020-03-17 06:38:49 +01:00
< / div >
2020-04-27 15:45:47 +02:00
< / div >
2020-03-17 06:38:49 +01:00
{% endif %}
2020-07-09 13:29:27 +02:00
< / footer >
< / div >
{% block scripts %}
2021-05-14 08:51:04 +02:00
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/menu.js", "scripts/fade.js" %}
2020-07-09 13:29:27 +02:00
< script src = "/{{ ASSET_URL }}" > < / script >
{% endassets %}
{% endblock %}
< / body >
2019-05-30 22:17:39 +02:00
< / html >
