CHAPTER 5 Robust, Responsible, Responsive Web Design
Markup
In terms of our markup alone — the foundation for everything else on our
site — there’s a great deal of room for optimization. How do we deliver rich
experiences while ensuring that the most important part of a page, the
content itself, is available as soon as possible?
The simplest (though far from ideal) way to handle showing and hiding
this content would be to use display: none; and reveal the drop-down
menus when the navigation links are hovered over. But we can safely
assume that a user looking to find the scores of yesterday’s Bruins game
wouldn’t be hovering over each link in the navigation on each page of the
site. Most of this content would never be visible to the user, who would
still be left requesting all this markup — including the images, which
would still be loaded in the vast majority of browsers, even if they were
never displayed — on every single page of the site.
While we didn’t want to include all that content just in case, we also
didn’t want to limit the user at certain breakpoints, or make assumptions
based on the users’ context. The drop-downs are a useful addition to the
site, and worth keeping.On hovering over the links in the primary navigation, BostonGlobe.com shows a
drop-down containing featured articles, the most recent articles in that section, and
related subsections.