Responsive Design & Why it is Important

Responsive design is a very important aspect of web design and web development. In this day and age, with as many smartphones there are out there, mobile website traffic is roughly equal to desktop browser based web traffic. With so many people using their phones to view websites it’s critically important to have a website that looks good on any screen size, to make sure that your content is easily view able without any issues and that your visitors can navigate your website and get the information they need or become your customer or loyal fan easily.

The goal of responsive web design is to ensure that your users have a good experience on your website. The best system in place at the moment, and the one that you will find on nearly every website that takes advantage of responsiveness, is the grid system. Grid-based systems usually work by making use of media queries like the one below:

/** This is an example of a media query that will activate if your screen has a width of up to 680px; It will then (and only then!) apply the contained CSS. */
@media screen only and (max-width: 680px) {
    .someGridElement { max-width:50%; }
}

/** The below media query only applies to view sizes above or equal to 680px width.* Setting it to 681 is so that we don’t have overlapping rules.*/
@media screen only and (min-width: 681px) {
    .someGridElement { max-width:25%; }
}

If you have been using CSS for a while, this shouldn’t be too big of a step up from what you are used to, but a nice part about responsive design being so prominent is that there are frameworks built already that will make development times a lot shorter!

A few examples of these frameworks are below. Please keep in mind that there are a very wide variety of web design frameworks out there that can be built on and used to construct a myriad of different websites. What’s most important is that you know the benefits and disadvantages of each yourself before investing in any one framework very deeply. Many frameworks are also compatible with existing tools and Content Management Systems, for instance Bootstrap can be installed on an instance of a WordPress website and can be expanded upon, but doing so has its own separate set of advantages and disadvantages. We recommend you look further into any software set before launching your next project.

Bootstrap http://getbootstrap.com/ :

The standard for grid-based, responsive design. It is built on both LESS and SASS, but also has a pre-compiled version in case you don’t feel like being pre-processy. It also comes bundled with a redesigned version of basically all of the default html elements such as check boxes, input fields, buttons, and also has a few that aren’t default, like hover tooltips and an icon font. You can also view everything on GitHub if you feel like making your own fork of it or contributing to the base project. Bootstrap 4 is in the making, and it even has an alpha version available for those who want to give it a test run and give feedback to the developers.

Purecss http://purecss.io/ :

This is another grid-based responsive system that is pretty common around the internet. It is maintained, also on Github, by Yahoo, and is frequently updated. There is also a feature-selector and custom package builder available so that you can choose the breakpoints for the responsiveness. It is also built upon Normalize.css, which is a css file that was created to keep the browser styles between browsers unified instead of having differences in crucial attributes like padding and margins.

Foundation http://foundation.zurb.com/ :

For something that focuses on looks right off the bat, there is foundation. Foundation is another responsive framework that is built on SASS. Its modular design can be expanded upon easily with pre-built, aptly-named, “Building Blocks” that add new functionality to the framework without cluttering the default installation. Things like carousels, overlays, sticky sidebars, and even an effects library, can be added in minutes.

Overall, these are a very few of the total number of responsive frameworks. There are dozens to choose from, but these are three that you might run into contact when looking around. Generally the larger the number of people using a specific framework the more likely it is that you will be able to find resources and updated versions of the software as time goes on. Almost all software solutions today will require ongoing maintenance and upgrades to handle new security threats that emerge over time.