Collective #106

View All

Responsive SVG * What's my browser * Typographic Email Design * Animatron * ScrollMagic * PixelBudda * Select to Switch

Cover design by Emanuel Serbanoiu
codrops_collective_106S

Inspirational Website of the Week: Optimo Chicago

Collective106_WOTW

A brilliantly designed website with interesting transitions and a very creative way of showing the product. Our pick this week.

Get inspired

Rethinking Responsive SVG

Collective106_responsivesvg

A very inspiring article by Ilya Pukhalski on how to see beyond the traditional way of making SVGs responsive and explore new possibilities.

Read it

What browser am I using?

Collective106_whatsmybrowser

A fantastic web app that will make it easy to know what browser your client or anybody is using.

Check it out

A Typographic Approach to Email

Collective106_typographicapproachemail

A brilliant article and experiment on functionally improving email through better typography. By 1910 Design & Communication.

Read it
Advertisement

Animatron

Collective106_animatron

Animatron is an interesting online tool that allows you to create HTML5 animations and interactive content by designing frames on a timeline.

Check it out

ScrollMagic

Collective106_scrollmagic

ScrollMagic by Jan Paepke is a jQuery plugin for scroll interactions. It's a complete rewrite of its predecessor Superscrollorama by John Polacek.

Check it out

Speed Design with Illustrator

Collective106_speeddesign

Vincent Le Moign will show you why Illustrator is one of the hottest choices for quick interface design. Check out the 14 useful tips and download the free template.

Check it out

PixelBuddha

Collective106_pixelbuddha

A brand new, high-quality resource site for professional designers, brought to you by the folks behind Smallicons and Ballicons.

Check it out

Wireframe & UI Kit

Collective106_wireframekit

Christopher Rowe has designed this UI kit for smarter wireframes that provide more visual cues than the default ones.

Get it

You jacked my scroll bro

Collective106_scrolljacking

Read Matthew Smith's thoughts on "scrolljacking" in this article on Medium.

Read it

How to make a Flappy Bird in HTML5 - Part 1

Collective106_FlappyBirdHTML5

Thomas Palef will show you how to create Flappy Bird in HTML5 as part of his "one html5 game per week" challenge.

Read it

Select to Switch

Collective106_selectswitch

A brilliant little script that converts a select input into a on-click switch. Very useful for short lists of options.

Check it out

Lessons learnt building ViziCities

Collective106_vizicities

Read about the lessons learnt during the development of ViziCities, the recently released 3D city and data visualisation platform.

Read it

Build with Chrome

Collective106_buildwithchrome

Hans Eklund shares some learnings from the "Build with Chrome" project, especially regarding the move from a desktop-only experience to a multi-screen solution that supports both mouse and touch input.

Read it

rowGrid.js

Collective106_rowgrid

A useful and light-weight jQuery plugin for placing items in straight rows like seen on Google Image Search, flickr, Shutterstock and Google+ images.

Check it out

What We Mean When We Say "responsive"

Collective106_responsive

Lyza Danger Gardner analyses the "responsive" word and the confusion around Responsive Web Design and why we might simply have to drop the expression.

Read it

iPhone and Android (PSD)

Collective106_iphoneandroid

A great freebie by Billy Kiely: a fully-editable vector PSD of devices.

Get it

The Art of HTML Semantics: Part 1

Collective106_htmlsemantics

Kevin Suttle dives into HTML semantics and shares some interesting facts and use cases of common tags.

Read it

Selectors as Sass Variables?

Collective106_sassvariables

Scott O'Hara explores the usefulness of adding entire selectors to a variable and shows why it can be problematic in some cases.

Read it

Sport glyph vector icons (PSD)

Collective106_sporticons

A nice set of sports-related icons by Alex Pronsky.

Get it

Free Font: Anglecia Pro Text

Collective106_angleciapro

A delicate serif font typeface designed by Andriy Konstantynov from Mint Type. The regular and italic styles are for free.

Get it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Would you like to send us some news?

The Collective features the latest news and resources from the web design & web development community. If you have spotted or created something that you'd like see published in the next issue, just submit the resource or article here.