Apr 25, 2016 22:02:02 GMT -5
Trying to make my first fully responsive forum design on v5 and of course I'm having issues as flex-box isn't as easy to grasp as I thought, especially without that much time to really sit and ponder and experiment with it.
I would love advice on it and tips to make it better, please and thank you:
sinnerstouch.boards.net/Of course I am going to start with making everything on the home back responsive by re-writing most of it with flex-box. My main issues is what to do with the nav on mobile?
Apr 26, 2016 12:39:05 GMT -5
It seems that the most common way to handle responsive navigation is to break the items down into a hamburger menu. Or rather, from a mobile-first approach, the links are already in a hamburger menu, and progressively enhance into a full-size menu.
Personally, I don't like hamburger menus; I like the concept of toggling, but not the use of three horizontal lines as an indicator. I've come to prefer the three vertical dots used in Google Material Design. Ellipses, I feel, is a better indicator for additional information.
Here are some good examples of responsive navigations:
responsivenavigation.net/This design is good. Full width can be tricky, but works well with enough padding. Although, I would like to see more separation among categories, the shoutbox, and information center; they seem to blend together, and it makes it difficult to discern where one starts and the other ends. That may just be me.
Apr 27, 2016 2:53:52 GMT -5
Thank you
elli! Much needed information and advice. :3
I'm around and round we go
Moderator
Apr 28, 2016 20:48:01 GMT -5
If you haven't already explored the typography side of responsive design, I would definitely take a look at using vm instead of px:
css-tricks.com/viewport-sized-typography/I really hope PB ultimately utilizes it in the end when they come out with v6 because it is super super important, especially for a forum in which there is a ton of reading. The font size has to scale to the content just as much as the width and boxes.
I would also take a look at how Bootstrap does their responsive layouts. It's what MOST of the internet these days is using, so definitely worth looking and getting some help with learning to use flexible grids:
getbootstrap.com/Thank you for taking a stab at it!
I think responsive forums is definitely a toughie but I know this is gonna turn out awesome.
Apr 29, 2016 18:37:30 GMT -5
OMG! Resizing fonts? Why haven't I known about this earlier?!
I would also take a look at how Bootstrap does their responsive layouts. It's what MOST of the internet these days is using, so definitely worth looking and getting some help with learning to use flexible grids:
getbootstrap.com/I've actually tried bootstrap before and I honestly for the life of me can't get it.
Maybe I can take another stab at it and if I'm still dumbfounded then I don't know, lol. It's kinda dumb because I learned everything I know now by myself with trial and error, no tutorials really at all and I started learning with the release of V5 so it took some time. So trying to learn all of this new stuff at once with the limited time I have is quite frustrating.
May 5, 2016 1:03:56 GMT -5
Slowly making changes, it's working on desktop when I adjust my screen but not mobile still. Hrm.
May 13, 2016 16:55:18 GMT -5
I'm making progress! Opinions? Thoughts?
May 13, 2016 17:07:27 GMT -5
@trinityblair The link doesn't work anymore!
Aug 13, 2016 3:15:42 GMT -5
Still looking for critique please!
Feb 8, 2017 0:23:04 GMT -5
OMG! Resizing fonts? Why haven't I known about this earlier?!
I would also take a look at how Bootstrap does their responsive layouts. It's what MOST of the internet these days is using, so definitely worth looking and getting some help with learning to use flexible grids:
getbootstrap.com/I've actually tried bootstrap before and I honestly for the life of me can't get it.
Maybe I can take another stab at it and if I'm still dumbfounded then I don't know, lol. It's kinda dumb because I learned everything I know now by myself with trial and error, no tutorials really at all and I started learning with the release of V5 so it took some time. So trying to learn all of this new stuff at once with the limited time I have is quite frustrating.
(almost one year later) what about bootstrap do you not understand? I'm fairly experienced with it.
Edit: Also! I really enjoy your design on your forum, but the category listing is confusing to the eye. I'm not sure where to look for the information I'm looking for immediately. Especially with "Classifieds" and "Development" not having their own images, that really throws me for a loop. It makes them seem like they're not categories/boards, or makes them seem like they're something else.
Feb 9, 2017 3:29:32 GMT -5
OMG! Resizing fonts? Why haven't I known about this earlier?!
I've actually tried bootstrap before and I honestly for the life of me can't get it.
Maybe I can take another stab at it and if I'm still dumbfounded then I don't know, lol. It's kinda dumb because I learned everything I know now by myself with trial and error, no tutorials really at all and I started learning with the release of V5 so it took some time. So trying to learn all of this new stuff at once with the limited time I have is quite frustrating.
(almost one year later) what about bootstrap do you not understand? I'm fairly experienced with it.
Edit: Also! I really enjoy your design on your forum, but the category listing is confusing to the eye. I'm not sure where to look for the information I'm looking for immediately. Especially with "Classifieds" and "Development" not having their own images, that really throws me for a loop. It makes them seem like they're not categories/boards, or makes them seem like they're something else.
I just don't get it. Like... all of it- lol.
That was the point. I wanted those to look different. The boards with images are the role play boards, those without are OOC boards. I prefer "Classifieds" over "Information" and "Development" over "Plot Pages".