Designing a Responsive Website

Display Size

This is the diagonal measure of the screen, from corner to corner in inches, just like you would measure a TV screen.

Hardware Pixels

Hardware Pixels

This is the actual physical screen’s pixel resolution of the screen. We commonly refer to this as the screen resolution.

Css Pixel

CSS Pixel

This is the size used in CSS or JavaScript, to determine the display size on that device. This is the actual size of graphics on the browser.

Screen Size Comparison in CSS Pixels Versus Hardware Pixels and Display Size

When designing a responsive website, you want to use CSS Pixels as your measuring unit, not only because it defines your Breakpoints, but it’s also the only accurate measurement unit for designing your responsive website. CSS Pixels is the ‘Actual Size’ at which the user sees the graphics on a browser, regardless of his screen resolution. Let’s take the iPhone to illustrate this, but this example also applies for any mobile device, tablet and desktop, Retina 4K display, 5K or even HDTV. Simply put, CSS Pixels is the ‘Actual Size’ at which a user sees the browser window. Hardware Pixels is the ‘Screen Resolution’ and Display Size is the size of your device.

iPhone 4 Screen Size

iPhone 4

CSS Pixels: 320 x 480
Hardware Pixels: 640 x 960
Display Size: 3.5 inch

iPhone 5

iPhone 5

CSS Pixels: 320 x 568
Hardware Pixels: 640 x 1136
Display Size: 4 inch

iPhone 6

iPhone 6

CSS Pixels: 375 x 667
Hardware Pixels: 750 x 1334
Display Size: 4.7 inch

iPhone 6 Plus

iPhone 6 Plus

CSS Pixels: 414 x 736
Hardware Pixels: 1080 x 1920
Display Size: 5.5 inch

How to Determine Your Responsive Layout Formats

Traditionally, the first decision graphic designers needed to make to create a website, is to decide on a fix format in hardware pixels. Since responsive websites are made to scale content and use breakpoints to adapt it to different formats, you are no longer designing a fix format website. This is a ‘major’ issue for most print designers when designing for the web today, because they need a fix format to create their graphics. Well, guess what? You’re still designing it using hardware pixels if you are using a regular screen! Why? It’s because you are most likely only using ‘one computer screen’ to design your site. You just need to understand that the user sees graphics in ‘CSS pixels’, which is the ‘actual size’ at 100%. The actual size is what matters most and not the screen resolution when designing. You want to design at the size at which the user is going to see it on his device. If your computer screen has a regular screen, then it’s using hardware pixels at 100% (actual size). Let’s illustrate this.

Using Hardware Pixels to Design a Responsive Website

When designing a responsive website, we suggest you use 3 different sizes: 1) For a regular desktop, use the width of 1200 pixels, 2) for an iPad the format is 768 x 1024 pixels and 3) for an iPhone 5 the format is 320 x 568 pixels. Why these 3 formats? Simple, because a 1920 x 1080 is the most common HD desktop size, the regular size iPad is a common tablet size and the iPhone 5 is the smallest size you should be designing for. But in fact, you are actually designing for 5 formats when you consider that a mobile device can be used either vertically or horizontally.

Using Hardware Pixels Responsive Design

Warning Regarding Screen Resolution

If you are designing using a regular desktop screen, selecting Pixels as a unit in preferences is perfect. But if your computer has a Retina Screen, a 4K or even a 5K Resolution, be extremely careful, because your pixels may be rendered by your computer as Screen Resolution Pixels and your graphics will appear much, much smaller. For example, when I’m working on a Mac in Adobe Illustrator, regardless that I use a Retina display or regular screen, my graphics appear to be the same size, but when I use Adobe Photoshop on a Retina display, the graphics appear twice as small compared to a regular screen.

How a Responsive Layout Works

When designing a responsive website, you want to make the layout grid and content as flexible as possible so it scales well. Instead of providing fixed-width layouts, you now have to determine Breakpoints where the layout and content rearranges itself. How do you test your site’s responsiveness? Once you have a development site up and running, grab the bottom right handle of your web browser window and make the window smaller up until it reaches the first breakpoint and also visualize how responsive the site’s content really is when scaling. Do this up until the browser window is scaled down to a phone format. As a professional, you should use the Google Chrome Inspector, which is a free professional tool found in the Developer Tool Menu of the Google Chrome browser. Basically, adaptive layouts for responsive websites boil down to two techniques: 1) Identify breakpoints where your layout and content need to change, and 2) In between breakpoints, visualize how content is scaled proportionally.

Desktop Layout: 1200 pixels wide

The first thing you need to decide is, will your desktop format use the maximum width of the screen at full screen or will you establish a maximum width of let’s say 1200 pixels for it’s content? Well, there’s no definitive answer. It all depends on the website content and your design. We always find it’s best that the layout is responsive to the width of the window, compared to having a 970-px wide layout on a 1920-px wide screen, where half of the screen is blank at full screen, but depending on your design this may look awful. You can also do both, for example; the top header and bottom footer will scale the entire width of the browser window, but the main content will be limited to 1200 pixels. This way, the website is still 100% responsive to any browser window size but the main content stays grouped in the middle to stay well-organized and designed. In this example, we are using a 4-cell layout (or 4 columns) for the 1200 hardware pixel wide version. The 4-cell layout will be used up until the browser window is scaled down to 768 CSS pixels wide.

Desktop Screen Size

iPad Layouts: 768 pixels wide when Vertical and 1024 pixels wide when Horizontal

When designing for tablets, a regular-size tablet should be considered like a small desktop when horizontal, because it has 1024 CSS pixels in width, while a mini tablet should be considered like a large phone. It’s important that you adapt your responsive layout grid accordingly. Your first Breakpoint should be for a regular tablet size when viewed ‘Vertically’, or when the browser screen reaches 768 CSS pixels wide. At 768 pixels, you should also consider to start using the Hamburger Menu. This 2-cell layout could also be used for a mini-tablet when viewed ‘Horizontally’, but when the mini-tablet is viewed ‘Vertically’, it should display a 1 cell layout like a phone format. In our example below, when the tablet is viewed horizontally, it has the 4-cell layout or 4 columns if you prefer, but when it’s viewed vertically and reaches its breakpoint, it goes to the 2-cell layout.

iPad Horizontal Screen Size
iPad Portrait Screen Size

iPhone 5 Layouts: 320 pixels wide when Vertical and 568 pixels wide when Horizontal

The phone format is by far the most challenging format to design because it’s so small. On a phone, a single cell (1 column) design is what works best. Make the typography large and easy to read. Keep content to a minimum. Make the buttons, the size of a fingertip. Use the Hamburger Menu to navigate. Design your site so it uses all the functions that come with a modern phone, like maps and calling. Make it easy to share on social media sites. Avoid extra-long pages that never end. Take into account that the browser window will be bigger when scrolling down and smaller when scrolling up, because of the browser menu that will appear on the screen. Also, take into account that smartphones come in various formats, the smallest being the iPhone 5, for which you are designing, but today many phones are the size of an iPhone 6 Plus, which is almost a small tablet format. Design accordingly.

iPhone 5 Screen Size

Note regarding the number of Cells used in your design

We used a 4-cell layout grid to illustrate how 4 cells adapt to a 2-cell layout and to a 1-cell layout. Of course depending on your design and its content, the number of cells will vary and a cell can be any width.

Google Chrome Inspector and Device Testing

The Google Chrome Inspector is a free professional tool that lets web developers and graphic designers test their responsive websites on their computers. It is found in the Developer Tool Menu of the Google Chrome browser. The best feature for the graphic designer is that the Inspector will simulate your site as it will appear on any device or brand, in order for you to quickly test it. It will render and simulate the page ‘As Is’ and is very useful, especially to test font size, because certain devices might load and display them differently. This being said, the Google Chrome Inspector should never replace ‘device testing’, because the Inspector has limitations and you cannot expect that it will be 100% accurate all the time. On the other hand, it’s a quick and effective way to test a responsive web page on-the-fly.