Responsive Design Blog Image

The Best Tools for Responsive Design

Responsive design has been around for a few years now, but in 2013, there was a sudden push to convert websites to be responsive. Responsive was so big in 2013 that Mashable calls it “ The Year of Responsive Web Design”. If you’re still unfamiliar with the concept of responsive design, don’t worry, we’ll go into that below followed by some of the best and most popular tools used in responsive design:
Lunar Comps

The uptick in the responsive design trend is probably related to the rapid growth of mobile in 2013 as well. More people are searching and shopping from their phones than ever before, so having a website that appears well on any screen size is important. If the rise of mobile device use is driving the responsive design trend, you may be wondering why you should choose a responsive site over a mobile site. While searching the web from your phone, you have probably encountered sites that say they are redirecting you to the mobile site or ask you if you would like to view the mobile version or the full site. The problem with mobile sites is that they often strip down the site and eliminate content that the developers deemed to be less important. This greatly limits user experience and prevents them from exploring your site to its full potential.

The benefit of responsive design over a mobile site is that none of your content is hidden when users view it on various devices whether it be a PC, a tablet, or a smartphone. Responsive design is not only geared toward mobile viewing, it also affects how websites respond when you change the size of your viewing window. Here is an example of how a website adapts when it is responsive:

Here’s what a responsive website looks like in a full-screen browser window:
Lunar Responsive

Now here is the same website, when the window is smaller (look to the tool bar icons at the bottom for reference:
Responsive Small Screen

As you can see, even in a much smaller window, the site still looks attractive and is easy to read. All of the content and images appear in the window and the only direction you need to scroll to see more information is downward. If this were a non-responsive website, you would see a left-to-right scroll bar on the bottom of the window which you would have to use in order to see the full view. Also, on a mobile device, you would need to zoom in to see the content if the site were not responsive. This could make it very difficult to click icons and view the content.
How a website becomes responsive
Because responsive design requires a different approach to web design, there are multiple frameworks and web coding languages that have been developed to facilitate responsive design. Three of the best and most popular tools for responsive design are Bootstrap, Foundation, and Skeleton. These frameworks are open source and all use variations of CSS to act, essentially, as a template for designers. For those unfamiliar with the term, a framework is a collection of folders of standardized code. They are useful because they speed up the development process, and you can also create a series of websites in a consistent style if you choose.

The key to building a responsive website is achieving fluid width. This means that the site adapts to any window width and all content appears within the horizontal space of the page. For this to occur, content and images must change size, text must wrap around images, and the width of columns must change to accommodate the changes in page width. Some examples of ways you can make page elements adapt when the page width is changed include: setting the max width for the page, setting the max width of images, and change the arrangement of the main navigation buttons. If you set the max width of an image to 100% it will become proportional to the page. When the page size is changed, an image with a max width of 100% will shrink or grow proportionately. When navigation buttons at the top of a page are responsive, they can go from being in a horizontal line, for example, to being vertically stacked like this:
Responsive Site Demo
Photo: Creative Bloq

Here are some simple and useful CSS tricks for taking a website responsive.


1. Bootstrap
Perhaps the most talked about responsive framework is Bootstrap. It was built by a designer and developer at Twitter who noticed that there were consistency problems across their projects when multiple designers were involved. Bootstrap uses JavaScript, HTML, and a form of CSS called LESS CSS (Leaner CSS). The responsive elements in Bootstrap are included automatically. In fact, you have to manually disable responsiveness if you don’t want implement it (which nobody should want to do). LESS CSS gives designers more to work with style-wise and saves them time when developing. Here are some examples of websites that have been built using Bootstrap.

2. Foundation
Foundation is a responsive framework that uses SASS (Syntactically Awesome Style Sheets), which is an extension of CSS like LESS.

3. Skeleton
Skeleton stresses how quickly a responsive site that looks good on any screen size can be developed. It uses basic CSS, which is less customizable, but simpler to build.
Any one of these three frameworks are a great choice for responsive web design. They help speed up the design process, they provide inspiration for developers who are less confident in their design skills, they allow for customization, and they are all free to use. Don’t know the first thing about responsive frameworks, HTML, or CSS? We are happy to take your website responsive for you, contact us.

Image Credit:
Are You Ready to Start Your Project?