public marks

PUBLIC MARKS from Spone with tag "responsive design"


Precise control over responsive typography · MadebyMike

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 · sendwithus

by 1 other (via)
Open Source Email Templates Responsive, Free, and Community Driven

Strip - A Less Intrusive Responsive Lightbox

by 2 others
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.

Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started

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 Nav — Responsive Navigation Plugin

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

The gradient chart : Cennydd Bowles

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).

filamentgroup/responsive-carousel · GitHub

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


fancyBox - Fancy jQuery Lightbox Alternative

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.

Responsive Navigation Patterns | Brad Frost Web

by 5 others
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.

How to Approach a Responsive Design | Upstatement

by 3 others
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.


Leaving Old Internet Explorer Behind — Joni Korpi

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 Media Buttons on Mobile-First Responsive Designs - Themble

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 · Responsive jQuery slideshow

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

by 1 other
‘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.

Adaptive Images in HTML

by 8 others
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.

filamentgroup/Responsive-Images - GitHub

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

Spone's TAGS related to tag "responsive design"

@font-face +   Boilerplate +   carousel +   css +   design pattern +   email +   font +   galerie +   html5 +   icônes +   ie +   image +   images +   javascript +   jQuery +   library +   lightbox +   mailing +   media-queries +   mobile +   mobile first +   modal +   navigation +   newsletter +   outil +   overflow +   plugin +   polyfill +   preview +   ressource +   retina +   référence +   screenshot +   scripts +   slider +   slideshow +   templates +   tool +   typographie +   vectoriel +