You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

Worth Reading

Consider if you actually need jQuery, you might not…

Blair Enns shared the email line that’s client repellent

Sam Norton published a beginner’s guide to SASS

Ian Murphy wrote about how RWD is still the future of web design

Aqeel asked the question: What’s with putting the CSS in the head?

Steven Bradley wrote about how to use custom properties for cascading variables

Alex Young wrote about the art of handling errors

Boxes That Fill Height (Or More) (and Don’t Squish) from Chris Coyier

We published 40 Tiny Web-Based Apps & Tools for Web Designers

New Resources & Services

A List Apart Pattern Library

Nightwatch.js – A UI automated testing framework based on node.js
0

SVGMagic – jQuery SVG fallback plugin
1

Image Lightbox (Responsive and Touch-Friendly)
2

DevDocs – Combines multiple API docs in a fast & searchable interface
3

Sitespeed.io – Analyze your website speed and performance
4

One Page Scroll – Create an Apple-like one page scroller website
5

Sublime Text Cheat Sheet
6

Designer Freebies

iPad iOS7 Kit (Sketch)
7

Stripes & Co – A Line-Styled Icon Set (65 Icons)
8

Juntos – One Page Template for Charities (HTML & JS)
9

UUUU Icon Set (30 Icons, SVG)
0

Apple Devices Mockup
1

LEGOlize Yourself (PSD)
2

Here are the best freebies for designers from January 2014. We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, PS actions… and everything else in between.

Free Fonts

Blenda Script

Blenda Script

Last year French designer Zaven Najjar set himself the laborious task of redesigning, in his own unique style, a classic rap music poster everyday for 100 days. Dr Dre, Snoop Dog, Eminem, Jay-Z, 50 Cent, Tupac, and many, many more are all in there. He has inventively called the completed 100 poster series Raposters, and they can all be found here.

Below we have highlighted our favorites:

The Raposters Poster Series:

Dr. Dre & Snoop Dog – Still Dre

Tupac Shakur – Changes

Booba – Ma Definition

Cypress Hill – Insane in the Brain

Eminem – Lose Yourself

DMX – Where the Hood At

50 Cent – 21 Questions

Run DMC – My Adidas

Wu Tang Clan – Protect Ya Neck

0
Beastie Boys – Intergallactic

1
Snoop Doggy Dog – Who Am I (Whats My Name?)

2
Jay-Z – Picasso Baby

3
Nas – I Can

4
Public Enemy – He Got Game

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

The Conference by Media Evolution 2014

Sydney ✈ Stockholm

nballstats

Bakery Interactive

Red Bullet

Heart of the Arctic

Themes Kingdom

Abby Madison

Vigorsolcaptainice

Responsive design has been an emergent practice for web designers since Ethan Marcotte’s 2011 book introducing the concept in detail. But two and a half years later, adoption of the practice has been slow,  even though this year it’s likely more people will access the Web via smartphones, tablets and other new devices than desktop and laptop computers.

That’s why you’ll hear the designers on the bleeding edge of web design at conferences, like Future of Web Design in London this April, urging their peers to learn the fundamentals of responsive design and begin pitching responsive sites to their clients.

User experience designer and researcher Stephanie Rieger said people will not only read the Web but buy things if the mobile experience is right. That experience can be tailored to suit a multitude of devices, she said, using techniques such as responsive design.

“Right now, we’re at this critical stage where there is an awareness of responsive design and an awareness of mobile,” Rieger said. “It’s not a nice to have thing anymore; it’s how your customers are reaching you every single day. So it’s time to get it right.”

Rieger pointed to a few major sites that recently had a mobile-over-desktop traffic tipping point: ESPN.com, the world’s most popular sports news site, had its mobile readership eclipse desktop in September 2013, and this holiday season more than 50 percent of shoppers buying from Amazon.com did it from mobile devices. Cutting edge web designers are creating responsive sites, said web designer Jason Pamental, but like with any technological shift there have been slower movers that haven’t come around.

“The vast majority of web designers don’t know anything about responsive design, and we can’t lose sight of that,” Pamental said. “There are still a whole lot of people that design and are doing things that end up on the Web who don’t understand what responsive is, and how much of their design knowledge would be useful online if they just understood how the Web works.”

Part of the problem, Pamental said, is not being able to educate clients on the benefits of a flexible site that offers a rich experience to users no matter how they’re accessing the Web.

Here are a few ways to illustrate Pamental’s point: Using the source code search engine Meanpath, there are 1.4 million sites that use a media query (asking which device is doing the viewing) with “max-width” close by (bespeaking of responsive design).

MeanPath crawls “over 200 million websites” for HTML source code. Using the roughest back-of-the-envelope math, that means there is only a maximum of 0.7 percent of sites crawled by Meanpath that use responsive design. This isn’t the most precise methodology; the point is we’re talking about less than one percent of all websites being responsive.

Guy Podjarny, the CTO of Web and Mobile at Akamai, recently tackled this in his blog with somewhat different results: he created a test that looked for a horizontal scroll bar appearing on smaller screens. After crawling the top 10,000 websites, he discovered 12.2 percent passed his test as responsive design. 

Both Rieger and Pamental will speak about the necessity of designing with mobile in mind at the Future of Web Design conference in London, April 7-9. Rieger will deliver a keynote about the future of mobile, and how it will shape the way we design, live and interact. Pamental is giving a session on responsive typography, something he’s written about recently on Typecast.com.

One the benefits of committing to learning responsive design now is the bleeding edge adopters have already found several pitfalls of the practice, and can advise around them, Rieger and Pamental said.

Pamental said that once fast broadband internet made it into millions of homes, designers started to get lazy and have created bloated sites because they could depend on the very low latency to pick up the slack. That is not going to happen on the majority of mobile phones.

“We’re talking about small screens and crappy connections,” he said. “You know they’re not going to have a high speed experience, but you still have to deliver robust experience quickly. Speed matters. That’s the first element of your design, as to whether it even shows up in the first place.”

Rieger pointed out that this also includes hardware constraints, especially as the array of Android devices has exploded. That makes it critical to test your sites on multiple browsers and devices before launching. Just a few well-chosen test devices can go a long way to inform how a design is displayed and behaves on different sized view ports and form factors, she said.

“Most sites are still way too heavy, and many responsive sites don’t properly account for multiple methods of interaction,” she said. “Over the next year, people really need to think about how to get device testing into their workflow. If you’re a freelancer or small company, you don’t need to break the bank. Even a few test devices are better than none. The difference between a site that’s only been tested on the desktop, and one that’s been iteratively tested on even just four or five devices can be dramatic.”

In this post we have collected a varied assortment of tiny web-based apps and tools that have been built with the purpose of solving a specific solution and act as precious time-savers for web designers. They are those tools that may not be very well known, are not the most powerful of apps, but are really useful and do serve their purpose extremely well.

You will find apps that will help you to create icon-fonts, calculators for working out an elements width in % from PXs, apps that will allow you to create beautiful typography, tools for validating and sorting your CSS, super-simple editors, resources for quick reference, sprite generators, PSD validators, Base64 converters… and much, much more.

Get ready to start bookmarking…

Daturi – An app for converting images to Base64.

px-em – A PX to EM calculator.

PSD Validator – Tool to find out how well your PSD files are structured.

Create CSS3 – A super-simple CSS3 generator.

SassMe – An app for visualizing SASS color functions.

Responsive Wireframes – Quickly create and share RWD wireframes.

iconmelon – Quickly create a library of SVG icons.

GlyphSearch – An app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.

Raw – An app for createing custom vector-based visualizations on top D3.js.

Random User Generator – An API that offers you a randomly generated user.

uinames – A simple tool to generate names for use in your mockups.
0

FontAwesome Finder – Quickly and instantly search FontAwesome icons.
1

typesetwith.me – A web-based typography and legibility sandbox.
2

Type Scale – A typographical visual calculator.
3

Contrast Ratio – A tool to calculate color contrast ratios.
4

CSS Beautifier – A tool that will automatically ‘beautify’ your CSS.
5

RQRWD – A calculator for working out elements width in % from PX.
6

Z-Bugs – A tool to minify and Gzip compress your CSS and JS quickly.
7

Iconogen – A tool to for generating favicons, Windows 8 Tiles and iOS7 icons.
8

MQtest.io – An app to identify which media queries your device responds to.
9

NTH-TEST – A nth-child and nth-of-type tester.
0

11h Re-Size – A tool to check web designs against available screen resolutions.
1

CSS3 Generator – A simple CSS3 generator.
2

SpinKit – Simple loading spinners animated with CSS.
3

SVGeneration.
4

A handy web-based web developer checklist.
5

Makeappicon – A tool for generating app icons of all sizes.
6

Red Pen – An app for uploading your design and getting live feedback.
7

TypeWonder – A useful tool for testing web fonts on the fly.
8

Editor – The simplest Markdown editor ever!.
9

Clipping Magic – A handy tool for removing image backgrounds.
0

Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .
1

OverAPI – Collecting all the cheat sheets in one place.
2

Flat UI colors reference.
3

Unicode character table.
4

Fontsatic – A tool for creating custom icon fonts (over 6,000 icons to choose from).
5

JSHint – A tool to detect errors and potential problems in JS.
6

extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.
7

SpritePad – Create and edit CSS sprites.
8

Css2Less – CSS to Less converter.
9

CSSComb – Sort CSS Properties in a Specific Order.
0