Responsive design is one of those things that if you Google how to do it, you’ll find pages upon pages of best practices and tips, many of which can often be contradictory, due to different opinions from designers over time. It’s all too easy to get bogged down in details while still struggling to define what the big-picture non-negotiables are for “takeoff.” Now you might be wondering, “Why say ‘takeoff’ instead of ‘launch’?” Before pivoting my career into digital design, I worked in aviation as a flight school manager. I learned a lot working in that industry, finding that many of the skills I picked up there apply nicely to my work in digital design — one of the most helpful being the preflight checklist.
Preflight checklists are mandatory for every pilot to go through prior to takeoff. These lists include tasks that need to be done to ensure flight safety, and pilots must always complete them in the same order, every time, to avoid missing a step. I’ve taken this with me into my digital design work, creating my own in-depth “preflight checklists” tailored to each specific project, much like each checklist in aviation differs based on what kind of aircraft you are flying.
But sometimes, you just need the basics. Over time, I’ve been able to define the five main things I need to either keep in mind or implement before a responsive landing page launches. These five steps, outlined below, are the same ones I applied to developing the landing page for RESOLVE’s Coverage at Work Campaign.
1. Your content management system matters.
Before you start designing anything, get to know your CMS — if the page you are designing has one at all. If it’s a hard-coded page, there will be no CMS, and each change will have to be handled by a developer. If it’s WordPress, you’ll have to design within the constraints of your current theme or be familiar with child themes, depending on what you’re designing. There are pros and cons to every CMS out there, so make sure you know the pain points for the one your brand has decided is the best solution for their needs.
In the case of RESOLVE’s landing page for their Coverage at Work campaign, one of the pain points I found, besides the slow mobile page speeds, is that our chosen CMS, Wix, forces you to design desktop first, when best practice is to design mobile first. So, I kept that in mind throughout the entire design process for this landing page in order to make sure the mobile responsiveness was not neglected.
2. Content is — and will always be — king.
The purpose of a webpage or landing page is to house the content that moves a brand forward. The first thing I do is ask myself, “Is this content telling the story it needs to?” If the content and copy are weak, even the most beautiful landing page or website won’t get the results you want. Content (your product/your “why”) is your brand’s engine, so make sure it’s got enough fuel.
If the content is strong, my job is then to structure the page in a way that delivers this information in a clear, logical, and compelling way. I always ask myself the following questions before designing:
- What is the best way to structure it so the user is compelled to keep scrolling down the page?
- How can I break up this content into manageable pieces so the eye can travel down the page without causing the user to get overwhelmed?
- To maintain enough whitespace, will I need to create collapsible elements to hide certain information so the page isn’t overly crowded and overwhelming to the eye?
With this in mind, I can create a couple wireframes that organize the content in the best way, and then choose the simplest solution.
3. Mobile first.
Before you touch anything on the desktop design, make sure you think about how you can present this information on mobile. That infographic might look great on a giant screen, but as soon as it resizes for mobile? Womp. No one can read it. Considering more than 50% of web users are looking at websites on their phone, that’s a problem. How many potential users will you lose if they can’t read your content on mobile? That can certainly hinder your brand growth, so don’t ignore it.
In RESOLVE’s case, we divided an infographic into pieces, recreating them in Wix so they resized and stacked for mobile.
4. Keep it simple.
It might be tempting to add interactive elements for every single component on the page, but less is more. Interactive elements should serve a purpose. Usually, they highlight, direct, confirm and, ideally, delight. But again, be wary of adding too many. A good rule of thumb is to have a maximum of three, depending on the purpose of the page, to avoid distracting the user.
With this landing page, we kept it pretty bare on the interactive side, with a slider for quotes and some loading animations for the infographic on desktop only.
5. Mind the speed limit.
Ah, Google PageSpeed — where every interactive designer’s dreams go to die. If you’re serving ads that go through to your landing page, checking your page speed is a necessary evil, even if it might break some hearts when those flashy animations must go for the sake of the page speed score. Scoring higher than 95 for desktop and around 75 on mobile is typically what you need to get your campaign approved by Google. Here are some “no-code” actions you can do to get that speed score up if your landing page is lagging:
- Run your images through TinyPNG. Compressing all images will boost your load speed, especially if you stick to using .jpg files whenever possible, which are a “lighter” image format compared to .png files. This free tool makes it easy to batch-compress.
- Manually set the cache. Using caching plugins can help speed up your page loading as well. In our case with Wix, we were limited with third-party solutions, but there is a toggle switch that allows you to manually set the cache time for the page under the “Manage Pages” settings.
- Make sure you only have one H1, H2, H3, etc. Having more than one of each heading type slows down the loading time.
- Pare down animations. Using pre-made animations can add to load time, so if you’re using a CMS such as Wix that offers built-in animation options, use them with caution. If you have several animations on your page and the page speed is not getting the score you need, try removing them one at a time and testing the page speed score. Start with the ones you’re most willing to remove, but keep in mind, you might need to remove them all if you’re still not hitting the score you need to get approved. I save this step for last, so I know I’ve done all I can to optimize a page before touching this aspect of the design.
I’ll leave you with one last aviation metaphor: If this checklist leaves you with one thing, I hope it’s the importance of having a “flight plan.” The more context you have about where the landing page will live, who it’s designed for, and the limitations and capabilities of the tools you’ve chosen to execute it, the more successful and efficient the work will be.
Responsive design does not begin with the wireframe or even the sketch — it begins with knowing the journey you want your user to take. It begins with the “why.”
Alex Huffman is a digital designer at MCI USA.
