SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive design question

    Hi

    I re-posted this from the WP thread, as this this more of a css question.

    This page is a responsive page built on the bones theme.

    www.offtapevents.com/category/djs/ (I turned parse off)

    If you collapse the page I lose the menu. I know I need a media query to do this

    something like
    @media 500px {
    display:...
    etc
    }

    But I am not sure what, or how to arrange my list items for a smaller display. Can anyone help?

    Ta
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's an incredibly bad practice (IMHO) to hide a menu on small screens, and gives responsive design a bad name, if you ask me—so shame on Bootstrap, if that's where these styles came from. The problem starts here:

    Code:
    @media (max-width: 979px) {
    .nav-collapse {
    overflow: hidden;
    height: 0;
    }
    }
    Remove that height: 0 and the other rules that set the LIs to float: none etc.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's an incredibly bad practice (IMHO) to hide a menu on small screens, and gives responsive design a bad name, if you ask me—so shame on Bootstrap, if that's where these styles came from.
    I agree with what you're saying but Bootstrap doesn't hide the menu, it collapses it to an icon up the top which I find works quite well.

  4. #4
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I agree with what you're saying but Bootstrap doesn't hide the menu, it collapses it to an icon up the top which I find works quite well.
    I still find that a bad practice myself, it can be frustrating and confusing for a lot of people. If my other half was browsing a site and collapsed the menu into an icon she would be handing the iPhone to me to sort out as "the site just broke", or she would just leave the site.

    Whats better IMO is to create a navigation that is not obtrusive and is designed to work well organically on a mobile device rather than one that you try to hide away.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    We disagree then, what you are saying might be good in theory but in practice, on mobile menus generally get in the way. If you play with http://twitter.github.com/bootstrap/ on a mobile it's pretty easy to navigate.
    Luke W writes about the pros and cons in Mobile First, there's no one size fits all but I think those menu's top right are one of the best solutions out there.

    Your comment about the site visibly 'breaking' and having the phone handed back isn't quite right. Nothing resizes and collapses automatically on a phone, you see the content first, and if what you're looking for isn't there, you'll click the one thing the looks a menu.

  6. #6
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    We disagree then, what you are saying might be good in theory but in practice, on mobile menus generally get in the way. If you play with http://twitter.github.com/bootstrap/ on a mobile it's pretty easy to navigate.
    Luke W writes about the pros and cons in Mobile First, there's no one size fits all but I think those menu's top right are one of the best solutions out there.
    Well I'm talking purely from a usability perspective; where I have to disagree. I agree that no one size necessarily fits all and that navigation (particularly navigation systems that stay in focus regardless of scrolling) get in the way on mobiles.

    From our end user testing we've found that; particularly with more casual computer users and older users; tend to get taken by surprise by collapsing navigation systems that hide away; even into an icon that may be obvious to you or I; importantly as savvy users who are used to this kind of UI both online and in software applications. Of course whether this is really a problem depends on a sites audience.

    Even then, the basic fundamentals of UI design teach not to have Pandora's Box style navigation systems, of which this kind of UI is a textbook example (collapsing a navigation away into a button).


    Therefore, unless absolutely necessary I would try to avoid doing this and would instead investigate alternative approaches, even if that means having to be a bit more inventive or even handle the UI slightly differently on a mobile. Having a responsive design doesn't mean you can't have platform specific deviation where it is better for the end-user to do so.


    Quote Originally Posted by markbrown4 View Post
    Your comment about the site visibly 'breaking' and having the phone handed back isn't quite right. Nothing resizes and collapses automatically on a phone, you see the content first, and if what you're looking for isn't there, you'll click the one thing the looks a menu.
    But that's based on an assumptions that may not be true.

    For one, a user may not intentionally collapse the menu; on touch devices its not difficult to do. If the menu slides away then they may well just hit the button again, however end users don't always react like this; in fact they tend to react in every way you expect them not to react; and the less savvy they are the more this becomes true.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys!

    I now remember there is a little JS script that you can plug in make the menu collapse, however as this menu was done custom I'm unsure if that will work (the script gives you the icon.

    Facebook now uses a similar icon, I am sure this type of nav will become common. Ralph, will this solution work within the framework? Or am I breaking outside of it. I guess the custom nav is doing that anyway. I'll take a look at your suggestion and see what happens.
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by unconformed View Post
    will this solution work within the framework? Or am I breaking outside of it.
    Do you mean the code I pointed to? I'm not sure. I'm not into frameworks, pertly because of situations like this, where you aren't quite sure how your site works. But I'm sure it's viable to modify the code to suit your needs.

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Do you mean the code I pointed to? I'm not sure. I'm not into frameworks, pertly because of situations like this, where you aren't quite sure how your site works. But I'm sure it's viable to modify the code to suit your needs.
    Hi

    Yess- I mean the code you pointed out. For me, I am using the framework as a way of increasing my understanding. See how I go. I find the framework useful when you confirm to it. I can ofcourse add cose to a custom style sheet. I'll let you guys know how I go.
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by unconformed View Post
    I'll let you guys know how I go.
    Cool, please do.

  11. #11
    SitePoint Addict
    Join Date
    May 2006
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have not had a chance to try yet - was up til 1am making bootstrap work on a web app I am making. But, I shall. I don;t think the bs js plugin will be the soloution as it's a custom nav and not the fixed nav bar that sits at the top. I am still trying to figure out how to apply html to wordpress sites. I should just get in there, I Know how it works in theory and have done plenty of tutes.
    I now know a few things, I am slowly getting there. If I can help you with simple stuff I will try, site point is a great place!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •