User Tools

Site Tools


what_s_new_in_ce4

What's New in CE4

Core Elements 4 (CE4) emphasizes design and user experience, and strives to improve the user experience through design for CE4 customers and visitors to CE4 websites alike.

In our years designing plugins for Lightroom, we have received a great deal of feedback, as well as observed our users' successes and difficulties with our products. Development of CE4 has been greatly informed by what we've heard and seen about previous versions.

This document is intended for users familiar with the previous generation CE3 series plugins, who may want a detailed accounting of things that are changed or new since CE3.

Codename: SOLUM

Early in development, the CE4 project was codenamed “SOLUM”. I often assign a codename to works-in-progress as a way of aligning my webspace to the project's goals and motivations, as a way of shaping its course.

solum [ˈsəʊləm]
n pl -lums, -la [-lə]
(Earth Sciences / Physical Geography) the upper layers of the soil profile, affected by climate and vegetation.
[New Latin from Latin: the ground]

Having already adopted the terms “mantle” and “core” into the Core Elements lexicon with CE3, keeping with Earth Sciences was in keeping with an established theme. Beyond that, the name SOLUM embodied my motivations for the CE4 project – to create a common framework (the topmost layer) for our plugins, affected by users' responses to our previous work (climate) and our observations of what we'd seen grow out of that work (users' websites, i.e. the vegetation).

It's metaphoric, but has a strong impact on how I approach my work, and I think the CE4 plugin suite is all the better for having borne the name SOLUM through development.


It's Faster!

I've spent a ridiculous number of hours experimenting with code optimizations and trying to identify speed bottlenecks in Lightroom's rendering of the Web preview. Happily, these efforts have yielded results and the CE4 plugins respond measurably faster to user input than previous generation plugins, allowing you to get more done with less time spent.

It's More Responsive!

The new design collapses space with extreme prejudice, allowing your content to utilize more real estate than ever before. On small displays, such as on tablets, smartphones, etc., this makes a huge difference.

Smarter Gutters

Gutters are the minimum distance between your content and the edge of the browser window or display, and helps to improve your content's legibility on small displays.

In CE3, gutters were universal and set in stone. In CE4, gutters are a universal guideline which can be overridden by any individual section. For example, you can have a full-width masthead graphic without gutters, and without having to sacrifice gutters for your paragraphs, where they're most important.

Improved Social Networking Integration

Our social networking implementation has been redesigned, including both social profile and social sharing buttons. New features include:

  • Profile buttons for Pinterest, Google Plus, Twitter, LinkedIn, Facebook, Instagram, Tumblr, VSCO Grid and RSS, plus a user-definable button (an About page, or whatever).
  • Sharing buttons for Facebook, LinkedIn, Twitter, Google Plus, Pinterest, Email.
  • New appearance options for profile and share buttons.
  • New options for positioning profile and share buttons on the page.
  • bit.ly URL shortening supported for sharing to Twitter (requires an account at Bitly.com).
  • Now using Twitter's photo cards for bigger, better images on Twitter feeds.
  • Improved scripting for share buttons.

New Masthead Layout Options

  • Banner mastheads, the traditional identity plate design used by previous TTG plugins.
  • Profile-style mastheads, combine identity plate and text in a layout reminiscent of Facebook's timeline masthead.
  • Text-based mastheads using title and subtitle (more WordPress-friendly than the CE3 masthead).

Built-in R2-Unit Assists with Navigation

According to Wookieepedia, the popular R2-series astromech droid, among its many functions, “… could store up to ten sets of hyperspace vector coordinates in its astrogation buffer …”, assisting star fighters with navigation in space. R2-D2 is, of course, the most famous and well-loved droid from the R2-series.

And so, we introduce to you the R2-D2 (Ridiculously Responsive Drop-Down) Navigation Menu for CE4 websites. The R2-D2 menu is ridiculously responsive, adapting its interface on-the-fly for computers, tablets and mobile.

  • On the traditional desktop, navigation responds to mouseover events to drop subsidiary levels of navigation.
  • On tablets, navigation switches into touch-mode. Drop-menus can be expanded or collapsed by pressing the relevant indicators with your finger or mouse cursor.
  • On phones and other small, mobile devices, the menu collapses into a vertical layout. Subsidiary levels of navigation are hidden by default, and may be expanded or collapsed at will.

Compared to the default CE3 navigation menu, the new R2-D2 menu in CE4 is more flexible, more functional, offers a cleaner design and a better user experience. And like an R2-Unit, it can be removed from the ship; the ship can fly without it.

Additionally, the R2-D2 Navigation Menu offers these features:

  • Supports vertical (column) navigation layout.
  • Tested in Chrome, Safari, Firefox, IE7-10, Mobile Safari, Android 4.
  • Progressively enhanced for better cross-browser / legacy-browser compatibility.
    • Uses JS to manipulate menu transformations in modern browsers.
    • When JS is disabled, falls back on CSS :target pseudo-classes to collapse/expand menu on mobile; drop-downs powered entirely by CSS.
    • On small displays lacking support for the :target pseudo-class, the menu is always open and accessible (this is a fringe contingency that will probably never occur in real-life, but it's covered anyway!).
  • The R2-D2 Menu is modular, completely independent from the rest of the page, so (unlike the CE3 navigation) can be completely removed or replaced without impacting the rest of the page.

New "Mobile Breakpoint" Slider

This new slider in the Navigation: Container control group allows users to determine for themselves at what screen-width the navigation collapses into the compressed mobile layout.

Content Sidebars

The content area, a.k.a. “The Block”, now includes options for defining a responsive sidebar. This allows you to separate content, and completely reshapes our implementation for displaying images in the content section of your pages. There are many new possibilities here.

Gradients in the Preview

Previously, we couldn't show CSS3 linear-gradients in the LR preview, due to the preview using an outdated CSS specification with no direct correlation to the currently implemented spec in modern browsers. It was difficult to do, but we've managed to translate the new spec into the old, for the specific purpose of displaying gradients in the LR5 Web preview.

The gradients are not 100% perfect. They use a set of number ranges for Direction, which then get translated into verbal descriptors based upon a set of stupid conditions. And so we have a bit of leftover stupidity, such as all numbers falling between 0-to-23 = 0. And so it goes for the eight major compass directions. So gradient direction should be accurate when Direction slider equals 0, 45, 90, 135, 180, 225, 270, 315 and 360, and approximate when it is set to other values. Close enough for hand grenades.

Anyway, you can see your gradients now! Rejoice!

Typography Preview

Previously only available in CE3 Pages, all CE4 plugins now include the option to display a Typographic testbed, allowing you to easily style content in your pages, galleries and templates.

This should help to ensure, for example, that users designing templates in Gallery won't end up with weird table-striping in their cart template because they couldn't preview <table /> while designing (at least, without having a code a table into the block).

New Layout Options & Features Throughout ...

New and updated options and features are scattered throughout the plugins, allowing you to achieve new layouts or to achieve old layouts more easily.

Built-in Quick Reference Screen

The “Now Showing” option appears throughout the plugins, allowing access to various views, including a Quick Reference view. This includes a brief explanation of the Template Browser for saving configurations, of the various control panes and what purpose they serve, information about file and folder naming, etc. By providing this basic information within the plugin, we hope to preempt common questions and misunderstandings about using the Web module and/or our plugins.

Built-in Error Checking for Common Problems

In an effort to eliminate commonly recurring mistakes by new users (and to reduce the time subsequently spent on support), the plugins now include limited error reporting in the following scenarios:

  • If improperly installed (wrong location or bad package name), the plugin will no longer vomit useless ERRORs into the preview. Instead, the engine will politely inform the user that the installation is in error, and the user should consult our guidelines.
  • When the Site Root is blank, the preview will display a warning message.
  • The Site Root should begin with “http:”, “https:”, “./” or “/”, and end with a slash (/). When these conditions are not met (i.e. the Site Root is wrong), the preview will display a helpful error message.
  • Throughout the UI, contextual warnings offer on-the-fly assistance, and conditional warning messages may also appear in the preview as necessary to guide you.

Localization Support

The CE3 series of plugins saw renewed interest from non-English speakers, and we received many requests and offers for localization. Unfortunately, the CE3 series plugins lacked a localization architecture and this could not be done. CE4 includes localization strings, enabling our industrious Europeans and other international users to translate the plugins for their brethren.

What's Gone in CE4

Some things which appeared in previous generations of the plugins have been removed from, or streamlined out of CE4, usually for good reason; some things just no longer fit. Here's an accounting of things which now only exist in your memory.

eTabs

In CE3, eTabs powered our collapsible navigation and block content on small displays. This allowed us to manipulate the layout of content for smaller displays, but also added an unwelcome layer of complication to the page framework, and limited the framework's overall flexibility. Abandoning eTabs will allow us to do more as developers, and will also allow users to implement their own modifications more easily.

Photoswipe

We did love Photoswipe, but it was very much a thing of its time. Sadly, it aged poorly and we had to put it out to pasture. In it's place, though, we've done new, awesome things. We feel confident you won't miss it.

Tooltips

Javascript-powered mouseover tooltips are gone in CE4. In CE3, we had to initialize tooltips once on page load, again on slideshow launch, again for each new image in the slideshow, again after initializing the shopping cart (for the purchase buttons), etc. We also had to check whether or not the page was loading onto a touch device, and then either allow these initializations to run or not. All of this amounted to a heavy and largely unnecessary layer of complication for the galleries, with very little payoff. And so, away with tooltips!

Desktop web-browsers have their own tooltips built-in. They're not as instantaneous as Javascript tooltips, but they get the job done with zero overhead, and without our having to leap through flaming circus hoops.

what_s_new_in_ce4.txt · Last modified: 2014/07/09 07:17 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.