Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Post History

66%
+4 −1
Q&A Taking our design to the next level: feedback wanted

posted over 1 year ago by Estela‭  ·  edited over 1 year ago by Estela‭

Answer
#6: Post edited by user avatar Estela‭ · 2021-06-11T10:34:22Z (over 1 year ago)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose this for smartphones:
  • ![Alternate proposal for smartphone](https://meta.codidact.com/uploads/1RKAGPHJDt2VEqd9EMoGCQh7)
  • The triangle pointing down would have the same popup menu as the three bars icon. A three bar icon might be better because it is more common. As seen before Reddit also uses a three bar icon. The icon is not a relevant part of my proposal. The main point is a more compact design without loosing functionality or readability.
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose this for smartphones:
  • ![Alternate proposal for smartphone](https://meta.codidact.com/uploads/1RKAGPHJDt2VEqd9EMoGCQh7)
  • The triangle pointing down would have the same popup menu as the three bars icon. A three bar icon might be better because it is more common. As seen before Reddit also uses a three bar icon. The icon is not a relevant part of my proposal. The main point is a more compact design without loosing functionality or readability.
  • And yet another proposal which removes reputation and recovers the hamburger menu. Here the down arrow function is only to change community:
  • ![Header with hamburger menu](https://meta.codidact.com/uploads/xxVNsTFBVtnf2g3Jn2grHqWq)
#5: Post edited by user avatar Estela‭ · 2021-06-10T21:52:42Z (over 1 year ago)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose:
  • ----- Did not look good, doing another try ----
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose this for smartphones:
  • ![Alternate proposal for smartphone](https://meta.codidact.com/uploads/1RKAGPHJDt2VEqd9EMoGCQh7)
  • The triangle pointing down would have the same popup menu as the three bars icon. A three bar icon might be better because it is more common. As seen before Reddit also uses a three bar icon. The icon is not a relevant part of my proposal. The main point is a more compact design without loosing functionality or readability.
#4: Post edited by user avatar Estela‭ · 2021-06-10T21:30:57Z (over 1 year ago)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose:
  • ![Proposed design for smartphone](https://meta.codidact.com/uploads/ge3NeUG5FNm64NU7Dt1xZ1m3)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose:
  • ----- Did not look good, doing another try ----
#3: Post edited by user avatar Estela‭ · 2021-06-10T21:28:53Z (over 1 year ago)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Regarding Monica's comment. This is how Reddit looks on a phone in portrait mode:
  • ![Reddit header](https://meta.codidact.com/uploads/xiUgPX7MYmcP36yKCKdgVhgr)
  • Indeed there is not enough space to fit what we can see in a desktop computer. And it is the same in landscape mode despite there being enough space for more. They probably did not think it was worth the effort.
  • I have to agree with Monica. A design which works everywhere is more important.
  • But are you using the same design everywhere? This is the mockup I get in an Android Samsung XCover 4S model SM-G398FN (1280 x 720) using Chrome:
  • ![Codidact in a phone](https://meta.codidact.com/uploads/E8bqQWU2zv3JpW2hnHAtNQ24)
  • ![Codidact in a phone with menu expanded](https://meta.codidact.com/uploads/MN8DP7BvQibAiHhaiTmbbFo3)
  • The top blue bar is nowhere to be seen and its functionality has been replaced by the circular button with 3 bars.
  • If you are using different designs for smartphones than for desktops then for smartphone I would propose:
  • ![Proposed design for smartphone](https://meta.codidact.com/uploads/ge3NeUG5FNm64NU7Dt1xZ1m3)
#2: Post edited by user avatar Estela‭ · 2021-06-10T09:18:27Z (over 1 year ago)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and our course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
  • Merge the two top bars. Like in Reddit.
  • ![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)
  • Saves space while still allowing plenty of community customization.
  • This is a crude example of what I mean. Position of elements could possibly differ and of course the text I copy pasted is not meant to have a different background.
  • ![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)
#1: Initial revision by user avatar Estela‭ · 2021-06-10T09:16:55Z (over 1 year ago)
Merge the two top bars. Like in Reddit.

![Reddit header](https://meta.codidact.com/uploads/gSWb48GE9BLaHArMD8iDMxby)

Saves space while still allowing plenty of community customization.

This is a crude example of what I mean. Position of elements could possibly differ and our course the text I copy pasted is not meant to have a different background.

![Example of proposed Codidact header](https://meta.codidact.com/uploads/GWpGuvZXMuGWVEUFVTZaooEH)