[wplug-board] An idea for a simplified WPLUG web site navigation page

[Pat Barron]

So, we've bounced this idea around a little - the idea of replacing the 
WPLUG.ORG home page with a simplified "launch page" that provides a 
simple and clean view of some of the most referenced items people would 
want when coming to our site.  The idea I have is to basically do this 
as a single-page HTML5 app.  That, yeah, looks like a lot of other sites 
(including many Wordpress sites...) - but hey, like I said, it's simple 
and clean, there's a reason this is a common design.... ;-)

What I have in mind would look like:

Top of page:  WPLUG masthead, background image maybe with some typically 
Pittsburgh (but Linux-related) artwork - like, maybe a picture of Tux 
sitting on the Roberto Clemente Bridge or or something....  
(Disclaimer:  I am not an artist, I would not possibly be able to 
produce such a thing - would be dependent on what artwork we could 
obtain, that we had appropriate rights to use.)

Below that:  A menu bar, containing the various topics people can get to 
from the launch page.  For example:

  * "About" - general info about the organization
  * "Wiki" - the front page of the current wiki
  * "Calendar" - schedule of events
  * "Board" - names and contact info for board members
  * "Join" - information about joining WPLUG
  * "Contact Us" - because pretty much every web site has this... ;-)

Those are just examples off the top of my head.  There could be as many 
as desired, just remember they all have to fit across the top of the 
page as a navigation bar.  We don't want the menu bar (or the page) to 
be a mile wide.  I think we also don't want to try to make a nav bar 
menu that has submenus, as I've seen on a number of sites, as this isn't 
really particularly mobile-friendly - it can be hard to select from the 
submenus from a touch screen interface.  I would imagine that most of 
this content (except maybe the calendar) would be mostly static, or just 
pointers to other things.

Below the menu bar, a series of HTML <div> elements, each one 
corresponding to one of the navigation bar menu choices - each initially 
hidden except for the "About" div.

Each menu choice in the navigation bar would be tied to an "onclick" 
action, which unhides the corresponding div, and hides all the others.

And maybe somewhere in here, another div inside of a "<noscript>" block, 
that tells the user sorry, but you really need to enable JavaScript to 
view this site...

No matter what the user clicks, they never actually leave the page and 
go to a new page (unless they hit a link that we might put in one of the 
div's), everything happens within that one web page.

This could all be implemented in one single HTML file, and one single 
CSS file - actually, if you really wanted to, you could put the CSS 
inline within the HTML file, but that is not considered to be good 
practice...

Advantages:  It's clean and functional, and exists basically within one 
page, with no complicated CMS to install, maintain, and learn.

Disadvantages:  Since no CMS or design tool is used, changing it 
requires editing the raw HTML, which can seem kind of daunting. Someone 
would need to be willing to take that on.

I'll try to mock something up so you can see what I'm talking about.  
Just fair warning, it'll look pretty bad - I'm a coder, not a 
designer...  But hey, that's why you break the CSS out into a separate 
file, most of the "look and feel" would be in the stylesheet.

--Pat.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.wplug.org/pipermail/wplug-board/attachments/20140411/5df24e81/attachment.html