March 30, 2017
Eric Vaillancourt
Responsive web design is the concept of developing a landing page with a multi-device-friendly approach. The goal of a responsive landing page design is that the layout of your pages changes according to the visitor’s viewing screen resolution.
Responsive Landing Page Design
Think small… and big.
One of the main reasons why we now speak about responsive web design is because it creates a better experience for those viewing your web pages on mobile devices. However, responsive design is not only for small devices. Oftentimes, designers make the mistake of thinking only about the way a web page displays on small screens.
Responsive web design has advantages for every screen size, including very large displays. Even if mobile visitors make up the largest art of the internet traffic, most of them will use different devices during a single day. You should write down all of your content first, categorize and prioritize it and start designing with the mobile-first approach.
Save really important parts for the mobile version and as you increase to a larger viewport, you start adding more and more elements, so large screens look as good as small ones.
The smallest screen size that you can imagine creating your first mock-up is 320px wide. But major framework like Bootstrap will have breakpoint at 480px, 768px, 992px and 1200px.
These are popular breakpoints, but remember that there are more than 24 000 Android distinct devices on the market and every day new ones are added with different screen sizes, so think small, think big, but be flexible.
Embrace simplicity
The goal of the exercise is not to fit the desktop version of your landing page into a mobile screen. For example, if your goal is to get people to register for one of your events, get them easily to that point.
Designer John Maeda proposes the concept of “thoughtful reduction” in his book “The Laws of Simplicity”: “When in doubt, just remove. But be careful of what you remove.” Focus only on the content or features that are essential and eliminate anything that is irrelevant.
Prioritize your content depending on the viewpoint. A top hero banner will probably become useless in a mobile view, but if you consider inserting critical information into it, it may be perfect for larger screens, but is it still readable when displayed on small mobile screens?
Font size
Typography is an integral part of web design, and you have to carefully consider the fonts you choose, the same way you take care of the rest of your design. Light or thin fonts that look beautiful on large screens can become unreadable on small device screens.
In that case, it’s important to adjust your font style for every popular screen size breakpoint – at least to maintain the overall feel you want whether you scale it larger or smaller.
The default font size should be at least 16px, and the line-height should be higher for wider columns and can be smaller for mobile device screens. These actions will help you get to your goal by increasing the chances that your audience reads the entire message.
The contrast of the text is also important. For example, black text on a white background can be too contrasted and can be hard on the eyes (especially if you have a lot of text with a small font). On the flip side, light-gray text on a white background is not better.
Image quality
Page sizes have grown over the years, but it’s still important to keep a balance between rich visual effects and overall performance. Do as you did with the quantity of information to present to your visitors.
Do all the images need to be there? If the answer is no, remove them – especially when designing your page for a mobile device, as there’s a good chance that your page will load using a data plan instead of wifi.
Using the right image format is also important. If you use a huge faded background image, does that image need to be in the best quality setting? Perhaps a jpeg at 60% of compression would also do the job.
You must test and find the best ratio between image quality and file size. Is the carousel you have planned to show on your page is necessary? All the images and scripts that come with that kind of add-on will increase the size of your page.
Forms
The user experience is considerably different between filling out a form using a mouse and a keyboard on a page they view from a desktop computer than on a mobile device where you need to use your fingers on a touch screen. When it comes to user input, be generous with the size of buttons and clickable areas.
Do not hesitate to make the buttons and the fields larger. People with larger hands will love you so much more. Lastly, ask your colleagues, friends, even family to help test your landing page – there is no such thing as too much testing! Use their comments to adjust your design.
Once that part is done, it’s very important that you check the display and function of your web pages on every platform and browser. You don’t want to lose a visitor because of a rendering issue!
Does your organization need help achieving ROI from Marketo? Learn how the Marketo experts at MERGE can help. Contact us today!
