As we’ve mentioned in our previous article ‘User Experience & Encouraging Return Visitation…‘, we talked about how important it is to grab visitor’s attention and encourage them to explore your website. So with that thought, the top part of the landing page of your website is probably the most important real estate on a website. It is the area where your visitors will form their first impression. This is important no matter the device viewing your website. In this article, we’ll explore working with the fold, with regards to responsive web design.
What is Responsive Web Design?
As written in our article ‘Responsive Santa Fe Web Design‘, responsive website design is a web design approach that considers widths of devices accessing a particular website and adjusts structure and content accordingly. Typically there are three widths taken into consideration. A person viewing a website with a desktop and laptop will have a more traditional view of the website, where a person viewing the same website on a mobile device will view the same website in a different format that provides an optimal viewing experience.
What is “The Fold”?
The fold is the area of the website a visitor first sees on their screen when landing on a website- typically the home page or landing page. In this area, you really want your website to grab the attention of a visitor, and briefly tell them what your website is about. It’s important that this area is perceived as uncluttered and to the point. If you can get your visitors to either take action or scroll for more information, the website has done its job at this point.
The Fold Within the Responsive Setting
So now that you know what responsive web design is and what “the fold” is, let’s talk about the likely combined scenario by illustrating what our website shows and motives behind the three media device phases:
Fold in Desktop Phase
In this phase, we have our Santa Fe web design company website with an attention grabbing headline, followed by a brief description of the main service our company is known for. Then we give a call-to-action to contact our company for a consultation and proposal. This is the most important info we’d like to give to our visitors.
Besides this area, we have an image that illustrates the type of work our company does. This image then links to an example page of the project completed for this client. This image is important, but not as important as the attention grabbing headline, and the info/call-to-action that follows. So we can get rid of this image in smaller media devices because of its redundancy.
Fold in iPad Pro Phase
In the iPad Pro phase we have more real estate to deal with, but the issue was with the iPad in its vertical phase. As you can see the screen when set vertically shows a lot more of the website but is narrower in width. So the top area with the attention grabbing heading and call-to-action needs to be visible in order to effectively do its job.
In this phase the image that illustrates the type of work our company does is changed to an image that effectively shows the same information but is changed to a more vertical composition. This gives the important information – header with a call-to-action – more effective real estate, and thus still does its desired job.
Fold in iPhone Phase
The fold in iPhone Phase is the most extreme scenario with the least amount of real estate. So for this scenario, all redundancies are going to have to be given up, effectively giving the most important information the most room. It’s not an ideal situation where we can show a supporting image, but will still hopefully lead people to the ultimate goal of contacting our Santa Fe web design company for consultation and proposal.
Hopefully, this article leaves you with a better understanding of how the fold within a responsive web design scenario works. Please feel free to comment below if you have any questions. And of course, contact Jacobito if you’d like a free preliminary consultation and free proposal.