In this video guide Nick will show you have you can create a responsive cover page using MagLofts unique drag and drop editor – TypeLoft! It’s very tempting to just use an image as your magazine cover page, but it does come with some critical downsides.

Downsides of Using Images as Cover

Images are static and don’t adapt very well to various screen sizes and orientations. It’s the same with PDF issues, as I’m sure you have seen, there is a lof ot “pinch and zoom” on smartphones. You will see this very clearly if you compare a cover image on tablets and smartphones. Usually, there will be a “gap” on the bottom and top of each page when viewed on smartphones.

This gap is caused due to the aspect ratio of tablets and phones being different. Smartphones are usually slimmer and taller than tablets. You could stretch the image on smartphones to make it fit the entire screen, but that would distort the image and look weird. The solution to having a cover fit perfectly on all screens and orientations is creating a responsive cover page.

Responsive Cover Page Screen Sizes

Creating a Responsive Cover Page

If you were to create a responsive page from scratch, there would be a lot of coding involved. Today however, there are many great frameworks like Bootstrap, which take care of all the heavy lifting. If you are working in WordPress most themes come as responsive by default. Easy peasy. So what about digital magazines?

Because it was so easy for vendors to simply use PDF issues for digital magazines, and there were lot’s of these customers around, no one really bothered with anything else … except us here at MagLoft 🙂 We decided to focus on HTML content instead of PDF. Fun fact, MagLoft didn’t actually support PDF formats for the first 2 years of existence.

At first we required our publishers to create their own HTML content and then simply upload it to MagLoft, but today we have our drag and drop editor called TypeLoft! With TypeLoft creating responsive content is super easy as there is no coding involved. Creating a responsive cover page just became a whole lot faster and easier!

Watch the video on this page to see how you can create a responsive cover page for your digital magazine.