Responsive Design is More Than Viewport Width

TLDR

You should always test your projects for responsiveness to text size increases to at least a minimum of 200%, and at a variety of different viewport widths.

Responsiveness to Changes in Width is Common

One of the first checks I do when evaluating a web site is to make my browser very wide and then gradually narrow it and watch what happens. With a good responsive design the elements on the page should reposition themselves as the viewport narrows. Horizontal scroll bars should be non-existent, or kept to a minimum when absolutely necessary. I shouldn't lose a lot of content as the screen narrows (I'm assuming if it was important enough to see on a wide screen then it should probably be seen on a narrow screen too). In general, the transition from wide to narrow (and back again) should be smooth and allow me to access all of the information and functionality provided on the page regardless of the width of my viewport.

In general we are getting very good at being responsive to changes in viewport width. This idea has been around for at least a decade and any web site that has been in active development over the past few years is most likely implementing a responsive layout. But there is more to responsiveness than horizontal real estate.

Responsiveness to Changes in Text Size is Overlooked

The next check I do is to manually crank up the text size on the page. To be honest, I am shocked at just how bad we are at being responsive to changes in text size. For those who may not understand exactly what it means to manually increase the text size on the page, the easiest way to explain is to see it in action. The best browser to use for this is Firefox (it's the primary reason I still use FF as my main browser). Go to the Edit->Preferences menu, scroll down to Zoom and activate 'Zoom text only'. If you are on Windows or Linux then hold down the Ctrl key and scroll your middle mouse button to increase the text size. If you can't get it working for your computer refer to the Mozilla Font Size and Zoom doc.

The important takeaway here is that you are only increasing the text size on the page, everything else stays the same size. So why do we need to be concerned about responsiveness to text size changes? Well, it is actually an accessibility requirement. Refer to WCAG 2.1: 1.4.4 Resize text - Level AA and Understanding Success Criterion 1.4.4: Resize text. In general, the user should be able to increase the text size to at least a minimum of 200% without any loss of content or functionality. 

I encourage you to perform this check on every page you visit and see how it holds up. I think you will be both surprised and disappointed at just how many fail this accessibility requirement. I'll get you started. I don't want to pick on personal web sites so I'll stick to the big ones. Bring up Microsoft's website and crank it up to 200%. It's not terrible (in fact it is better than most) but you will see some clipping of content in the row of icon links just below the large gray box at the top of the page. Is this atrocious? No, but it is technically a failure of Success Criterion 1.4.4. Another fun one is to hover over the nav links at the top (or Tab through them). They seem to be telling me that they don't want to be clicked. Again, not terrible (actually a little funny) but totally avoidable.

Now go check all the projects you have worked on (or are currently working on) and see how they respond to the 200% challenge. Make this test a routine part of everything you do. More to come on methods for successfully meeting this accessibility requirement.