Responsive Design Case Study


Skills:  responsive design, website design

Date: January 2016

Tools: Wordpress, Adobe Photoshop & Premiere Pro


Laptops & Desktops used to be the focus of Web Design, but this changed with the evolution of new devices such as the iPhone, iPad, and the many others that followed. Responsive Designs delight users and work seamlessly on any device.

I gravitated towards a “Mobile First” approach when I designed the website for Miron Product Design, but I considered all standard devices. The reason I did this is because it’s often easier to start designing for mobile dimensions and then move out to Tablet and then Laptop. However, the design does not simply scale up or down for different device sizes – there is a lot of design thought into how each device will display the content.

Design Considerations:

  1. Easily readable content across all devices– I used a 3-column grid for the Laptop interface. When the screen size gets scaled down to the size of a Tablet the columns transition into a single column to show the content in series. This single column exists for the Mobile Phone as well.
  2. Consistent style across all devices for effective branding– Each display has the logo visible and the color scheme matches on all devices.
  3. Ancillary content is put behind menus for smaller devices- The navigation bar cannot fit on Tablet and Mobile Phone, so this information is nested in the Menu icon on the top right of the screen.
  4. Flexible content size– the content changes size with the size of the display, but this is more complex than simply scaling up and scaling down – There are special layout and interface considerations that differ with Mobile vs Desktop.