Introduction
Modern Retail has been working on responsive design websites not long after Ethan Marcotte coined the term and released his eBook in 2011. After 3 years of building countless websites utilizing responsive design, we felt like we mastered it. However, we were left with the feeling of wanting more, which probably meant we hadn't mastered it at all. This led us to what we believe is the next way of responsive design, something we're calling full screen responsive design.
Background
Modern Retail has been designing and building websites since 1998, and for a large majority of these websites, the site had a fixed-width in the middle of the screen. Sure we've done other designs where the website was left-justified; however, it never really fully utilized the entire screen size. If you look on the web today, I would venture to guess that 99% of all websites are built this way. The problem with this approach is there's a lot of wasted real estate on the page. This space is usually just dead space which is highlighted here in yellow.
Retailers naturally see this dead space just as they would in their physical store and want to fill it with product.
Full Screen Responsive Design Layout
The idea with a full screen responsive design is to utilize the entire screen, regardless of the size. If the visitor is using a desktop computer with a huge cinema display, then great, let's utilize the entire screen and fill it with product and content. If they are on a table or mobile phone, no problem, make the page responsive so elements on the page fit natively within that display.
Ok, here are some examples of what this looks like in action.
Homepage - Desktop
Shopping List Page - Desktop
Product Page - Desktop
Content Page - Desktop
Homepage - Tablet
Homepage - Mobile
We realize this is a simple concept, but look around the web and you'll notice that most websites are built to be a fixed-width in the middle of the screen. Yes, these same website might also be responsive, but very often, they are not utilizing the full screen as shown above.