Reference: Mobile & Responsive Web Design

Here are some links that relate to our Mobile & Responsive Web Design workbook and class.

Tools for Previewing

Responsinator Preview any website in various devices

Frameworks, Patterns, and Scripts

Bootstrap CSS and JS framework from X (formerly known as Twitter), complete with responsive layout support, useful for creating quick prototypes

Foundation Another popular front-end HTML, CSS, and JS framework containing design patterns that you can build upon.

Skeleton A dead simple, responsive boilerplate. Lightweight and perfect for rapid prototyping.

FitText Paravel Set headlines to fit the available width, great for flexible designs

RoyalSlider – Touch-Enabled jQuery Image Gallery RoyalSlider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices.

Free Bootstrap PSD Templates

Bootstrap Grid Template for 3 Main Breakpoints: 1170px, 970px, & 750px by Dribble

Bootstrap Template with Tons of UI Elements by DesignShock

Examples, Books, Articles & Tutorials

Examples of Responsive Websites

Responsive Web Design by Ethan Marcotte The original article that started it all.

Responsive Web Design by Ethan Marcotte The book based on the article.

Mobile First by Luke Wroblewski Makes the holistic case for considering the mobile use cases first

Multi-Device Layout Patterns by Luke Wroblewski Survey of layout changes across device sizes

Off Canvas Multi-Device Layouts by Luke Wroblewski Survey of approaches to layout changes which place content “off canvas”

Compressive Images (using highly compressed JPEGs for Retina Images) by Filament Group An interesting look at over compressing your JPEGs for Retina displays

Yelp Facebook LinkedIn YouTube Twitter Instagram