Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

One Landing Page to Rule Them All: Migrating Your Entire Site to a Single Page

DZone's Guide to

One Landing Page to Rule Them All: Migrating Your Entire Site to a Single Page

In this article, I explain how you can use the simplest tools and instruments like CSS media queries and the fullPage.js plugin to create a single page website that looks nicely and performs seamlessly.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Everyone who has a site knows what a landing page is. But have your ever considered transforming your website to make it look and act like a big landing page that not only informs but also promotes your products and services to potential customers? If you haven’t, you’d better try as any good landing page — even the simplest one — allows you to showcase your products and services in no time. Landing pages attract customers and help them feel more comfortable consuming useful content; they're not just about ads and promotional stuff.

This is exactly why we decided to design and develop a landing-page-like website for our digital marketing agency. Our goal was to create an intuitive website with simple structure, appealing design, and easy-to-get-access-to content (i.e. all the info is located on a single page; users don’t have to click any tabs or wait while other pages are loading).

In this article, I'll explain how we built a website like that. I am going to review what instruments and tools we used, as well as provide several code samples to help you see a big picture. Let’s dig in!

Design & Development

To begin, our team selected a visually appealing design and all the necessary instruments. Then, we came up with a simple but efficient solution for the stack of technologies we were going to use in the development process. To work with the site’s styles, we decided to rely on custom development as the design was unique and we couldn’t find frameworks that met our standards.

We also chose the jQuery library as it allowed us to manipulate elements and create animations easily. And yet, our main instrument was a fullPage.js plugin. That plugin was efficient to implement scrolling features for specific fullview sections of the website.

Styles

As I mentioned above, the team arrived at the decision that creating custom styles would be the best solution (as every content section needs to be responsive and adapt to different screen sizes neatly).

Using CSS media queries, it is possible to proportionally resize all the site’s sections (including tabs, fonts, and other elements) to fit them neatly on pages with different screen resolutions. Thanks to these queries, the content looks great on small and big screens.

Here are several examples that demonstrate how we used and implemented CSS media queries on our website.

Image 1

Image 1

Image 2

Image 2

And here’s the code sample there:

.animation-box-2 {
position: absolute;
bottom: 0px;
left: 0px;
height: 24%;
font-size: 36px;
}
@media (max-width: 1200px)
.animation-box-2 {
font-size: 22px;
}
@media (max-width: 1400px)
.animation-box-2 {
font-size: 26px;
}
@media (max-width: 1500px)
.animation-box-2 {
font-size: 30px;
}

Basically, the code above shows how font size changes on different screens. CSS media queries are convenient, especially when you need to display all the content but it doesn’t fit into sections and tabs on specific screen resolutions.

fullPage.js Plugin

Now, I’d like to talk about the main concept behind our design & development process. Basically, the gist of this project comes down to a jQuery plugin called fullPage.js.

As I mentioned, our main goal was to develop an intuitive, simple, and easily navigable website that featured useful and informative content. We wanted to make our landing-page site creative and appealing to a wider target audience as well. Having looked through multiple solutions, we came across fullPage.js plugin. Here’s why we chose it as our stack technology:

  • Easy to install and set up

  • Sports multiple features and is flexible

  • Has cross-browser support on board

  • Comes with many docs and guidelines

  • Regularly updated

  • Responsive

The code below demonstrates how easy to use this plugin is:

$(document).ready(function() {

$('.js-allscreens').fullpage(); // Request a plugin by class .js-allscreens

});

The plugin is a piece of cake. However, there is one thing you should remember: all scrolled sections in your HTML have to be wrapped up by a single <div> with a specific class. Like this:

<div class="js-allscreens">
<div class="js-screen">
</div>
<div class="js-screen" data-title="Why choose us">
Some Content
</div>
<div class="js-screen" data-title="Design">
Some Content
</div>
<div class="js-screen" data-title="Development">
Some Content
</div>
<div class="js-screen" data-title="Digital Marketing">
Some Content
</div>
<div class="js-screen" data-title="Integrated">
Some Content
</div>
<div class="js-screen" data-title="eCommerce">
Some Content
</div>
<div class="js-screen" data-title="Niche">
Some Content
</div>
<div class="js-screen" data-title="Additional">
Some Content
</div>
<div class="js-screen" data-title="Who We Are">
Some Content
</div>
</div>

The plugin has many settings. Here are the most important ones:

  1. anchors — IDs that specify URLs to the site’s sections (array-based) and allow users to quickly access these sections

  2. menu — a menu ID used to specify URLs for this or that section of the website

  3. scrollbar — if you pass TRUE value to this setting, a vertical scrollbar will be displayed

  4. scrollOverflow — used to display a scrollbar within a given section if content doesn’t fit into the margins

  5. navigation — if you pass TRUE value to this setting, a navigation bar will be displayed, section by section

  6. navigationTooltips — an array of pop-up comments; for every section of the navigation bar

  7. slidesNavigation — if you pass TRUE value to this setting, a slider’s section will display a slider navigation bar

  8. navigationPosition — a position that enables navigation between different sections (supported values: left and right)

  9. slidesNavPosition — a position that enables navigation between different sliders (supported values: bottom and top)

  10. loopTop — if you pass TRUE value to this setting, you will continuously navigate between different sections. If you begin to scroll from the first slider upwards, it will move to the last one.

  11. loopBottom — it performs similarly to the previous one (only it moves downwards)

  12. loopHorizontal — Like loopTop and loopBottom, but works for sliders.

Final Thoughts

In this article, I explain how you can use the simplest tools and instruments like CSS media queries and the fullPage.js plugin to create a single page website that looks nicely and performs seamlessly. Of course, you can use other methods to solve that problem as well.

If you have any questions or suggestions about the article, please leave your comments in the section below, or write directly to Clever-Solution.com.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
landing page design ,jquery ,css ,web dev

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}