Merge branch 'blogpost/crosswords' of github.com:ftlabs/ftlabs.github.io into blogpost/crosswords

Author: Lily2point0

_posts/2018-03-23-crosswords.html

@@ -35,22 +35,13 @@ <h3>A cross-platform feature: the list view</h3>
 {% include youtube_video.html src="https://www.youtube.com/embed/PUAPFeQTvBc" %}
 </p>
 <p>Another iteration, and we moved the interaction away from the grid. Shifting the focus to the clue list by giving the possibility to answer within it has several advantages. On mobile devices, where the grid cells would be too small to select, the list is more practical to navigate and interact with. Even in the grid view, the answer should be given in the input above, which highlights the selected clue. Whichever type input you choose, grid or list, on mobile or desktop, partial answers in both areas will be updated in real time.</p>
-<p>From an accessibility standpoint, it is also a benefit.</p>
-
-<figure>
-	<img src="/assets/uploads/2018/03/mobile_views.png" alt="" />
-	<figcaption>The grid and list views on mobile</figcaption>
-</figure>
 
-<h4>Demoing the List View</h4>
+<h4>Demoing the Mobile View</h4>
 <p>
-{% include youtube_video.html src="https://www.youtube.com/embed/k5kC9v6bSAQ" %}
+{% include youtube_video.html src="https://www.youtube.com/embed/_9GDGBFlvG4" %}
 </p>
 
-<h4>Demoing the Grid View - single clue</h4>
-<p>
-{% include youtube_video.html src="https://www.youtube.com/embed/gyzVizHKo9A" %}
-</p>
+<p>From an accessibility standpoint, it is also a benefit.</p>
 
 <h3>Accessibility</h3>
 <p>This new feature ensures the accessibility of the crossword, where keyboard navigation and interaction focus on the list itself without the need for the grid (but still there as an alternative visual display).</p>
@@ -72,6 +63,12 @@ <h3>Print</h3>
 <h2>Technical challenges</h2>
 <h3>The complexity of new features</h3>
 <p>One of the biggest challenges with the new feature was to synchronise inputs across the grid and the list view, and figuring out which was each letter's rightful place. This was achieved by relying heavily on <code>data-</code> attributes.</p>
+
+<figure>
+	<img src="/assets/uploads/2018/03/mobile_views.png" alt="" />
+	<figcaption>The grid and list views on mobile</figcaption>
+</figure>
+
 <p>Similarly, with our focus on accessibility, ensuring content that was to be read out by screen readers was up-to-date proved arduous.</p>
 
 <h3>Working across devices</h3>