Tools And Plugins To Create A Responsive Website

Responsive Web Design is an approach to web design in which a site is crafted to provide an optimal viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices (from desktop computer monitors to mobile phones).

This is the future of web design, a future that is already here and we must prepare ourselves for it with the help of tools and plugins that other web designers and web developers have created.

Responsive CSS3 Slider Without Javascript

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

Responsive Layouts, Responsively Wireframed

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

SelectNav.js: Responsive drop-down navigation for mobiles and small screen devices

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

RefineSlide

RefineSlide is a 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content.

jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

WP-Flex

A responsive, foundational WordPress theme boilerplate for developers submitting to the WordPress.org theme repository

Responsive Design bookmarklet

It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.

The Responsinator

The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

Foldy960 – A responsive 960 grid

Foldy960 isn’t aiming to be Yet-Another-CSS-Framework and we hesitate to use the term “Boilerplate”. Foldy is just a little kit and some extra classes to get you going on making your 960.gs design responsive.

The Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside < ul >. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.

Pull Down for Navigation

Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery.

Trying to condense a navigation down onto a mobile screen tends to push the actual content of the site down and out of initial view. Luke Wroblewski has explored some solutions in Mobile First but I’ve developed something that I haven’t come across just yet. In fact, in the process of writing this tutorial, Brad Frost released a great roundup of responsive navigation patterns so I suppose this could be an additional technique to add to his list.

FitVids.JS: A lightweight, easy-to-use jQuery plugin for fluid width video embeds

Responsive Tables

Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

Better background images for responsive web design

Riloadr: A cross-browser framework-independent responsive images loader

The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time.

Flexslider

FlexSlider was built to serve up the best responsive jQuery slider around. I had built a few implementations of responsive sliders on different client projects and noticed that there was a glaring hole for plugin support with the concept. I wanted to build a plugin that would serve the newest of beginners, while providing seasoned developers a tool they could use with confidence. What has come forth is this, FlexSlider. I plan to maintain this plugin and provide support to users implementing FlexSlider into their sites. Responsive web design can be tricky, but I hope that FlexSlider serves to uncomplicate the process, just a little bit.

Adaptive Images: Deliver small images to small devices

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

inuit.css—cooler than a polar bear’s toenails

inuit.css is a lightweight, constantly updated CSS framework which provides you with a pragmatic and feature-rich starting point for all your projects.

It is crammed full of useful snippets, best practices and has additional plugins to extend its usefulness further.

jQuery Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container

Protofluid

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. It works within your website, HTML5 app or game in the form of a single JavaScript include.

Screenqueri.es

Yet another boilerplate for responsive (mobile) web design

Responsify

Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

Fluid Baseline Grid System

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

Understanding viewport

This is a set of simple HTML pages with various viewport and media query settings, that help me (and hopefully you as well) to better understand the working of the viewport meta tag and its @viewport CSS-based counterpart

Responsive Web Design Testing Tool

This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.

Unfortunately, with the way browser security works, you are unable to navigate your site through the frames that your website appears in. The only way this is possible is if you host the testing tool on your website’s own hosting. I have provided a github repository for you to download and install the tool on your own site.

Foundation for WordPress

As a neat-freak designer, it’s sometimes intimidating and frustrating looking at a WordPress theme framework that’s jam-packed with unnecessary extras and bloated code. That’s why I created Foundation, for WordPress, which offers only the necessary essentials to get your site running, with all the jazz of responsive web-design.

Wirefy: A Rapid Responsive Wireframing Tool To Demonstrate Hierarchy And Functionality

Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don’t get hung up on colours, fonts, other design elements. It’s meant to be another tool for your development kit that provides the most basic styles as a foundation.

Response

Response JS is a lightweight jQuery (or Zepto) plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

CSS-Only Responsive Layout with Smooth Transitions

A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.

asdkjasdasd

Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive GS is free to use on any project, personal or commercial, though it would be super rad if you left the author credits at the top of the CSS files.

Responsive Ad Checker

Responsive banner ads have variable widths so their size is defined by their height only. The following seven sizes provide a nice range of heights suitable for almost any situation.

Responsive Horizontal Layout

In this tutorial we’ll create a horizontal website layout with individually scrollable content panels. We’ll change the layout for smaller screens, making it responsive.

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

Responsivepx

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

The Semantic Grid System

Resizer: A responsive design bookmarklet

slabText – a jQuery plugin for producing big, bold & responsive headlines

Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Many, many more examples can be viewed further down the page.

syze

syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change – it works cross-browser, cross-device, cross-library and is less than 1KB.