I have created a mobile friendly layout for my project, but this is just an initial design, and basically the left and right sidebars disappear and the header and description changes alignment from left to center. But that was just the beginning.
It evolved several times like, after I am done with the initial design, I realized that there should be a way to make the left sidebar reappear and make it disappear so I added the menu button at the left most side of the control bar and a close button at the sidebar itself. I should make this menu button active only when the sidebar is invisible while the close button should disappear when the screen width is greater than 800px.
Then tested it on an actual mobile phone and it seems that as the screen width reaches 700px, the sidebar becomes too over crowded because the the texts have become a lot bigger and the left sidebar width should adjust according to the screen width. Doubling its width should do the trick.
Then I tested it again using a 7" android phone and realized that what if the device changes orientation and the screen width changed while the left sidebar is visible, so it should also respond to that change as well because as the screen size change the text size changes automatically so if the sidebar width stay the same, it will be overcrowded again.
Here is the finished layout I have made so far:
Pls note that the video shows only the windows chrome browser, it looks very different when viewed on android browser.
No comments:
Post a Comment