What does ‘frozen fold’ mean?
The term ‘frozen fold’ refers to a web design where the hero image or video on a page fills the fold completely regardless of the dimensions of the screen.
If you want a more in-depth understanding of this topic, check out the FAQ section below:
Question #1: What are the benefits of implementing a frozen fold?
The biggest benefit of implementing frozen fold is that it ensures that your web page looks good regardless of the device a visitor might use to access it. You will not have to worry about parts of your hero image or video getting cut off or not reaching the edges of the screen. It will always just automatically fill the fold regardless of the screen dimensions.
Question #2: Why is implementing a frozen fold important?
Implementing a frozen fold is important because people no longer just use a single device to access web content these days. Aside from desktop computers and laptops, they now also use tablets and smartphones to browse the internet.
Question #3: What is the difference between a frozen fold and responsive website design?
The main difference between a frozen fold and responsive web design is that the former is just one component of the latter. If you want to create a truly seamless web browsing experience for your visitors across all devices, you will need to make your entire website responsive instead of just your hero image or video.
Question #4: How can I make my website more responsive?
There are six basic things you can do to make your website more responsive:
- Set strategic responsive breakpoints
- Use fluid grid
- Take touchscreens into account
- Use responsive videos and images
- Use responsive typography
- Do your testing on real devices
Let us take a look at each one in more detail:
First, responsive breakpoints, as the name suggests, are points in your web design where the content will ‘break apart’ to better adapt to the screen size of the device used to access it. This ensures that no element of your website—from the images and videos all the way to the typography—will get cut or appear on top of each other.
Second, fluid grid allows you to set the size and position of the elements on your website to automatically change based on the size of the screen. This is a much better approach than positioning and sizing everything based on pixels.
Third, virtually all modern smart devices that people use to browse the internet have touchscreens. This means that some design implementations, such as hovering over a menu to expand it, will not work, so you will need to make the necessary adjustments.
Fourth, responsive videos and images are, as you may have probably guessed, videos and images that automatically adjust their size and position relative to the size of the screen. The frozen fold is a great example of this, but your videos and images do not always have to fill the screen. You can configure them to appear however you want.
Fifth, just like your videos and images, you also need to make sure that all the text content on your website is able to adapt to the size of the screen. It should get smaller and automatically break apart into smaller chunks on smartphones and increase in size and fill out the screen on desktops.
Finally, you need to test your designs on real devices so you can see how they actually look. Fortunately, there are tools you can use to emulate a wide variety of devices, so you do not have to actually buy physical ones.
The good news is that you do not have to build responsive websites from scratch. There are a lot of free and paid themes you can use as a starting point and just customise based on your specific preferences, goals, and requirements.
Here’s another useful article from BrowserStack to know more about creating a responsive website.