On hiding things
Tags: essay, webdev
Published: 2020-07-06 16:55:20

---
title: On hiding things
published: true
description: An essay on what you should hide and what you should not hide on a website as a Web developer.
tags: essay, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0zad90mns5sp8b71kcy4.jpg
---

> Cover photo by [Carlos Arthur M.R](https://unsplash.com/@carlosarthurmr) on [Unsplash](https://unsplash.com/).

##__Introduction__

With the advent of [Responsive web design](https://alistapart.com/article/responsive-web-design/) in 2010 by [Ethan Marcotte](https://ethanmarcotte.com/) 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](https://css-tricks.com/the-priority-navigation-pattern/) by [Michael Scharnagl](https://justmarkup.com/)

Let's take [The New York Times website](https://www.nytimes.com/) 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.

![Home page of The New York Times](https://dev-to-uploads.s3.amazonaws.com/i/0gwksbfvmrjreg3mgvfd.png)<figcaption>Home page of The New York Times. Screenshot taken on July 6, 2020</figcaption>

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

![Home page of The New York Times](https://dev-to-uploads.s3.amazonaws.com/i/mkapnew96jowlfqx5vup.png)<figcaption>Mobile version of the Home page of The New York Times. Screenshot taken on July 6, 2020</figcaption>

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.