The proportions on the desktop header on levels 2/3 are slightly off. Compare with prod. Specifically, the padding at the right and left sides of the screen could be slightly decreased so that the header and banner are slightly wider. This would then give you space to increase the logo which is too small -- it should be flush with the top of the search box and bottom of the color tiles. Also, the colored tiles should be a uniform width (each the same) not have width matching width of text inside.
Note too that on the home page, the size of the logo needs to be increased to match prod and the colored boxes should match the ones on levels 2/3. Right now the colored boxes on the home page are different from those on levels 2/3.
The proportions on the desktop header on levels 2/3 are slightly off. Compare with prod. Specifically, the padding at the right and left sides of the screen could be slightly decreased so that the header and banner are slightly wider.
Are you referring to these areas?
The content of the pages are set to 'break' at a set of sizes to be most applicable to the widest variety of devices and screens:
480px
768px
992px
1200px
I wouldn't recommend against going against this doing custom widths for these breaks, for each bit of content.
-- it should be flush with the top of the search box and bottom of the colour tiles
Since I've spend some time on this, I don't believe we'll have enough room. On production for example I took this screen shot from production, it doesn't line up with the logo, and never did.
Also, the colored tiles should be a uniform width (each the same) not have width matching width of text inside.
Currently it uses a layout to make best use of the available space, but I can change this if you insist, though it will break other improvements like exact alignment with the grid:
vs.
I've spent a lot of extra time on the header in particular trying to make it work well at all resolutions, and improve upon it while still staying true to the original look. I can make things exactly the same as they were on production before but we lose a lot in doing so.
No problem. We definitely don't want to break anything unnecessarily.
The issue is that until now I hadn't noticed the alignment between the nav tabs and the grid on stage, only that the nav tabs at lower resolutions appeared too wide (and, as noted, were uneven on desktop). I was going to point this out when we got to desktop/iPad review. When we got to that review, I was also going to note that we were planning to take out the white space between the tiles in the grid and, separately, between the nav tabs so that potentially complicates things.
So, I think the best thing is for me to look into this further and be back in touch. In the meantime, could you make the bottom of the logo flush with the bottom of the nav tabs? See screen shot. I think that would improve things considerably. Also, see the note I've made about the space to take out that I was previously referencing -- it looks like this was a difference space from what you thought. If my indicated space is reduced, it creates more space for the logo size to increase.
Could you go ahead before you go and move the logo down as per the previous comment. I have a meeting to look into this next week, so that change will help us in the meeting.
We've now reviewed this. Overall, we agree that aligning the nav tabs with the grid tiles is a great improvement, so thanks very much for your work on all of that.
Based on what's already up, we'd like to suggest a series of minor tweaks.
1) On desktop the width of the logo is currently 100%. Please increase this to 102% so that it is slightly bigger and that the edges align with the tile below more precisely.
2) First break point, see scree shot below for two changes.
3) Small change on the overlays. See screen shot.
4) Small change re: spacing around tiles so as to match nav tabs. See screen shot. In other words, reduce space between tiles (vertical and horizontal space) so that distances match distances between nav tabs.
5) Adjustments to one of the smaller resolutions. See screen shot.
On desktop the width of the logo is currently 100%. Please increase this to 102% so that it is slightly bigger and that the edges align with the tile below more precisely.
Not sure, I understand this? The Livingstone Online site logo? If so it's limited to a max width of 400px at the moment so you'd prefer it to be 102% of 400px?
First break point, see scree shot below for two changes.
Reduce border resolutions: We can change it to 4px but not 3px as it needs to be divisible by 2 or else it will will render with small gaps due to floating point layout issues.
Overlays should appear after break: Currently they appear on resolutions less than 1024px as was requested in the meeting we had with Angela? What is the final decision?
Small change on the overlays. See screen shot.
Sure thing, I've added 5px.
Small change re: spacing around tiles so as to match nav tabs. See screen shot. In other words, reduce space between tiles (vertical and horizontal space) so that distances match distances between nav tabs.
K. I've decreased the size, it won't match exactly in either case as the space allotted to each is controlled by the browse and will change at various resolutions, but the difference should be imperceptible.
Adjustments to one of the smaller resolutions. See screen shot.
Ah, I see. I thought 1024 was the first break point, but it turns out that it is the second and there is one before it. Let's have the overlays appear at the first break point.
Let's make the padding at left and right only 10px.
Resolved. Thank you.
See screen shot. There is still a resolution where Browse is appearing on the search line when it should appear with icons.
The proportions on the desktop header on levels 2/3 are slightly off. Compare with prod. Specifically, the padding at the right and left sides of the screen could be slightly decreased so that the header and banner are slightly wider. This would then give you space to increase the logo which is too small -- it should be flush with the top of the search box and bottom of the color tiles. Also, the colored tiles should be a uniform width (each the same) not have width matching width of text inside.
Note too that on the home page, the size of the logo needs to be increased to match prod and the colored boxes should match the ones on levels 2/3. Right now the colored boxes on the home page are different from those on levels 2/3.
Are you referring to these areas?
The content of the pages are set to 'break' at a set of sizes to be most applicable to the widest variety of devices and screens:
I wouldn't recommend against going against this doing custom widths for these breaks, for each bit of content.
Since I've spend some time on this, I don't believe we'll have enough room. On production for example I took this screen shot from production, it doesn't line up with the logo, and never did.
Currently it uses a layout to make best use of the available space, but I can change this if you insist, though it will break other improvements like exact alignment with the grid:
vs.
I've spent a lot of extra time on the header in particular trying to make it work well at all resolutions, and improve upon it while still staying true to the original look. I can make things exactly the same as they were on production before but we lose a lot in doing so.
I don't mean to discourage making any changes; just trying to save the baby from going out with the bath water.
No problem. We definitely don't want to break anything unnecessarily.
The issue is that until now I hadn't noticed the alignment between the nav tabs and the grid on stage, only that the nav tabs at lower resolutions appeared too wide (and, as noted, were uneven on desktop). I was going to point this out when we got to desktop/iPad review. When we got to that review, I was also going to note that we were planning to take out the white space between the tiles in the grid and, separately, between the nav tabs so that potentially complicates things.
So, I think the best thing is for me to look into this further and be back in touch. In the meantime, could you make the bottom of the logo flush with the bottom of the nav tabs? See screen shot. I think that would improve things considerably. Also, see the note I've made about the space to take out that I was previously referencing -- it looks like this was a difference space from what you thought. If my indicated space is reduced, it creates more space for the logo size to increase.
Could you go ahead before you go and move the logo down as per the previous comment. I have a meeting to look into this next week, so that change will help us in the meeting.
It should be up there now.
Yes, good. Thank you!
We've now reviewed this. Overall, we agree that aligning the nav tabs with the grid tiles is a great improvement, so thanks very much for your work on all of that.
Based on what's already up, we'd like to suggest a series of minor tweaks.
1) On desktop the width of the logo is currently 100%. Please increase this to 102% so that it is slightly bigger and that the edges align with the tile below more precisely.
2) First break point, see scree shot below for two changes.
3) Small change on the overlays. See screen shot.
4) Small change re: spacing around tiles so as to match nav tabs. See screen shot. In other words, reduce space between tiles (vertical and horizontal space) so that distances match distances between nav tabs.
5) Adjustments to one of the smaller resolutions. See screen shot.
Not sure, I understand this? The Livingstone Online site logo? If so it's limited to a max width of 400px at the moment so you'd prefer it to be 102% of 400px?
Sure thing, I've added 5px.
K. I've decreased the size, it won't match exactly in either case as the space allotted to each is controlled by the browse and will change at various resolutions, but the difference should be imperceptible.
K
See screen shot.
Ah, I see. I thought 1024 was the first break point, but it turns out that it is the second and there is one before it. Let's have the overlays appear at the first break point.
Let's make the padding at left and right only 10px.
Resolved. Thank you.
See screen shot. There is still a resolution where Browse is appearing on the search line when it should appear with icons.