Landing pages

Creating landing pages: responsive or adaptive web design

Email marketing stands or falls with a well-conceived landing page to lead your contacts to. Today, just about every mobile device is connected. Which means that users arriving from an email link don’t always see a landing page that’s optimised for them. Luckily, there’s one simple question that can help you build the landing page that fits their needs: “Do I need a responsive or an adaptive website?”

Optimising your landing page for multiple screen sizes and devices, while making use of their respective unique features has become quite a hassle. Since mobile devices started booming, they simply cannot be ignored when developing a landing page. But with the immense diversity, from smartwatches to media screens in cars, there are some important — dare we say… crucial — choices to be made.

Responsive vs adaptive

Responsive web design provides a scaled website based on the screen size of the device the user is using. Responsive design makes use of fluid grids. The lay-out of the landing page will automatically resize based on the screen that is used. That makes the user experience of the website, the same on any screen size. In short, responsive web design is a mobile-first approach.

Adaptive web design on the other hand is used to make optimal use of the features of a certain device. When you’re surfing the web using a smartphone, tablet, television, VR-glasses, … adaptive design will show you the lay-out created specifically for the device you’re using. The user experience of the website may be quite different on every device. That’s why we call adaptive web design a mobile-separate approach.

Both responsive and adaptive have their pros and cons based on creation, maintenance and price. These 5 tips will help you make the right choice.

1. Select the right web design for creating the landing

Choosing the right web design will depend strongly on the analysis or study you do before building the landing page. Which target group will be frequenting the website? What devices do they use? A target group that only makes use of mobile can be interesting because the landing only needs one lay-out. But a target group that makes use of both desktop and mobile devices will need a different approach. The landing page will need to be compatible with multiple screen sizes.

Three important questions to remember in a landing study:

  • What’s my target audience?
  • Which devices does my target audience use?
  • Which features do I want on my landing page?

2. Create a landing page using the right code

Creating your own landing page is easier than it sounds. To start off, you need a hosting platform that will put your website on the worldwide web (e.g. one.com). Secondly, you will actually build the site, using the analysis/study results and the wireframes/mockups you built upon them. Be sure to keep the user experience in mind at all times. How will users navigate on the landing page? How will they use the landing page? And will that be the way we intended them to? Make sure that your UX is fine-tuned, before you further develop the website. Because, once it has been built, make adaptations to the UX design wil be time-consuming and expensive.

Now it’s time to choose between a content management framework (Drupal, WordPress) or a web development tool (Dreamweaver, Brackets). Whichever you choose, you’ll always need some form of coding…

Responsive – Get your CSS boots on

A responsive website can be entirely created using HTML and CSS. HTML is used as the standard markup language and CSS is the style sheet that describes the presentation of the HTML code. In the CSS style sheet, you can simply add breakpoints, between which the website can resize itself. Adding some breakpoints can make the website scale correctly for multiple screen sizes. This technique is called a Media Query.

@media only screen and (max-width: 600px) {
 body {
  background-color: lightblue;
 }
}

Adaptive – JavaScript genius

Writing an adaptive design landing/website can be a bit trickier. Where the responsive website can be coded using only HTML and CSS, the adaptive approach is totally different. When making a website adaptive, you need unobtrusive JavaScript to separate the unique device features from one another. This approach ensures that you don’t get smartphone site features while surfing on a desktop or smartwatch. The lay-out that best fits the device is called upon by a HTTP GET request. The ‘request’ asks for the version of the website that displays best on the device that is used.

GET /index.html

3. Maintaining a good landing page takes effort

Maintaining the code of a responsive website is quite simple. Because the landing page scales with the screen size, the only thing you need to look at is that the website scales correctly. User experience and content remain the same, there are only a few small changes because of the screen size. Adaptive however, may need a team to update the website according to the growing number of devices the website is viewed on. Taking into account the features of the devices, the differences in content and lay-out (for instance, a smartwatch screen can show less content, while VR glasses can show a whole room).

4. SEO and Google ranking challenges

When using adaptive design, there are multiple domains (web addresses) that link to the landing/site: m.domain.com for mobile, t.domain.com for tablets and maybe even vr.domain.com for virtual reality in the future. This means that Google will read duplicate content through all the different sites. Resulting in a bad Google ranking due to the so called ‘duplicates’.

Cross-linking for SEO purposes can damage user experience when the users get the wrong landing page for their device. For example, when a smartphone user sees the smartwatch version of your website when clicking on a link.

5. Price can be the breaking point

A website made on a low budget will probably use responsive design, because it is cheaper to build (no hard-coding). Moreover, the time needed to maintain the website is limited. Adaptive design is more expensive, because of the amount of support needed once it’s online: more screens and devices to maintain and update regularly. The main advantage of adaptive over responsive pages is that adverts can be optimised for the device of the user. While with responsive, adverts depend on scaling.

Conclusion

Overall, responsive web design is interesting for small and medium sized companies with a limited budget. Existing landing pages can be easily converted with the use of Media Queries. Adaptive web design, on the other hand, is useful for companies that want to run their existing complex websites on other kinds of devices. Most companies nowadays (e.g. Apple) use responsive design as the standard for web design.Do the Email Marketing ROI-scan

Posted on
Mar 6, 2020