LunarStudio HTML5 Update
After another week of going through code, I’ve update the lunarstudio.com website to incorporate additional HTML5 valid syntax. By doing so, I hope to increase future compatibility across browsers, speed up the page load times, and make it easier to make future updates and revisions. If anyone reads this article, I hope that you can take a quick look at the website and let me know if it works and looks okay. I’m only one person working on the site, and it’s difficult for me to test the site across operating systems and and dozens of web browsers while maintaining my day job. Website design can truly be a full-time job when done properly.
Below is a screenshot of my LunarStudio Analytics Browsers:
Browser Statistics
Just to note: the above screenshot isn’t thorough. Some browser statistic programs/scripts will break down the different versions of let’s say Internet Explorer. You might be surprised how many people are still using older versions like Internet Explorer 5 (the current is IE9) which might cause some websites such as mine to bug out. I just tried pulling up Urchin to show you, but for whatever reason, my host (Mediatemple) turned it off. :(
The older version of the LunarStudio website was designed many years ago using HTML tables. At the time, tables were just starting to fall out of favor with the W3C specifications and CSS was starting to become more commonplace. The problem with CSS was that it was often hard to develop more complex website designs with it, so some designers (such as myself) kept with using traditional HTML tables. I am still puzzled as to why HTML tables are now deprecated – to me they were (and still are) very intuitive. Anyways, tables on my main site are now a thing of the past and I managed to figure out how to redesign the site with almost pure CSS.
Another item worth mentioning is the LunarStudio design itself. I wanted a website a long time ago that was perfectly centered on page which was uncommon at the time – both vertically and horizontally. It’s not uncommon to visit a blog these days and see that it is centered across your browser horizontally. Most of the few designers who did achieve the centering effect back then had done so through Flash (which was quite frankly a pain.) I managed to achieve the effect through some code trickery and table usage. Since that time, overall page centering on websites has become more commonplace, and I don’t think LunarStudio reads as “revolutionary” as a design as it once did, but I still like my own design, and if it’s not broke, I don’t see the purpose in fixing that portion. I’m pretty happy (and a bit surprised) that I managed to be able to keep the overall look and feel using CSS instead.
Additionally, I’ve gutted most of the JavaScript and replaced it with pure CSS opacity hovers. The only JavaScript I kept was the Lightview/Lightbox thumbnail image popups as well as some Google-related Analytics and newer + code (which ironically doesn’t validate properly.) I didn’t like how my previous preloads and hover states worked. I wasn’t sure how the two states of thumbnails (on and off) were being read by image searches on the search engines. Hopefully, all of the above has been addressed and will be in a better state than before. Because my website is image heavy, they were dumping an additional 200 kb per page onto visitors, and this could have been made more efficient. These days, most people have higher speed connections than the older 56k dialup, but pageload times still factor into whether or not visitors stay on your page, or navigate away. There’s still some pretty scary statistics as to how long the average visitor stays depending on these load times.
Here’s an Analytics screenshot of my current visitors stay duration:
Visitor Statistics.
The only thing I have left and wish to fix/update that I haven’t been able to is the animations section. HTML5 uses the new ‘Video’ element, and I wasn’t able to convert the preexisting Flash .swf animations over to it. The Video element is still relatively new, so encoding older material (especially interactive material) over to it will be tricky for some time to come.
