The attempt to improve the mobile layout for this site seems to be underway but, like the previous aborted attempt, it doesn't seem to have started well.
In the images [1] and [2] below are the screenshots (taken on an iPhone 5 with the latest iOS) of HN homepage (where the changes seems to have been published) and article page (where it seems to be unchanged) to illustrate the problems:
1. There is a padding in the body (the white space around the content) that wastes precious screen real state.
2. The font size in relation to the screen width was increased without the proper adjustments in the layout. That caused:
a. The top links to become cluttered and disorganized
b. Both the top and bottom links to span multiple lines without the proper spacing between then, making it easier to click the wrong link
c. The article links and other information to reach the end of the line more often and, associated with the lack of right padding in that area, makes it touch and sometimes spill over the right margin over the white background.
It is very important to have a better layout for mobile devices on HN specially because it is very hard to interact with the site (upvote, click articles or submit) but IMO it should be properly designed, implemented and tested in multiple devices and OS before deployment.
This last point is the most important of all. It is very tempting to implement responsive design via media queries and to neglect tests in the bottom and top range causing screens too wide or too narrow to fail.
Apologies for the long and public post. Hope it helps
Absolutely - while it would be very nice to have an improved mobile experience for the default site as it currently stands this seems quite a bit worse than many of the currently available HN-Reader Apps.
In the images [1] and [2] below are the screenshots (taken on an iPhone 5 with the latest iOS) of HN homepage (where the changes seems to have been published) and article page (where it seems to be unchanged) to illustrate the problems:
1. There is a padding in the body (the white space around the content) that wastes precious screen real state.
2. The font size in relation to the screen width was increased without the proper adjustments in the layout. That caused:
a. The top links to become cluttered and disorganized
b. Both the top and bottom links to span multiple lines without the proper spacing between then, making it easier to click the wrong link
c. The article links and other information to reach the end of the line more often and, associated with the lack of right padding in that area, makes it touch and sometimes spill over the right margin over the white background.
It is very important to have a better layout for mobile devices on HN specially because it is very hard to interact with the site (upvote, click articles or submit) but IMO it should be properly designed, implemented and tested in multiple devices and OS before deployment.
This last point is the most important of all. It is very tempting to implement responsive design via media queries and to neglect tests in the bottom and top range causing screens too wide or too narrow to fail.
Apologies for the long and public post. Hope it helps
[1] http://imgur.com/4uPlzPB
[2] http://imgur.com/18mp2TH