In my role at Kohl's, I was in charge of the Homepage and Coupon page of http://www.kohls.com. As expected, the homepage and coupon pages are constantly changing on a daily, if not weekly, basis. We call these sale events, and they can range from subtle differences such as a removal or addition of content to an entirely different sale event layout. The general structure of the page stayed the same, however the content and images that relates to deals and coupons, along with link changes, are dynamic. Here is a sample from September 23rd to September 25thview site
The layout of content was done through Kohl's proprietary grid system, as much of the homepage at the time of writing this. It was similar to Bootstraps. However, each item is layered over an image and has the links, text absolute positioned. For rows of links, we were free to use flexbox. Some of the limitations were accounting for Internet Explorer 11. So modern approach and techniques in CSS such as CSS Grid were unavailable to us.
Being a part of a huge company and on the marketing side, it was crucial to abide by a11y and to make anything we are coding on the homepage accessible. Because this is a major retailer visited by thousands of users on a daily, if not weekly basis, we could not afford any accessibility violations.
At Kohl's we used a CMS to time pages. Each page is loaded into a slot. Within this slot we could decide when pages can go live and overlap. The web, mobile, tablet and app were also split due to the way the infrastructure was at the time. So extensive testing is needed.
There was little research needed for this specific project. But regardless, these were what we had to keep in mind when creating content pages on the homepage and coupons:
This was the general markup of our homepage, very specific CSS IDs and classes. Most of the content I would write needed to be encapsulated within
div class="grid-content" and
div class="grid-box d8x8" Most of the images came from the design team, since the homepage is set up like a newspaper / ad. It was important for our images and assets to be laid out perfectly on all devices before we add in any texts or links atop of the images. My team worked directly down the center of the page.
Due to how short and sporadic events were, this design and code is not live anymore. Kohl's also rebranded their site so the homepage does not look like this neither. However, at the time, it was what I dealt with at Kohl's along with QA checks. The main take away was abiding by a11y and making sure our site was accessible as possible not just in colors and contrast, but also on-screen readers. Semantic HTML, alt tags, aria-breaks were heavily used when designing pages like these for Kohl's, especially in the marketing department. There is no repo for this but a link to the current Kohl's site is provided below.