Month / March, 2013

Exceptional Typography

As with all things on the web, I was surfing around, minding my own business, when I came across some sweet, sweet typographic web design that blew my socks off. Blew them right out the door. I could just give you a few links, but wouldn’t it be better if we followed the links down the rabbit hole?

ALRIGHT!

First I was looking for a website which explained a little better hyphenation on the web. I hate hyphenation at wide column widths and couldn’t for the life of me find any documentation on the hyphenation CSS tag. But then I found:

CSS Hyphenation | Trent Walton

CSS Hyphenation was pretty slick. I was like “who made this site?” because it is responsive as HECK!

Trent Walton

Trent Walton, WOW! I thought rubbing my eyes. How did he do that with the type? Is he a warlock?! Let me sneak around, I thought. Then I found the answer:

Lettering.js - A jQuery plugin for radical web typography.

Lettering.js is a website I had come across before, but I always thought it was unnecessary for my web design purposes. Now I’m intrigued. Looking over the case studies I found this:

Paravel

Paravel. And who runs Paravel? That Trent Walton dude. Pretty great landing page. Finally looking over their portfolio of projects, I found this project which made me very happy.

Lost World's Fairs

Lost World’s Fairs. Amazing! Especially the Atlantis one. I seriously have never seen anything like it before. Anyway I was so impressed I decided to tell all of you… because we are best friends.

MAMP

MAMP stands for Mac, Apache, MySQL, PHP. What does that mean right? Well lets say you want to install WordPress on your computer to create pimping websites without uploading junk to the internet? DONE! Simple and elegant. Best of all, the free version is all most people need.

Dragons Fly at Miss Ko, a Restaurant Designed by Philippe Starck

Animated Dragons fly over the tables at Miss Ko, a paris restaurant designed by Philippe Starck. While I thought this concept would be horrible, in execution it actually seems pretty well done and not as garish as one might think.

Apparently they can also change the video on the tables to suit any event at the restaurant.

Emmet

Emmet

Emmet bills itself the essential toolkit for web-developers by speeding up HTML and CSS tasks. Looks cool, may fire it up in Espresso.

Update: After using Emmet for a few days, I can honestly say it is incredibly powerful! Seriously speeds up web coding. Definitely needed to refer to the Cheat Sheet.

KickPed

KickPed is a scooter made for adults for NYC streets. I have to say I’m intrigued.

90 Degrees & Knolling

90 degrees

90 Degrees looks like an interesting self published… book? About… knolling? Yes, you read that right.

Although the book describes knolling as “the process of arranging like objects in parallel or 90 degree angles as a method of organization” I hope there is also mention of the actual definition of knolling which is “(of a bell) ring solemnly, especially for a death or funeral.” -New Oxford American Dictionary

WordPress Creation & Testing Resources

The start to any good theme, or theme evaluation for that matter, is some sample content. Sure you could fire up your keyboard and start adding in random Lorem Ipsum all over the place, but chances are you are going to miss a few (or more than a few) situations where content breaks your theme. A better way to go is to load your WordPress website with some dummy content, especially dummy content that may break your site’s styling. Below is an ongoing list of such resources:

WP Test

WP Test is a set of entries, which is updated as new tests present themselves, for your WordPress theme or plugin to test that every possible option works correctly. Safeguard your clients, by making sure your themes are airtight and behave correctly. Just import the WordPress export and you are ready to test. I recommend this one heartily, the huge/unbreaking/title/block broke almost all of my themes and now they work perfectly because of this test.

WP FILL ME creates WordPress filler content for theme testing and does so with explanatory text on what it is testing. Useful if you are starting your themes from scratch and need a starter test.

WPCandy also has a similar testing suite from the 2 above. I have used it before and liked the results, but it hasn’t been updated in a while.

Filler Images

For testing images on websites, I used to use a few dynamically generated sites like:

Place Kitten

Placehold It

Place Dog

Lorem Pixel

Now I use holder.js as it is a JavaScript library that runs on your site rather than making a call to another site, which makes it great for testing on development sites, or when you might be away from internet connectivity. There is also a WordPress plugin called Holder for the script which means you can be up in running in seconds, if you are afraid of wiring up JavaScript.

[holder height="200" width="625" theme="industrial"] creates this image:

holder.js

Let me know in the comments if I am missing any super resources and I’ll add them in.