1

Using the grid layout, we can easily write HTML (small medium large) to display tables of information differently on different devices.

For menu bars, however, sometimes a completely different layout is needed. So the HTML has to be written twice, once for web and once for mobile. And we will show/hide depending on device.

My question is: is this show/hide considered a hack to responsive design? Is there a better way to do it?

allenylzhou
  • 1,431
  • 4
  • 19
  • 36

3 Answers3

1

There are responsive menus built in to Zurb, but if you want two drastically different menus, sometimes it's best to duplicate a little code and hide/show them when appropriate.

It's not the cleanest solution, but definitely happens everywhere. You just have to decide when the trade-off is right for you.

Ryan Killeen
  • 120
  • 6
0

If you can figure out a way to create html that is easily restyled into a mobile menu using CSS alone that is the cleanest way. Typically all mobile menus need some sort of toggle / button to deploy so you are going to at least add JavaScript or jQuery into the mix.

The hiding and showing of content (also via media queries) isn't really a hack but is a much faster way of working when prototyping.

For example, I often use the Foundation Top-bar when prototyping, then create a custom menu with basic Foundation components and then create the mobile menu using responsive-nav as it does not have the jQuery dependency and is much more light weight. In contrast, a lot of sites use the top-bar and offcanvas elements, both of which are very heavy in CSS and JS when compared to just using the grid, buttons, dropdown, etc.

As Ryan says there is a tradeoff. You have to decide how important clean semantic markup is to you and your project and decide if it is worth the extra time and effort up front, for largely the same experience for the end user.

JAMESSTONEco
  • 2,051
  • 15
  • 21
0

For my AngularJS app I'm working on now I recently tried using Foundation 5's Interchange to swap partials based on window width. Unfortunately it only worked partially. Some problem with the way Angular does things. Not going to get into details but because that did not work I searched for different solutions like

  1. https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92
  2. https://github.com/reallyseth/angular-adaptive
  3. AngularJS different views based on Desktop or Mobile

Granted those are all solutions for your problem if your using Angular and that might be a good move to add Angular your arsenal. Consider the new launching of Foundation for Apps which is Foundation but targeted towards web app creators. It is based on Angular and ui-router.

If you are just doing a simple site (product, portfolio, blog) then using Foundation 5's Interchange seems like it would be the most elegant solution if you really want to use a different html layout for mobile and desktop menu bars (nav bars).

Community
  • 1
  • 1
  • Often using interchange as a pseudo-partial based on media queries is ok with non-js components but I am not sure that js based foundation components function correctly when placed in an external file and loaded this way. Additionally you are going to take an additional performance hit for loading the external files, rather than being interpreted inline via CSS/Media Queries. – JAMESSTONEco Dec 10 '14 at 00:05
  • So it is better performance wise to just have a navbar coded into the `index.html` in a website or app rather than be called in as a view partial. It makes sense unless the application state changes and a new nav UI has to be shown. Hmm but now I'm starting to reconsider the idea of just hiding and showing (via CSS) the new/old UI elements depending on the state. Hmm. –  Dec 10 '14 at 17:51