27 Web Apps & Resources for Responsive Mobile Design




In the past we have written on creative responsive website layouts built for mobile smartphones. This trend has grown very quickly in just a few short years – and with good reason! Why not build your website to support both desktop and mobile platforms? You only need 1 set of codes and the whole layout adjusts based on the screen width.

The only problem is that many web designers do not take the time to go out and read up on tons of articles & tutorials. So in this showcase I’ve collected some amazing online resources and web applications to help with responsive design. The best part is how you don’t need to study into these ideas too much. Just try playing around with a few of these applications and you’ll quickly understand all the hype behind CSS3 media queries and responsive web design.

Retina.js

Retina images for iPhone JavaScript

Screenqueri.es

Responsive screen queries webapp

Mediaqueri.es

Media Queries website showcase mobile gallery

Style Tiles

Style Tiles website design responsive

Responsify

Responsify website webapp design

Gridpak

Gridpak website webapp for responsive design

Adaptive Images

Adaptive images for web design layout

The Goldilocks Approach

The Goldilocks Approach website design

Respo WordPress Theme

Freebie WordPress open source theme

The Responsinator

iPhone responsive website design preview webapp

Response JS

jQuery response.js website webapp scripts

FitVids.js

Fit Vids JavaScript open source

Responsive PX

Responsive pixels website design webapp testing tools

SelectNav.js

Open source SelectNav.js responsive navigation

RefineSlide

Refine Slider jQuery JavaScript library

Campaign Monitor Mobile Guide

Campaign Monitor e-mail newsletters mobile designs

Code a Responsive Navigation

Mobile responsive navigation tutorial

Responsive Ad Checker

responsive ad checker design webapp

CSS3 Responsive Slider

Responsive image gallery design tutorial code

Responsive Tables

Building HTML5 responsive tables library

HorizontalNav

Responsive website horizontal navigation menu

Glisse.js

Open Source Glisse.js JavaScript responsive library

Codebomber

jQuery code resizer responsive layouts

slabText

slabText responsive typography tools open source

Syze

Open source @media queries for JavaScript code

Ari WordPress Theme

Responsive Ari WordPress theme freebie download

The Heads-Up Grid

Website Texture for heads-Up Grid design


Jake Rocheleau

About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!