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:
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:
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.”
Have questions? We’d be happy to chat with you. Reach out to us to discuss your needs and how MCI can help.
Want to discover more about our services? Learn More