The Turning Gate

Streamlining in CE3

February 26, 2013

Hello and welcome back for another CE3 drum session. Today I thought I'd talk a bit about streamlining in CE3.

Before I do, though, Rod Barbee has blogged some of his impressions on CE3. Many of you will know Rod from our community forums, where he is arguably a larger presence even than I. He has been hands-on with CE3 for months now, all through development helping me to identity bugs and other issues, and to shape the way forward. As someone I consider to be an expert on CE2, he's well qualified to tell you what's up with CE3.

And now, let's talk about streamlining ...

For CE3, I took a hard look at the existing plugins and what users had to say about them, with a focus on streamlining the overall experience, making them easier to use and faster to respond. My conclusions fell roughly into these points, in no particular order:

• Navigation needs to easier.
• Items that need be changed on a per-gallery basis should be in one place (i.e. Album Title, Block content, etc.)
• If possible, the plugins should be made to load and refresh faster.
• Features that no one seems to use amount to clutter; I need to eliminate clutter.
• Wherever possible, controls should be tighter and more meaningful; fewer sliders = less clutter.
• Is it possible to improve site performance online?

For those of you short on time, patience, or both, here's the takeaway:

CE3 is easier to setup, and more pleasant to use. It loads faster, refreshes faster and exported galleries upload faster to your website. The plugins are leaner, tighter and more powerful. The UI has been redesigned for ease of use and less clutter. Published websites, galleries, pages, etc. run better than ever.

Now, for those looking for details and deeper discussion, here we go ...

In CE3, navigation has been completely redesigned. You no longer need to mess around with relative locations, levels in folder hierarchy, or any of that complicated garbage. The very first thing you do in CE3 is tell it where your site is going to live:

You can fill this in with your full website address, e.g. http://yourdomain.com, but it's also okay to leave it at the default '/'. Then, if working with TTG CE3 Pages, you can simply select Home, Galleries, Blog, Services, Info, About or Contact from the drop-menu and think no more about it. If you want to add more menu items, just use an absolute address, beginning http://... and you're all set. Whether creating galleries in the traditional export-and-upload method, or creating templates for TTG CE3 Publisher, navigation is handled the same.

TTG CE3 Pages now also acts as a repository for assets. The core CSS files, the scripts and many other assets which are recycled throughout the CE3 framework are all apart of Pages' repository. And by knowing the Site Root, you galleries, indexes and other pages are able to find those assets, no matter where those pages are positioned in your site. If you're not using TTG CE3 Pages, then every export includes its own set of isolated assets; as before, any plugin can be used in standalone form. But if you are using TTG CE3 Pages, then you can enable this checkbox in the Output Settings pane of any CE3 plugin:

And this will tell your gallery (or whatever) to get specific assets from the repository. The advantage is an overall improvement to site performance. Instead of 10 galleries each loading one of 10 isolated sets of duplicate assets, those 10 galleries will now load assets from a single source, which most browsers will cache temporarily for faster loading while browsing the site. It's a very basic web-design trope, but one which the component system made difficult to facilitate until now.

This comes with other benefits as well. For example, the ce3-core.css file is shared. That file contains styling for the page structure, masthead, navigation, social media bar and footer. If all areas of your site are sharing the ce3-core.css file in TTG CE3 Pages, then you can make customizations to that file that will propagate throughout the entire site. Or if a shared script file gets an update, rather than re-create the entire website, you can simply replace that script in the repository and all "linked" galleries will benefit from the update.

Let's keep talking performance, but move into the Web module.

CE3 plugins are leaner, faster than previous versions. This is most notable in TTG CE3 Pages, though all CE3 plugins enjoy better response times. It's no secret that the CE2 version of Pages was slow; I even created a trimmed down "Lite" version in an attempt to address the problem. TTG CE3 Pages is roughly 30-50% faster than TTG CE2 Pages, which puts it on pretty equal footing with TTG CE2 Pages Lite. Some users may even find it slightly faster. The plugin still slouches toward being pokey, but it's still doing quite a lot. Regardless, it's pretty easy to work with compared to the older versions.

To realize these speed gains, I've been pretty liberal with the axe:

Support for the page background-image has been dropped, which has allowed me to drop the included image files. CE2 plugins included 8 background images by default, plus whatever users added to the pile. Every time the plugins were loaded into the Web module, Lightroom had to copy those additional files into its working resources. Background-images are easy to implement via PHPlugins or using the shared CSS file as discussed above, so users should have no problem doing that manually if they want a background image. There will be a PHPlugins tutorial on just that in the documentation.

The same goes for the many UI images and the 155 social media icons that were a part of CE2. For CE3, most UI elements are font-based icons, not rasterized image files. We're loading a font and that is all. Those 155 social media icons are eliminated, and so are most of those UI elements. This amounts to a significant number of files that Lightroom no longer needs to loading into its working resources when using the plugins. It's also a lot less that needs to load into the browser when sites are online, so performance gains all around.

To put that savings into numbers, TTG CE2 Pages occupied 4.4MB on disk, and was a 1.6MB download zipped; TTG CE3 Pages is 2.4MB on disk, and zips into a 624KB download.

To clean up some clutter and to give Lightroom fewer sliders to choke on, CE3 takes a more universal approach to typography settings as well. For example, there are far fewer font-size and font-family adjustments to be made throughout the setup. Some users will surely take offense, seeing this as a limiting of options. But I think it falls pretty squarely into the philosophy of creating smaller, more meaningful control sets. There are other examples of this approach throughout the plugins that experienced users may be able to identify. But in creating templates, I haven't missed any of the options that have been streamlined out, and testers haven't made a single complaint, so I think we're in safe territory here.

Axing Flash support from CE3 also served to significantly reduce the amount of cruft in TTG CE3 Pages, and I have also removed video support from Pages as well, as literally no one seems to have used it, and community forum polling has indicated that it would not be missed. Video support will be a part of TTG CE3 Stage later, so it's not gone for good; it' just no longer taking up space and resources in TTG CE3 Pages.

In redesigning the UI, I've been very meticulous. The UI is designed to be used at a width of 350px, and I've gone through the controls to optimize spacing and negative space for ease of use. Album Title, Album Description and Block Content are now grouped together in the Color Palette control pane for easy access, as these are things that would generally need to be changed when using a single template to publisher several galleries. At the macro level, the UI is mostly laid out as before:

• the Site Info panel has all of the site-wide options.
• the Color Palette panel contains options for the block (text content).
• the Appearance panel contains options for the grid (gallery/media).
• the Output Settings panel houses the technical stuff, external integrations with other plugins and services, etc. The catch all for auxiliary items.

Within those categories, though, I've made an attempt to reinforce the top-to-bottom workflow, and to group related items together a bit better than before.

As to how things are built, the plugins themselves are tighter, made of fewer moving parts. This is in part because the plugins were built alongside the publisher with native support, rather than having had to be retrofitted with publisher support as was done with CE2. Wherever possible, the source has also been made more dynamic.

A good example of what is meant by that is the feature toolbar seen in Highslide galleries, which contains icons for permalinks, download, shopping cart, etc. In CE2, if you had 100 images, then you had 100 idle toolbars sitting in the code, hidden from view. In CE3, these toolbars are generated on the fly for each image; so whether you have 10 images for 100 images, it's always the same amount of code. And if your gallery is very large, that savings becomes pretty significant. That's less source code for Lightroom to render, and less source code that the browser need load online.

In conclusion, all of this adds up to make a real difference. Plugins load and refresh more quickly in Lightroom, are easier to use because of the redesigned UI, upload more quickly via FTP because there are fewer assets to send upstream, and load faster online thanks to tighter code, fewer assets, and shared resources. If you're looking for miracle-level improvements, then you need to try harder to keep things in perspective, but CE3 brings real and measurable gains in performance to every aspect of using the plugins.