3 questions about nearly completed site

Please go to the link below to see the site in question…

http://fantasyislandanimation.co.uk

3 issues…

First…

Other than making my images as small as I can get away with (which I will do with some housekeeping at the end), is there any way to make the site load faster. Hype seems to want to load all the scenes right at the start which means you’re staring at a blank page longer than is healthy. It does mean that once this load is done the whole site is faster, but the delay in initial loading is unacceptable.

Second…

With a responsive layout, when you make the width of the browser narrower the site resizes nicely but I end up with a large blank area at the bottom of the page. Is there anyway to not have this space at the bottom of the page when I scroll down?

Third…

Line spacing issues in columns of type. You’ll see the issue best if you click on the ‘explore’ tab (desktop) or ‘explore’ menu item (tablet/phone). On that particular page there is long column of type and, as you progress down the page the type spacing is unpredictable and, therefore, it makes it very difficult to sit images at various points in the column of type without terrible formatting issues showing up when the page is rendered in a browser. These anomalies are unpredictable and dependant on which browser you use on which device. For instance, in Safari on my Mac If arranger the images in the column of type by trial and error and after much shuffling it works fine. Same page viewed on a PC in Chrome and the type and images are overlapping. Same sort of inconsistencies from mobile device to mobile device. You may, or may not see these issues when you view the page depending on what browser/device/platform combination you’re using.

So, what is the correct way to format a column of type so that images can me arranged to sit within the type reliably?

Sorry, there’s quite a lot there but any suggestions would be much appreciated.

Thanks.

You can disable preloading in the Resource Library by selecting the image resources and unchecking the Preload option. There's other tips about speeding up your site on @daniel's Decreasing load times and optimizing performance: Preparing a Large project in Hype post.

From what I can tell, you are just using the Flexible Layout system. With the multiple layouts of the Responsive Layout system, you could change the layout height. We don't recommend a lot layouts, so there's probably some degree of space at the bottom that you would have.

Short of embedding images and text within the Inner HTML of an element, there's not really a way to do this. Hype's layout system is based on absolute positioning, and doesn't provide methods to push or pull content based on sizes of siblings.

You might be able to make things work for 2 and 3 with the multiple responsive layouts, and not using flexible layout. This is an area I'd like to improve on.

Thank you. Very helpful and plenty to be getting on with.

Unchecking those pre-load checkboxes has made a world of difference to the load. And it doesn’t seem to have made the subsequent scenes load any slower. Win win!

Thanks.

1 Like