[css-d] Moving mobile nav to bottom?

[J.C. Berry]

Hello,
I have read that on mobile devices it is better to move your nav to the
bottom of the screen. First of all, do you agree? Secondly, how can you
move something down that may be in the HTML above the other elements?

Eager to hear.

-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Moving mobile nav to bottom?

[Chris Rockwell]

When I read this I assumed J.C. was referring to a navigation bar that is
fixed to the bottom of the screen, and I think D'Arcy provided a solution
(I didn't test it).

I think there are very valid use cases for this design pattern. If the
navigation is accessible from the bottom of the screen it is always in
easier reach of my thumbs (especially on this Note 5). It also affords the
opportunity to have "quick links" (contextual or otherwise) as well as a
hamburger type button that can expand more navigation.

Test your user base and see if it is a better experience for them.

Chris
On Jan 27, 2016 7:39 PM, "Tom Livingston"  wrote:

> On Wed, Jan 27, 2016 at 5:15 PM, J.C. Berry 
> wrote:
> > Hello,
> > I have read that on mobile devices it is better to move your nav to the
> > bottom of the screen. First of all, do you agree? Secondly, how can you
> > move something down that may be in the HTML above the other elements?
> >
> > Eager to hear.
> >
> > --
>
> I assume what were talking about is having the 'mobile nav' at the
> bottom of the page with a link (hamburger anyone?) at the top to jump
> down to it. A number of years ago I built a site that used this
> method. If I had to do it again, I would choose a better method for
> the structure, but for my skill level at the time it was ok.
>
> You could have the  be parent-less (except for  element),
> and position it at the bottom for narrow widths and at the top for
> wider. This obviously has design implications, but it's certainly
> possible. Absolute positioning is one simple way to achieve this, but
> as others have mentioned, flexbox is another way.
>
> HTH
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Moving mobile nav to bottom?

[Micky Hulse]

Hi,

On Wed, Jan 27, 2016 at 2:15 PM, J.C. Berry  wrote:
> I have read that on mobile devices it is better to move your nav to the
> bottom of the screen. First of all, do you agree? Secondly, how can you
> move something down that may be in the HTML above the other elements?

You could use flexbox and the `order` property:



“The CSS order property specifies the order used to lay out flex items
in their flex container. Elements are laid out in the ascending order
of the order value. Elements with the same order value are laid out in
the order in which they appear in the source code.”

For a shameless plug, I wrote a jQuery plugin to tackle a similar
issue (I needed to move elements around depending on breakpoints):



Put simply, the above plugin makes a copy of the markup and that can
be controlled via CSS to show/hide depending on breakpoint. Or you
could just use it to re-arrange the page content and hid its original
location.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Moving mobile nav to bottom?

[J.C. Berry]

Thanks everyone, great suggestions. But I have to clarify something and
here I am really open to best practices - our site has a regular complete
menu on every page, but each page also has a submenu for "more reading" on
a subject. So I wanted the main menu to be at top where it is now -
hamburger and all - but the submenus I wondered how to present them. What
do you think?

On Wed, Jan 27, 2016 at 7:56 PM, D'Arcy J.M. Cain 
wrote:

> On Wed, 27 Jan 2016 20:29:26 -0500
> Chris Rockwell  wrote:
> > When I read this I assumed J.C. was referring to a navigation bar
> > that is fixed to the bottom of the screen, and I think D'Arcy
> > provided a solution (I didn't test it).
>
> It's an excerpt from a real site but I can't guarantee that it works in
> isolation.  Sometimes CSS depends on things in the containing elements.
>
> > I think there are very valid use cases for this design pattern. If the
> > navigation is accessible from the bottom of the screen it is always in
> > easier reach of my thumbs (especially on this Note 5). It also
> > affords the opportunity to have "quick links" (contextual or
> > otherwise) as well as a hamburger type button that can expand more
> > navigation.
>
> The decision to put the navigation at the bottom is mostly a design
> one.  I just think that if you do it has to be fixed in place.
> Otherwise it may not even show when someone goes to a site that is
> longer than their display.  It's not as important when the navigation
> it at the top.  Then it is more of a design decision.  Not my table.
>
> > Test your user base and see if it is a better experience for them.
>
> Always the best advice.
>
> --
> D'Arcy J.M. Cain
> Vybe Networks Inc.
> http://www.VybeNetworks.com/
> IM:da...@vex.net VoIP: sip:da...@vybenetworks.com
>



-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Moving mobile nav to bottom?

[D'Arcy J.M. Cain]

On Wed, 27 Jan 2016 14:15:10 -0800
"J.C. Berry"  wrote:
> I have read that on mobile devices it is better to move your nav to
> the bottom of the screen. First of all, do you agree? Secondly, how
> can you move something down that may be in the HTML above the other
> elements?

I can't answer your first question - I'm a "make it go" guy, not a
designer.  As for how, I always put the  section near the top of
my HTML right after the header but on some pages I display it at the
bottom.  In those cases I also fix it in place so that it is always
available without scrolling down.  Here's an example.

NAV {
  position: fixed;
  bottom: 20px;
  width: inherit;
  background-color: #dd;
  color: #282010;
  font-size: 10pt;
  margin: 0;
  padding: 0;
  text-align: center;
  height: 40px; 
} 

-- 
D'Arcy J.M. Cain
Vybe Networks Inc.
http://www.VybeNetworks.com/
IM:da...@vex.net VoIP: sip:da...@vybenetworks.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/