cccs-ip
commented
10 years ago With regard to the footer:
We currently are showing only a 'description' line:
Cross-Cultural Consulting Services (CCCS) is a consulting firm specializing in Indigenous Peoples and aligned social development issues. © 2006, 2009, 2012, 2013, 2014. All rights reserved.
To ensure that it breaks in a meaningful way, I introduced a bunch of HTML to it:
<p style="text-align: center;"><span style="white-space: nowrap;">Cross-Cultural Consulting Services</span> (<a title="CCCS - homepage" href="http://crossculturalconsult.com">CCCS</a>) is a consulting firm specializing in <span style="white-space: nowrap;">Indigenous Peoples</span> and <span style="white-space: nowrap;">aligned social development issues.</span><br>© 2006, 2009, 2012, 2013, 2014. <span style="white-space: nowrap;">All rights reserved.</span></p>
I was sort thinking to use it as a 'selected' reproduction of the top menu, including basically just the 'contact' form and a link to the 'blog'. I haven't developed it yet, but I would like to make a page for 'Credits' to show in the footer and to link to your profile, Paul's, and also to thank our translators. If we are using any icons from the Noun Project or something, we could also credit their designers on this page, etc.
pwhipp
I like the idea of 'framing' our site with a sticky header and footer. I envision this as occurring by creating 2 different header and two footers, with one of being being 'sticky' (and thus providing the site 'frame').
The following discussion provides further detail of my concept. This discussion roguhly parallels some of the concept put forward in issue #30.
Before going on, however, please allow me to highlight a few pages that do a pretty good job implementing responsive menus:
Header
I would consider breaking the site header into two 'elements':
ELEMENT 1) logo + company name
The first 'element' would consist of a a single line of 'sticky' content that presents the company name and icon interfaces for mobile search and navigation. This element and its components should be universal viewable across varying browser sizes.
Learning from Radio Sweden’s responsive ‘settings’ module
Radio Sweden’s ‘settings’ module to play their webcasts is designed to fit beautifully within available browser space—all the way down to the smallest possible viewing frame. A couple of points make this element really impressive:
Contrast this to how one of our recent CCCS test sites looks at the same browser size.
Applying Radio Sweden’s ‘responsive module’ concept to CCCS website:
It would be cool if we could apply highly-customized responsive behaviour to the top navigation menu on the CCCS website. The mock-up below encapsulates a few different conceptual approaches. The first row reflects what I would imagine the logo and company name to look like on a "full sized" browser, namely with the logo, company name, and navigation elements (search and 'mobile menu' all present). The second two rows reflect different concepts for responsive behaviour, with the 2nd line dropping the logo and the third line suggesting a change in the font size of the company name:
My preference is to drop the logo with limited browser space, and to have the company name change size dynamically within a certain range (a concept not reflected in the mock up), and then after a point to have the company name drop and the logo re-appear until the point that all elements are bunched tightly together (4th row).
Another possible approach:
ELEMENT 2) scroll away nav menu
The second element would 'appear' where space is available. This is the 'second line' header navigation menu (presenting as a 'classic site navigation interface'.
This site somewhat demonstrates the concept, although their sticky bit is not responsive.
Footer
I also imagine a similar two-part footer arrangement, where the bottom part is a solid band of similar width (effectively forming a top and bottom window color "frame"). I imagine this can be implemented by creating a sticky footer 'band' to match the header. We attempted this aesthetic with this test version of our website, but didn't manage to make it work . When veiwing the 'en' test site, please note that we tried to design the footer to present the multi-lingual toggle options. I'd be happy with a similar arrangement once we get our multilingual capacity working--though of course the options are limitless.
In the second 'full footer' section, I would add pertinent content links: contact info, statement of ethics, legal stuff, credits and attributions for web development, etc. When we get to detailing exactly this content, we should (consult this article)[http://bitofpixels.com/blog/on-singletonadmins-and-sitewidecontent-editing-sitewide-content-in-mezzanines-admin/] to see whether any of the advice it provides is helpful.