On hiding things

Cover photo by Carlos Arthur M.R on Unsplash.

Introduction

With the advent of Responsive web design in 2010 by Ethan Marcotte the way Web developers designed Website changed in a substantial way. Before this, Web developers designed for desktop and if a mobile version is required they had to design it and it will be accessible via a dedicated m.websitename.com.

The concept behind responsive web design is to make your website layout adapt to different screen sizes using the following:

• Fluid grids
• Flexible images
• Media queries

The idea was welcomed and it's still widely used today but, Web developers soon realize that they cannot show everything that will be available on desktop version of the site on a mobile device due to the screen width constraint, therefore, something's have to be hidden on mobile screen and shown only on larger screens.

The question now is: What should be hidden on mobile devices and shown only on larger displays?

The answer: It varies and depends on the project. But we'll agree that there are common Web page elements that should and should not be hidden on mobile displays.

Before we discuss what we can hide and what we should not let's discuss the categories of information found on a Web page.

Information on a Web page

Web page on a normal day can contain lots of information that cannot be cramped on a mobile screen, hence, the necessity to hide things on mobile display arises. This information can fall into two categories:

• Primary information
• Supplementary information

Primary information

Primary information are the core contents of a Website. The usability of the website reduces to almost nothing if they are missing.

Examples of primary information

• Main content of a Website
• Heading section
• Footer section
• Any key component that allows a user to perform some action

Supplementary information

This information is not essential to the usage of the Website and if it's missing from the Web page the user can still find the Web page functional and it will not degrade their user experience.

Supplementary information is a good candidate for what you can hide on a mobile display.

Example of supplementary information

• Sidebars (with no essential information like blog archive)
• Long navigation menus
• Hero content

When you hide supplementary information you should provide a way for user to show them if they chose to see it.

With that out of the way, let's talk about what we should not hide and what we can hide.

What we should not hide

A good candidate of what we should never hide on a Web page is the primary information. Like we listed earlier they are essential to your web page and their absence whether on mobile or desktop will decrease the usability of your website.

Recently, I was using a site that allowed researchers to upload their papers to the site but there was one major problem. The button to start the entire upload process was visible only on desktop version of the site but it was hidden on mobile displays. Please don't do this.

The reason is simple: not everyone has constant access to a desktop device.

When you deny a user a critical piece of information on your website because of their screen resolution you are locking them out and indirectly telling them to go elsewhere.

If they keep using your website because they have no choice their user experience will reduce greatly. When the chance arises for them to leave, they will, and they will probably not look back.

What we can hide

The list of what can be hidden on a website is endless. Any information that is really secondary in nature can be hidden. An example is a long navigational menu at the top of the page.

This menu can be collapsed into an expandable menu on mobile display using various techniques which includes:

• Hamburger menu
• Block display navigation
• The priority+ pattern by Michael Scharnagl

Let's take The New York Times website as an example. On the desktop version of their site the navigation is long and shown in full and some additional information are hidden and accessible via a hamburger menu in the top left corner of the website.

Take note of the navigation items. Now, on mobile displays, the full navigation is added to the additional navigational items in the hamburger menu.

Another example is a hero section. This section of the Web page contains additional information about the Web page. This information can be hidden on mobile and shown on desktop, provided a mobile user can still get the most of the Web page without it.

There is only one downside to The New York Times hamburger menu; it's not accessible without JavaScript.

These are just examples. What is considered as secondary information depends on the project.

Conclusion

Before you hide anything on your Web page, you should ask yourself the following questions:

• If I hide this, will the user be comfortable using the site?
• If I hide this, am I locking out some categories of users?

If the answer is yes, you should consider not hiding it and if you have absolutely no choice but to hide it, then please provide a visible and usable mechanism that will allow the user to show it on-demand but that does not mean you should hide a blog post and expect the user to click a button to read, they might look elsewhere.