Media queries, CloudFlare and Pannellum

I’ve completed my optimizations for mobile browsers for the time being. I implemented CSS media queries to hide parts of the page when viewed on small screens, and narrowed the page a bit further to make the text more legible. My image galleries were also not wrapping properly on small screens, so I replaced the tables with uniformly sized DIV elements that float to the left. There are still a few pages that need to be reworked, such as my keyboard chart page, but mostly I am satisfied with how things turned out.

One task that required a lot of time and work was moving all my gallery images from PhotoBucket to my web host (and some to Flickr). PhotoBucket is simply a bad experience on mobile devices. In landscape mode the pages are filled with 75% advertisements, with only a tiny rectangle left for my image at the top. So, I copied, reorganized and renamed all my images to my web host, and updated all the URLs pointing to them. I also set up enabled CloudFlare on my account to act as a speed boost in case my images take too long to download.

Next, I switched to a different script for displaying my 360° panoramic renders. Previously, I was using PanoSalado, a Flash based viewer that does not work on all mobile browsers, and switched to Pannellum, a WebGL based viewer that should work on more browsers heading into the future. It performs a lot better and is easier to configure to boot. I am real happy with how this turned out, and am able to show off my Carriage House virtual tour once again using the new script. Note that the scene has hotspots that will take you to different rooms.

Lastly, I re-rendered some of my Lego model images using nicer POV-Ray settings. I performed several trials, and the radiosity settings in particular made the rendering a lengthy process. Here are some examples:

ldv_nice_high_tech_lab_new_10ldv_nice_yellow_castle_old_10

I still want to re-render my orthographic “heads” scene, as well as the panoramic Carriage House tour (the images are a bit washed out looking) in the future.


Leave a Reply

Proudly powered by WordPress. Theme: Isometricland by Underscores.me and Michael Horvath. This page © Copyright 2009 Michael Horvath. Last modified: October 30 2019 23:50:05.
Vector clipart by other authors. "applevista" breadcrumbs by mtekk.
>>>sitemap<<<