HTML5: Create a Top-notch OnePager with Slides

OnePagers, websites that consist of one page divided into two or more segments, are still growing in popularity. If I remember correctly, Apple were the ones who started that craze with their presentation of one of the later iPhones a few years ago. The classic OnePager consists of a full-screen presentation of a topic, garnered with large imagery, a subtle header with navigation, an as subtle footer, and navigation dots alongside the respective presentation screens. The new design framework Slides by Designmodo is your perfect helper to get such a website up and running in no time.

Image by Peggy und Marco Lachmann-Anke from Pixabay

Slides: Get it on Black Friday and Save Massively

Before I show a little of what Slides can do for you, let me not forget to mention that now is the time to buy it. In honor of Black Friday Designmodo gives 60 percent rebate on all of its products. For Slides, this means that instead of 249 dollars, you will only have to pay 99 dollars which is a steal for what Slides offers you. Keep the coupon code BLACK close to your heart and only enter it during the checkout process in the Designmodo Shop.

Slides: Powerpoint on Steroids?

When I first encountered Slides, I couldn’t help but feel reminded of Powerpoint, the Microsoft dinosaur with a backlog of millions of boring meetings being worsened by the so-called presentations that Powerpoint was able to deliver in the hands of unskilled presenters. No worries. Slides is not as boring as Powerpoint, although there are some similarities. Slides provides you with slide-based presentations just like Powerpoint does. One slide represents one full screen. This is quite different to the regular website with its above and below the fold division and its potentially endless scroll area. In Slides, you create content page-based, one page at a time. And this is perfect for many things, first and foremost - Apple taught us - for products, such as smartphones or apps or washing machines or whatever product or service you’d like to promote. The linear trail of storytelling is an ideal way of getting the message over without too much clutter and too many design decisions needed. Mobile devices are supported without additional effort as the sites scale entirely responsively to the required resolution. While creating an attractive OnePager using your HTML5/CSS3 skills is certainly doable, creating one using Slides is much easier. It is not even only much easier; it is a true no-brainer. If you want to create a sophisticated OnePager for a product or service that you want to sell, take Slides. Period.

Slides: The Concept is Self-explanatory

The Slides Framework is an extensive toolkit to quickly create a website. It consists of around 70 individual slides, lots of headers and footers, some animations and almost a dozen templates to start with. Slides is a download that’s nearly 800 megabytes heavy, but can also be tailored down to size at the online Template Generator over at Designmodo. This spares you the full download and only delivers the chosen parts and parameters of the full framework. The process using the Template Generator is as simple as can be. First you choose any combination of slides that you see fit for your intended project. Then you select a layout for the top and the footer bars. Set the animation you like to apply to your presentation and click “Download”. This will send a tailored version of the framework to your local desktop. Before you actually download the subset of the larger framework, you can tweak a few presets from the Generator and see the results per click on “Preview.” Once the tailored Slides framework has reached your local hard drive in the form of a zip archive, decompress it. You’ll find a folder structure that contains all the needed assets and scripts as well as the index.html in the root of the folder structure. This idex.html is what you will want to edit using your favorite HTML editor. We have just recently put together collections of the best editors for Windows as well as Mac OSX. The HTML is perfectly understandable as long as you are no complete noob. The source code is structured by comments that relate to the names and numbers used throughout the framework. So, should you have chosen the slide with the number 18 to be included in your index.html, you just search for that slide in the source code and apply the intended changes. Other assets such as images stick to the same naming convention. An image used for slide 18 will be named img–18.jpg. I think you get the concept?! Replacing the assets has to be done manually, however, but is as easy as replacing a file with a different file of the same name. This is the appropriate way as it sticks to the conventions and keeps the concept intact. You can, of course, opt to change the names and even paths to the assets from the index.html, should you feel like it. Done right, you will not find any differences in functionality. Take your time to watch the following video. It walks you through the whole process in about eight minutes. That's all you need to know: https://www.youtube.com/watch?v=x6rC97PuK5o The best practice example of what Slides can do is its own product page. If you haven’t checked out Slides already, you should definitely do that now while their 60% discount is still at hand. I bet you will not regret it. Before I forget it. You can create as many projects with Slides as you like. The license is not limited in any way. The only thing you are not allowed to do is distribute the framework as such. But that’s simple rules of fair play anyway. Besides all of the necessary assets to bring your OnePager to life, Designmodo also provides the underlying design files in their editable formats. All of the slides are delivered not only in HTML, but also in Photoshop and Sketch format. To cut a long story short: Slides is a fantastic tool to easily create attractive OnePagers with HTML5, CSS3, and JavaScript. If you are fast to decide, you can spare 150 dollars and catch the product for a mere 99 dollars. I already did.