PUBLIC MARKS from Spone with tag "responsive design"

It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.

Open Source Email Templates Responsive, Free, and Community Driven

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The picture element and a couple of new attributes for the img element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari). The new picture element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.

Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.

Here’s a little tool I’ve found useful when deciding whether to build a responsive site or a separate site for different devices (eg a mdot smartphone site to accompany a ‘full’ site).

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard

Patterns, resources and news for creating responsive web experiences.

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

Here’s some of the more popular techniques for handling navigation in responsive designs

A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design.

Here at Upstatement, we experimented with how to solve design and layout problems within a responsive framework. We learned a helluva lot as we went, like how to choose the right design software, strategies for thinking through breakpoints, and some best practices for designing in the browser.

Instead of enabling media queries in the browsers that don’t support them, like Internet Explorer 6–8, I chose to simply serve them the Narrow Layout, slightly enhanced with Paul Irish’s IE conditional classes.

Social Sharing buttons can be brutal on load time (Facebook I’m looking at you) and with speed being a crucial factor in building a mobile version of your site, it can be a pain to try and maintain all those scripts without slowing down the site in the process. Loading Facebook, Twitter, Google’s +1 button, and other sharing buttons for a mobile site isn’t ideal.

AdaptiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work 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 and that all the images are same size.

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed. Adaptive Images is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

An Experiment with Mobile-First Images that Scale Responsively & Responsibly