Tablet updates / Additional updates

[CurtisALee]

Hey team,

Here's an initial PR fixing all of the big / noticeable issues on tablet sizes. I've also used this as an opportunity to improve other areas of the site layout and fix any other issues I've noticed. I've also got the accessibility up on the pages where it wasn't quite 100 (Still one minor contrast issue which I'll discuss further at the end of this comment).

I've also gone through and done a bit of code housekeeping, such as removing old assets and using variables and mixins where needed.

Also tested these changes on various browsers, and all looks good.

---

Tablet fixes

Original Marvel link

Apart giving the 'Expertise' and 'Blog' pages a more of an exciting layout (will begin exploring some ideas as a seperate piece of work tomorrow), all of the immediate issue pointed out by Chris (+ a few extras) have been sorted. I figured it'd be better to sort the actual layout problems first, and then discuss ideas on what can be done to bring a bit more life to the other pages that aren't necessarily broken, but just a bit boring.

The main pages for you to check out are:

• Homepage
• Company
• Case studies (Index and main case study pages)
• Analysis banner and product page
• eBook (Improved mobile responsiveness on posts)

For the old case study pages (Heha! and Laced), I haven't changed too much in terms of styling, but the layout has been improved and now makes better use of the space available. No more full width lines of text on tablet etc.

Accessibility fixes

The main issues were heading tags not falling in a sequential order. I think this was due to individual mixins having their own heading order that didn't quite flow with the rest of the page where they are actually called.

The existing issue is one that I wanted to discuss with the team first before sorting:

On the pages where this blog preview grid is used, the background heading 'From the blog" (or "Keep reading"), is the only item on the page (And on the site) causing an accessibility issue, due to the low contrast it has against the background.

I thought about increasing the contrast, however it looked awful and defeated the purpose of it feeling like a secondary background element behind the post cards. The best option seems to be removing it all together, as it feels a bit pointless bringing our score down for the sake of a bit of background decoration, and changing the contrast anymore will look awful.

Wanted to see what other peoples thoughts were instead of just going ahead and deleting it? OJ's already stated he's not a fan of the heading on one of our calls, so I know he won't miss it haha.

Next steps

Come up with some improved layout ideas for the 'Expertise" and 'Blog' pages.
Make any changes based on your feedback to this PR.
Add an analysis page link to the nav (Once we've agreed on the link name and design style).

---

Have a look through when you can anyway, and let me know your thoughts on the accessibility problem.

Cheers.

[CurtisALee]

I've updated both the Expertise layout and the Blog grid layout.

Could @michaelcarter or @ojsdude add a "View more" (load more) button when they get the chance? The grid will initially display eight post items to begin with, with the view more button offering a way to reduce the wall of items you currently see.

I see this button as being the default style found on the homepage / case studies.

Cheers.