Since almost the beginning, earthli has supported themes that let the user choose the basic color scheme for the site. In the early days of the web, it was a cool way of playing with CSS. It also kept your coding honest because you had to stick to a style guide instead of just throwing in styles all over the place.

In recent years, the themes started to look a bit dated. With the introduction of a completely new base layout, most of the themes looked bad and skewed instead of simply dated.

A few screenshots are shown below, but you should check out the settings page (available in the footer of every page on this site) to see more and choose your own theme.

MidnightBeachMochaEggplantShamrock

Some themes have been renamed:

• Emerald => Shamrock
• Crimson => Fire Engine
• Tangerine => Creamsicle

Some themes have been removed:

• Desert
• Earthli
• Galaxy
• Opus

The default theme is still “Ice”.

For those interested in the technical details, all earthli stylesheets are now constructed with “Less CSS” and themes are absolutely dead-simple to create by just setting a few base colors. For example, the “ice” stylesheet is created with this less file, which uses theme-base, which in turn uses core-values and core-mixins. All the other themes use these base files as well and tend to override even fewer variables than the ice theme does (e.g. Mocha, Midnight or Shamrock) For those still working with plain CSS, Less is definitely worth a look.

Text-formatting manual updated!

The manual for the earthli text formatter has been updated to include all of the latest tags and attributes. All of the non-trivial tags now have examples, including <pullquote>, <abstract>, footnotes (<fn> and <ft>), <clear>, <anchor> and <hr>.

There are a couple of new tags for showing messages, <info>, <warning> and <error>, examples of which are shown below.

Web browsing has come a long way since earthli’s default style was originally created. It was high time to clean out the decade-old default style and apply some modern design ideas to it. Nothing radical, but any design of a certain age will end up being more appropriate for older browsers than more modern ones.

On the one hand, the style accumulates cruft engendered by browser limitations that no longer apply and, on the other, the basic layout no longer works well on the most common device-display sizes.

Guidelines

As with any UX overhaul, I followed a set of guidelines to help me make decisions.

• Left alignment: Use left alignment as much as possible. Avoid center-aligned elements as much as possible.
• Reduce padding: Avoid horizontal padding as much as possible
• Use margins: Use vertical margins instead of padding to profit from margin-folding
• Consistent spacing: Pick a spacing unit and apply it consistently throughout rather than using em-based or randomly chosen spacing
• Reduce icons: Do not disturb left-alignment with needless icons in front of headings [1]
• CSS images: Use CSS backgrounds instead of image icons wherever possible
• Menus as lists: Use semantic structures for lists of buttons and links
• Big buttons: Buttons should be large enough to be usable from a mobile device
• Consolidate controls: Buttons should be collected into a common area rather than sprinkled about the page
• Less boxy: Avoid boxes; instead, use negative space to distance elements from one another
• Use headings: Use HTML headings instead of CSS classes to improve semantic value
• Use the whole page: Use the full page width for content wherever possible
• Fewer columns: Avoid using columns wherever possible; instead, collect tools/related content into a header (improves usability and space usage for mobile devices)
• Larger/better font: Switch to a larger, more readable font by default
• Reduce clutter: Move elements out of high-traffic areas wherever possible (e.g. move distracting elements from header to footer)
• Don’t repeat yourself: Avoid including the title of a page in multiple places wherever possible

I also had the help of a design consultant (thanks Kath!) who helped me cut several Gordian knots with aplomb. She’s not to be blamed for any remaining shortcomings, but can be lauded for letting me know when I wasn’t quite finished with a particular element yet. Oh, and she knew all along that we would end up using this font (Raleway).

General changes

• earthli now uses the Raleway font everywhere; you can choose from several other, much more modern-looking fonts from the theme page.
• The default font size is also set to medium instead of small (you can still change it back in the theme settings, now found in the footer rather than the header).
• Default line-spacing is now 160% to loosen up the text; this line-spacing is applied nearly everywhere rather than just text blocks.
• The whole page is now left-aligned rather than centered in the browser viewport
• Theme selection and “Show source” have been moved to the footer from the header
• Footer elements are all left-aligned

Home page

Since the site content hasn’t changed at all, the home page hasn’t changed too drastically.

• The left column has been removed
• Polls have been removed
• The earthli WebCore box has been moved to the bottom of the page
• Album thumbnails are larger, left-aligned and there are now more of them

Original Home PageNew Home Page

News index

Application index pages no longer use a left column to display associated information. Instead, associated information is confined to a header block that stretches across the whole page, leaving room for the content to use the width of the page. The header area has a maximum height so that the beginning of the content should remain visible in almost any window.

Some more specific changes are,

• All commands are now consolidated into the “Commands” button/menu.
• Subscriptions are now managed from the “Commands” button as well (rather than as a separate form or link).
• The search form is closer to the top of the page, where users expect. Its location is constant rather than dependent on other content on the page (e.g. the index-page description or the list of sub-folders).
• The pager control uses much larger buttons and is more obviously a set of controls; it no longer uses icons and has been redesigned to stay as stable on the page as possible when moving from one element to the next
• Many horizontal lines have been removed; controls have been consolidated
• The breadcrumbs now includes the name of the page as well; the name of the page is not repeated anywhere else

Original News IndexNew News Index

Albums index

The improvements listed for the news index above are equally valid for the albums index. In addition,

• Because of the additional space for content (boxes or columns are gone), the albums can now show three columns of thumbnails instead of two
• The “Commands” button is left-aligned and overlaid on the thumbnail rather than taking up additional space

Original Albums IndexNew Albums Index

Article page

The article page is representative of all detail views (e.g. for pictures, articles, journals, jobs, recipes, etc.).

• The title of the element is repeated here, but with good reason: the breadcrumbs should be consistent, but the header makes it obvious that the page focus is on a single element
• All buttons are consolidated into a single, left-aligned area at the top of the page (the “toolbar”)

Original article pageNew article page

Picture page

The picture-page update is similar to that for the article. In addition, the whole picture is no longer center-aligned, nor is the date right-aligned.

Original picture pageNew picture page

Original picture page (with context list)New picture page (with context list)

Article page structure

And, finally, for those who care about valid, clean, semantically useful HTML, the following screenshots shows some improvements in that regard.

• Non-content image icons are gone
• Banner and logo images have been moved to CSS
• Lists of menu items and buttons are represented by HTML lists
• Titles use HTML headings rather than semantically empty DIV tags

Original article page with no cssNew article page with no css

What is there still to do?

The style you see on earthli right now is only the first cut. I’m quite happy with it and don’t feel a lot of pressure to fix anything immediately, but the redesign was consciously limited to adjusting style without changing functionality or how that functionality is presented to the user. A more dynamic design that uses more JavaScript and Ajax was not considered for this phase. It was enough work just getting this phase completed.

• Continue minor clean-up, fixing issues as they arise
• Address UX issues in the context links for individual items (see footnote [2] below)
• Convert the other themes to follow the new guidelines (and possibly deep-six a few of them that are too dated)
• The CSS for the site is still maintained by hand, but would benefit from a pre-compiler like CSS.less.
• Take a look at replacing the colored icons with a more common, standard set, like the font-based ones from Font-Awesome.
• While tables are not used for layout, styles for some columns and grids still use “table” and “table-cell” display styles in some places where a more responsive & fluid approach would be more appropriate.

All in good time, of course. Until then, I hope you enjoy the new style!

Item the First: Search Bug

For the last couple of months, it has been impossible to search earthli in any of the applications (news, albums, recipes). This bug has been fixed as of today and searching should work as expected.

Item the Second: Styling of Citations

The default theme on earthli no longer uses a dark red color to indicate that a particular piece of text is a citation. Long time readers have doubtless become quite accustomed to picking out citations by color, and it is hoped that they will adjust to the new styling. Currently, the old theme has not been preserved in any way, though one could be made available if enough people complain about it.

Inline citations are still indicated with double-quotes as well as an italic font, but are now dark gray instead of dark red, as in the following example: “[t]his is an inline citation.” Block citations are also still enclosed in double-quotes, but are indicated with a gray left margin and no change in text color. An example follows:

“This is a block citation. Note that the indentation and left margin are sufficient to indicate that this is a citation rather than original text.”

That is all.

Your earthli.com Development Team

Older versions of the earthli WebCore were more clearly delineated release packages and were hosted at SourceForge and offered for download on this site. Much time has passed and there have always been incremental upgrades made for the maintenance of earthli.com, but no more official releases.

A little while ago, the earthli WebCore’s source was moved from a private, firewalled Perforce server to an externally available Mercurial server. The structure has changed somewhat since the 2.7.0 release and documentation updates are still pending. Many of the principles still apply, though.

PHP4.x support has been deprecated and will no longer be supported. earthli.com itself is still currently using it, but will migrate to PHP5 within the month. The last, stable PHP4-only build is available from the source server, of course, as the snappily named changeset “0b644125e4a7”. Again, once all changes have settled down, this version will be made available in a more convenient manner.

Once PHP5-development has delivered a stable version, the WebCore documentation and instructions will be updated accordingly. One thing at a time. The sources for the earthli web-site itself are currently hidden, but select pieces will be made available as configuration samples at some point, as well.

Though still not officially available, earthli.com has migrated to the latest and greatest version of the earthli WebCore. Look for a downloadable release within the next week or so. In the meantime, you can cruise around earthli and see some of the improvements for yourself. As with most WebCore releases, the differences are mainly non-cosmetic and of benefit to developers working with the library. However, there are noticeable improvements to the toolbars, menus and other UI elements.

The first service pack is available at the WebCore home page. This release includes some smaller bug fixes and some usability improvements. There are also release notes and a change log to read.

The earthli applications have also been updated and have their own change logs: Albums, News, Projects and Recipes.

After over a year in development and a skipped internal release (2.5.0), the latest and greatest in PHP web site development technology is once again available to a clamoring public.

You should probably Download it now.

New features in 2.6.0 (since 2.4.0) are:

• File uploading fully integrated and worry-free
• Image manipulation
• Generalized form rendering
• Previewing supported in almost all forms
• Fully HTML 4.01 valid templates
• Massively improved the “munger”; HTML and plain text support much more powerful formatting
• Added icon and theme management (users and folders can have unique icons or avatars)
• Generalized attachments suport (comments/entries/folders)
• General support for “locations” so that a text block can refer to content without specifying exactly where it needs to be (e.g. to refer to a nested attachment)
• More advanced searching (search on any and all fields)
• Compressed files support
• EXIF extraction support
• Much more sophisticated subscriber options
• Improved email generation (publishing generates table of contents for longer mails)
• Draft mode supported in all applications
• Much improved hierarchy for data objects (much easier to create non-application objects and reuse code)
• Improved logging and developer tools for debugging/profiling
• Template files are now easily overridable
• Individual classes and renderers are also easily overridable (for plugins)
• Integration into non-WebCore pages as easy as dropping in WebCore objects (location is automatically detected and adjusted)
• Toolbars for objects are now in CSS-only drop-down menus (cleaner look)
• Simplified configuration and customization
• Drastically improved security and permissions granularity and application-specific customizability
• Error handling and reporting much improved (including ‘retry’ and ‘debug’ modes)
• Improved and extended platform-independent file and url handling
• …and probably much, much more that I can’t remember right now…

The application have also improved, inheriting all the features listed above and adding:

• Albums has much improved album options
• Albums has a batch upload feature (extracting images from a ZIP file and automatically creating thumbnails and assigning dates)
• Albums can now upload pictures/extract EXIF date/etc.
• Projects supports testing and release dates and sorts intelligently to show the most important jobs first
• Projects has a release wizard now to show exactly what will happen when a release is shipped
• … and again, much, much more…

Did I mention that all this is available for Download?

The WebCore has a new home (again)! The home page is updated to be much more dynamic (and take advantage of WebCore applications) and many other pages have been updated as well.

• Downloads are easier to find
• Installation instructions are updated and finally complete
• The First Run section includes a nice, 20-step instruction manual taking you through your first few minutes with your newly installed WebCore application.

The earthli WebCore now uses a nifty JavaScript calendar component to let users easily choose and set dates. This makes choosing dates for pictures in earthli Albums a breeze!

You don’t have to get the WebCore to use it — it’s also available as an separate open-source component. Check out a demo or download it now.

Brought to you by earthli Software.

The WebCore home pages have finally gotten an update — there’s a lot more introductory text explaining what it is and what it does.

• Check out Why use the earthli WebCore?
• The features page is all-new and focuses more on top-level usable features and time-savers offered by the WebCore.
• Downloads actually works now and doesn’t break every time a new release is made in earthli Projects.

The new library (2.5) isn’t available yet, but we’re getting there.
 

Both earthli Projects and the earthli WebCore are still in development, but here’s a screenshot showing the new look for the job page.

WebCore boxThere is a brand new release of the earthli WebCore, along with upgrades for all four modules. The modules are now available for download in easier-to-install packages and include much better installation instructions.

As you can see, the WebCore has also acquired a shiny new logo.

earthli.com is proud to announce that the code on which this web-site runs is finally ready for release to the masses. It is published under the open-source GPL license and is available for download right here on earthli.com. The release is accompanied by full documentation for both casual users and developers. For more information, visit the official WebCore home page.