Best solution for mobile version?

[Sponsi]

Hi guys,

I wanted to hear how you develop the mobile responsive version of your website. When it comes to CSS everything's OK but I have a problem with navigation. I don't know which template is best for hamburger menu.

I came up with a solution that I have a normal menu with one template and then @media hiding the 'normal menu' div and showing the alternative (dropdown) menu div.
What was wrong, was that I had to create sites under some top item, e.g. if I had "start / about me / contact" I had to put everything under e.g. "menu" item so that the dropdown menu (combined with CSS) behaved like the hamburger menu (plus the jQuery 'no hash URL' script so that it's touchable and doesn't have hover on desktop in low widths).

I wasn't able to find out how to edit .htaccess so that the URL is not built http://mysite.com/menu/start.html and I dropped this idea. Now I have a fully open menu in low widths, which is kind of temporary for me.

Can you please give me some hints about how to cope with this problem of navigation? Maybe someone could provide me with a menu template suited for both desktop and hamburger at some width?

Thanks.

[faglork]

Does this solution
http://www.resengoerg.de
solve your problem?

There is NO javascript required, btw.

Cheers,
Alex

[Sponsi]

Yeah, looks good : )
What's that? Do you have such template?

[faglork]

Here's the menu template:

Code: Select all

{strip}
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}


{if $count > 0}
<ul class="menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" href=
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent" ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" href=
{else}
  <li>
  <a href=
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
"{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
{/if}
{/strip}

You can copy the navigation CSS from the site and change to suit.

Cheers,
Alex

[oliverseddon]

I would suggest you look into CSS media queries if you want a 'responsive' site (Google @media).

Although I would recommend 'adaptive' instead, this is where you use something like PHP to detect whether the device is mobile, tablet or desktop and then use @media queries in your CSS.

The 'adaptive' route enables you to serve up completely separate HTML using simple {if} statements in your templates rather than using CSS to hide elements for mobile as per the 'responsive' route.

Check out the Mobile Detect plugin in the forge for making your device detection really easy.

http://dev.cmsmadesimple.org/projects/mobiledetect

An example of an 'adaptive' site built in CMSMS using the method described above can be seen here: http://www.kingsltd.co.uk

[Sponsi]

Well, I have @media in my CSS, the only problem is the menu.
I don't want user-agent-driven detection, responsive layout is what I like most.

@faglork Thank you very much! I will try this solution at the weekend.

[oliverseddon]

But that means if someone resizes their desktop browser they will see your mobile nav, nobody wants that.

You choice though.

[Sponsi]

Nothing bad with that : )
Besides, I don't care about 1024x768 monitors, let them die with IE6.

Responsive above all : )

[paulbaker]

But that means if someone resizes their desktop browser they will see your mobile nav, nobody wants that.

Really? Responsive behaviour seems to make much more sense to me. I believe websites should behave differently according to browser screen size. Whether the visitor is using a tablet, phone or desktop isn't relevant.

[Jo Morg]

From http://www.huffingtonpost.com/garrett-g ... 44569.html

Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.

Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.

As you might guess, a major difference here is in where the work is being done. With responsive, the device itself does the work with media queries to display the re-sized images and optimized layout, whereas with adaptive, the server does the work and delivers the page already optimized.

It is my opinion that most of the time you don't want the client to load a huge payload of resources just to hide them and see 10% of the site, after waiting for it to load. Optimization dictates that each site should be addressed differently, depending on how much resources it has to deliver. Sometimes an hybrid approach is better.
More often than not I go for adaptive.
My 2 cents...

[faglork]

Although I would recommend 'adaptive' instead, this is where you use something like PHP to detect whether the device is mobile, tablet or desktop and then use @media queries in your CSS.

The 'adaptive' route enables you to serve up completely separate HTML using simple {if} statements in your templates rather than using CSS to hide elements for mobile as per the 'responsive' route.

While generally true, especially in this case it does not matter.

You need a navigation, be it desktop or mobile.
And this is simply the same navigation, just styled differently. No need to hide anything.

As long as you have a small site (up to, say, 50 pages or so), no problems with that.

Cheers,
Alex

[oliverseddon]

My point is mainly, why would someone on a desktop machine want to see your mobile style navigation? This will happen if they resize their browser to your CSS break points.

Plus depending on what your break points are the same may happen on iPad's and other larger tablets, which again seems daft and something as a user I hate. My iPad is more than capable of showing a full site, both portrait and landscape.

[faglork]

My point is mainly, why would someone on a desktop machine want to see your mobile style navigation? This will happen if they resize their browser to your CSS break points.

Plus depending on what your break points are the same may happen on iPad's and other larger tablets, which again seems daft and something as a user I hate. My iPad is more than capable of showing a full site, both portrait and landscape.

Well, this is *your* point of view.

You may have noticed it is a dropdown navigation with multiple levels. If you resize the browser window, there comes a point where you can't navigate to some sections anymore because parts of the nested menu will be off the viewport.

The chosen solution for this case was to switch to the mobile navigation, which works independent of screen width down to 240px.

The same applies to tablets. If the screen width allows to move to all pages, the desktop menu will be shown. If not, the mobile menu.

All this involves only one breakpoint, and it is an ultra-simple css only solution.

I freely admit that it is not applicable in *all* situations, but in this case it works, it is robust, very crossbrowser-compatible (even works on symbian os w/ opera mini), it is fast and it is dead easy to implement.

If you are not happy with that, so be it. You are free to chose a different solution.

Cheers,
Alex

[paulbaker]

My point is mainly, why would someone on a desktop machine want to see your mobile style navigation?

So that they can navigate.

When using a narrow browser window (for whatever reason), some sites (this forum for example) have fixed width and the only way you can navigate is by horizontally scrolling. And I've seen some sites where you can't navigate at all. Mobile style navigation is better in those situations. And it's not really "Mobile navigation" - it's just different navigation.

[oliverseddon]

I design/build all my site to a minimum of 968px wide, anything less than that can get out in terms of desktop browsers.

So for me desktop/large tablet is 968px and above, and mobile/small tablet is 967px and below. Neither need to see styling for the other, as it generally won't result in a good user experience.