Improve your website usability by supporting different and new laptop form factors
A REFRESH ON RESPONSIVE DESIGN
As a web developer, you’re probably familiar with responsive design. To put it simply, it’s a way to ensure your web page works well and looks good on all devices.
Here is an simple example of how a web page adapts to the device it’s running on :
Usually, you achieve this result by using a combination of CSS and HTML. You leverage the <meta> viewport element, create some type of responsive grid layout, and take advantage of @media rules, commonly known as media queries.
CONSIDERING RELATIVELY NEW FORM FACTORS IN THE MARKET
Let’s talk about convertible and detachable laptops, also known as 2-in-1 laptops.
2-in-1 laptops have existed for a while (remember the Compaq TC1000 with Windows* XP Tablet Edition?) but they’ve been shipping in volumes for only a few years. Microsoft* paved the way in 2013 with the original Surface*, and Asus was popular with their Transformer Series running on Android*. Examples of other notable detachables are: HP Spectre*, Lenovo Miix*, and Acer Aspire Switch*. Even though manufacturers do not necessarily reveal the number of devices they sell, we can safely assume that several million of them are currently in use. Therefore, it’s important to make sure they are supported in the best way possible.
Let’s look at their features:
Convertibles are laptops with the ability to rotate, fold, or slide the keyboard behind the display. On most devices, the hinge is located at the junction of the display and keyboard. They have a touch screen display.
2-in-1 detachables are devices with detachable keyboards. In most cases, the keyboard part provides few, if any, additional features (most often a touchpad, as in the HP Spectre x2). However, the keyboards of some detachables provide additional features similar to those of a docking station such as additional I/O-ports and supplementary batteries. For instance, the Surface Book can leverage the discrete GPU in the base upon the keyboard’s connection.
When connected to the keyboard, the display of the detachable can either be free-standing on the hinge or require external support, often in the form of a kickstand. They also have a touch screen display.
REQUIREMENTS OF 2-IN-1 FOR THE WEB; THINK USABILITY
With the popularity of these devices it’s critical that your website, even rendered within a classic desktop browser, works with touch — as well as with a mouse. Some users prefer to scroll or scrub videos with their fingers while others prefer to use the mouse to do the same. You should expect users to interact with the website with any of these methods.
However you would provide a better experience if you tailored to each type of input: mouse/touchpad and touch. The reason is that each type of input excels at certain tasks- touch is convenient and easy to use, and mouse or touchpad has greater precision.
The other consideration is that at any time the user can detach or convert the device so the interaction becomes touch only. Therefore the website needs to be able to work well with touch only.
Here is an example of a website that works great with a mouse, but acts oddly when you convert/detach the laptop:
You can see that on this website, the menu was designed with the assumption that the mouse/touchpad would always be present, therefore its interactions are hover-based. However, you can see that after detaching the keyboard, the touch interaction doesn’t work well; subcategories can’t be accessed. Functionally speaking, it’s broken.
With these considerations, how do you start fully supporting these devices?
MEDIA QUERIES FOR INTERACTIONS
The CSS has four media queries to help developers know about what we call input precision or quality. These media queries help identify the capabilities of the input devices available and are called interaction media queries.
pointer: This media feature is used to query the accuracy of the pointing device for the primary pointing device (as defined by the browser). It can be coarse, fine, or none. Fine means typically, the user will interact with the page using a mouse or a touchpad. Coarse means typically, the user will interact with the page using touch.
hover: This media feature is used to know if the device is able to support hover using the primary pointer. It can be hover or none.
any-pointer and any-hover are identical to the pointer and hover media features, but they correspond to the union of capabilities of all the pointing devices available to the user. Typically on a convertible/detachable when used in laptop mode, any-pointer:coarse is true just like any-pointer:fine (the user can use both the touch screen and the touchpad/mouse). In this case hover:hover is true (using the mouse). When detached or flipped into tablet mode, only any-pointer:coarse is true and any-hover:none is true.
For more details check out the W3C specification here.
SHIPPING STATUS OF THE INTERACTION MEDIA QUERIES
LIMITATIONS WITH THE MEDIA QUERIES FOR INTERACTIONS
Media queries in general are usually static but some of them are dynamic, such as the one related to the viewport size. For example, the width media query changes its value if the browser window is resized. However, as of today, media queries related to input and interactions are not dynamic, meaning that after the initial page loads, the media query values remain the the same even if you detach/flip the 2-in-1 laptop. So, if you load a page when using the device in laptop mode and then detach/flip into tablet mode, the pointer media query value will keep matching on fine and coarse, which is wrong as there is no mouse available. It would match to coarse only if you had loaded the page initially in tablet mode.
Thus, as a developer, you’re not able to detect that the primary input has changed when the user detaches or flips the laptop.
CHANGES DONE IN CHROME
In 2017, Intel decided to address the problem highlighted above to support dynamic interaction media queries for all relevant OSes.
Changes for Windows*: https://codereview.chromium.org/2737123003, https://codereview.chromium.org/2690323002 and https://chromium-review.googlesource.com/c/566567/3
Changes for Linux*/Chrome OS*: https://codereview.chromium.org/2827803002 and https://chromium-review.googlesource.com/c/508212/
Changes for Android: https://chromium-review.googlesource.com/c/553457/
When all these changes are incorporated in stable releases (most likely Chrome 62), the interaction media queries will react dynamically to input changes. So let’s see how you can leverage this in your code.
HOW TO USE THE NEW DYNAMIC INTERACTION MEDIA QUERIES
One very basic thing you can do whenever the 2-in-1 is detached or flipped is to increase the size of the buttons to ease interacting with them when using touch.
Let’s look at a very simple code sample :
And it looks like this:
You can see that the button is getting bigger when detaching the keyboard.
DYNAMIC INTERACTION MEDIA QUERIES ON OTHER BROWSER VENDORS
As far as I know, Apple* Safari is not really concerned with dynamic interaction media queries. There is no touchscreen Mac* hardware at the moment and iOS* doesn’t support mouse inputs. Microsoft Edge* does support the interaction media queries but they are not dynamic (you need to reload the page after detaching/flipping). I’ve opened a bug/feature request for that. You can comment that you would like this feature so Microsoft can prioritize it accordingly.
Mozilla* Firefox* doesn’t yet support interaction media queries. There is a bug opened here, feel free to comment saying you’d like the feature (and dynamic as well!).
FINAL THOUGHTS AND FUTURE WORK
With the new form factors coming on the market, it’s more important than ever to create a fully responsive website in a single code base. By designing for various interaction methods available to the users, you can provide a great experience on your website or webapp.
One thing that this specification doesn’t cover and please let me know if you would like it to be covered is the possibility to know the presence or absence of a keyboard. I’m curious to hear the use cases so feel free to reach me on twitter.
About the author
Alexis Menard is a software engineer at Intel. His main focus is on the ever evolving Web Platform, the immersive web, which includes work on W3C standards as well as Blink/Chromium.
