Splashnology Magazine

Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Web Design: Fresh Tools, Articles and Tutorials

It’s been a while since we have last time posted our three roundups dedicated to responsive web design. A lot of new tools, tutorials, articles and techniques appeared and have decided to come up with the latest and newest collection of the freshest materials.

Advertisement

Articles and Tutorials

Responsive Grids With Susy

Responsive Grids With Susy in Responsive Web Design: Fresh Tools, Articles and Tutorials

How we built MSN UK’s responsive Olympics site

How we built MSN UK's responsive Olympics site in Responsive Web Design: Fresh Tools, Articles and Tutorials

How To Create A Responsive Navigation

How To Create A Responsive Navigation in Responsive Web Design: Fresh Tools, Articles and Tutorials

How to Create a Responsive Image Slider in jQuery and CSS3

In this tutorial we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3.
How to Create a Responsive Image Slider in jQuery and CSS3 in Responsive Web Design: Fresh Tools, Articles and Tutorials

Developing Responsive Designs With Opera Mobile Emulator

Developing Responsive Designs With Opera Mobile Emulator in Responsive Web Design: Fresh Tools, Articles and Tutorials

Optimizing Typography in Responsive Web Design

In this article, we will be discussing typography vis a vis responsive web design. Our focus will be on typography strictly in relation to responsive web design only.
Optimizing Typography in Responsive Web Design in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive background images with fixed or fluid aspect ratios

Responsive background images with fixed or fluid aspect ratios in Responsive Web Design: Fresh Tools, Articles and Tutorials

Gamma Gallery: A Responsive Image Gallery Experiment

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
Gamma Gallery: A Responsive Image Gallery Experiment in Responsive Web Design: Fresh Tools, Articles and Tutorials
Demo

Mythbusting the Responsive Design Myth

Mythbusting the Responsive Design Myth in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Menu Concepts

Responsive Menu Concepts in Responsive Web Design: Fresh Tools, Articles and Tutorials

The Responsive Designer

The Responsive Designer in Responsive Web Design: Fresh Tools, Articles and Tutorials

Breaking Down the Responsive ReadWrite Redesign

Breaking Down the Responsive ReadWrite Redesign in Responsive Web Design: Fresh Tools, Articles and Tutorials

Nikolay Ninarski: Get Responsive in 30 Minutes

Nickolay Ninarski presenting techniques for getting a responsive website in 30min at WordCamp Sofia 2012.
Nikolay Ninarski: Get Responsive in 30 Minutes in Responsive Web Design: Fresh Tools, Articles and Tutorials

Viewport Meta Tag For Non-Responsive Design

Viewport Meta Tag For Non-Responsive Design in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive CSS Timeline with 3D Effect

In this tutorial we are going to experiment with perspective and use a radio input trick to create a fun css-only timeline-like structure.
Responsive CSS Timeline with 3D Effect in Responsive Web Design: Fresh Tools, Articles and Tutorials
Demo

Responsive Image Techniques & Resources

Responsive Image Techniques & Resources in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Web Design is So More than Just a Few Breakpoints

Responsive Web Design is So More than Just a Few Breakpoints in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Pricing Tables Using :target for Small Screens

We’re going to make a fluid pricing table, then alter the way it’s displayed at different viewport sizes using media queries.
Responsive Pricing Tables Using :target for Small Screens in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Images for HTML5

Responsive Images for HTML5 in Responsive Web Design: Fresh Tools, Articles and Tutorials

Breaking Down Media Queries for Responsive Web Design

Breaking Down Media Queries for Responsive Web Design in Responsive Web Design: Fresh Tools, Articles and Tutorials

Workflows In A Responsive World: From Waterfall To Agile

Workflows In A Responsive World: From Waterfall To Agile in Responsive Web Design: Fresh Tools, Articles and Tutorials

Adopting A Responsive WordPress Theme Is More Than Install-And-Go

Adopting A Responsive WordPress Theme Is More Than Install-And-Go in Responsive Web Design: Fresh Tools, Articles and Tutorials

Coding A Responsive Resume In HTML5/CSS3

Coding A Responsive Resume In HTML5/CSS3 in Responsive Web Design: Fresh Tools, Articles and Tutorials

Create a responsive mobile first menu

Create a responsive mobile first menu in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Web Design is Your Responsibility

Responsive Web Design is Your Responsibility in Responsive Web Design: Fresh Tools, Articles and Tutorials

Animated Responsive Image Grid

A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
Animated Responsive Image Grid in Responsive Web Design: Fresh Tools, Articles and Tutorials
Demo

Responsive 3D Panel Layout

Responsive 3D Panel Layout in Responsive Web Design: Fresh Tools, Articles and Tutorials
Demo

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.
CSS-Only Responsive Layout with Smooth Transitions in Responsive Web Design: Fresh Tools, Articles and Tutorials
Demo

Create A Responsive, Mobile-First WordPress Theme

Create A Responsive, Mobile-First WordPress Theme in Responsive Web Design: Fresh Tools, Articles and Tutorials

Adding Responsive Videos to your Design

Adding Responsive Videos to your Design in Responsive Web Design: Fresh Tools, Articles and Tutorials

The case for responsive web content: it’s all about the users

The case for responsive web content: it's all about the users in Responsive Web Design: Fresh Tools, Articles and Tutorials

Building a Responsive, Mobile-First Navigation Menu

Building a Responsive, Mobile-First Navigation Menu in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive images – how to prevent reflow

Responsive images – how to prevent reflow in Responsive Web Design: Fresh Tools, Articles and Tutorials

Mobile Apps: The Trouble With Using ‘Responsive Design’

Mobile Apps: The Trouble With Using 'Responsive Design' in Responsive Web Design: Fresh Tools, Articles and Tutorials

Tools

Singularity

Singularity is a responsive grid system designed to be as flexible and small as possible while still providing an enormous amount of power. Singularity was originally conceived as a way to create asymmetric grids using modular scale but has evolved to support uniform column widths, asymmetric, and compound grids.
Singularity in Responsive Web Design: Fresh Tools, Articles and Tutorials

34Grid Responsive Grid System

34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row.
34Grid Responsive Grid System in Responsive Web Design: Fresh Tools, Articles and Tutorials

rwdgrid

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays.
rwdgrid in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive CSS Framework Comparison

Bootstrap vs. Foundation vs. Skeleton.
Responsive CSS Framework Comparison in Responsive Web Design: Fresh Tools, Articles and Tutorials

Viewport resizer

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
Viewport resizer in Responsive Web Design: Fresh Tools, Articles and Tutorials

One% CSS Grid

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly.
One% CSS Grid in Responsive Web Design: Fresh Tools, Articles and Tutorials

Base

Base in Responsive Web Design: Fresh Tools, Articles and Tutorials

Full Screen Responsive jQuery Image and Content Slider:RSlider

Full Screen Responsive jQuery Image and Content Slider:RSlider in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Carousel

Responsive Carousel in Responsive Web Design: Fresh Tools, Articles and Tutorials

Toast

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.
Toast in Responsive Web Design: Fresh Tools, Articles and Tutorials

Screenqueri

Screenqueri in Responsive Web Design: Fresh Tools, Articles and Tutorials

Wirefy

Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions.
Wirefy in Responsive Web Design: Fresh Tools, Articles and Tutorials

The Boiler

The Boiler in Responsive Web Design: Fresh Tools, Articles and Tutorials

Responsive Layouts, Responsively Wireframed

Responsive Layouts, Responsively Wireframed in Responsive Web Design: Fresh Tools, Articles and Tutorials

You might also be interested in..

Responsive Web Design: New Tools, Articles and Tutorials
Responsive Web Design Toolbox: 50 Handy Tools and Services
Responsive Web Design: Helpful Articles, Techniques & Tutorials

1 Comment

  • http://twitter.com/device_lab device_lab

    Awesome selection of RWD tools, thanks Andrew! Will link to this on my resource page.

  • Advertisement