Best practices for home and newcomers' pages.

67145027_10217765205418606_7060221499210203136_o.jpgI recently looked at the two pages I consider most important, the front page and the newcomers' page. I didn't visit EVERY site (though I think I did better than 80 percent on the home pages). Some notes:


  • It's easy for white space to appear when one column runs long. Use pagination or move blocks around to minimize the blanks as much as possible. Otherwise it looks messy and incomplete.
  • There is such a thing as too much stuff on the front page. Some of my picks below skirt close to overwhelming the reader.
  • The best-looking pages either run a photo rotator across 2/3 of the page and use the Top Links box in the other column, or run a rotator across the width of the page. If you choose the latter you need strong horizontals.
  • We're actually moving away from Facebook/Twitter feeds on the front page. LINKS, yes, but feeds tend to add clutter, especially on mobile.
  • Test everything on mobile.

 At this point, If I were designing a garrison home page, I'd probably want a Top Links, an events list, a news/announcements column, a Featured Pages set, and some kind of flashy rotator. This can be done in three levels: Rotator beside Top Links, Events on 1/3 and news on 2/3, and three featured pages across the bottom. Or a full-width rotator, a Calendar/news/links layer, and Featured Pages across the bottom. Adjust the number of calendar events, news and announcement stories, and Top Links so the columns are balanced. You can use pagination on the events and put additional links in the footer.

(Update: This would be my approach. Front pages should be designed to fulfill your mission. I've tried to drive the mandatory elements into the footer. The only absolute requirement in the body of the page (the white zone) is a Top Links box with a minimum set of links specified in the Minimum Viable Site document).


Front page: : Very little white space, many features, good use of footer, nice logo links. : Photo rotator well used. Lots of information and news : good use of rotator. Rotator next to Top Links/Quick Links. : Full-width rotator well done. Information rich. : You don't need to have everything on your home page. Ignore the exclamation marks. Striking use of rotator


Newcomers' page:

Approach 1:  1st Replacement Company info well placed and valuable. Very good quick links, and I also appreciate the use of the page descriptions in the page links. Another good narrative approach, with a lot of graphics help. Nice use of anchors in the quick-nav menu. Good logos. The welcome center photo acts as art and makes it easy for new arrivals to determine whether they are in the right place.  : Excellent narrative information for newcomers. Exactly what they need to know. Note the lending closet information. Not a fan of the welcome letter -- there should be more instructions for inprocessing.   Another  narrative approach. I include McCoy on this list because it is the only one among the sample to use a video. Others might consider this. The narrative, while informative, misses the mark because it doesn't appear to be very useful for inprocessing.


Approach 2: : The IMCOM Europe standard for newcomers' pages is link-heavy and serves as a gateway for a lot of information. The three phase approach is a good way to make certain all contingencies are covered. The need to click all over  the place is a weakness. A little step-by-step narrative in each column might help.