Digital agencies' best practices about modern web development, digital and inbound marketing.
How To Create a Full Screen Website On HubSpot COS/CMS Using fullpage.js
Since late 2015, we have witnessed more and more sites using a full-page photograph as a background in full screen websites. For those seeking more flexibility, are also using slideshows and videos for their full-screen image backgrounds.
What Is A Full Screen Website?
Full screen websites fill up the entire browser regardless of it being on the desktop or the mobile. Web designers now have the ability to be bold while using full screen images on website background, thanks to the growing screen sizes and resolutions and internet speeds reaching new levels.
Most of the full screen websites are precise about the dimension, using JS or CSS to ensure that the visible part is exactly the size of the browser window. On achieving this, you could place the elements at the extremes with CSS positioning even if the window is resized.
A full-screen website provides an exceptional user experience. The content to image ratio becomes very less and marketers need to ensure that the content is crisp that provides more information by saying less. These kind of websites are more visual in nature, which gives the marketers a challenge to opt for a design that is one step ahead of the conventional design.
Is The Full Screen Website Really That Popular?
Well, you won’t be skeptical once you look at the big brands that have adopted full screen for their online presence.
Here are the links to some of the websites:
- http://www.yourprimer.com/ (A Google venture)
Is It Possible To Create A Similar Experience On The Hubspot COS/CMS Platform?
Creating a full screen website has been a challenge for HubSpotters as it is evident from the number of posts where users admit that implementing a full screen website is complicated. Here are some forum posts:
One more on Stack overflow:
The Root Cause Of Full Screen Website Challenge On HubSpot COS/CMS
Since it is based on Twitter Bootstrap framework which is template based, the HubSpot COS/CMS is a completely module based web development platform. These modules are nested with classes generated by the HubSpot COS/CMS framework. However, in order to create a full screen website, you will require a fullpage.js that requires a simple structure. This mismatch between the nested COS/CMS and simple fullpage.js causes integration issues and as a result it becomes a challenge to create a full screen website on COS/CMS.
Let’s Compare How fullpage.js Could Be Achieved With HTML & Hubspot COS/CMS?
With the coding given below for HTML and HubSpot COS/CMS platform we are looking to achieve the following webpage.
Coding On HTML
There are 3 steps for creating the above given page via HTML:
- Create HTML:
1. The HTML structure for inserting sections with sliders will be as follows:
- 2. Include fullpage js and css
- 3. Bind fullpage js with html, by adding a script element on the header of the site:
Coding On HubSpot COS/CMS
Again there are 3 steps, however being a nested framework it becomes lengthy and complicated.
- 1. HTML required:
The same HTML gets nested on HubSpot COS/CMS, as shown on below image
Next, you will need JS support to create a uniform structure and make it feasible for the fullpage.js plugin to bind.
Once you write this above code it will create the structure given below:
- 2. Include the JS and CSS of fullpage as given below:
CSS File :
Js File :
3. Now write the binding script that will initialize fullpage plugin, please see below code.
Once you have written code, you will see how UI will change, a live demo example link is included after below image
Advantages Of A Full Screen Website With fullpage.js Plugin.
The round-up of all the below given advantages boils down to one fact that a full screen website provides a win-win situation for users and developers in terms of UX and functionality respectively.
- It gives users total control over website scrolling.
- It’s documentation is logical and well-structured.
- All the modern browsers are supported.
- It is also ideal with old browsers that don’t support the CSS3.
- It is totally responsive and renders across all mobile devices.
- You get plenty of configuration options.
- You get plenty of methods.
- You get callback function.
Web development has completely evolved to a stage where marketers have become an integral part of the whole process. A full screen website is a delight for the marketers as it says more visually and is successful in creating an environment that is tailor-made for the targeted audience. If there is any doubt regarding modern functionalities on the HubSpot.
Latest posts by Dev Shah (see all)
- How to Provide Database Driven Dynamic Content on HubSpot Web Pages? - November 29, 2017
- HubSpot – Shopify Integration: An Inbound Touch for Your Shopify Store - November 9, 2017
- Are These Clear Indications That HubSpot COS Is HubSpot CMS? - October 27, 2017