Viewport Optimization Basics

Viewport vs. Above the Fold

Viewport is often confused with above the fold, which is understandable. The area known as above the fold is a viewport. It’s the viewport a user sees when they open a landing page. However, viewport also refers to the other portions of the web page that are seen by scrolling. 

Think of viewport as a dimension. It’s the physical confines of what’s visible on a webpage. Above the fold just happens to be the first portion that fits in the viewing panel. 

Viewport Desktop vs. Mobile

The viewport has become increasingly more important over the years as screen sizes have changed. In the early days of the Internet, all designers had to consider was the viewport of desktop computers. It was a fixed size and the designs were static. Now there are desktops, laptops, tablets and smartphones with screen sizes that range from the iPhone SE 4” screen to the 49” ultrawide monitors from Asus, LG, Dell and Samsung. 

Desktop monitors are going to have a much larger viewport compared to mobile phones. Obviously, this is an issue for designers that are building web pages based on desktops only. The fixed pages for desktop screens are simply too big to fit the viewport of mobile devices.

Since more people use mobile devices to access the Internet, designers and developers are hyperaware they need to create webpages that fit the viewports of small screens. However, businesses still primarily use desktop computers, which is an important factor for B2B companies. It’s a balancing act that has been largely solved by responsive design. 

Viewport’s Role in Design

Viewport is used in a variety of aspects from a design perspective. In all instances, viewport represents what is visible on the screen for a given device. It’s commonly referenced in terms of how the layout looks on a particular screen. The goal is for the design to render properly on any screen regardless of size.

Responsive design, web page designs that are able to automatically adjust to the screen size being viewed, is now the standard. It relies heavily on viewport optimization. 

Designers have to consider how the text and images fit within the viewport and how it affects functionality before finalizing a layout. HTML and CSS have tags and tools that allow designers to set the viewport height, width, scale and resolution. The HTML meta tag can also be used to verify compatibility with a certain device’s screen size.

For example, in HTML5 the tag <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> does two things:

• The portion “width=device-width” makes it so that the web page design is as wide as the screen width of whatever device or computer is being used. 
• “initial-scale=1.0” establishes the zoom level when the page is initially loaded and helps ensure the page renders correctly in landscape mode.

Content size also has to be adjusted so that it fits on the screen without scrolling horizontally and is readable without having to zoom. The content should fit within the viewport width for the best user experience.

 Mobile page without the viewport set next to the same page with the viewport set. Source: developers.google.com

Page elements can be adjusted for the viewport by using CSS media queries. Relative width values allow page elements like images to fit within a viewport no matter the size. It’s also best to avoid using larger absolute positioning values and absolute width values in CSS. This could cause elements to load wider than the viewport. The better option for viewports is to use relative width values such as %, em, ex, ch, rem, vw, vh, vmax and vmin.

The Viewport in Conversion Rate Optimization

Web page design is going to affect conversion rate, which means the viewport plays a role in converting users. Having a mobile-friendly website with pages that fit device screens is also essential for search engine optimization (SEO) that brings users to the site. Using viewport tags is even mentioned in Google’s responsive web design tutorial. 

Without responsive design that can adjust for different size viewports, a page will simply be shrunk to fit the screen of a smartphone. It’s far from an ideal user experience and could cause mobile users to bounce. 

Analyzing How the Viewport Affects Your Conversion Rate

You’ll want to test the site responsiveness across a number of platforms to make sure the viewport is optimized and looks good the moment a page loads. You can use your own devices or tools like Chrome Inspect to check out how the viewport looks on devices with different screen sizes.

A data analytics platform like Mixpanel is another valuable resource. You can use the analytics tools to find out what type of devices and browsers are most popular among your userbase. Use the information to prioritize viewport optimization. 

Next, check the bounce rate for various devices. A bounce rate that’s considerably higher than the norm could indicate viewport issues for a particular device or screen size.

You may also want to survey existing customers about their experience. Ask if the page appeared to load correctly, whether they had any difficulty viewing the content and if elements were appropriately sized for various tasks. The design team can use the responses to improve the user experience and in turn conversions. 

Takeaway: Creating a persuasive call to action, great content and beautiful design aren’t enough for conversion rate optimization if the viewport isn’t configured correctly. Viewport optimization should be a top priority and may require a few iterations to get right.