LDSTechForumProjects

User:Cognifloyd/Design of lds.org

This is a temporary page to document the design of lds.org - I don't know where to put it in the wiki structure so it's in my userspace.

This is by no means authoritative. It is simply observation.

History

"The design has been several years in the making, and has evolved significantly over time. There have been many talented individuals that have contributed to the design and it is a mixture of their ideas along with feedback from users. Throughout the process, we have also received counsel and suggestions from the leadership of the Church which has also altered the design."[1]

Platform

CSS that takes care of sitewide content (the platform) is in /globabl/css/platform.css

HTML ID breakdown

The html of all pages has a general structure of IDs within the body tag:

JavaScript

The standard JavaScript library on the church website is jQuery. There are some exceptions (like in the scriptures) where jQuery is in a different location, but for the most part it's at:

  • cdn.lds.org/scripts/jquery-1.4.2.min.js

Other JavaScript files used throughout the site include:

  • cdn.lds.org/ml/platform/scripts/platform-utilities.js
    • A file used throughout the site for general functions
  • /resources/script/common/content.js
    • Adds some html markup (via jQuery) for some visual effects

Omniture's SiteCatalyst is used for Web Analytics.

Jericho menus

screenshot of the tools menu

Why are the menus all classed as "jericho"? The menus are named "after the small missile by the same name from the movie Iron Man.

"Some people say the best navigation is the one you never have to click. I respectfully disagree. I prefer the navigation you only have to click once. That's how dad did it, that's how America does it, and it's worked out pretty well so far."[2]

The menus labeled Menu and Tools are populated via AJAX calls to (JSON response):

  • /global/ajax/global-jericho
  • /global/ajax/tools-menu

"The menus do follow many of the SOFEA principles. Interestingly that was not entirely intentional up front, but we migrated that direction as we ran into certain problems."[3]

Search

In the main-nav ul:

<li>
    <form action="https://lds.org/search" method="get" accept-charset="utf-8" id="globalSearchForm" class="inputHintSubmitDone">
        <span id="quick-search-field">
            <input type="hidden" name="lang" value="eng" id="lang" autocomplete="off" class="ac_input">
            <input type="text" maxlength="200" name="query" title="Search all LDS.org" autocomplete="off" class="text-hint-added ac_input text-hint">
        </span>
    </form>
</li>

User specific

The authorization-link element in the user-nav is populated via an AJAX call to (JSON response):

  • /global/ajax/global-sign-in-out

This provides the "Welcome John Doe" and "Sign In"/"Sign Out" links.

This method is probably inspired by SOFEA principles.

platform-canvas-nav

This is the menu on the left. The heading is in h2, followed by Betty[4] (hr) and the sub-menu itself.

This menu should lend itself to simplicity and easy navigation. It does not necessarily contain all of the pages in the navigation structure. For example, in Magazines, you have a link to current and past issues, but the menu doesn't show links to the individual articles in the magazine.

Beta.lds.org-friend-articles.jpg Beta.lds.org-friend-filed-under.jpg

Note how the sub-menu on the left and the filed-under breadcrumb menu work together to provide a great user experience. See the details div section for more on the breadcrumb menu.

platform-canvas-content

Some stylesheets define general characteristics of a page, especially within the platform canvas. These are not exclusive (except for article and landing types), and can be loaded concurrently on the same page. Note that, this is not an exclusive list. Individual sections of the site may differ, or reuse these (eg the Home page acts as a landing page with a large feature, but uses the structure of an article page, and does so through with its own stylesheet).

Page types
Page type landing article list video
CSS file /resources/css/common/landing.css /resources/css/common/article.css /resources/css/common/list.css /resources/css/common/video.css
Description Used on landing pages (like a 'home' page) of sub-sites. eg Humanitarian Services Most pages are articles except for landing pages, and other special pages. Articles are the "informational" pages. Has a lot of different kinds of lists pre-defined: Used on pages that employ the LDSUniversalPlayer.
Structure varies structure unaffected by videos

Content layout

The main content of all pages goes in the #platform-canvas-content div. Most often, content is in the #content div as a child of #platform-canvas-content.

Content columns are created by putting a class in the #content div. These classes are mostly defined in /resources/css/common/content.css but some things are defined in css specific to certain parts of the site (eg home or news).

Content Columns
Class default (no class) two-col three-col
Columns one two three
ID of column containers primary primary, secondary primary, secondary, tertiary

Secondary and Tertiary content columns are often used for supplemental links. For example, on each article in General Conference you can choose to share the talk, listen to or watch it, as well as download or print copies of it.

details div

filed-under breadcrumb menu example

This is the container for the breadcrumb menu and the page header. Structure:

  • filed-under (class of the ul based breadcrumb menu)
  • h1 (the main heading of the page)
  • blockquote (the sub heading of the page. optional)
  • Betty[4] (the hr element, generally not present on multimedia pages)


feature div

This is the container for the feature on landing pages. The appearance, though similar, can vary from section to section of the site. So far, there are three basic feature-types:

  • carousel
  • block-right
  • text on image

It appears that there can be multiple features, that transition from one image/feature to the next. This is done by including multiple divs in the feature div named feature1, feature2, feature3, etc.

However, the only page that employs a carousel, does not use this method. Instead a ul with the carousel ID is used on the Home page. The jQuery cycle plugin (/resources/script/common/jquery.cycle.all.min.js) enables this transition.

Humanitarian Services, Scriptures, and General Conference use the block-right class on the child(ren) text divs of the feature1 element. These text divs use the ID naming scheme feature1-1, feature1-2, feature1-3, etc for additional text elements in feature1. The same applies for the other feature# elements.

Temples uses what might be called the "text on image" method as the text is on the image instead of on a block to the right. The same ID naming schemes seem to apply.

search div

Used to include a search box that only applies to the local branch of the site. It is only included when it makes sense. For example, local search is available for General Conference and Scriptures but not Humanitarian Services or Serving in the Church. On the Temples site, the search function links to the Temple map.

teasers div

This is the container for mini-advertisements of the articles, pages, or news available on the site (known as teasers).

It can be classed as "carousel" (like General Conference) or "no-carousel" (like Humanitarian Services). Also, the Home page uses a list-like appearance for teasers.

A carousel allows you to include more teasers that can be scrolled through, either automatically, or when a user clicks on the arrows.

CSS

Files

The css files used throughout lds.org are:

  • cdn.lds.org/ml/platform/styles/platform.css
  • /resources/css/common/content.css

CSS used for certain sections of the site include:

  • /resources/css/common/article.css
  • /resources/css/common/landing.css
  • /resources/css/common/list.css
  • /resources/css/common/video.css
  • /resources/css/pages/archive.css
  • /resources/css/pages/family.css
  • /resources/css/pages/home.css
  • /resources/css/pages/humanitarian-services.css
  • /resources/css/pages/news.css
  • /resources/css/pages/ohfp.css
    • ohfp is an abbreviation for "Our Heavenly Father's Plan"
  • /resources/css/pages/org-the-church.css
  • /resources/css/pages/organization.css
  • /resources/css/pages/study-notebook.css
  • /resources/css/pages/temples.css


The scriptures site links to some of the same files above as well as the following, but under /scriptures:

  • /resources/css/common/scriptures.css

Themes

The CSS for lds.org has 6 different major classes to colorize different sections on the website. These classes are defined on each pages body tag.

These themes colorize the following elements:

  • The "flag", or ribbon, in the upper left corner of the page, below The Church's logo. (aka Judy[4])
  • The divider element (hr) in the submenu on the left, as well as the divider (aka Betty[4]) below the main title on many pages
  • The title of the current page in the "filed-under" breadcrumb menu
  • An arrow that indicates a link on some features

There are five classes to describe each section of the website, as shown in the menu below (note the color of the bar below each title). The 6th class is for some general site content, such as the archive of features from the home page or the tools pages. These classes are defined in /resources/css/common/content.css

Lds.org-menu.jpg

CSS Classes per theme
Class name plan-theme family-theme church-theme service-theme study-theme generic-theme
Site section Our Heavenly Father's Plan Family The Church Service Study General
Basic color Green Gold Purple Red Orange Blue
Hex color #76AC0C #F6E16B #8255AC #B14A4A #E6A12C #1FA7EC
Flag (aka Judy[4]) Beta.lds.org-plan-flag.png Beta.lds.org-family-flag.png Beta.lds.org-church-flag.png Beta.lds.org-service-flag.png Beta.lds.org-study-flag.png Beta.lds.org-generic-flag.png

Though the news-theme class is also defined in content.css, it simply duplicates church-theme with one exception: There's no menu on the left, so things like the flag are moved over.

Like a typical family, Betty and Judy don't always agree on color schemes for the family section of the website. Note that in the menu Betty is Teal, but the basic color for the family section is a Yellow/Gold (as Judy, the golden ribbon, demonstrates oh so well).

Page display types

Different pages have different types of content. Several different classes facilitate quickly swapping from one type to another.

There are 3 overall display types (class is added to the body tag with the theme class):

Display types
CSS Class default (no class) narrow app fluid
Description Could be called the "wide" layout, as the contents fill the page as on the Home page. Used for most pages. Narrow has the sub-menu on the left hand side. (vs the Home page which doesn't)  ? Mentioned in a comment, but undefined, and unused. ? Used on the calendar app for a fluid/flexible layout that resizes with a resized window.

Fonts

Headings have the following font-family: 'OFLSortsMillGoudyRegular', Georgia, "Times New Roman", Times, serif;

Other text defines the following (and similar) font-family: 'VegurLight', "Lucida Grande", "Lucida Sans", "Lucida Sans Regular", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif

lds.org uses the following fonts (in /resources/css/common/) in a variety of formats (as of 4 Aug 2010):

  • font-family: 'OFLSortsMillGoudyRegular'
    • fonts/OFLGoudyStM.eot
    • fonts/OFLGoudyStM.woff
    • fonts/OFLGoudyStM.ttf
    • fonts/OFLGoudyStM.svg#OFLGoudyStM
  • font-family: 'OFLSortsMillGoudyItalic'
    • fonts/OFLGoudyStM-Italic.eot
    • fonts/OFLGoudyStM-Italic.woff
    • fonts/OFLGoudyStM-Italic.ttf
    • fonts/OFLGoudyStM-Italic.svg#OFLGoudyStM-Italic
  • font-family: 'VegurLight'
    • fonts/vegur-l.eot
    • fonts/vegur-l.woff
    • fonts/vegur-l.ttf
    • fonts/vegur-l.svg#Vegur-Light
  • font-family: 'VegurRegular'
    • fonts/vegur-r.eot
    • fonts/vegur-r.woff
    • fonts/vegur-r.ttf
    • fonts/vegur-r.svg#Vegur-Regular

Church News & Events

The Church News & Events page breaks enough of the above listed patterns, that it deserves its own description.

It's an appealing mix of normal web content (videos and rss) with the frilly old newspaper look.

The Church News & Events section also breaks the mold slightly (in a good way) with the rest of the site as it uses more frills to appear more like an old-fashioned newspaper.

It uses the wide instead of narrow layout (no left sub-menu). That makes sense, because News and Events are more flat than hierarchical.

Also, a "date-bar" is included in-between the details div (with the heading) and the primary div.


Though it uses a three column layout, instead of labeling the columns primary, secondary and tertiary, they are all in the primary div and, on the front page have the IDs:

  • left-column
  • middle-column
  • right-column

In the articles the columns are:

  • main-column
  • right-column

The main-column visually has two columns, but these divs (listed by ID) are simply repositioned within it:

  • lead-image
  • article-title
  • tools
  • related-topics
  • article

Old beta.lds.org design

As mentioned in history, the current design has gone through several versions before arriving where it's at. There are a few pages/sub-sites that have yet to be re-released with the newest design.

There are a couple of design elements in the old design that do not fit as well in the new. How will these things look in the new design?

Beta.lds.org-youth-branding.jpg
Consider the Youth website.

  1. The sub-site branding (in this case "Youth" is in a cursive script)
    • As I understand it this will be simple text in Judy's[4] ribbon space. Is that accurate?
  2. The sub-site menu that is present on all of the pages of the site.
    • We have the menu in platform-canvas-nav, but that only works for two sub-levels. If you try to add more, it quickly breaks.
    • I suspect that organizations will easily have three or more levels of content.
    • Has any thought been given to a way to have a sub-site menu that is always present (like the main jericho menu is on every page), so that you can quickly navigate from section to section of an organization's sub-site.
  3. The colored bar is different colors depending on which organization's site you're in. It's orange/yellow for the Youth site, pink for Young Women and brown/green for Young Men.
    • Judy[4] will indicate which category of the site you're in (plan, family, church, service, study, generic) but she does not tell you if you are in a particular sub-site. Is there some other element to provide this kind of sub-site branding?


References

  1. mindie's description of how the latest lds.org design came about Post on the LDSTech Discussion Forum
  2. Jason Lynes's comments about the name Jericho for menus Post on the LDSTech Discussion Forum
  3. Tyler's comments on SOFEA principles in the menus Post on the LDSTech Discussion Forum
  4. 4.0 4.1 4.2 4.3 4.4 4.5 4.6 Jason Lynes's note on names Post on the LDSTech Discussion Forum
This page was last modified on 23 January 2012, at 16:59.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.