Microsoft Office 365 marketing site coding

While I was at iSoftStone North America I was on a team tasked with helping the Microsoft Office 365 team handling the marketing sites (products.office.com) implement new features and fix various bugs in 2019-2020.

Skills used: HTML, CSS, SCSS, JavaScript, Visual Studio, Azure DevOps, Git, Accessibility, Agile Development, and Scrum.

Let’s take a close look at just a few of the pages where I helped.

Microsoft Teams page Rates Download Picker

This module was unique for a few reasons. There were 2-3 select boxes to choose a country and currency to see calling rates in a downloadable file based on choices made. These form fields needed accessibility compliant form fields that were not already made. I was able to work with management, designers, and testers to come up with a solution that enables all who use it to get the information they needed to fill out the form and get the right results.

Mosaic tile-styled content

There are quite a few pages on the products.microsoft.com site that have a mosaic tile style of layout. I came in to assist in making sure they allowed different lengths and types of content inside them while still maintaining equal height columns. These also needed to be responsive so the content flows and aligns nicely in various screen sizes. This was quite a task considering there were so many different variations of content used inside them throughout the site.

2 "rows" with different numbers of "columns".
2 “rows” with different numbers of “columns”
The same content on a smaller laptop or tablet view. The widths of each "cell" are more narrow.
The same content on a smaller laptop or tablet view.
The same content on a smaller mobile view. The content begins to stack vertically.
The same content on a smaller mobile view. The content begins to stack vertically.