closed livingstoneonline/livingstoneonline#158

Desktop: Header proportions

awisnicki

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.

awisnicki

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.

nigelgbanks

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?

layout

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.

prod

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:

screen shot 2017-06-27 at 20 45 21

screen shot 2017-06-27 at 20 47 03

vs.

screen shot 2017-06-27 at 20 48 01 screen shot 2017-06-27 at 20 48 11

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.

nigelgbanks

I don't mean to discourage making any changes; just trying to save the baby from going out with the bath water.

awisnicki

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. screen shot 2017-06-27 at 16 33 01

awisnicki

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.

nigelgbanks

It should be up there now.

awisnicki

Yes, good. Thank you!

awisnicki

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. screen shot 2017-07-11 at 20 26 51

3) Small change on the overlays. See screen shot. screen shot 2017-07-11 at 20 26 56

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. screen shot 2017-07-11 at 20 37 27

5) Adjustments to one of the smaller resolutions. See screen shot. screen shot 2017-07-11 at 20 46 04

nigelgbanks
  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.

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?

  1. First break point, see scree shot below for two changes.
  1. 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.
  2. 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?
  1. Small change on the overlays. See screen shot.

Sure thing, I've added 5px.

  1. 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.

  1. Adjustments to one of the smaller resolutions. See screen shot.

K

awisnicki
  1. See screen shot. screen shot 2017-07-24 at 17 01 00

  2. 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.

  3. Let's make the padding at left and right only 10px.

  4. Resolved. Thank you.

  5. See screen shot. There is still a resolution where Browse is appearing on the search line when it should appear with icons. screen shot 2017-07-24 at 17 14 14

nigelgbanks
  1. Used a different approach but with similar affect.
  2. K.
  3. K.
  4. Can't reproduce, though might be affected by another ticket, but just as likely the display is slightly different between our two machines.
awisnicki
  1. Thank you. Almost there. I'll be asking for one more exceptionally minor tweak but will put that in another ticket. 2/3. Resolved. Thank you.
  2. No longer appearing so all good.