Help & Resource Center
Follow

Full Screen Responsive Design

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.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments