Skip to content
Snippets Groups Projects
Commit 332d0e0f authored by Sean Packham (GitLab)'s avatar Sean Packham (GitLab)
Browse files

Merge branch '24-further-improvements-to-new-design' into 'master'

Further improvements to new design

Closes #24

See merge request !29
parents 76fdf278 18bed4bf
No related branches found
No related tags found
1 merge request!29Further improvements to new design
Pipeline #
Loading
Loading
@@ -17,6 +17,15 @@ exclude:
- Gemfile.lock
 
defaults:
# set layout to to default for every page
# use a sidebar on every page
-
scope:
path: ""
values:
layout: "default"
sidebar: true
# override default layout on posts
-
scope:
path: ""
Loading
Loading
Loading
Loading
@@ -5,35 +5,26 @@
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<meta property="og:image" content="images/evolution.png" />
 
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/likely.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta property="og:image" content="images/evolution.png" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-90661324-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="{{ page.body_class }}">
{% assign BODY_CLASS = page.path | split:'.' | first %}
<body class="{{ BODY_CLASS }}">
 
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Loading
Loading
@@ -45,48 +36,81 @@
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li {% if page.body_class == 'index' %}class="active"{% endif %}><a href="/">Home</a></li>
<li {% if page.body_class == 'why' %}class="active"{% endif %}><a href="/why">Why?</a></li>
<li {% if page.body_class == 'blog' %}class="active"{% endif %}><a href="/blog">Blog</a></li>
<li><a href="mailto:seanpackham@gitlab.com">Contact</a></li>
<li {% if BODY_CLASS == 'index' %}class="active"{% endif %}>
<a href="/">Home</a>
</li>
<li {% if BODY_CLASS == 'why' %}class="active"{% endif %}>
<a href="/why">Why?</a>
</li>
<li {% if BODY_CLASS == 'blog' %}class="active"{% endif %}>
<a href="/blog">Blog</a>
</li>
<li {% if BODY_CLASS == 'contribute' %}class="active"{% endif %}>
<a href="/contribute">Contribute</a>
</li>
<li>
<a href="mailto:seanpackham@gitlab.com">Contact</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</nav>
 
<div class="container">
<div class="row">
<div class="main col-md-8">{{ content }}</div>
{{ page.hide_sidebar }}
{% if page.sidebar %}
<div class="main col-md-8">
{% else %}
<div class="main col-md-12">
{% endif %}
{{ content }}
</div>
{% if page.sidebar %}
<div class="sidebar col-md-4">
 
<div class="section subscribe">
<h2>Subscribe</h2>
 
<!-- social -->
<p>
<a href="https://twitter.com/convdevio" target="_blank"><img class="twitter" src="/images/logo-twitter.svg" alt="Twitter"></a>
<a href="https://www.facebook.com/convdevio" target="_blank"><img src="/images/logo-facebook.svg" alt="Facebook"></a>
<a href="https://www.linkedin.com/company/convdevio" target="_blank"><img src="/images/logo-linkedin.svg" alt="linkedin"></a>
<a href="/feed.xml"><img class="rss" src="/images/logo-rss.svg"></a>
<a href="https://twitter.com/convdevio" target="_blank">
<img class="twitter" src="/images/logo-twitter.svg" alt="Twitter">
</a>
<a href="https://www.facebook.com/convdevio" target="_blank">
<img src="/images/logo-facebook.svg" alt="Facebook">
</a>
<a href="https://www.linkedin.com/company/convdevio" target="_blank">
<img src="/images/logo-linkedin.svg" alt="linkedin">
</a>
<a href="/feed.xml">
<img class="rss" src="/images/logo-rss.svg">
</a>
</p>
<!-- Begin MailChimp Signup Form -->
<!-- mailchimp -->
<div id="mc_embed_signup">
<form action="//conversationaldevelopment.us15.list-manage.com/subscribe/post?u=51322ba5d2fcb065b9ef6ce33&amp;id=efc70875fd" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<form action="//conversationaldevelopment.us15.list-manage.com/subscribe/post?u=51322ba5d2fcb065b9ef6ce33&amp;id=efc70875fd"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="form-group">
<label for="mce-EMAIL">Newsletter</label>
<input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="email address" required>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_51322ba5d2fcb065b9ef6ce33_efc70875fd" tabindex="-1" value=""></div>
<!-- do not remove stuff below this line -->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_51322ba5d2fcb065b9ef6ce33_efc70875fd" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default">
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<div class="section connect">
</div>
 
<div class="section categories">
Loading
Loading
@@ -96,11 +120,11 @@
{% assign tags_list = site.categories %}
{% if tags_list.first[0] == null %}
{% for tag in tags_list %}
<li><a href="#{{ tag }}">{{ tag | capitalize }} <span>({{ site.tags[tag].size }})</span></a></li>
<li><a href="/blog#{{ tag }}">{{ tag | capitalize }} <span>({{ site.tags[tag].size }})</span></a></li>
{% endfor %}
{% else %}
{% for tag in tags_list %}
<li><a href="#{{ tag[0] }}">{{ tag[0] | capitalize }} <span>({{ tag[1].size }})</span></a></li>
<li><a href="/blog#{{ tag[0] }}">{{ tag[0] | capitalize }} <span>({{ tag[1].size }})</span></a></li>
{% endfor %}
{% endif %}
{% assign tags_list = nil %}
Loading
Loading
@@ -120,8 +144,8 @@
</li>
{% endfor %}
</ul>
</div>
{% endif %}
 
</div>
</div>
Loading
Loading
@@ -129,23 +153,34 @@
 
<footer class='footer'>
<div class="container">
<div class="look">
<p>
Look for
<a href='https://twitter.com/search?q=%23convdev'>#ConvDev</a>
on Twitter
</div>
</p>
 
<div class='contribute'>
<p>
This page is generated from a
<a href='https://gitlab.com/gitlab-com/conversationaldevelopment-com'>public repo on GitLab.com</a>
— merge requests with improvements are
<a href='https://gitlab.com/gitlab-com/conversationaldevelopment-com/merge_requests'>very welcome.</a>
</div>
</p>
</div>
</footer>
 
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<!-- addthis -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58f8c9a6bd96a788"></script>
 
<!-- google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-90661324-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
---
layout: default
---
{{ content }}
<section>
<h2>Featured Articles</h2>
{% for post in site.posts limit: 3%}
<article>
<h3 class="title"><a href="{{ post.url }}" class="js-pjax">{{ post.title }}</a></h3>
<p class="date">{{ post.date | date: "%b %d, %Y" }}</p>
{{ post.excerpt }}
<a href="{{ post.url }}">Read more</a>
</article>
{% endfor %}
</section>
---
layout: page
layout: default
body_class: post
---
 
<h1>{{ page.title }}</h1>
<p>{{ page.date | date: "%b %d, %Y" }}</p>
# {{ page.title }}
{{ page.date | date: "%b %d, %Y" }}
 
{{ content }}
 
Loading
Loading
@@ -71,30 +72,17 @@ body_class: post
</section>
 
<section class="comments">
{% if page.comments %}
{% if page.comments %}
 
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://convdevio.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}
</script>
 
{% endif %}
</section>
---
layout: page
body_class: blog
---
 
{% for post in site.posts %}
Loading
Loading
---
---
## How to contribute
It is important to understand that the whole idea of Conversational Development
is a working draft. You can participate in many different ways:
- You can propose or suggest any change by
[creating a merge request](https://gitlab.com/gitlab-com/conversationaldevelopment-com/merge_requests)
- [Create an issue](https://gitlab.com/gitlab-com/conversationaldevelopment-com/issues/new)
if you have any questions or have found an issue.
- If you want to be a case study, please fill and submit
[Case Study Participant form](https://goo.gl/forms/jDgMnaiFomLirlo23)
- Host a meetup to discuss Conversational Development
- Help to spread information about Conversational Development by sharing it on
social networks
Loading
Loading
@@ -2,13 +2,16 @@
html {
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
 
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
margin-top: 75px;
margin-top: 50px;
padding-top: 25px;
background-color: #fff;
}
 
.container {
Loading
Loading
@@ -118,78 +121,15 @@ body.why .main section {
font-weight: bold;
}
 
#principles img {
max-width: 140px;
padding-right: 20px;
}
#principles a {
color: #333;
}
#principles ul {
list-style: none;
padding-left: 20px;
font-size: 24px;
margin-top: 40px;
}
#principles li {
/*margin-bottom: -10px;*/
}
#principles ul span {
color: #1b95e0;
font-weight: bold;
}
.maturity-model-table td {
border-top: 1px solid #c6cacf;
border-left: 1px solid #c6cacf;
}
.maturity-model-table thead td {
background-color: #d05131;
color: #f0f2f5;
text-align: center;
}
.maturity-model-table thead td:first-child {
text-align: left;
}
.maturity-model-table th:first-child {
min-width: 18vw;
background-color: #d6dae2;
border-top: 1px solid #e4e7ed;
}
.maturity-model-table tbody td:nth-child(even) {
background-color: rgba(220, 224, 229, 0.05);
table {
font-size: small;
max-width: 100%;
}
 
.footer {
margin: 2em 0 0;
padding: 3em 0;
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
}
.look, .likely {
float: left;
margin-bottom: 15px;
}
.look {
margin-left: 12px;
}
footer .likely .likely__counter {
display: none;
}
.contribute {
clear: both;
font-size: 14px;
font-size: small;
}
.likely,.likely__widget{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0;text-indent:0!important;list-style:none!important;font-weight:400;font-family:Helvetica Neue,Arial,sans-serif}.likely{display:inline-block}.likely__widget{margin:0;font-size:inherit}.likely{opacity:0;font-size:0!important}.likely_visible{opacity:1;transition:opacity .1s ease-in}.likely>*{display:inline-block;visibility:hidden}.likely_visible>*{visibility:inherit}.likely__widget{position:relative;white-space:nowrap}.likely__button,.likely__widget{display:inline-block}.likely__button,.likely__counter{text-decoration:none;text-rendering:optimizeLegibility;margin:0;outline:0}.likely__button{position:relative;user-select:none}.likely__counter{display:none;position:relative;font-weight:400}.likely_ready .likely__counter{display:inline-block}.likely_ready .likely__counter_empty{display:none}.likely__button,.likely__counter,.likely__icon,.likely__widget{vertical-align:top}.likely__widget{transition:background .33s ease-out,color .33s ease-out,fill .33s ease-out}.likely__widget:active,.likely__widget:focus,.likely__widget:hover{transition:none;cursor:pointer}@media (hover:none){.likely__widget:active,.likely__widget:focus,.likely__widget:hover{transition:background .33s ease-out,color .33s ease-out,fill .33s ease-out;cursor:unset}}.likely__icon{position:relative;text-align:left;display:inline-block}.likely svg{position:absolute;left:3px;top:3px;width:16px;height:16px}.likely__button,.likely__counter{line-height:inherit;cursor:inherit}.likely__button:empty{display:none}.likely__counter{text-align:center}.likely .likely__widget{color:#000;background:rgba(231,231,231,.8)}.likely .likely__counter{background-size:1px 1px;background-repeat:repeat-y;background-image:linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,0) .5px,rgba(0,0,0,0) 100%)}.likely-light .likely__widget{color:#fff;fill:#fff;background:rgba(236,236,236,.16);text-shadow:rgba(0,0,0,.2) 0 0 .33em}.likely-light .likely__counter{background-image:linear-gradient(to right,rgba(255,255,255,.4) 0,rgba(255,255,255,0) .5px,rgba(255,255,255,0) 100%)}.likely__widget_facebook{fill:#425497}.likely__widget_facebook:active,.likely__widget_facebook:focus,.likely__widget_facebook:hover{background:rgba(207,212,229,.8)}@media (hover:none){.likely__widget_facebook:active,.likely__widget_facebook:focus,.likely__widget_facebook:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_facebook:active,.likely-light .likely__widget_facebook:focus,.likely-light .likely__widget_facebook:hover{text-shadow:#425497 0 0 .25em;background:rgba(66,84,151,.7)}@media (hover:none){.likely-light .likely__widget_facebook:active,.likely-light .likely__widget_facebook:focus,.likely-light .likely__widget_facebook:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_twitter{fill:#00b7ec}.likely__widget_twitter:active,.likely__widget_twitter:focus,.likely__widget_twitter:hover{background:rgba(191,237,250,.8)}@media (hover:none){.likely__widget_twitter:active,.likely__widget_twitter:focus,.likely__widget_twitter:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_twitter:active,.likely-light .likely__widget_twitter:focus,.likely-light .likely__widget_twitter:hover{text-shadow:#00b7ec 0 0 .25em;background:rgba(0,183,236,.7)}@media (hover:none){.likely-light .likely__widget_twitter:active,.likely-light .likely__widget_twitter:focus,.likely-light .likely__widget_twitter:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_gplus{fill:#dd4241}.likely__widget_gplus:active,.likely__widget_gplus:focus,.likely__widget_gplus:hover{background:rgba(246,207,207,.8)}@media (hover:none){.likely__widget_gplus:active,.likely__widget_gplus:focus,.likely__widget_gplus:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_gplus:active,.likely-light .likely__widget_gplus:focus,.likely-light .likely__widget_gplus:hover{text-shadow:#dd4241 0 0 .25em;background:rgba(221,66,65,.7)}@media (hover:none){.likely-light .likely__widget_gplus:active,.likely-light .likely__widget_gplus:focus,.likely-light .likely__widget_gplus:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_vkontakte{fill:#526e8f}.likely__widget_vkontakte:active,.likely__widget_vkontakte:focus,.likely__widget_vkontakte:hover{background:rgba(211,218,227,.8)}@media (hover:none){.likely__widget_vkontakte:active,.likely__widget_vkontakte:focus,.likely__widget_vkontakte:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_vkontakte:active,.likely-light .likely__widget_vkontakte:focus,.likely-light .likely__widget_vkontakte:hover{text-shadow:#526e8f 0 0 .25em;background:rgba(82,110,143,.7)}@media (hover:none){.likely-light .likely__widget_vkontakte:active,.likely-light .likely__widget_vkontakte:focus,.likely-light .likely__widget_vkontakte:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_pinterest{fill:#cc002b}.likely__widget_pinterest:active,.likely__widget_pinterest:focus,.likely__widget_pinterest:hover{background:rgba(242,191,202,.8)}@media (hover:none){.likely__widget_pinterest:active,.likely__widget_pinterest:focus,.likely__widget_pinterest:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_pinterest:active,.likely-light .likely__widget_pinterest:focus,.likely-light .likely__widget_pinterest:hover{text-shadow:#cc002b 0 0 .25em;background:rgba(204,0,43,.7)}@media (hover:none){.likely-light .likely__widget_pinterest:active,.likely-light .likely__widget_pinterest:focus,.likely-light .likely__widget_pinterest:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_odnoklassniki{fill:#f6903b}.likely__widget_odnoklassniki:active,.likely__widget_odnoklassniki:focus,.likely__widget_odnoklassniki:hover{background:rgba(252,227,206,.8)}@media (hover:none){.likely__widget_odnoklassniki:active,.likely__widget_odnoklassniki:focus,.likely__widget_odnoklassniki:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_odnoklassniki:active,.likely-light .likely__widget_odnoklassniki:focus,.likely-light .likely__widget_odnoklassniki:hover{text-shadow:#f6903b 0 0 .25em;background:rgba(246,144,59,.7)}@media (hover:none){.likely-light .likely__widget_odnoklassniki:active,.likely-light .likely__widget_odnoklassniki:focus,.likely-light .likely__widget_odnoklassniki:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_telegram{fill:#34abde}.likely__widget_telegram:active,.likely__widget_telegram:focus,.likely__widget_telegram:hover{background:rgba(204,234,246,.8)}@media (hover:none){.likely__widget_telegram:active,.likely__widget_telegram:focus,.likely__widget_telegram:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_telegram:active,.likely-light .likely__widget_telegram:focus,.likely-light .likely__widget_telegram:hover{text-shadow:#34abde 0 0 .25em;background:rgba(52,171,222,.7)}@media (hover:none){.likely-light .likely__widget_telegram:active,.likely-light .likely__widget_telegram:focus,.likely-light .likely__widget_telegram:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely__widget_linkedin{fill:#0077b5}.likely__widget_linkedin:active,.likely__widget_linkedin:focus,.likely__widget_linkedin:hover{background:rgba(191,221,236,.8)}@media (hover:none){.likely__widget_linkedin:active,.likely__widget_linkedin:focus,.likely__widget_linkedin:hover{background:rgba(231,231,231,.8)}}.likely-light .likely__widget_linkedin:active,.likely-light .likely__widget_linkedin:focus,.likely-light .likely__widget_linkedin:hover{text-shadow:#0077b5 0 0 .25em;background:rgba(0,119,181,.7)}@media (hover:none){.likely-light .likely__widget_linkedin:active,.likely-light .likely__widget_linkedin:focus,.likely-light .likely__widget_linkedin:hover{text-shadow:rgba(0,0,0,.2) 0 0 .33em;background:rgba(236,236,236,.16)}}.likely{margin:0 -5px -10px}.likely .likely__widget{line-height:20px;font-size:14px;border-radius:3px;height:22px;margin:0 5px 10px}.likely .likely__icon{width:22px;height:22px}.likely .likely__button{padding:1px 4px 1px 0}.likely .likely__counter{padding:1px 4px}.likely-big{margin:0 -6px -12px}.likely-big .likely__widget{line-height:28px;font-size:18px;border-radius:4px;height:32px;margin:0 6px 12px}.likely-big .likely__icon{width:32px;height:32px}.likely-big .likely__button{padding:2px 6px 2px 0}.likely-big .likely__counter{padding:2px 6px}.likely-big svg{left:4px;top:4px;width:24px;height:24px}.likely-small{margin:0 -4px -8px}.likely-small .likely__widget{line-height:14px;font-size:12px;border-radius:2px;height:18px;margin:0 4px 8px}.likely-small .likely__icon{width:18px;height:18px}.likely-small .likely__button{padding:2px 3px 2px 0}.likely-small .likely__counter{padding:2px 3px}.likely-small svg{left:3px;top:3px;width:12px;height:12px}
\ No newline at end of file
---
layout: page
body_class: index
---
<section>
<h1>Agile needs to evolve</h1>
<p>
We need to stop thinking in terms of story points or columns and focus on the conversations in the software development life cycle instead, the time they take and the value they bring - making the shift from an abstract to a result orientated culture.
</p>
<p>
Conversational Development is the next step in the evolution Agile, <a href="/why/">Find out why</a> your team or organization should start using it.
</p>
</section>
<section id='blog'>
<h2>Featured Articles</h2>
{% for post in site.posts limit: 3%}
<article>
<h3 class="title"><a href="{{ post.url }}" class="js-pjax">{{ post.title }}</a></h3>
<p class="date">{{ post.date | date: "%b %d, %Y" }}</p>
{{ post.excerpt }}
<a href="{{ post.url }}">Read more</a>
</article>
{% endfor %}
</section>
<section id='how-to-contribute'>
<h2>How to contribute</h2>
<p>It is important to understand that the whole idea of Conversational Development is a working draft. You can participate in many different ways:</p>
<ul>
<li>You can propose or suggest any change by <a href="https://gitlab.com/gitlab-com/conversationaldevelopment-com/merge_requests">creating a merge request</a></li>
<li><a href="https://gitlab.com/gitlab-com/conversationaldevelopment-com/issues/new?issue%5Bassignee_id%5D=&issue%5Bmilestone_id%5D=">Create an issue</a>, if you have any question, or if you see some inconsistency</li>
<li>If you want to be a case study, please fill and submit <a href="https://goo.gl/forms/jDgMnaiFomLirlo23">Case Study Participant form</a></li>
<li>Host a meetup to discuss Conversational Development</li>
<li>Help to spread information about Conversational Development by sharing it on social networks</li>
</ul>
</section>
index.md 0 → 100644
---
layout: home
---
# Agile needs to evolve
We need to stop thinking in terms of story points or columns and focus on the
conversations in the software development life cycle instead, the time they
take and the value they bring - making the shift from an abstract to a result
orientated culture.
Conversational Development is the next step in the evolution Agile,
[Find out why](/why) your team or organization should start using it.
Conversational Development is a living, breathing methodology that you can
improve. [Find out here](/contribute).
---
---
## Principle 3: Invite everyone to the conversation
Instead of locking conversation on per-stage, per team, or per-specialty
principle, leave the doors as open as possible.
<div class='row'>
<div class='col-md-6'>
<p>Closed doors:</p>
<ul>
<li>SVN(the only way to make a patch was to give someone write access to the repo
)</li>
<li>Not using pull/merge requests</li>
<li>Each department has its own set of tools</li>
</ul>
<img style="width:100%" src="/images/closed-doors.png" />
</div>
<div class='col-md-6'>
<p>Open doors:</p>
<ul>
<li>Open repository, documentation &amp; issue tracker</li>
<li>Chat in shared channels</li>
<li>Open source parts of your code</li>
</ul>
<img style="width:100%" src="/images/open-doors.png" />
</div>
</div>
### Howto
- Embrace principle of “Written-first online conversations”. Lots of companies
might still rely on face-to-face conversations, but that doesn't allow
people to contribute.
- Use real-time editing tools like Google Docs for meetings. Everyone can add
to agenda, everyone can add to notes, everyone is on the same page, everyone
can see what was discussed, immediately see follow-up items.
- Prevent "Not Invented Here" syndrome
 by practicing Innersourcing: make it
possible for the rest of the organization to contribute.
- If you can make something public, make it public!
### Challenges
People should be able to argue with solutions, but more people and opinions in
the issue tracker means consensus is harder and no longer a goal.
There are two characteristics of a good conversation:
**directness and kindness**. Argue with solution, not a person. On the other
side: you are not your code.
Person that does the work or their boss decides on how open the conversation
should be. If people don't get used to directness and strive for consensus,
working out in the open will slow things down
.
### Benefits
- Increases reuse of solutions, prevents duplicate work
- Increases shared knowledge
- Ability to scale your organization by going remote &amp; asynchronous
[Principle #4: Result oriented conversations](/results-oriented)
---
layout: page
body_class: invite-everyone invite-everyone_index
---
<h2>Principle 3: Invite everyone to the conversation</h2>
<p class='hero'>Description: Instead of locking conversation on per-stage, per team, or per-specialty principle, leave the doors as open as possible.</p>
<div class='row'>
<div class='col-md-6'>
<p>Closed doors:</p>
<ul>
<li>SVN(the only way to make a patch was to give someone write access to the repo
)</li>
<li>Not using pull/merge requests</li>
<li>Each department has its own set of tools</li>
</ul>
<img style="width:100%" src="/images/closed-doors.png" />
</div>
<div class='col-md-6'>
<p>Open doors:</p>
<ul>
<li>Open repository, documentation &amp; issue tracker</li>
<li>Chat in shared channels</li>
<li>Open source parts of your code</li>
</ul>
<img style="width:100%" src="/images/open-doors.png" />
</div>
</div>
<h3>Howto</h3>
<ul>
<li>Embrace principle of “Written-first online conversations”. Lots of companies might still rely on face-to-face conversations, but that doesn't allow people to contribute.</li>
<li>Use <a href="https://en.wikipedia.org/wiki/Collaborative_real-time_editor" target="_blank">real-time editing tool</a> like Google Docs for meetings. Everyone can add to agenda, everyone can add to notes, everyone is on the same page, everyone can see what was discussed, immediately see follow-up items.</li>
<li>Prevent "Not Invented Here" syndrome
 by practicing Innersourcing: make it possible for the rest of the organization to contribute.</li>
<li>If you can make something public, make it public!</li>
</ul>
<h3>Challenges</h3>
<p>
People should be able to argue with solutions, but more people and opinions in the issue tracker means consensus is harder and no longer a goal.
</p>
<p>
There are two characteristics of a good conversation: <strong>directness and kindness</strong>. Argue with solution, not a person. On the other side: you are not your code.
</p>
<p>
Person that does the work or their boss decides on how open the conversation should be. If people don't get used to directness and strive for consensus, working out in the open will slow things down
.
</p>
<h3>Benefits</h3>
<ul>
<li>Increases reuse of solutions, prevents duplicate work</li>
<li>Increases shared knowledge</li>
<li>Ability to scale your organization by going remote &amp; asynchronous</li>
</ul>
<a class='read-on-link' href='/results-oriented'>
Principle #4: Result oriented conversations
</a>
---
sidebar: false
---
## Maturity model
Depending on your business and goals, you can be satisfied with any kind of
process. It is possible to use FTP for collaboration and deployment and be
satisfied with it. But obviously the more ambitious your goals are, the more
efforts you had to put into automation to reach technical excellence.
The table below should help you identify your processes maturity, possible
problems, and potential for growth:
<table class='table maturity-model-table'>
<thead>
<tr>
<td>
<strong>Stage</strong>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td>Gatekeeping</td>
<td>Cross-team</td>
<td>Integration</td>
<td>Starting</td>
<td>Mature</td>
</tr>
<tr>
<th>Typical time for idea to production</th>
<td>1 year</td>
<td>1 quarter</td>
<td>1 month</td>
<td>1 week</td>
<td>1 day</td>
</tr>
<tr>
<th>Description</th>
<td>
Functional groups are operating independently, Gatekeepers need to
sign off for any stage
</td>
<td>Conversations happens across teams, SCRUM &amp; Agile</td>
<td>Teams consist of all relevant people, DevOps</td>
<td>Complete flow from idea to production</td>
<td>Teams prioritize and measure speed</td>
</tr>
<tr>
<th>Tools</th>
<td>SVN, Jira</td>
<td>Pull&nbsp;Requests(GitHub) or Merge&nbsp;Requests(GitLab)</td>
<td>CI/CD/Pipelines: Jenkins/GitLab</td>
<td>Chat/Chatops/IDE</td>
<td>Dashboard/Integrated set of tools</td>
</tr>
<tr>
<th>Structure</th>
<td></td>
<td></td>
<td>Not measuring from idea yet</td>
<td></td>
<td>
Feedback comes from the systems instead of people. Removal of most
meetings
</td>
</tr>
<!-- todo
<tr>
<th>Problems</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Responsibilities</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<th>Failure modes</th>
<td>
Many projects are canceled before ever reaching production, Lots of
time pinging gatekeepers to sign off, many swim-lanes.
</td>
<td>Sprint is holy but what is made is not what is envisioned</td>
<td>
Development is fast when it actually starts, long wait before items
get scheduled
</td>
<td></td>
<td></td>
</tr>
<!-- todo
<tr>
<th>What materials are needed to progress to the next stage</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<th>Organizations in this stage</th>
<td></td>
<td></td>
<td><a href="https://about.gitlab.com">GitLab Inc.</a></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
---
layout: page
body_class: index
---
<section id='maturity-model'>
<h2>Maturity model</h2>
<p>Depending on your business and goals, you can be satisfied with any kind of process. It is possible to use FTP for collaboration and deployment and be satisfied with it. But obviously the more ambitious your goals are, the more efforts you had to put into automation to reach technical excellence.</p>
<p>The table below should help you identify your processes maturity, possible problems, and potential for growth:</p>
<table class='table maturity-model-table'>
<thead>
<tr>
<td>
<strong>Stage</strong>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td>Gatekeeping</td>
<td>Cross-team</td>
<td>Integration</td>
<td>Starting</td>
<td>Mature</td>
</tr>
<tr>
<th>Typical time for idea to production</th>
<td>1 year</td>
<td>1 quarter</td>
<td>1 month</td>
<td>1 week</td>
<td>1 day</td>
</tr>
<tr>
<th>Description</th>
<td>Functional groups are operating independently, Gatekeepers need to sign off for any stage</td>
<td>Conversations happens across teams, SCRUM & Agile</td>
<td>Teams consist of all relevant people, DevOps</td>
<td>Complete flow from idea to production</td>
<td>Teams prioritize and measure speed</td>
</tr>
<tr>
<th>Tools</th>
<td>SVN, Jira</td>
<td>Pull&nbsp;Requests(GitHub) or Merge&nbsp;Requests(GitLab)</td>
<td>CI/CD/Pipelines: Jenkins/GitLab</td>
<td>Chat/Chatops/IDE</td>
<td>Dashboard/Integrated set of tools</td>
</tr>
<tr>
<th>Structure</th>
<td></td>
<td></td>
<td>Not measuring from idea yet</td>
<td></td>
<td>Feedback comes from the systems instead of people. Removal of most meetings</td>
</tr>
<!-- todo
<tr>
<th>Problems</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Responsibilities</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<th>Failure modes</th>
<td>Many projects are cancelled before ever reaching production, Lots of time pinging gatekeepers to sign off, many swimlanes.</td>
<td>Sprint is holy but what is made is not what is envisioned</td>
<td>Development is fast when it actually starts, long wait before items get scheduled</td>
<td></td>
<td></td>
</tr>
<!-- todo
<tr>
<th>What materials are needed to progress to the next stage</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
-->
<tr>
<th>Organizations in this stage</th>
<td></td>
<td></td>
<td><a href="https://about.gitlab.com">GitLab Inc.</a></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</section>
---
---
## Principle 4: Result oriented conversations
Stop measuring abstract things like story points or irrelevant things like
hours. Instead pro-actively look for ways to connect your work to business
metrics.
<img style="width:100%" src="/images/R0.png"/>
### Howto
- Instead of hours(in Waterfall) or story points(in Scrum) measuring, start
measuring whole conversation cycle time(from idea to production)
- Move towards measuring impact on your business metrics: think of ARR, SALs,
MQLs, page views, NPS, ARPU, etc.
- Results should become the most important in performance evaluations.
- If you're Remote Only company, you can't compete on hours, so you are
naturally forced to focus on another metric.
*[ARR]: Annual run rate
*[SALs]: Sales accepted lead
*[MQLs]: Marketing qualified lead
*[NPS]: Net promoter score
*[ARPU]: Average revenue per user
Basically, you get what you measure. The more you measure results, the more
results you get.
<img style="width:100%" src="/images/R1.png" />
[Maturity Model](/maturity-model)
---
layout: page
body_class: results-oriented results-oriented_index
---
<h2>Principle 4: Result oriented conversations</h2>
<p class='hero'>Stop measuring abstract things like story points or irrelevant things like hours. Instead proactively look for ways to connect your work to business metrics.</p>
<div class='pictures'>
<img style="width:100%" src="/images/R0.png" />
</div>
<h3>Howto</h3>
<ul>
<li>Instead of hours(in Waterfall) or story points(in Scrum) measuring, start measuring whole conversation cycle time(from idea to production)</li>
<li>Move towards measuring impact on your business metrics: think of <abbr title="Annual run rate">AAR</abbr>, <abbr title="Sales accepted lead">SALs</abbr>, <abbr title="Marketing qualified lead">MQLs</abbr>, page views, <abbr title="Net promoter score">NPS</abbr>, <abbr title="Average revenue per user">ARPU</abbr>, etc.</li>
<li>Results should become the most important in performance evaluations.</li>
<li>If you're Remote Only company, you can't compete on hours, so you are naturally forced to focus on another metric.</li>
</ul>
<p>Basically, you get what you measure. The more you measure results, the more results you get.</p>
<div class='pictures'>
<img style="width:100%" src="/images/R1.png" />
</div>
<a class='read-on-link' href='/maturity-model'>
Maturity Model
</a>
---
layout: page
body_class: shorten-cycle shorten-cycle_index
---
<h2>Principle 1: Shorten the conversation cycle</h2>
<p class='hero'>
Start measuring conversation cycle duration from the first discussion of a feature in chat to actual release in production. <br/>
If you can measure the length of separate stages - that is even better.
</p>
## Principle 1: Shorten the conversation cycle
Start measuring conversation cycle duration from the first discussion of a
feature in chat to actual release in production.
If you can measure the length of separate stages - that is even better.
<div class='row'>
<div class='col-md-6 col-xs-7'>
<div class='col-md-6 col-xs-12'>
<img style="width:100%" src="/images/shorten1.png" />
</div>
<div class='col-md-6 col-xs-7'>
<div class='col-md-6 col-xs-12'>
<img style="width:100%" src="/images/shorten2.png" />
</div>
</div>
<p>Use these measurements to reduce cycle time. It is a natural thing to do when you have numbers before the eyes.</p>
<h3>Start working on Minimum Viable Changes</h3>
<p>
The first thing to consider is to start working on smaller pieces of functionality. Instead of minimum viable products or minimum viable features, start thinking in terms of Minimum Viable Changes.
</p>
Use these measurements to reduce cycle time. It is a natural thing to do when
you have numbers before the eyes.
### Start working on Minimum Viable Changes
The first thing to consider is to start working on smaller pieces of
functionality. Instead of minimum viable products or minimum viable features,
start thinking in terms of Minimum Viable Changes.
<div class='row'>
<div class='col-md-2 col-xs-1'>
&nbsp;
</div>
<div class='col-md-8 col-xs-8'>
<img style="width:100%" src="/images/mvc.png" />
<img style="width:100%" src="/images/mvc.png"/>
</div>
<div class='col-md-2 col-xs-1'>
&nbsp;
</div>
</div>
<h3>
Benefits of shipping smaller
</h3>
### Benefits of shipping smaller
<div class='row'>
<div class='col-md-6 col-xs-6'>
for business:
Loading
Loading
@@ -57,10 +64,13 @@ body_class: shorten-cycle shorten-cycle_index
</ul>
</div>
</div>
<h3>Include Gatekeepers into conversation</h3>
<p>
Think about Gatekeepers who had to approve something before you can ship it: Security review, Operations department, UX check, Translation department, QA testing.
</p>
### Include Gatekeepers into conversation
Think about Gatekeepers who had to approve something before you can ship it:
Security review, Operations department, UX check, Translation department, QA
testing.
<div class='row'>
<div class='col-md-3 col-xs-1'>
&nbsp;
Loading
Loading
@@ -72,16 +82,17 @@ body_class: shorten-cycle shorten-cycle_index
&nbsp;
</div>
</div>
<p>
We often exclude them from the equation, assuming there’s nothing we can do about it. But we usually can. Give early access to your code to security department, involve the UX team throughout the cycle, automate testing and operations, etc.
</p>
<h3>List of changes to think about</h3>
<ul>
<li>Deploy infrequently → Deploy frequently (if it hurts, do it more often)</li>
<li>Multiple changes → Single changes (able to link problems to changes quickly)</li>
<li>Deploy in weekend → Deploy on peak times (prioritize finding problems quickly)</li>
<li>Human integration testing → Automated integration testing (test everything)</li>
</ul>
<a class='read-on-link' href='/thread-conversations'>
Principle #2: Thread the conversations through all stages
</a>
We often exclude them from the equation, assuming there’s nothing we can do
about it. But we usually can. Give early access to your code to security
department, involve the UX team throughout the cycle, automate testing and
operations, etc.
### List of changes to think about
- Deploy infrequently → Deploy frequently (if it hurts, do it more often)
- Multiple changes → Single changes (able to link problems to changes quickly)
- Deploy in weekend → Deploy on peak times (prioritize finding problems quickly)
- Human integration testing → Automated integration testing (test everything)
[Principle #2: Thread the conversations through all stages](/thread-conversations)
---
---
## Principle 2: Thread the conversations through all stages
Instead of having multiple non-connected stage-related conversations have one
going through all stages so that people who join later during the work could
find the roots and restore the full picture.
<div>
<div class='col-md-1'></div>
<div class='col-md-5'>
<img style="width:100%" src="/images/thread21.png" />
<h4 class='center'>
Before
</h4>
</div>
<div class='col-md-1'></div>
<div class='col-md-5'>
<img style="width:100%" src="/images/thread22.png" />
<h4 class='center'>
After
</h4>
</div>
</div>
### Link everything
Make sure ideas are linked to issues, issues to MR's, MR's to deployments,
deployments to monitoring.
Traceability is a best practice is many quality frameworks. Ideally, you
should be able to go from a change in a graph to the idea in chat.
In the ideal world you'd be using the same tool for all the stages, so you'll
get it for free.
In reality, you might have a zoo of tools, where each tool is used only at one
stage. In this case, it would make sense to put additional efforts to make it
possible.
The reason for that is that it is the only way to measure the cycle time (and
therefore, shorten it) and have result oriented conversations.
[Principle #3: Invite everyone to the conversation](/invite-everyone)
---
layout: page
body_class: thread-conversations thread-conversations_index
---
<h2>Principle 2: Thread the conversations through all stages</h2>
<p class='hero'>Instead of having multiple non-connected stage-related conversations have one going through all stages so that people who join later during the work could find the roots and restore the full picture.</p>
<div class='row pictures'>
<div class='col-md-1'></div>
<div class='col-md-5'>
<img style="width:100%" src="/images/thread21.png" />
<h4 class='center'>
Before
</h4>
</div>
<div class='col-md-1'></div>
<div class='col-md-5'>
<img style="width:100%" src="/images/thread22.png" />
<h4 class='center'>
After
</h4>
</div>
</div>
<h3>Link everything</h3>
<p>
Make sure ideas are linked to issues, issues to MR's, MR's to deployments, deployments to monitoring.<br/>
</p>
<p>
Traceability is a best practice is many quality frameworks. Ideally, you should be able to go from a change in a graph to the idea in chat.
</p>
<p>
In the ideal world you'd be using the same tool for all the stages, so you'll get it for free.
</p>
<p>
In reality, you might have a zoo of tools, where each tool is used only at one stage. In this case, it would make sense to put additional efforts to make it possible.<br/><br/>
The reason for that is that it is the only way to measure the cycle time (and therefore, shorten it) and have result oriented conversations.
</p>
<a class='read-on-link' href='/invite-everyone'>
Principle #3: Invite everyone to the conversation
</a>
<style>
.center {
text-align: center
}
</style>
why.md 0 → 100644
---
---
# Why Conversational Development?
Software development consists of conversations around what can be improved,
how to implement it, did it work and bring the expected value.
Experience has show us that these conversations can be summarized into four
principles to simplify the software development life cycle.
### [1. Shorten the conversation cycle](/shorten-cycle)
Start working on smaller pieces of functionality. Instead of minimum viable
products or minimum viable features, start thinking in terms of Minimum
Viable Changes to bring value to your customers and measure your cycle time as
soon as possible so you can iterate and improve.
[Read more about shortening the conversation cycle](/shorten-cycle).
### [2. Thread the conversation through all stages](/thread-conversations)
It is important to thread the conversation through the entire software
development process either by linking various tools or using a centralized
solution. A linked conversation with clearly defined stage transitions will
allow your team to measure the entire cycle time for the minimum viable change
as well as the time spent in each stage e.g design, development, testing etc.
[Read more about threading the conversation through all stages](/thread-conversations).
### [3. Invite everyone to the conversation](/invite-everyone)
Instead of locking conversation on per-stage, per team, or per-specialty
principle, leave the doors as open as possible to increase the reuse of
solutions, prevent duplicate work, increase knowledge sharing and scale your
organization.
[Read more about inviting everyone to the conversation](/thread-conversations).
### [4.Result oriented conversation](/results-oriented)
Stop measuring abstract things like story points or irrelevant things like
hours. Instead pro-actively look for ways to connect your work to business
metrics and measure the time it takes to ship changes from an idea to production.
[Read more about creating a result orientated culture](/results-oriented).
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment