T
We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Responsive Design Toolbelt

Responsive Design Toolbelt

Education

Responsive Design Toolbelt

Posted by: Shawn Broukhim

Thursday, Jun 26th, 2014

Mobile optimization and responsive design are not just buzz words, but really important factors to consider when implementing a mockup. In most cases, clients won't be satisfied unless the application being developed looks consistent amongst the plethora of devices available in the marketplace.

Even though tools like Twitter Bootstrap exist to make responsive design easy and efficient, you might want to build your own responsive design implementation without relying on preexisting libraries. If anything, hand-rolling a responsive design helps to gain a better understanding of the fundamentals of responsive design and allows for more customization than frameworks like Bootstrap.

Here is a list of tools I use when implementing a mobile responsive design:

1. A meta viewport tag
In the < head > of your document, include this meta tag to ensure your @media queries work correctly (written in Haml):

   %meta{ name: "viewport", content: "initial-scale=1, maximum-scale=1" }

2. @media queries
The crux of responsive design, media queries "let the presentation of content be tailored to a specific range of output devices without having to change the content itself." Source: MDN

Media queries allow for certain blocks of code to apply to devices with specific heights and widths.

An example of a media query used for devices with a width smaller than 480px:

   div.archive-container

@media (max-width: 480px)
position: initial
width: 45%
height: 424px
min-width: 288px
margin-left: 0

3. Use the Chrome "Emulation" tool
Whereas one solution might be to simply resize the width of your browser window, Chrome offers a nifty tool to help developers test out their layouts across devices.


  1. Open Developer Tools cmd + i

  2. On the bottom of the window, click on "Emulation"
  3. From the "Device" drop-down menu, pick a device
  4. Click on Emulate
  5. You might have to reload the page & voila, you can checkout your site's appearance on a mobile device.
  6. Use percentages for widths instead of fixed amounts:

   .matches-list-container

width: 50%
margin: 0 auto
min-width: 380px
display: inline-block
padding-left: 10em

but don't forget to set a minimum width! Otherwise, your boxes will just keep shrinking.

Armed with these tools, implementing a responsive task becomes less of a mysterious and daunting task. Gaining experience with implementing responsive design without relying on frameworks like Bootstrap is also important.

Devshop

About Us

Devshop is a highly motivated group of entrepreneurs, developers, and designers that aim to work with companies that are looking for an edge. Each member of our team brings something unique to the table allowing us to cater our services specifically to meet your needs and exceed your expectations.