Examples of "anchored" navigation anyone?

9 Oct 2008 - 3:14pm
5 years ago
11 replies
1243 reads
Celeste Cefalu
2007

Hello all,

I'm having trouble finding some examples of an interesting UI I -know- I've
seen. I'm not sure what to call it, and have browsed some of my go-to
interaction design libraries....

I'm thinking of a navigation that is anchored to the bottom of the browser.
The user may scroll down to browse stacked modules, but navigation remains
"anchored."

What do we call this, and do we have any examples?

Your help is appreciated:)

Celeste

Comments

11 Oct 2008 - 8:48am
Matt Nish-Lapidus
2007

Hi,

I think Facebook has what you're looking for.

Matt.

On Thu, Oct 9, 2008 at 4:14 PM, Celeste Cefalu <celeste.cefalu at gmail.com> wrote:
> Hello all,
>
> I'm having trouble finding some examples of an interesting UI I -know- I've
> seen. I'm not sure what to call it, and have browsed some of my go-to
> interaction design libraries....
>
> I'm thinking of a navigation that is anchored to the bottom of the browser.
> The user may scroll down to browse stacked modules, but navigation remains
> "anchored."
>
> What do we call this, and do we have any examples?
>
> Your help is appreciated:)
>
> Celeste
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Matt Nish-Lapidus
work: matt at bibliocommons.com / www.bibliocommons.com
--
personal: mattnl at gmail.com
twitter: emenel

11 Oct 2008 - 11:24am
DampeS8N
2008

If you wish to build one of these, google "position:fixed" This is a
CSS property that will enable you to make fixed menus and such. I want
to see more of these on the web. They make sense.

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

13 Oct 2008 - 11:27am
jeff
2008

The end result of a fixed menu seems quite similar to a menu in a frame.
I'm always hearing that frames should be avoided, so what's the difference
here? Is it all in the technical implementation of frames vs CSS rather
than being a design issue?

On Sat, Oct 11, 2008 at 12:24 PM, William Brall <dampee at earthlink.net>wrote:

> If you wish to build one of these, google "position:fixed" This is a
> CSS property that will enable you to make fixed menus and such. I want
> to see more of these on the web. They make sense.
>
>

13 Oct 2008 - 6:50pm
DampeS8N
2008

Frames are not a problem design-wise, they just cause orphan pages,
that is, a search engine might index the pages being framed and not
the frame-set and a user may come to the page without a menu and be
lost.

CSS fixed elements are arranged based on the window itself, and so
they stay wherever you put them. This means you can put the menu at
the top of the page, or you can place a left or right nav on the side
of an article where it will always be reachable no matter how long the
article is.

It does so without causing frames-related search engine issues.

I think it is a great idea, although you need to be frugal with the
space it takes up, since the user can do nothing to regain that
space, and at a low resolution it could make the page unusable.

I really don't understand why it isn't used more.

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

13 Oct 2008 - 7:08pm
Andrei Herasimchuk
2004

On Oct 13, 2008, at 4:50 PM, William Brall wrote:

> I think it is a great idea, although you need to be frugal with the
> space it takes up, since the user can do nothing to regain that
> space, and at a low resolution it could make the page unusable.
>
> I really don't understand why it isn't used more.

Internet Explorer 6.

--
Andrei Herasimchuk

Principal, Involution Studios
innovating the digital world

e. andrei at involutionstudios.com
c. +1 408 306 6422

13 Oct 2008 - 10:27pm
DampeS8N
2008

Not a problem.

http://tagsoup.com/cookbook/css/fixed/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

13 Oct 2008 - 10:39pm
DampeS8N
2008

Also, And I'm so sorry about double-posting about this but it is
important and should be said.

Even IF you can't get it working in all browsers, you can make it
degrade well and turn into a header or right/left column nav that
isn't fixed.

Lack of support in one browser is never a reason to force people who
have made a good choice to use out-dated systems. IE provides their
lame little IE selection pseudo-tags for just this reason.

We all hate hacking IE but it isn't an excuse to cripple all our
systems. We can back-fill with IE hacks and JS replacements for IE
being a badboy. We can, is some situations, tell people with really
outdated browsers that certain functionality is missing because of
their old browser and suggest that they upgrade somewhere logical on
the page, like the footer. But fixed-to-the-frame menus are a good
thing.

I still fail to see why people don't use them more often.

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

14 Oct 2008 - 1:34am
Yohan Creemers
2008

Fixed menus do make sense in terms of usability.

Two examples with a menu fixed on the left:
~ http://www.designbyfire.nl
~ http://www.nva-amserfoort.nl
Both work in Internet Explorer 6 as well.

I use the same technique (as described in
http://tagsoup.com/cookbook/css/fixed/) for making sure the header
row of a long data table stays within view.

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

14 Oct 2008 - 1:36am
Yohan Creemers
2008

Hmm sorry, a typo. The second example should be:
~http://www.nva-amersfoort.nl

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

16 Oct 2008 - 6:54am
darlenepike
2007

thedailybeast.com has article titles anchoring themselves to the top
of the page. Not navigation, but thats the effect you were looking
for, right?

For me, it is distracting. I see a flickering effect in my peripheral
vision every time I scroll the page down. My focus is lost briefly,
but repeatedly. When all I want to do is continue reading an article
-- I wouldn't scroll down unless the content was interesting -- this
little bugger keeps reminding me what the title of it is.

Aside from the physical distraction of the peripheral flicker, for me,
the effect also sets in motion a chain of thoughts along the lines of
"that is a very bright red they've chosen for the headline ... The
designers really wanted it to be noticed ... Red means danger also
lipstick red and chinese weddings ... they care more about branding
their site than my experience ... Black and white and Red/read all
over ... Look at how it keeps coming back even after I scroll away
from it ... I wonder if there is a way to turn that off ... I wonder
if this would be readable if I printed it out ... Its a pretty font
..."

But maybe I'm not the typical reader.

-- Darlene Pike

On 10/13/08, Jeff Hendy <jchendy at cs.ubc.ca> wrote:
> The end result of a fixed menu seems quite similar to a menu in a frame.
> I'm always hearing that frames should be avoided, so what's the difference
> here? Is it all in the technical implementation of frames vs CSS rather
> than being a design issue?
>
> On Sat, Oct 11, 2008 at 12:24 PM, William Brall <dampee at earthlink.net>wrote:
>
>> If you wish to build one of these, google "position:fixed" This is a
>> CSS property that will enable you to make fixed menus and such. I want
>> to see more of these on the web. They make sense.
>>
>>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Sent from Gmail for mobile | mobile.google.com

_____________________________________
Darlene Pike / Pike Design

Web coding for technically challenged visionaries™

web: www.PikeDesign.com
ph: 973-600-7113

16 Oct 2008 - 10:32am
DampeS8N
2008

If done with CSS there is no flicker because there is no lag due to JS
being silly.

I'm not able to find the title issue you are talking about. Do you
have a link to it directly?

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=34162

Syndicate content Get the feed