- Designing (and converting) for multiple mobile densities | Teehan+Lax Converting graphics for different resolution densities.
- How to be mediocre | neilcrofts Reminders for being aware of when you fall into the traps of medicority.
- Pure A set of small, responsive CSS modules that you can use in every web project.
- Hexo - Node.js blog framework A fast, simple & powerful blog framework, powered by Node.js.
- Commit Message Generator
- DODOnotes | DODOcase Carry your iPhone naked and also like paper? DODO makes a notebook that fits your phone perfectly into its cover, and holds it snug with an elastic band..
- Pingendo - web authoring with comfort
- Flat Route Finder I like biking hills, but not necessarily SF hills.
- Easily Remove Image Backgrounds Online - ClippingMagic
- Two.js Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
- Retinize It - Photoshop actions for slicing retina graphics
- OSX: How to copy plain-text always, everywhere, without exception? - paste copypaste plaintext | Ask MetaFilter
- If you can pronounce correctly every word in this poem, you will be speaking English better than 90% of the native English speakers in the world.
- No to NoUI – Timo Arnall
- Flat UI Free - PSD&HTML User Interface Kit - Designmodo
- 10 Apps to Help You Tame Your Monitor at Night | Mac.AppStorm I don't tend to use my computer at night, preferring the iPad, but apparently using a computer screen can have an effect on getting to sleep using the default brightness and color settings you have now.
- Chrome Web Store - OneTab Better ways to sweep tabs under the rug and pull them back out.
- Inconsolata An excellent monospace font for coding and terminal apps.
- Design Process In The Responsive Age | Smashing UX Design
- Designing For The Empty States | Codrops Design of empty states: First use, User cleared and Errors (e.g. no internet connection).
- How Colors Affect Conversions Infographic on the psycological influence of color on the human brain and how it can affect conversions.
- Define :: Responsive nice illustration of scaling and breakpoints if you want to explain responsive design to someone.
- Installing and Updating : Statamic Static PHP site builder.
- CODING.FM Nothing like the sound of an angry coder to motivate you.
He's looking at how to employ practical ideas that satisfy the business side as well as the people using it, which I'm sure is something we all want to do on sites that sell a product or service. He plans to publish the newsletter monthly. Check it out.
I've been looking for ways to energize my creativity in between the longer stretches of time spent on difficult, routine, and less creative work. The thing that has been doing it for me lately is working with static html on some of my smaller production sites.
I was playing around with static html tools for a little side project I've been toying with. I was tinkering with Stacey and Kirby. Awesome tools for static PHP page building. I was also playing around with CodeKit, which looked like the most promising tool for little projects. But I figured it was all just playing and there wouldn't be a real static site project for me to work on for a while probably.
Then last month we launched UX Apprentice using WordPress. We were on a stable server that hosts some pretty massive sites, so I was happy. But then, as web hosts always do, it went down for a short period. Some rare issue on load balancers was the cause we were told. Downtime happens. But then while discussing this issue I said, "Fuckit. This site is so simple, let's make it static and put it on an S3 bucket."
A week earlier I was playing with Hammer for Mac, the latest static site builder I had found. Among my options, including just doing it all by hand, this was the simplest of them all. I looked at what I would need to port the site to Amazon's S3 service for websites with no fuss. All I needed to do was suck the WordPress site down and convert it to static HTML.
I know this is small potatoes compared to the bigger things people are doing out there, but I got a kick out of doing this.
Here's how I did it, in case anyone out is considering doing the same:
2) Create a Hammer Project
Look at your downloaded site, and clean out the cruft. Open Hammer for Mac and create your project. Open the source folder.
3) Organize files, use HTML editor to convert PHP to Hammer-smart stuff
I did the find/replace grunt work using Coda on my CSS and html files. Replaced the PHP that I use in my header to use the @include directive and the $title variable. My SCSS files got picked up and compiled with no problems. I then used the @path helper on images in my SCSS.
About two hours of this clean up and it built with no errors.
All my SCSS was compiled, my includes worked, and my CSS and JS were optimized (combined and minified).
I set up my hosts on my machine so I could test locally in the browser so all the TypeKit would work after I added that domain. I also learned that you can't test Typekit with a url using the file:/// protocol. Bummer. I already use VirtualHostX which makes simple work of managing multiple hosts on your local machine. It edits your httpd-vhosts.conf and hosts file. I had bought it originally because the web sharing option went away in OS X, and I'm too lazy to edit files just to turn PHP on.
Then of course, I tested on all my browsers and tested the responsive layout. We were ready to go.
Publishing on S3 is pretty simple. A normal person just needs to set up a bucket and use an S3 aware FTP app like Transmit and you're done. We ended up commiting it to a repository that is watched by a server that kicks off updates to S3 for pages that have changed.
That was the whole mini-relaunch that happened quietly after we launched UX Apprentice. We were live on WordPress for a week, and now we're hosted on an AWS instance and I expect the uptime will be awesome—as good as any S3 site. We do the same for our main balsamiq.com site and every time I see our blogs report downtime, I feel this wave of relief knowing our static pages on S3 are happily being pushed out without issue.
Anyhow, that made for an exciting day last week. It's energizing to feel frustrated by something and quickly turn something around that's better. And for anyone that's doing UX work that's looking for a decent HTML prototyping workflow and knows enough SASS and JS, Hammer may be the thing for you.
- Poor Man’s Agile: Scrum in 5 Simple Steps There are 478 page hard cover books on Scrum? Don't read them. Read Scott Porad's Scrum in 5 steps.
- Pegleg Crowd-sourced full-length movies on YouTube.
- greenqloud.com Cloud servers and storage in a carbon-neutral facility that uses 100% renewable energy.
- Panic Blog » Top 20 Secrets of Coda 2 This is an old one, but I don't know how I missed the Preview in a Simulated iPhone/iPad when you switch user agents.
- PaintCode Drawing tool that creates objective c code.
- Chart.js HTML5 Charts for your website.
- CSS Creatures CSS Creatures generated from HTML5 and fresh-squeezed CSS3.
- Bulletproof Demos Record modes in Chrome let you record every request Chrome makes. Playback mode serves requests out of that recorded cache just as if they were being loaded on the spot. It doesn't record where you click or what you open, just every request as it moves over the wire.
- Sketch Rolls Unique Sketching, Note Taking and Drawing Application for iPad on the iTunes App Store. Cool horizontal paper roll concept.
- The Elements of Typographic Style Applied to the Web – a practical guide to web typography
- Coffitivity - Increase Your Creativity! Ambient noise. Perfect for remote creative workers. "Research shows it's pretty hard to be creative in a quiet space. But, the mix of calm and commotion in an environment like a coffee house is proven to be just what you need to get those creative juices flowing. Our team has delivered the vibe of a coffee shop right to your desktop, which means when your workspace just isn't quite cutting it, we've got you covered." Via @balsamiqleon
- DIY Stories Maker kids rock.
- New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)
- The Maker Map Web app to find or maker resources by geographic location.
- Why Pinterest-style infinite-scroll layouts are worthless for everyone except Pinterest | Stephen Corwin's Blog
- A collection of best front-end frameworks with comparison | By usabli.ca
- Step-By-Step Landing Page Copywriting | Nathan Barry
- Quickly show and hide hidden files | Finder, Terminal | Mac OS X Tips How to create a new automator workflow that shows a toggle hidden files in the Finder service menu.
- Kindle Previewer Tool that emulates how books display across Kindle devices and apps.
- Simple Inline Footnotes
- Responsive video embed code : Anders M. Andersen
- Ditching responsive design — GoCardless Blog Why one site decided not to.
- The New CSS3 vw, vh and vmin Relative Font Sizing Units - SitePoint
- Delivering Subtle Beauty The Mailbox.app pre user experience.
- How Etsy Grew their Number of Female Engineers by Almost 500% in One Year
Switching to monthly link drops rather than weekly.
- Speakeasy Best way to throw a non-exclusive rave or allow a whole bunch of strangers into your party.
- MoMA Video Game Collection Sees New York Museum Of Modern Art Embrace Digital Gaming I'm glad Tempest made the list.
- + My Desk - Miguel Mestre Best hack i've seen in a long time, and free. Here's what I'm using http://pastebin.com/raw.php?i=UiUTz3ZH
- Trello uses an icon font and so can you! - Fog Creek Blog
- PharkMillups/beautiful-docs · GitHub A Beginner's Guide To HTML and CSS
- Home | Testing made easier in Internet Explorer | modern.IE
- Apple’s design problems aren’t skeuomorphic « counternotions
- VirtualHostX - Mac OS X Apache Virtual Hosting Host and share multiple websites from your Mac easily—create and manage Apache virtual hosts with just a few clicks.
- mincss "Clears the junk out of your CSS" - Peterbe.com
- Toogles | Awesome goggles for YouTube Minimalist YouTube
- Open Source Rails
- InK - Interface Kit HTML/CSS/JS UI Toolkit.
- Yes, learn basic programming | Derek Sivers
- Daring Fireball: The Trend Against Skeuomorphic Textures and Effects in User Interface Design
Crazy big link drop because the world gets crushingly demanding of one's time around the holidays, and it takes time to recoup.
- Build Your Own Adobe Creative Suite with Free and Cheap Software
- How Tom Cruise Ruined Interaction Design
- Form Follows Function FFF is a collection of interactive experiences created by Jongmin Kim in HTML5.
- One div - The single element HTML/CSS icon database Pure CSS icons.
- jKit - jQuery based UI Toolkit - Index
- Ice T on "Fuck It!" - YouTube
- Eva Lotta Lamm's Sketching & Sketchnotes References
- Theme Mac OS X with an Ultra-Minimalist & Clean Silver Appearance
- The Flat Sink | SachaGreif.com The most interesting article on the flat design issue that I've read. I've read many good articles on the topic, but just as many posts throw up straw man arguments appearing to have a discussion about skeumorphism vs. visual effects-free design. The point to take away for me is this—if design elements do not provide affordance and feedback, regardless of whether they are aesthetically flat or otherwise, they can be harder to use. This is one case where embracing a visual design aesthetic to be different without carefully considering and testing the usability can be risky.
- Max Themes Blog - ✎ If you see a UI walkthrough, they blew it Don't be thrown by the title. This is an article is more about the lack of visual affordance in touch apps rather than about either walkthroughs or flat and minimal interface visual design.
- Polyvore Engineering Blog: Web Developer Admits: Objective-C > HTML5
- UX Archive User flows for mobile apps screencaptured.
- Sticky Captions Concept | Codrops Keep image captions in the viewport.
- Photoshop Layers tricks and shortcuts | Veerle's blog 3.0
- Jenni Sparks Illustration: Hand Drawn Map of New York
- Making Responsive Web Design Optional - Toolbox Digital Blog Make responsive sites that allow the user to toggle the original layout back on if they choose.
- 2D Game Art for Programmers: Apache Helicopter If you've ever wanted to see how a complex graphic gets built up from basic geometric shapes, then this is for you. Great deconstruction/reconstruction in this tutorial.
- The Big Badass List of Twitter Bootstrap Resources
- Chrome Web Store - Awesome Screenshot: Capture & Annotate Awesome Screenshot got 100% better with Save to Google Drive.
- PRODUCT + UI + UX + CEREAL | Design Build Review
- letter.ly: simple subscription newsletters
This is a good bit of advice for kids and adults alike from Jake the Dog. Adventure Time is my son's favorite show, and one of mine as well. I made the print for his birthday, and will put it on of our walls. I like having the reminder every time I feel discouraged when starting something new.
What I'm doing
I'm doing a review of customer support sites, looking mostly for software (desktop and web) and services-related sites that provide a customer support site for getting answers to questions, and viewing documentation and tutorials.
Why I'm doing it
Some sites have better search capabilities for questions than others. Other sites do well at presenting documentation. I'm finding that there's sometimes a difference in how companies handle giving answers to the most granular questions as opposed to presenting a unified view of a product via a manual-like experience. There's a smaller/larger need, first time/experienced user dichotomy of needs, among other different descriptions of how and why a user approaches a support site. The need may range from "How do I do X" to "How do I get started using this" and every grayer need in between. I'm currently involved on a project where this is the problem we're faced with as the company has gone through several stages of growth, and needs to evolve legacy content and systems.
Can you help?
What are you favorite support sites in terms of these kinds of needs? I'm going to screen capture and review a handful of them here and show a cross-site comparison of capabilities. As a bonus, I'm doing a giveaway of a couple sketchbooks from those who comment.
Please give me the name of the company and the URL for the support site. And thanks for helping out!
Some of my starting points
- UX Matters: Customer Support on the Web: Don’t Call Us, We’ll Call You
- IXDA Discussion: Examples of Good Customer Support Sites
- Harvest: What Makes a Good Help Section?
- TechCrunch: Facebook Redesigns Help Center To Suggest Answers, Completes Roll Out Of Support Dashboard and Facebook: Improved Tools to Support Your Facebook Experience
- ZenDesk: Examples of sites using ZD as their primary KB?
- Desk: 12 Awesomely Designed Support Centers and What Makes Them Rock