Jump to content

Mobile friendly header suggestion


Tom_K

Recommended Posts

Posted

First I have to say IPS4 is really good for mobile devices out of the box. There's just one minor detail that I think could improve the whole experience even more and that is the header.

Screenshot_2016-09-01-07-05-43-1.png

This is the default mobile header. I think it would make more sense, if the coummunity logo/name was moved up next to the three icons in the top (darker) row. If you're on a clean install and you visit the main page (root), the top row doesn't even have the black breadcrumb button in it since there is no level higher to go to and it looks empty. Perfect place for the logo/name.

The black breadcrumb button would move one row below where currently the logo is positioned by default. This is a much better position for this breadcrumb item since it would give it more width space and it wouldn't have to be partly hidden like it is in the screenshot where only "Product fee..." is displayed on the breadcrumb button. If my suggestion were used, you could display the whole name of the forum "Product feedback". It would also allow for longer forum/category names.

Design wise the black breadcrumb button could be positioned on a white background and thus make the mobile look even cleaner. Perhaps it could be modified somewhat to make it even more obvious that the button leads you one level up.

After making these changes the top row could be made to always be visible on top even when scrolling down the page. That way you would always see the page logo (even if you come to the site from a Google search) and wouldn't have to scroll all the way up to get to the activity stream link/icon.

I don't know how others read/use the site but I like to return to the activity stream when I'm done reading a topic. The suggested change would make my browsing experience better.

Anyone else share my point of view?

Posted

Yes, the logo just doesn't look right. On my forum I have changed it around, reducing the width of the breadcrumb, and a smaller banner just for mobiles also placed search in the menu for mobile users. It is a bit of a squeeze on small screens as shown and it loses ability to search in topics on mobiles but I wasn't at all satisfied with how it was previous.

image.jpeg

Posted

Yes, I had a similar idea but didn't want to sacrifice any menu icons and also your solution leaves very little space for the breadcrumb button.

  • 2 weeks later...
Posted

Yes, that would also be an option but I really like the activity stream icon to always be visible for instant access since it's the main source for finding other content and leads visitors to read more than just one topic when they come to the site.

To sum up what I'm suggesting:

  • move the page logo to the top row (where the breadcrumbs are now)
  • move the breadcrumbs below in their own row (allowing them to be full length), perhaps display category as well
  • add option to have the top row be visible all the time

I would appreciate some feedback from IPS regarding these suggestions.

I really like the mobile friendliness of IPS4 but it's 99% there. The topic view could also be stretched to full width. No reason to take up space on the left and right side for borders and padding on mobile devices. On my phone half an inch is lost to this spacing. A cleaner look would give more space for content and make the mobile experience even better.

Posted

I agree regarding the topic view too, no need for that empty space.

I actually removed most of the white space and gaps on when viewing my site on a mobile, if you can access it what do you think? I tried to make it as much like we had on 3.x as possible and it took months!

Posted

It really depends on the specific site, i.e. what type of logo you have. Here is one of mine for example:

IMG_2028.gif

The default layout can handle that just fine and squishing that logo into the available space in the top bar would be a bad idea. So the default layout makes sense because it is rather flexible. Anyone is of course free to customize that. 

 

Posted
30 minutes ago, marklcfc said:

I agree regarding the topic view too, no need for that empty space.

I actually removed most of the white space and gaps on when viewing my site on a mobile, if you can access it what do you think? I tried to make it as much like we had on 3.x as possible and it took months!

I like your forum view but I think I would remove the blue background on topic view. It's a bit too much contrast but that just comes down to personal taste/preference.

28 minutes ago, opentype said:

It really depends on the specific site, i.e. what type of logo you have. Here is one of mine for example:

IMG_2028.gif

The default layout can handle that just fine and squishing that logo into the available space in the top bar would be a bad idea. So the default layout makes sense because it is rather flexible. Anyone is of course free to customize that. 

Actually I think your site is a perfect example of what I'm talking about. To me the logo placement looks out of place. It is not even centered. It's just there with no special purpose and lots of unused space.

It's also an unusual logo, consisting of an icon and regular text (unique font though).

If I were you, I would just use the G icon on mobile. It would look cleaner.

And your install has an extra (plus) icon. Without that icon there is plenty of space for the whole logo.

Look at the attached pic. I think that is much cleaner. And you could still put the + icon right of the breadcrumb or only use the G icon in the top row and have enough space for other icons.

ver1.png

Posted

I am not interested in discussing my layout. Thanks. BTW: You just made things different, not better. 

My point (which you ignored) was simple: the default layout allows flexibility regarding any logo sizes/aspect ratios and yes, even to add more buttons on top through plugins for example. And that’s a good thing as a default. If on specific sites with specific logos other options work better, one can always customize it. You asked for opinions. That was mine. 

Posted

No need to get agressive. You offered your website as an example to prove your point so I posted my opinion. Now suddenly you don't want to discuss it? Seems like you don't want to hear opinions which do not reflect your own views.

I did not ignore your point, I simply do not agree with it and tried to illustrate what I think would be a better solution. I think the page logo on mobile view is not the most important thing. It's good to see which website you're visiting but I would much rather have breadcrumbs with text that is not cut off.

I believe users are more likely to use the breadcrumbs than click the logo and that is what I think should be improved. I suggested what I believe would fix that. What is the point of having a huge logo on mobile view? In my opinion it does nothing to improve the user experience, quite the opposite. Mobile view should be about simplifying things.

I'm not disputing design but functionality. It just happens that I believe a small design change would improve functionality.

And discussing suggestions is the point of this forum, is it not?

P.S.: I didn't expect you to support this suggestion. I know from following these boards that you are biased to defending the way things are in the present. I respect your opinions but it's just something I noticed.

Posted
37 minutes ago, Tomzl said:

No need to get agressive.

There wasn’t a pinch of aggressiveness in my last post. I was just clarifying things. 

Quote

Now suddenly you don't want to discuss it?

I am happy to discus the layout styles in questions, I just don’t need you to “optimize” my site. That’s all I was saying. 

Quote

Seems like you don't want to hear opinions which do not reflect your own views.

So who’s getting aggressive now? ;) That’s not just completely wrong, it’s also a completely unnecessary personal attack. 

Quote

I did not ignore your point, I simply do not agree with it …

You haven’t the addressed my argument about the flexibility of the current design at all. So, yes, you ignored it. You might have good arguments to refute it, but you need to address it somehow first. 

Quote

And discussing suggestions is the point of this forum, is it not?

Sure. I didn’t say otherwise. 

Quote

I know from following these boards that you are biased to defending the way things are in the present.

Then you noticed it wrong. I am defending whatever seems most reasonable against whatever seems less reasonable based on and using clear arguments. I will speak up in an equally clear and direct manner against what IPS says and does regarding software functionalities. Feel free to check out my posts to see that this is true.  

 

Posted
36 minutes ago, opentype said:

There wasn’t a pinch of aggressiveness in my last post. I was just clarifying things. 

I am happy to discus the layout styles in questions, I just don’t need you to “optimize” my site. That’s all I was saying. 

You haven’t the addressed my argument about the flexibility of the current design at all. So, yes, you ignored it. You might have good arguments to refute it, but you need to address it somehow first. 

I just used your site as an example since you said the suggested change would not work on similar sites.

I have addressed your argument by saying that I think the logo is less important than breadcrumbs on mobile view so I do not believe logo flexibility is an important factor. Having more than half the screen width for the page logo is more than enough for me so I do not see an issue there. Even your website does not use the full width for the logo. How could you argument the need for having such a large logo that would not fit what I'm suggesting?

I feel having breadcrumbs that have their titles cut off is a bigger issue.

Making the logo a bit smaller on mobile view doesn't really hurt the user experience IMO but not being able to see the breadcrumb title directly affects the user.

If you have a better idea how to fix it, please share. I just suggested what I believe would work and not have a negative impact.

Do you have a different way of browsing a site you come across through Google that does not require the use of breadcrumbs?

  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...