New LDS.org design is awesome Q&A

24 postsstarted by cognifloyd 11,897 viewsoriginal topic

#1
I've watched lds.org evolve over the years. I really like the direction that the design on beta.lds.org is headed. Two thumbs up!

I would love to understand some of the thinking that went into this design. Is there anyone here that's participated in some way on the development of beta.lds.org?

How did this design come about?

I have a bunch of questions about this great design. I've been thinking about documenting what I see in this design on the wiki.

Comments?
Church Employee
#2
I am the lead developer over beta.lds.org and could answer some questions you have. 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.
#3
Here's my first draft document on the beta.lds.org design: https://tech.lds.org/wiki/index.php/User:Techgurufloyd/Design_of_lds.org

Where did the name Jericho come from? Or I should say, is there a story behind using Jericho to describe the menus? Does it have something to do with SOFEA?

I'll just ask a few questions at a time.
Church Employee
#4

Jericho

I'm not the right person to really describe the choice of the name Jericho, but here is a fun religious reason (even though it is not the primary motivation, it fits for a religious site).

The city Jericho is known for how low in elevation it is. (I believe it may be the lowest city in the world.) In the bible we read in the parable of the good samaritan of a "certain man" who was "... going down from Jerusalem to Jericho..." There is another meaning in that sentence since Jerusalem was considered holy, and Jericho was considered worldly...anyway, I digress.

My analogy is that the world comes to lds.org, and has to start at the lowest point (Jericho). From there they find themselves on a spiritual journey leaving the world (Jericho) behind. So "Jericho" starts us off, and gets us going in the right direction...and the only direction from Jericho is UP! :)

Having said that, 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. Nice layout in the wiki by the way...fun to see people so interested in the details.
Church Employee
#5

Jericho Missile

Hi, I'm one of the lead designers of lds.org, and though I didn't design the new menu, I did name it Jericho. I named it 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.
Church Employee
#6

More names

A few more names you might be interested in.

The colored side ribbons are called Judy. The thick colored stripes are Betty. FYI.
#7
Whether based on the worldly city headed up to Jerusalem or a super-one-click missile - Jericho's a great name. :)
Tyler wrote: Having said that, 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. Nice layout in the wiki by the way...fun to see people so interested in the details.
Yah, I noticed the change to AJAX in a recent rollout. Teach me - what problems did you run into? Was it too difficult to update the menu on all the pages?

Also, how is the site served up? Is there some Java magic (ie a CMS of some sort) happening in the background to build the pages, or are they static pages being served up with JavaScript to spice things up, or ...?

Thanks for the compliment about the wiki page.
#8
As I understand it:

Originally they were looking for names like "frosting" to describe the different design elements. Kaleb Tracy suggested that the flag be called Judy. Someone else (who?) suggested the name Betty for the colored bars. Chris Mayfield says he came up with the name Jericho based on the movie Iron Man. Originally he pushed for an always visible menu (thus the one click to change the page is like one button to blow up the mountain range). More people pushed for the menu however, and it is a beautiful solution.

I've significantly updated my wiki page: https://tech.lds.org/wiki/index.php/Use ... of_lds.org

Some of my questions are (The order is based on the general order of the wiki page. The order, other than that, means nothing. The numbers are there for reference):
  1. Why is jQuery the standard library?
  2. Where is the profile/account settings going to be?
  3. How did the breadcrumb (filed-under) menu come about?
  4. What thinking went into the landing pages, specifically the feature with a block on the right side?
  5. What kind of backend runs the search queries? What does the indexing?
  6. Why the distinction between /globabl/css/ and /resources/css/common/ ?
  7. What kind of study went into choosing the 5 main categories: Our Heavenly Father's Plan, Family, The Church, Service, and Study?
  8. Other than differentiating one section from another, are there any reasons for the specific colors of each of those categories?
  9. There's a comment on the pages that mentions an "app" class along with "narrow" and "fluid". What does the "app" class do? Where is it defined?
  10. Why OFLSortsMillGoudy and Vegur fonts?
  11. What thinking went into the design of Church News & Events? Why so different?
  12. What kind of backend runs beta.lds.org? Is it a Java-based CMS, static custom-crafted pages, or something else?
  13. Any other cool stories that would be fun for me to know about the design of lds.org?
The youth site demonstrates several design elements that didn't make it into the current design.
  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 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 Yong 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?
Community Moderators
#9
techgurufloyd wrote:7. What kind of study went into choosing the 5 main categories: Our Heavenly Father's Plan, Family, The Church, Service, and Study?

Wow! Did the light ever turn on when I read this. Thank you for thinking and posting it.
Member
#10
Disclaimer: I'm on the Search Team at National Instruments here in Austin, Texas..

Why does the Search box require a click to get to? One the biggest feedback items for our website ni.com is that the search box is the most heavily used asset. We are constantly getting feedback to make it bigger, more accessible, etc. Why the decision in the new.lds.org site?

I'm also interested in the search engine that lds.org uses..
Kenn North
Texas
Community Moderators
#11
kennova wrote:Disclaimer: I'm on the Search Team at National Instruments here in Austin, Texas..

Why does the Search box require a click to get to? One the biggest feedback items for our website ni.com is that the search box is the most heavily used asset. We are constantly getting feedback to make it bigger, more accessible, etc. Why the decision in the new.lds.org site?

I'm also interested in the search engine that lds.org uses..
Speaking just as a user of lds.org and as a frequent complainer about many things elsewhere...

One problem with focusing the keyboard in a search box, at least with some methods of doing that, is it can make it more difficult for users to do other things on the page. For example, starting some weeks ago, at a certain professional social networking site, keyboard focus is now forced to the search box on at least some pages. The problem is Ctrl-W no longer works to close that (Firefox) browser window, which is different from nearly all other sites I frequent. At that site, I have to press TAB to get the keyboard focus out of the search box before Ctrl-W will work.

I don't know what factors might have been involved in the present design at lds.org, but sometimes there are counterbalancing factors that need to be weighed.
#12

Is anyone in the know listening?

It seems to me that the people that know anything about the design, either don't use this forum or they use it once in a blue moon. I'm not sure we're going to get responses from the Church employees that are working on this project.

Please, prove me wrong, or please tell me, why the silence?
Community Moderators
#13
techgurufloyd wrote:It seems to me that the people that know anything about the design, either don't use this forum or they use it once in a blue moon. I'm not sure we're going to get responses from the Church employees that are working on this project.

Please, prove me wrong, or please tell me, why the silence?
You are correct when you state that many of the designers of projects do not frequent the forum on a regular basis. The community encourages participation from those at CHQ, but whether they feel they have the time to spend on the forum is entirely up to them.

We have been blessed to have some representation from those involved in the CDOL as well as the new Directory and Calendar projects and they have been very helpful in responding to questions.

However, if you have problems to report the best method would be to use the "feedback" links that are generally available. These links have proved most successful in getting information back to the teams that are responsible for the projects.
Have you read the Code of Conduct?
#14
techgy wrote:You are correct when you state that many of the designers of projects do not frequent the forum on a regular basis. The community encourages participation from those at CHQ, but whether they feel they have the time to spend on the forum is entirely up to them.
OK. That just means I'll head to a different avenue for information.
Community Moderators
#15
techgurufloyd wrote:OK. That just means I'll head to a different avenue for information.
I would do both. I would first use the "feedback" link on the program web site and then follow up with a post to the forum. Posting it here notifies the community of a problem and it's possible that someone else has experienced what you experienced and may have an answer.

However, as I indicated those who are responsible for the design of the programs do not always monitor the forums, so providing feedback is essential.
Have you read the Code of Conduct?
Church Employee
#16
kennova,
The search box is changing as we speak. Look for it to come out of hiding in one of the next few releases. Thanks for the feedback.
Church Employee
#17
techgurufloyd and techgy,
Sorry to be so absent here. The design team has been buried getting the new.lds.org up and running. But here we are now. Ask away on any remaining burning questions. I am the creative director for the new site and am surrounded by an amazing team of very talented designers. It has been an amazing experience to work on this project and see the tender mercies of the Lord as it has come to life. The Lord is certainly in the details of this project and seems to care very much that this site reach the world. Miracles. Just plain miracles.
Community Moderators
#18

New.LDS.Org Questions

vaughnpau wrote:Sorry to be so absent here. The design team has been buried getting the new.lds.org up and running. But here we are now. Ask away on any remaining burning questions. I am the creative director for the new site and am surrounded by an amazing team of very talented designers. It has been an amazing experience to work on this project and see the tender mercies of the Lord as it has come to life. The Lord is certainly in the details of this project and seems to care very much that this site reach the world. Miracles. Just plain miracles.
I'm sure you won't have any trouble finding questions to respond to, but permit me to begin the process with a recent one. The question is related to the Exporting function in the Directory - click HERE for the thread.

In addition I was wondering about the feature that permitted clerks to edit information. When the directory first came out I was able to make corrections to members information in the directory. I noticed the other day that either that feature has been removed or the access level has been changed to where an Asst. Stake Clerk no longer has that access. Can you elaborate on this?

Is there a way to obtain a list of all members in the stake w/o have to do each ward individually?

The date when printing is incorrect.

These are a few items that I've run into and that have been mentioned in the forum.

Please pass a well done along to the team. The entire project is really looking good.
Have you read the Code of Conduct?
#19

Questions

vaughnpau wrote:techgurufloyd and techgy,
Sorry to be so absent here. The design team has been buried getting the new.lds.org up and running.
new.lds.org is great. I really like it. The hard work shows. :)
vaughnpau wrote:But here we are now. Ask away on any remaining burning questions.
I listed 15 questions in my post here: http://tech.lds.org/forum/showpost.php?p=46889

Take your pick and thank you for taking the time to shed some light on new.lds.org

Thanks,
Jacob Floyd
#20

youth.LDS.org

has anyone experienced problems when clicking links on the new.lds.org homepage to go the youth site? I know that the link goes to pages in new.lds.org/youth... when the youth site is still on the subdomain name beta.lds.org. When I click the links on the homepage is gives me an error message "Access Denied." I've sent a message via the feedback page, but have not received a response.
#21

Strategy for "new".domain.org sites

Can someone explain the logic for using "new".domain.org when launching new church websites. More specifically, please help me understand what the roadmap is for making new.lds.org just be lds.org.

In our stake, we've been watching the development of beta.lds.org with great interest. We are really excited to use the calendar, contacts, and membership/MLS integration. But the problem is, all our members go to "lds.org". If we start training them to go to "new.lds.org" - when does new.lds.org cease to exist?

In other words, is "new".domain.org a staging ground? Or is it where the site will be forever hosted?

I ask this because new.familysearch.org has been "New" now for 2 years or so. What will we call the next version of familysearch? even.newer.familysearch.org?

I see the logical difference between new.familysearch and familysearch (new is focused on temple ordinances), but wouldn't temple.familysearch.org have been more appropriate. Maybe member.lds.org for the members/units websites?

Bottom line - when will the old site be deprecated and the new site take over?

Thanks!
Community Administrator
#22
WhiteEyebrows wrote:Can someone explain the logic for using "new".domain.org when launching new church websites. More specifically, please help me understand what the roadmap is for making new.lds.org just be lds.org.
The new.lds.org is indeed a staging process -- it's used when a site is in a late beta. Eventually it will indeed become lds.org so that anyone who goes to lds.org will see the new site. There has been no announcement of precisely when that will be, but I would guess it's in the next few months.

How much you train your members to go to new.lds.org just depends on how proactive you want to be with getting a headstart on the new site. Each stake has to make that decision. They can jump on it right now, or they can wait until it is lds.org if they'd like. It's just a tradeoff between being prepared sooner at the potential cost of some confusion for members.

This is the pattern the Church has used before. We saw it with new.mormon.org that was in place for a while, but now the new site is simply mormon.org.

The same thing will happen with new.familysearch.org, but for a variety of reasons unique to that site, it has been in the "new" state for quite a bit longer than mormon.org was or lds.org will be. But there will come a day when it will simply be http://www.familysearch.org.
Questions that can benefit the larger community should be asked in a public forum, not a private message.
#23

Video

I'm interested in the design of the video player. There seems to be serveral designs of it.
  1. Youth site
  2. October 2009 General Conference & Earlier
  3. & April 2010 General Conference
The Youth site's video player features "share" "embed", "dim lights" button, which I have not seen anywhere else & a Closed Caption button.

The video player used October 2009 General Conference & Earlier pages has none of the above stated. The only options are "Full Screen" & volume.

The April 2010 General Conference video player is designed a little bit more like the BYU TV website's video player. This one has the "share" & "embed" buttons, however there is something new, there are "get link" & "get code".

So the reason for explaining this...
I'm wondering why are there differences in design? will they be changed?
How was this designed? Was this done by the church or some other online video player?
Church Employee
#24

new.lds.org and video player

NEW.LDS.ORG
According to the home page of current lds.org, new.lds.org will become the official LDS.org on or shortly after the 10th of November. (Note it doesn't say what year...jk)

VIDEO PLAYER
As to the video player, 1 and 2 in your list are actually the same player configured differently. This player is what we have affectionately called the "LDS Universal Player". It was developed in house, and is a flash based player.

Number 3 in your list (the latest Conferences) is a new 3rd party player that we are starting to use because of our streaming needs. It is likely you will see it show up on more sites in coming months.

Hope that helps!