diff --git a/_includes/youtube.html b/_includes/youtube.html new file mode 100644 index 0000000000..6cd254828a --- /dev/null +++ b/_includes/youtube.html @@ -0,0 +1,34 @@ +{% comment %} + +{% endcomment %} +{% assign embedId = src | replace: "https://www.youtube.com/embed/", "" %} +{% assign embedUrl = "https://www.youtube-nocookie.com/embed/" | append: embedId | append: "?autoplay=1&mute=1&rel=0" %} + diff --git a/understanding/21/img/carousel-fail.mp4 b/understanding/21/img/carousel-fail.mp4 deleted file mode 100644 index 534e9591e1..0000000000 Binary files a/understanding/21/img/carousel-fail.mp4 and /dev/null differ diff --git a/understanding/21/img/code-diff.gif b/understanding/21/img/code-diff.gif deleted file mode 100644 index c83b14e794..0000000000 Binary files a/understanding/21/img/code-diff.gif and /dev/null differ diff --git a/understanding/21/img/code-view-columns.mp4 b/understanding/21/img/code-view-columns.mp4 deleted file mode 100644 index eb33c5d31f..0000000000 Binary files a/understanding/21/img/code-view-columns.mp4 and /dev/null differ diff --git a/understanding/21/img/reflow-container-resize.mp4 b/understanding/21/img/reflow-container-resize.mp4 deleted file mode 100644 index bea5c80821..0000000000 Binary files a/understanding/21/img/reflow-container-resize.mp4 and /dev/null differ diff --git a/understanding/21/img/reflow-text-resize.mp4 b/understanding/21/img/reflow-text-resize.mp4 deleted file mode 100644 index e5d6eeb7e6..0000000000 Binary files a/understanding/21/img/reflow-text-resize.mp4 and /dev/null differ diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 9562d1be9f..a382e933f2 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -44,9 +44,7 @@

Basic text reflow

Users who need to enlarge (zoom) text to read it benefit significantly when it reflows. Regardless of the size of the text, it continues to wrap within the visible viewport. A whole line of text is visible, making it easier for the eye to track from the end of one line to the start of the next. Users only need to scroll in the direction of reading to read additional lines of text.

- + {% include "youtube.html", width: "1038", height: "584", src: "https://www.youtube.com/embed/5oHRHMpezyc", title: "A quotation beginning 'It was a dark and stormy night...' becomes larger on the screen, but before a word at the end of a line grows too long to fit in the width of the container, it wraps to the next line." %}

As text is resized, the words wrap so that the text lines do not exceed the viewport. (This quick demo to 200% is not intended to illustrate a test for conformance.)

@@ -55,10 +53,7 @@

Basic text reflow

This criterion requires non-excepted sections of content that are written in horizontal languages reflow when narrowed to a width equivalent to 320 CSS pixels. Similarly, sections of content that are written in vertical languages (which are not as commonly used on the web and so will be used much less frequently in examples) need to be able to reflow when rendered at a height equivalent to 256 CSS pixels.

- - + {% include "youtube.html", width: "1038", height: "584", src: "https://www.youtube.com/embed/N6kIiLHAH3k", title: "As a window displaying the quotation 'It was a dark and stormy night...' becomes thinner, a word at the end of a line wraps to the next line before it exceeds the width of the window." %}

As the container for the text is reduced in width, the words wrap so that the text lines do not exceed the container width. (This quick demo is not intended to illustrate a test for conformance.)

@@ -119,9 +114,7 @@

Carousels and carousel-like widgets

- + {% include "youtube.html", width: "597", height: "584", src: "https://www.youtube.com/embed/67fh_MUydhw", title: "Scrolling through a carousel reveals that its second panel is unable to fully fit within the viewport, requiring horizontal scrolling to read all of its content." %}

Fail: In this modified version of the previous carousel, the second panel's content does not fit within the 320 CSS pixel viewport.

@@ -133,11 +126,7 @@

Two column presentation of editing changes

Being able to review differences in code, or text, side-by-side can be an instance where a scrolling two-column layout can benefit users.

- - - + {% include "youtube.html", width: "659", height: "584", src: "https://www.youtube.com/embed/OpeC70mJBaM", title: "Code editor, showing a diff between line 23 in the original code and 22 in the modified code. The differences between the two are presented as two columns, with the original on the left and the modified on the right. Each column can be completely scrolled into view horizontally within a 320 pixel wide viewport. Text within each column can then be read by scrolling only in the vertical direction." %}

Pass: An interface to review code/document changes provides a two-column comparison between the original and modified content. Each column fits within a 320 CSS pixel wide container and a horizontal scrollbar can be used to position each column into the visible viewport.

@@ -330,7 +319,7 @@

Examples

  • One column view in responsive design -

    +

    {% include "youtube.html", width: "978", height: "584", src: "https://www.youtube.com/embed/fWRL6NtHvZQ", title: "Animation of zooming in on a responsive site. The content reflows to fit the screen." %}

    Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu. As zooming continues, most navigation options are eventually behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.