User Experience

Apple on Hamburger Menus

“And in practice, talking to developers, they found this out themselves.That people who use their app don’t switch to different sections very frequently when they use this menu. And the reason for that is because the people who use their app don’t know where else they can go. Right? They don’t know because they can’t see the options, or maybe they saw it at one point in time, but they have since forgotten.”

Designing for Large Screen Smartphones

Important points to consider especially in regards to app navigation on a larger phone with respect to one-handed use.

Userium Usability Checklist

A thorough checklist to add to your pre-launch routine.

IXD Checklist

Based on categories of usability (includes examples) v. the technical details like the Userium checklist.

Rethinking Mobile Tutorials: Which Patterns Really Work?

“In summary, user testing showed that users skip or otherwise ignore dialogs, tours, video demos and transparencies. At best, users find them a minor inconvenience. At worst, the patterns significantly aggravate new users who are trying to get into the app.”

Content Strategy

If Don Draper Tweeted: 27 Copywriting Formulas

Includes great examples for each tip.

Responsive Content Modeling

A process to prioritize your content in a collaborative way.

Optimized Design

Responsive Images in Practice

A demo to help explain using srcset, sizes, picture, source media, and source type.

Responsinator

Quickly scroll through and view your website in a variety of viewport sizes.

GIFs to Explain Responsive Design

Absolutely brilliant, just as the real title says!

lazysizes

Intelligently responsive lazy loading of images, iframes, and scripts.

The Science of Email Clicks: The Impact of Responsive Design & Inbox Testing

“MailChimp analyzed over 395 million emails during a 6-month period to examine how a user’s preferred device affects email engagement, investigate the impact of responsive design, and find out if testing your emails can increase click rates.”

CSS

Axiomatic CSS and Lobotomized Owls

After reading this article, I know I’ve reduced bloat in my projects. Not only that, but it’s a powerful syntax to use for staying content living in CMSs, especially since most of those entering the content don’t know HTML or CSS. It’s not bulletproof, but it helps a lot in ensuring consistent styling.

SHRTHND

A tool to condense your CSS into shorthand declarations.

Responsive Email Design CSS Tricks from Campaign Monitor

This email newsletter design is pushing some great techniques into email clients that support them.

Pure CSS Parallax Websites

An enlightening exercise, regardless of your feelings toward parallax.

Keeping CSS short with currentColor

More reliable/accurate than “inherit.” Includes example use cases.

CSS Stats

A pretty fascinating calculation of your stylesheet. Or, check out examples such as this one for Twitter.

Easing functions

Click through the type of easing to see an animated example, plus drop-in ready CSS rules.

Scripts & Frameworks

Pikabu

A framework for rapidly adding off-canvas flyout panels.

UI Bootstrap

“Bootstrap components written in pure AngularJS by theAngularUI Team”

WOW.js

Activate CSS3 animations on scroll.

Tools & Services

Assembly

“Assembly is for those who enjoy building software. We connect you with others who share your interest and complement your skills so you can form distributed software companies. Unlike traditional companies with shareholders and employees, everything on Assembly is created, operated, and owned by a global community of makers, together.”

AngularJS Airpair

Comprehensive resource with articles, workshops, and pair programming opportunities.

Awesome SVG

“A curated list of SVG. The main idea is that everyone can contribute here, so we can center all the informations about SVG and keep up-to-date.”

SVG Editor

Further optimize your SVG on the fly with an online preview.

FREE Download: 60 Flat-Style Mockups

Typography

Google Type Examples

A growing list of gorgeous pairings of Google fonts.

Gridlover

A tool to develop your typographic grid.

35mm Font ($9)

WordPress

WordPress Initialization Process

Ever wondered when a specific hook comes into play? This list was updated in Jan. 2013 around the time of v.3.5.1.

WP Sent Mail (Paid)

“WP Sent Mail adds a “Sent Mail” folder to WordPress that shows you exactly what emails your website sends to your customers.”

SearchWP (Paid)

An improved WordPress searching experience. Includes custom fields, PDF content, statistics, and more.

Creating Maintainable WordPress Meta Boxes

A Tuts+ series by Tom McFarlin.

Update on Query improvements in 4.1

Meta, tax, date, and comment query updates.

Process

Before You Hire a Designer

“The moral of this story is you can’t drop a designer into your environment and expect them to succeed. You’ve got to clearly lay out your expectations, but you also have to set the stage so your designers come in and get to the stuff you need them to do.”

How We Reset 4 Million Passwords

Covering the UX, customer support, & large-scale email deliverability of Envato’s response to Heartbleed/Adobe being hacked.

Misc. Fun

TheGrid.io

A pretty insane algorithmic way to create your website. Definitely worth a visit, props to the makers behind this project!

weekjuice

An email prompt every Monday morning of a quote or something to learn, etc. Good for the New Year!

bada55.io

Fun portrayal of hex colors that make “words”

How to Get Started With Sketchnotes

Tips for upping the creative presentation of your conference speaker notes.

How to debug your brain

Read up on this “hack” that truly inspired me when making my New Year’s resolutions: No. Right. Now.

Related Topics

Bootstrap | Content Strategy | CSS | Plugin | Presentation | Product Design | Responsive Design | SVG | User Experience | WordPress