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.
- 1 History
- 2 Platform
- 3 platform-canvas-nav
- 4 platform-canvas-content
- 5 CSS
- 6 Church News & Events
- 7 Old beta.lds.org design
- 8 References
"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."
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:
- A file used throughout the site for general functions
- Adds some html markup (via jQuery) for some visual effects
Omniture's SiteCatalyst is used for Web Analytics.
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."
The menus labeled Menu and Tools are populated via AJAX calls to (JSON response):
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>
The authorization-link element in the user-nav is populated via an AJAX call to (JSON response):
This provides the "Welcome John Doe" and "Sign In"/"Sign Out" links.
This method is probably inspired by SOFEA principles.
This is the menu on the left. The heading is in h2, followed by Betty (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.
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.
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).
|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|
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).
|Class||default (no class)||two-col||three-col|
|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.
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 (the hr element, generally not present on multimedia pages)
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:
- 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.
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.
This is the container for mini-advertisements of the articles, pages, or news available on the site (known as teasers).
A carousel allows you to include more teasers that can be scrolled through, either automatically, or when a user clicks on the arrows.
The css files used throughout lds.org are:
CSS used for certain sections of the site include:
- ohfp is an abbreviation for "Our Heavenly Father's Plan"
The scriptures site links to some of the same files above as well as the following, but under /scriptures:
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)
- The divider element (hr) in the submenu on the left, as well as the divider (aka Betty) 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
|CSS Classes per theme|
|Site section||Our Heavenly Father's Plan||Family||The Church||Service||Study||General|
|Flag (aka Judy)|
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):
|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.|
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'
- font-family: 'OFLSortsMillGoudyItalic'
- font-family: 'VegurLight'
- font-family: 'VegurRegular'
Church News & Events
The Church News & Events page breaks enough of the above listed patterns, that it deserves its own description.
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:
In the articles the columns are:
The main-column visually has two columns, but these divs (listed by ID) are simply repositioned within it:
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?
Consider the Youth website.
- 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 ribbon space. Is that accurate?
- 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.
- 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 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?
- mindie's description of how the latest lds.org design came about Post on the Tech Discussion Forum
- Jason Lynes's comments about the name Jericho for menus Post on the Tech Discussion Forum
- Tyler's comments on SOFEA principles in the menus Post on the Tech Discussion Forum
- Jason Lynes's note on names Post on the Tech Discussion Forum