Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 2

Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 2

In the previous blog post in this series, we talked about why we use Susy to handle our flexible grid layout. Part 2 discusses using Gulp for Image Optimization.

Image Optimizing

You can have a flexible grid system, but if your media assets are not optimized for screen size, your design isn’t completely responsive. Optimization include:

  • minimizing components such as css/javascript
  • compressing images
  • compiling source code such as SASS
  • reloading browsers instead of having to refresh manually

Gulp is a build system that runs tasks necessary for building a web site. One of these tasks is creating responsive images. Gulp can help with this task by taking image files from the original source, run them through an image resizing and optimization process and we can use that to call the correct image for the size screen being used.  The result is that whenever a new image is uploaded to the site, a resized version is created and is ready to be served.

Gulp can also make performance better in any type of device by optimizing the CSS not just by compressing it, but by providing tools to make the CSS files lighter and more readable and resulting in a faster load.

Missed Part 1? Read it now: Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 1

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
8 + 5 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.