( read )

How Important is a Responsive Landing Page?


Answer: very. But don't panic — responsive landing pages don't require purchasing expensive templates or extra tools. Instead, creating a responsive landing page is all about your mindset from the start. Are you designing responsively? Or do you still think of your website as a fixed canvas?


Why It's Important

Responsive landing pages are necessary for those who check email on phonesWeb traffic is increasingly coming from phones these days. There've been numerous studies and statistics, but what it boils down to is this: a significant portion of visitors to your site will be on phones or tablets, not a desktop computer.

This may be especially true of a landing page. How are you driving traffic to this particular offer? Did you send out an email?

Did you know that most email gets opened on phones?

It's a logical progression. If you send out an email with a link to your landing page, and the majority of people who receive that email do so on a phone, it follows that the majority of traffic driven to the page will also be on phones. A landing page that doesn't work on mobile just won't cut it anymore.

A successful landing page has a clear message and an easy-to-use call to action. What's clear and simple on a desktop screen will not always be clear and simple on a phone's screen; what's clear and simple on a phone may not get attention on a desktop screen. Make sure the most common landing page mistakes don't happen just because you designed for a different screen size.

One Responsive Landing Page vs. Multiple Pages

At this point, it may be tempting to just build two landing pages — one for desktop, one for mobile. Problem solved, right? Well... no. Not really. Some big companies can do this, maintaining two full, carefully maintained and updated websites. But do you really want to make all your changes twice?

In fact, even companies that maintain two different sites still must make both those sites responsive. After all, I may be looking at a 10" screen on my laptop, while you have a 40" you regularly stream movies on. And while some tablets may approach the size of a laptop, other phones will have only a 5" screen.


Designing Your Landing Page Responsively

So, you must design your landing page to be responsive. How do you get started? First, think about the order you put things on the page.

Pay attention to the flow - not just where an element lands on your screen, but why it's there. This will help you plan for how that flow will respond to different screen sizes. How will elements stack on a small screen? What will happen if the screen is wider than the design? Will it be centered or lopsided? If it spreads out, will it still look good?

If you plan responsively from the beginning, the next step will be easy, but just as important. You must include responsive styling.

Let's look at some basic responsive CSS.

One way to minimize work for yourself is to use percentages. If you size an element of your design by percentage, rather than a set number of pixels, it will never break the page by being bigger than the screen it's viewed on. But be aware of the potential for something to become too big, or too small.

That's where max-width and min-width come in. Either set a static size, but with max-width:100%, shrinking the element if and only if it wouldn't fit on the page, or set a percentage width — let's say, 40% — but with min-width:150px to keep it from shrinking too far.

Percentage styling is a start — but now it's time for the star of the show. You cannot have truly responsive styling without the @media rule. This allows you to adjust your styling to better work within varying screen sizes.

One very simple example is the image near the top of this blog. If you're reading this on a desktop or laptop, the picture is probably floated to the right; however, if you shrink your browser to as skinny a window as possible, you'll see what people reading this on their phone see: a centered image beneath the subheader.

Take into account the ability to swap elements between display:none and display:block at different widths, and you'll find you have quite a lot of control — just don't get too heavy handed with display:none. You don't want to frustrate visitors who are used to the functionality of the desktop site by blocking access on the mobile version. No matter what size the device, you need to deliver a "full" site. The very existence of the idea that the "full" site is different from "mobile" stems from companies and designers who were not prepared for this concept.

Remember that your website, and especially your landing pages, should always be user-friendly. You're now ready to design responsively.