sin3

image longdesc

Published by Sindre Wimberger on June 16th, 2014




Icon Fonts

Published by Sindre Wimberger on May 21st, 2014

Introduction

Ten reasons we switched from an icon font to SVG

@font-face for icons? Compaitibility Research

Accessibility

Responsive Webdesign

Published by Sindre Wimberger on May 15th, 2014

Design / Workflow
Improving Your Responsive Workflow with Style Guides

Der Workflow im Responsive Web Design – Prototyping & Co.
http://blog.kulturbanause.de/2013/06/workflow-responsive-web-design-prototyping/

What We've Learned About Responsive Design
http://www.newfangled.com/contentmgr/showdetails.php/id/24561

Responsive Webdesign Workflow – Sechs Praxistipps
http://www.mobile-zeitgeist.com/2013/06/24/responsive-webdesign-workflow-sechs-praxistipps/

Resources
A collection of resources about the various aspects of responsive web design.
http://bradfrost.github.io/this-is-responsive/resources.html

How to Make Any Website Responsive

Where BBC News developers blog about responsive design.
http://responsivenews.co.uk/

Images

HTML5 Picture Element
The picture Element - W3C Working Draft
A responsive image polyfill
http://scottjehl.github.io/picturefill/

Current users, polyfills, prototypes, and implementations - picture-element
https://github.com/ResponsiveImagesCG/picture-element/wiki/Current-users,-polyfills,-prototypes,-and-implementations

Responsive Images: Use Cases and Documented Code Snippets to Get You Started
http://dev.opera.com/articles/responsive-images/

Responsive Image Rendering in TYPO3 CMS 6.2
http://typo3.org/news/article/responsive-image-rendering-in-typo3-cms-62/

Slideshow: Introduction into Responsive Images (german)
http://maddesigns.de/responsive-images/

Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News.
http://responsivenews.co.uk/post/50092458307/images
https://github.com/BBC-News/Imager.js/

Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more.
http://www.smashingmagazine.com/2013/10/24/automate-your-responsive-images-with-mobify-js/
http://www.mobify.com/mobifyjs/v2/docs/

Responsive Image as Service (RIaS)
http://abhishek-tiwari.com/post/responsive-image-as-service-rias

Image Lightbox, Responsive and Touch‑friendly

Sensible jumps in responsive image file sizes

iFrames

Tables
A group of plugins for responsive tables.
Bootstrap - Responsive tables
http://getbootstrap.com/css/#tables-responsive

Responsive Tabellen – Responsive Retrofitting Teil1
http://maddesigns.de/responsive-tables-2393.html

E-Mail
A workflow for responsive emails using Ink and Grunt
https://medium.com/p/32d607879082

SVG

Published by Sindre Wimberger on May 7th, 2014

Introduction



Techniques
Can I use SVG
http://caniuse.com/#feat=svg

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility.

grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike.

takes your SVG drawings and processes them to a CSS icon kit, coming in several different flavors.
http://iconizr.com/


A fast, caching, dynamic inline SVG DOM injection library.
https://github.com/iconic/SVGInjector

A simple JavaScript plugin which detects SVG images on your website, and automatically "looks" for a standard image fallback for those older, less capable browsers.
http://benhowdle.im/svgeezy/

SVG `text` and Small, Scalable, Accessible Typographic Designs

Advanced
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
http://snapsvg.io/

Animated SVG Icons with Snap.svg
https://github.com/codrops/AnimatedSVGIcons

The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS
http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Accessibility
Tips for Creating Accessible SVG
http://www.sitepoint.com/tips-accessible-svg/

Using ARIA to enhance SVG accessibility
http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility

Iconsets

NodeJS

**SVG O**ptimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
https://github.com/svg/svgo

Node-WebKit based GUI for SVGO
https://github.com/svg/svgo-gui

SkipTo plugin by PayPal Accessibility Team

Published by Sindre Wimberger on May 5th, 2014

SkipTo is a replacement for your old classic “Skipnav" link, (so please use it as such)! The SkipTo script creates a drop-down menu consisting of the links to the important places on a given web page. The menu will make it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.