HedgeBlog

Canning the “Fold” & Responsive Mania

CANNING THE FOLD

The Myth.
If you’re asking yourself what we’re referring to here, the “fold” is a term that was born with the beloved newspaper, and was used to describe the fold line at which a paper cuts off, once folded in half and displayed on a newspaper stand. This term was carried over to web design in the 1990s, and the concept of designing “above the fold” was seen as one of the great challenges of creating a successful website. In this context, the “fold” is the area where the web browser cuts off, just before the user is required to use the scrollbar. Thus, the area “above the fold” is the top section of a web design that a user can immediately see without scrolling.

canning-the-fold-and-responsive-mania

Debunking the Myth.
Until recently, it was believed that successful web design required designing above the fold; previous data suggested most users viewing a site would not be inclined to scroll below the fold line. By 2005, a majority of web users were browsing at a resolution of 1024 x 768 pixels, and so designing for this size became fairly standard practice. The fold line for this resolution was located at about 600 pixels down the page, and accordingly, the majority of important content was located above the invisible 600-pixel line.

However, with the explosion of media devices and their popularity in the last half-decade, the screen resolution mentioned above is no longer universal. Today, screen resolutions vary; they can be smaller or larger than 1024 x 768, and people are viewing web content on devices ranging from smartphones to tablets to large-screen desktops, each with their own screen size. Thanks to this explosion in variety of screen sizes, designing “above the fold” is no longer an issue for successful web design.

With the death of the fold, if they’re not browsing content on a device, most people are now using the fun little scroll rings on their computer mice. Some have even thrown the traditional mouse aside for a sleeker, more modern one, where the entire surface is used as a “swipe” area for scrolling through content.

THE “RESPONSE” TO RESPONSIVE WEB DESIGN

The Why.
If I asked you how many people browse website content on a “smart” device, what would you say? According to a study, about 45 percent of American adults own smartphones, and 66 percent of those from the ages of 18 to 29  are constantly chatting, tweeting, and surfing on devices. That’s a lot of people. To meet the demands of the technology, web design has evolved too, and brilliantly so.

The What.
It might sound fancy, but the philosophy behind responsive web design is quite simple. To define it, responsive web design is web design that reacts or “responds” to its environment. It differs from non-responsive web design in that the latter does NOT.

Let me explain further.
In a regular (nonresponsive) website, the site is designed at a certain height and width, with a specific layout of content that appears exactly the same on any screen, any device, or any platform. There is only one layout embedded into the web code, and one design, which is the one you see.

In a responsive website, the use of something called “media query” allows designers to revert to various styles within the web code based on a number of browser properties, such as width and orientation. Media query detects the settings of a browser window, and calls in different style sheets that are built into the web code, developed while the site is being designed. These styles change the appearance of the site on your desktop, your tablet, or your smartphone. Navigation bars shorten or disappear, copy is abbreviated, and images shift size and location. The point of it all is to make the content easier to navigate. Now you can walk down the street reading your newspaper article without having to scroll right and left or zoom in and out to view content. Genius.

The How.
Though responsive web design seems like magic, it doesn’t happen by wiggling our fingers and casting a spell. To create a responsive website, we must design two versions of our website: one made for a desktop computer and one created with a simplified design for a mobile device. We then create web styles based on the designs, and use media query to call in the styles depending on different instances in a web browser.

Compared to a non-responsive website, it takes more work and therefore more time to create a responsive website—one argument against this kind of design. However, the payoff for a responsive website is well worth the time and money spent on it. Not only do you avoid the need to create an entirely separate mobile site for your brand, but also it takes a fraction of the time to update a responsive website that it would take to update a regular website and its mobile counterpart.
Both the responsive and the nonresponsive parts of a website are linked, so when you update a responsive site, the content is automatically updated on both the desktop version AND the version sized for a mobile device. Responsive web design means that you don’t have separate mobile, tablet, and PC versions of your site. If you had a separate mobile site, every time you made a change you would have to update both the website and then (separately) the mobile site, using double the time and resources; responsive web design eliminates the duplication, maximizing efficiency.

What Now?
Now that you’ve read the above and are a responsive design guru, why not consider the responsive alternative to web design when planning your website. It’s easy, it’s beautiful, and it’s the next natural step into the future of the worldwide web.

0

Leave a Comment

HedgeBlog is the blog of Hedgehog, a full-service digital agency. It's our fresh take on what's new, what's now, what's next in technology, online media, and beyond. Drop by, chime in, and be inspired.

Newsletter

  • This field is for validation purposes and should be left unchanged.