Top Tools For Responsive Web Design Part 1: Responsive Frameworks and Icon Fonts

top tools for responsive web design cover photo

Is Responsive Design Right For You?

Whether you’re building your first website or planning a redesign of an existing site, you ought to consider the question of mobile configuration. Modern web design has transcended the confines of the desktop browser. Web developers must consider not only a user’s choice of browser, but also the devices that are used to view the site. There are several ways to address this question: responsive web design (RWD), dynamic serving, and building a dedicated mobile site.

These options differ primarily in the way that they use HTML and CSS to address the question of mobile adaptiveness. When you build a dedicated mobile site, you must generate separate HTML and CSS, as well as provide a separate URL for the mobile version.

If you plan on using a dynamic serving configuration, your URL will remain the same as the desktop site, however you must still generate a different version of the HTML. RWD is widely considered to be superior to the other two options, as it maintains the same URL and HTML, while the CSS takes care of the mobile responsiveness.

Responsive web design poses several advantages over other mobile configurations:

  • One set of content
  • One codebase
  • Easier to maintain
  • Complies with Google’s recommendation
  • SEO friendly


Links:
Google Mobile Website Main Documentation
Google Mobile Website Recommendations
Google Web Fundamentals

How To Get Started

As a web developer, you have many tools at your disposal to aid in ensuring that your website makes the best use of it’s responsive design. These tools address various aspects of the responsive design process, such as icon fonts, front-end responsive frameworks, responsive images, typography, prototyping tools, and testing tools.

In Part 1, we will cover the first two.

Front-End Responsive Frameworks

Front-end responsive frameworks make designing and coding responsive websites substantially more straightforward, by providing web developers with a set of tools that simplify the process. Frameworks provide HTML and CSS design templates for forms, buttons, navigation, interface, and typographic components that have been tried and tested before release. As such, frameworks facilitate rapid prototyping, a streamlined design process, and a final design that is fully scalable to all devices.

Bootstrap

Bootstrap is the most widely used responsive front-end framework out there. The Bootstrap community is simply enormous, so any issues can be easily addressed by posing a question online, or searching through the forums. Bootstrap features extensive UI elements, non-native SASS support, native LESS support, and a rapid development prototyping philosophy.

There are a few drawbacks to Bootstrap’s rapid development philosophy. Namely, sites designed using Bootstrap tend to look similar to the thousands of other sites designed using Bootstrap.

Foundation

Foundation is a responsive front-end framework that promises to take web development to the next level. It’s natively built using SCSS, meaning that you get the power of semantic code, faster styling, and many useful coding features.

The Foundation philosophy is what really helps it stand out from the crowd. Foundation utilizes a build-your-own philosophy, which means that your site is much more likely to stand out from a site built on, say, Bootstrap. Foundation employs a mobile first approach, and includes a lot of functionality that addresses the specific needs of mobile web development. Some of these mobile-friendly features are:

  • Interchange – allows you to selectively load images and entire sections of a site based on the client device type
  • Fastclick.js – makes it look like pages load faster when you click an item
  • GPU acceleration – animations perform significantly smoother
  • Off canvas – powerful navigation implementation tool
  • Small, medium, and large grids – allow for the creation of device-specific layouts for mobile, tablet, and desktop

Skeleton

Skeleton is a lightweight, responsive front end framework designed to be used on small projects, where the in-depth utility of more expansive frameworks may not be needed. Skeleton was designed to be more of a starting point for building a site, rather than a full framework.

That is, while Bootstrap and Foundation provide an extensive set of tools and user interface design elements, Skeleton only gives you a handful of standard HTML styles and a basic grid that is adequate in most cases. The idea behind this is that anything beyond what is provided by Skeleton can be addressed with custom lines of CSS. It could be quite cumbersome if you intend to write a complex site using Skeleton, which is why it is better suited for simpler and smaller projects.

Icons

Most websites use icons. They tend to make communicating commonly used concepts much quicker, and they help make your page prettier to look at. Icons used to be made from images, which took longer to load and used up a lot of bandwidth with every page-load. Currently, the most common icon format is .SVG (scalable vector graphic), which significantly decreases the memory footprint of pages. This is especially relevant now, as mobile device users demand faster page loads, and less data usage.

Iconjar

Iconjar is a program that functions as an icon organization system, and a curated list of premium icons, free of charge. It supports SVG, OTF, TIF, PNG, and GIF files, although if you wish to decrease your site’s memory footprint, you ought to use SVG.

Fontastic

Fontastic is another great tool that gives you access to over 9,000 free vector icons online. Fontastic allows you to create your own icon fonts from the available icon libraries in seconds using it’s intuitive process. Every change you make in Fontastic is instantly synced with their servers, giving you access to them, on-the-fly, from any device. It also allows you to assign an unlimited number of icon fonts to specific projects, all of which are stored on the cloud.

  • Alex Wilmer

    Your Stylus syntax is incorrect, and also a bit unconventional.

    Variables:

    // the equals are required, should drop the `$` for a more typical JavaScript variable (camelCase)
    someVar = #12345

    Importing
    // single quotes, should be importing `.styl` extension, dropping the extension altogether
    @import ‘grid’

  • Pingback: Top Tools for Responsive Web Design Part II: Testing and Prototyping - Codal()

  • Dan

    You might want to also use the Mobilizer tool which shows how your design looks across the actual phones and tablets