Modern Web Engineerinng

[munem15-4873]

Showing or Hiding Content


It is possible to shrink things proportionally and rearrange elements as
necessary to make everything fit (reasonably well) as a screen gets smaller.
It's great that that's possible, but making every piece of content from a
large screen available on a smaller screen or mobile device isn't always the
best answer. We have best practices for mobile environments: simpler
navigation, more focused content, lists or rows instead of multiple columns.

Responsive Web design shouldn't be just about how to create a flexible
layout on a wide range of platforms and screen sizes. It should also be
about the user being able to pick and choose content. Fortunately, CSS has
been allowing us to show and hide content with ease for years!

1 display: none;

Either declare display: none for the HTML block element that needs to
be hidden in a specific style sheet or detect the browser width and do it
through JavaScript. In addition to hiding content on smaller screens, we can
also hide content in our default style sheet (for bigger screens) that should
be available only in mobile versions or on smaller devices. For example, as
we hide major pieces of content, we could replace them with navigation to
that content, or with a different navigation structure altogether.

Note that we haven't used visibility: hidden here; this just hides the
content (although it is still there), whereas the display property gets rid
of it altogether. For smaller devices, there is no need to keep the mark-up
on the page — it just takes up resources and might even cause unnecessary
scrolling or break the layout.

Here is our mark-up:
1 <p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a
href="#">Right Sidebar Content</a></p>
2
3 <div id="content">
4 <h2>Main Content</h2>
5 </div>
6
7 <div id="sidebar-left">
8 <h2>A Left Sidebar</h2>
9
10 </div>
11
12 <div id="sidebar-right">
13 <h2>A Right Sidebar</h2>
14 </div>

In our default style sheet below, we have hidden the links to the sidebar
content. Because our screen is large enough, we can display this content on
page load.

Here is the style.css (default) content:
1 #content{
2 width: 54%;
3 float: left;
4 margin-right: 3%;
5 }
6
7 #sidebar-left{
8 width: 20%;
9 float: left;
10 margin-right: 3%;
11 }
12
13 #sidebar-right{
14 width: 20%;
15 float: left;
16 }
17 .sidebar-nav{display: none;}

Now, we hide the two sidebars (below) and show the links to these pieces
of content. As an alternative, the links could call to JavaScript to just cancel
out the display: none when clicked, and the sidebars could be
realigned in the CSS to float below the content (or in another reasonable
way).


Here is the mobile.css (simpler) content:
1 #content{
2 width: 100%;
3 }
4
5 #sidebar-left{
6 display: none;
7 }
8
9 #sidebar-right{
10 display: none;
11 }
12 .sidebar-nav{display: inline;}

With the ability to easily show and hide content, rearrange layout elements
and automatically resize images, form elements and more, a design can be
transformed to fit a huge variety of screen sizes and device types. As the
screen gets smaller, rearrange elements to fit mobile guidelines; for
example, use a script or alternate style sheet to increase white space or to
replace image navigation sources on mobile devices for better usability
(icons would be more beneficial on smaller screens).

Source: Smashing eBook􁴹Modern Web Design and Development