Merge pull request #380 from alphagov/svg-images-tour

Use SVG images for tour

app/assets/stylesheets/components/banner.scss

@@ -131,7 +131,8 @@
 
   }
 
-  img {
+  img,
+  source {
     max-width: 100%;
     display: block;
   }

app/main/views/tour.py

@@ -4,11 +4,20 @@ from flask_login import login_required
 from app.main import main
 
 
+headings = [
+    'Trial mode',
+    'Start with templates',
+    'Add recipients',
+    'Send your messages',
+]
+
+
 @main.route("/services/<service_id>/tour/<int:page>")
 @login_required
 def tour(service_id, page):
     return render_template(
         'views/tour/{}.html'.format(page),
         current_page=page,
-        next_page=(page + 1)
+        next_page=(page + 1),
+        heading=headings[page - 1]
     )

app/templates/views/tour/1.html

@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
 
   {% call banner_wrapper(type='tour') %}
-	<h2 class="heading-large">Trial mode</h2>
+	<h2 class="heading-large">{{ heading }}</h2>
 	<p>
 		To start off with, you can only send messages to yourself.
 	</p>

app/templates/views/tour/2.html

@@ -10,16 +10,24 @@
 {% block maincolumn_content %}
 
   {% call banner_wrapper(type='tour') %}
-	<h2 class="heading-large">Start with templates</h2>
+	<h2 class="heading-large">{{ heading }}</h2>
 	<p>
 		Set up a template like this:
 	</p>
 	<p>
-		<img
+	    <picture>
+		  <source
+			  type="image/svg+xml"
+			  srcset="/static/images/tour/{{ current_page }}.svg"
+			  alt="A template for a text message with placeholders for the recipients name, document and date"
+			  width="554" height="97"
+		  >
+		  <img
 			src="/static/images/tour/{{ current_page }}.png"
 			width="554" height="97"
-			alt="A template for a text message with placeholders for the recipients name, document and date"
-		>
+			alt="A screenshot of a spreadsheet containing data about three people"
+		  >
+		</picture>
 	</p>
     <a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
       Next

app/templates/views/tour/3.html

@@ -10,16 +10,24 @@
 {% block maincolumn_content %}
 
   {% call banner_wrapper(type='tour') %}
-	<h2 class="heading-large">Add recipients</h2>
+	<h2 class="heading-large">{{ heading }}</h2>
 	<p>
 		Add recipients by uploading a .csv spreadsheet:
 	</p>
 	<p>
-		<img
+	    <picture>
+		  <source
+			  type="image/svg+xml"
+			  srcset="/static/images/tour/{{ current_page }}.svg"
+			  alt="A screenshot of a spreadsheet containing data about three people"
+			  width="554" height="118"
+		  >
+		  <img
 			src="/static/images/tour/{{ current_page }}.png"
 			width="554" height="118"
 			alt="A screenshot of a spreadsheet containing data about three people"
-		>
+		  >
+		</picture>
 	</p>
 	<p>
 		Developers, you can add data automatically using an API

app/templates/views/tour/4.html

@@ -4,25 +4,33 @@
 {% from "components/banner.html" import banner_wrapper %}
 
 {% block page_title %}
-  {{heading}} – GOV.UK Notify
+  {{ heading }} – GOV.UK Notify
 {% endblock %}
 
 {% block maincolumn_content %}
 
   {% call banner_wrapper(type='tour') %}
-	<h2 class="heading-large">Send your messages</h2>
+	<h2 class="heading-large">{{ heading }}</h2>
 	<p>
 		Notify merges your data with the template and sends the messages
 	</p>
 	<a href="{{ url_for('.service_dashboard', service_id=service_id) }}">
       Next
     </a>
-	<img
+    <picture class="banner-tour-image-flush-bottom">
+	  <source
+		  type="image/svg+xml"
+		  srcset="/static/images/tour/{{ current_page }}.svg"
+		  alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
+		  width="840" height="290"
+	  >
+	  <img
 		src="/static/images/tour/{{ current_page }}.png"
 		class="banner-tour-image-flush-bottom"
 		width="840" height="290"
 		alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
-	>
+	  >
+	</picture>
   {% endcall %}
 
 {% endblock %}