Customizing My SmugMug Web Site

Not surprisingly, as soon as I had a workable web site up on SmugMug, I've been hit with an irresistible urge to make it more customized.  Just some minor tweaks that would make it more precisely what I want it to be.  Since I've never coded in HTML/CSS, I need to do some learning.  As I do that learning I am making discoveries that I seem likely to forget all too quickly, so I'll write down some of them here where they can be found again without extensive googling or pestering my children.

Testing My HTML

One of my first issues was how to try my HTML.  SmugMug provides an editor that allows entry and shows the results on a development version of the web site quite quickly.  That's very handy, but I needed a bit more hand holding.  I was enthusiastically pointed at w3schools.com by both of my young people, it seems to be the rage in college for HTML work and learning. 

In particular, the TryIt editor is nifty.  It allows HTML to be entered in one window and shows it in another overtime you hit the Run button.  It's pretty durn handy. Below is very simple example.

Minimizing Menu Choices and Click Requirements

Two of my major concerns when designing the navigation of the site are the competing needs to:

1. Keep the number of items on any given menu to a minimum, and to
2. Keep the number of clicks required to reach content very small.

Both of those goals are driven by my desire to make the site simple and easy to use.  I never want to give instructions on how to reach something that involves more than two selections to reach content.  I also don't want too many choices on any given menu.  I've read that seven is the upper limit and I believe fewer is better. 

SmugMug provides a number of automatic functions that can go on the main menu.  They are tempting, they do useful things, but using all of them leaves no space at all on the main menu, so pruning is required.  Here's what they are offering, arranged by significance to me:

• Contact Form - A simple form pop-up that allows a visitor to send an email to a masked email address.  This seems essential for my application. I want people to be able to reach me.
• Login/Logout - Allows the site owner and perhaps others to login, which is essential for maintenance but not required for visitors.  I need this, but a more subtle position works.
• Home Page - Takes visitors back to the home page.  This is also what the page header does, making this optional. More discussion at webdesignerdepot.
• Search - Allows searching of the site for various things, most notably keywords.  This could be useful, but it isn't a mainstream use as I envision the site.
• Browse - Allow people to travel around the site without the menus.  I don't want this.  
• Keyword Page - Provides a page showing all the keywords in use.   I don't want this.  
• Date Page - Allows viewing content based on date or date ranges.  I don't want this.  

That gives me one "standard" item that must be accessible.  The Contact form should always be easily reached.  Login is available in the hard to avoid SmugMug footer, so I don't need it in the menu. Home is important, but it's already available as the page title and through breadcrumbs for navigation. Search and About are both handy, but they don't need to be on the Menu.  I have been pursing putting them on a page footer.  More on that in the next section.

This gives me only one standard item that is essential to my menu.  I need a link to take visitors to my Galleries, perhaps with a drop down.  I'd also like a "what's hot" link that I can change to make the first item in the menu configurable to show where I want people to go "now," I'm labeling this "featured."  I also want a link from my photo site to this Blog; that can simply be labeled "Blog."  All of that gets me to 4 entries, that's a nice short menu, it could even afford another entry, maybe "Slideshows" will appear at some point.

Adding a Page Footer

I want to have Search and About available on the pages, but I don't want them to take up a spot in the main menu, a footer seems an obvious choice.  I have "Powered by SmugMug" shown in the tiny font  as a left footer, so putting my auxiliary words on the right footer seems natural.  After messing around on w3schools and some experimentation, I settled on some HTML that seems to get the job done.

<!DOCTYPE html>
<html> <head> <style>
body {margin:0;}

.navbar2 { overflow: hidden;  position: fixed;  bottom: 0;  left: 0;  width: 100%; }
  
.navbar2 a { float: right;  display: block;  color: #FFFFFF;   text-align: center;  padding: 5px 16px;  text-decoration: none; } 

/* Hide navbar2 if screen is too small, perhaps a 600 threshold? */
@media only screen and ( max-height : 600px) { .navbar2 {  display: none; } }

</style> </head>

<body> <div class="navbar2">
  <a href="http://www.barrettphoto.us/About-Us">About</a>
  <a href="http://www.barrettphoto.us/search">Search</a>
</div>

The two interesting items in the above may be the use of max-height and bottom to obtain the desired behavior.  I picked up the max-height idea from Adam Horvath's Blog.

Next Steps

The site now feels ready to use.  I need to add a lot of content and should have more learning opportunities.

Not surprisingly, I had another tweak to make.  Details in another posting.