Responsive – Another level?

Hi, that’s an interesting suggestion. You can have a precise control of that ( which max-width for a website element) with the @media queries in the stylesheet of the theme.

It’s at that point when my nav menu starts to wrap onto two lines and the 3-bar menu is the lesser of two evils for me, aesthetically. Functionally, your idea is good but it’s less pretty unless you have a short menu.

If you have a lengthy menu that you don’t want to break in two lines you have two options:

1. use a media query to lower the font size and padding of top-level menu elements for the portion between breaking in two lines and switching to mobile menu.
2. Reorganize your menu so it has fewer top-level elements (maybe register a second menu in the footer for things that are not really needed in top menu, or maybe groups some of the related top-level elements).

Or, of course, a combination of both.

However, I do feel Customizr is missing something in terms of responsiveness. There has been a lot of talk on whether responsiveness is a good practice or not, on whether the decision to shrink/exclude elements from the page should be taken by designer, page owner or customer. Presumably, the customer should take it.

If that’s the case, the best practice is to provide a responsiveness toggle button, which Customizr now lacks. My personal belief is that in half year’s time, the responsiveness toggle will be standard practice in responsive design.

@acub I tend to agree. Might be a future improvement of the theme.
It is now in the to do list with priority 1!
Cheers

Do you mean a popup on landing which lets the viewer choose between phone, tablet, laptop or big screen – and the layout doesn’t respond further once the initial choice is made? I think that would make for the best experience all round – and more satisfying for the designer too.

But isn’t the browser already doing this automatically? Isn’t the solution simply to have pre-defined and fixed stages of responsiveness?

(@acub: it has taken me 3 weeks to reduce my menu top levels down to 9 – and that’s rock bottom ! But they are all single short words. I did try playing with font size and padding but I could never get the carats to line up nicely.)

No, I mean a responsiveness button. Press it and responsiveness goes away, all content is shown just like for desktop and you’re back to pan and zoom. The idea is to let the users see the website how they want.
And it’s not that complicated, either.

All one needs to do is add “responsive” class to body, prefix all declarations in media queries with .responsive and when the button gets pressed responsive class is stripped from the body element. All media queries won’t apply anymore, since they only apply to children of .responsive. Or maybe name the class something shorter, like “-rv”, or (why not?) “-r”, to lighten up the code, since it’s going to be repeated a lot.

Responsiveness is a complex topic and one that I only have a limited knowledge of and none that relates to its technical complexity but my 2p’s worth goes;

Its about making the ‘best’ use of screen real estate, which includes the aesthetics which effects any of the other choices.

Currently the minimised nav bar can take up a significant area with nothing on it except the 3 bar menu button – ie, even if the screen is wide enough to take the 9 items on chappie’s nav bar, it wont unless the logo will fit on the same horizontal line,

How the nav breaks onto 2 lines is a question even if the page is being viewed full screen but becomes more likely to be important as the screen is narrowed. If it breaks onto two lines there are options – either it wraps with items that wont fit on the first line going onto the 2nd or there is a method to test whether it breaks onto 2 lines and if it does, it moves half the items on to the 2nd line.

Giving a user the choice is normally done by having icons of phone, tablet, monitor which seems to work but can sometimes be counter productive – it uses real estate and requires that the user understands they have that choice.

Currently the minimised nav bar can take up a significant area with nothing on it except the 3 bar menu button – ie, even if the screen is wide enough to take the 9 items on chappie’s nav bar, it wont unless the logo will fit on the same horizontal line,

I really don’t think fitting the logo on the minimized navbar would change anything for the better. Most logos would be iconish to the point of not being important enough (they would look like an icon that is supposed to do something when clicked). Besides, the present menu makes very good use of page real estate. It looks good and, when pressed, it creates all the space it needs. The only problem with it is that some people don’t know what it is until they try it. So I’d leave the logo centered and important, above the menu, but i’d write on the menu, left aligned: “Menu:”. That would be good design. Looking good and being clear about the way it functions. While the looks are important, it’s how it functions that makes or breaks good design.

Giving a user the choice is normally done by having icons of phone, tablet, monitor which seems to work but can sometimes be counter productive – it uses real estate and requires that the user understands they have that choice.

How about writing “Full page” or “Full width” on that responsiveness button, having it fixed positioned in the right-bottom corner? I wouldn’t go so far as to differentiate between phones and tablets. It’s display width vs full width (~1000 px).

How about writing “Full page” or “Full width” on that responsiveness button, having it fixed positioned in the right-bottom corner?

Will bottom-right always be visible? Would top-left not be safer?

@acub – re logo:I could have said that better – think you have misunderstood – I may have said it clearer in the first post.
– if instead it had an intermediate stage where the logo went to the top (meaning above the above nav bar) and the nav bar narrowed but still showed the navigation links – that would be good?

At the moment when I narrow my browser to about 800px (sorry I dont have a screen ruler) the logo goes to the top (which is fine) but we also lose the nav links, which seems to be a waste of screen because we have about 800 by 12 px showing only the ‘expand nav’ button. At that sort of res it would often be wide enough for all the nav links.

@chappie: Fixed positioned elements are always visible, chappie, unless you input negative values into top/left/bottom/right to position them outside the window, in which case they would be always outside the browser window. Fixed means relative to browser window and the page scrolls under them. However, the actual position of the button is irrelevant here and could easily be re-positioned through custom CSS.
The talk was about the functionality of the button.
@nicksoph: What you need is achievable through custom CSS. However, I love the minimalist look and I think it wouldn’t look so good with menu elements visible.