As device displays become denser and denser (did someone say Retina Display iPad?), finding the right method for creating resolution independent UI elements will become more and more important. Using ems and percentages is one such method, that we currently think is the strongest…

- David Kaneda

Check out the Sencha Blog for the rest of this wonderful article on resolution independent UI best practices. It’s definitely a must read for any mobile UI designer.

Luckily, I recently stumbled upon a browser extension called Awesome Screenshot that is the perfect solution for capturing full page screenshots. Available for both Safari and Chrome (firefox coming soon…), this simple extension really makes taking screenshots a breeze. Here’s what it looks like:

How To

Browse to a page that you want to capture, and click the small lens icon in the menu bar. You can take a standard screenshot of the window or choose to grab the full page. Once you choose, the page is captured and then you are free to do what you will with the screenshot.

What’s also cool about this extension is that it allows you to make annotations on the screenshot from within the browser. You can even blur sensitive information right then and there.

Capture Options

Once you’ve captured the page and made your annotations, you are shown the page below. You can share the screen shot via services like twitter and email. However, you can also instantly share the screenshot online via awesomescreenshot.com. I think this tool really is awesome.

Note: There are a few problems with the full page capture method.

• Fixed elements show up multiple times on a long screenshot. For instance, a nav bar that is always at the top will do this.
• For some reason, really long pages don’t capture well. The bottom of the page cuts off and you are left with a blank portion of the screenshot.

Luckily, I stumbled upon a fix crafted by Elliott Kember and it’s pretty slick. Here’s what you need to do:

Browse over and open /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Resources/
inspector/inspector.css with admin privileges and add these few lines to the end of the file. That’s it!

.outline-disclosure li {padding: 1px 0 1px 14px;}
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code {font-family: 'Lucida Grande', monospace;

Note: if you are still using Safari 4, edit the file at /Applications/WebKit.app/Contents/Frameworks/10.6/WebCore.framework/Versions/A/Resources/inspector/inspector.css

How it was made

Just like this site, the INK Design website is powered by WordPress and the Carrington framework. WordPress handles all the content and Carrington handles how the content is put together and displayed to the user (more about Carrington in this post). Since my site already has many of the features Kamran wanted in his site like in-page ajax loading of posts I built upon what I already had, changing some CSS here and modifying some Javascript there. Getting a test site up was a fairly quick process. The good thing is, while I was creating the theming for the site, Kamran could post projects to the site simultaneously.

In-page loading of project posts

Once the site was functioning well enough I decided to give it some INK Design flavor. One of the original concepts for the site was to have one giant canvas that moved around depending on what type of projects you wanted to see and for this Kamran created a huge spaced out image of blending colors and designs to act as the background. I took this giant image and cut it up into ten smaller ones to use for the background of the site design we had created. I found a pretty nifty plug-in, jQuery Backstretch, that provided exactly what I needed to display a fixed full screen background at various screen resolution sizes. I used this to create a randomized full screen background generator. If you refresh the page or navigate to other pages you’ll see it in action. The good thing about the backstretch plug-in is that it loads up the image after the page has rendered decreasing page load time.

The one big problem in this site is that it uses a couple fixed position elements which do not work well on mobile devices like the iPad. For instance the background will scroll up on mobile safari revealing a basic gray colored background when it should remain fixed. Also, the layout gets squished together a bit more than it should on mobile browsers. Hopefully one day when I have more time I’ll be able to fix these issues.

All Tools Used

• WordPress 3.0
• Carrington framework
• jQuery Masonry
• jQuery Backstretch

Update: this site is also featured on the Carrington framework’s homepage!

1. Add this above your other linked css documents in the <head> of your html document:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

2. Declare the embedded font anywhere in your css like so, and your good to go:

h1 { font-family: 'Droid Sans', arial, serif; }

It’s that easy! and theres more… Google and Typekit worked together to create a Javascript library for loading fonts with even more control over everything called WebFont Loader. What’s cool about this library is the ability to use multiple web-font providers like google, Typekit, or your own custom one. Another big plus of using this library is a way to control font styles before and after the actual font is loaded, which means your site’s text can be made visible quicker as the fonts load. After reading about this more, it might prove to be useful in solving the problem I was having with the layout rendering on this page.

Check it all out:

Google Font Api »
Google Font Directory »
WebFont Loader »

Adobe Browser Lab – browserlab.adobe.com

I’ve previously used other services like http://browsershots.org/ to check browser compatibility but nothing even comes close to being as simple as Adobe Browser Lab is. It’s extremely quick and makes it almost trivial to test out different browsers for any website you are working on. For mac users that don’t have a vm running windows this tool is perfect for checking IE. One great feature is the ‘Onion Skin’ view where the page renderings for two different browsers are overlaid on each other, allowing you to see even the slightest pixel differences. The one flaw of this tool is that it only includes versions of the most popular browsers (Chrome, Firefox, IE, Safari), so if you need to test out other browsers like Opera you need to do so some other way. Either way, this tool is definitely worth checking out.

0to255 – 0to255.com

My friend Arthur told me about this simple color tool a few weeks ago and since then I have found myself using it all the time. What it does is map out light to dark variations of a single input color based on hex value. Sounds pretty basic but it turns out to be really useful when you have some colors in mind already and want to try using some slightly different ones. The site is fast and simple (clicking on a color automatically copies the code to your clipboard), plus it looks really slick. I’ve tried using other color tools like Adobe’s Kuler but they never wound up being as useful as this one did.

iPad Peek – ipadpeek.com

This doesn’t actually render a site like the real mobile safari does on the iPad, but it’s still pretty good. If you need to do some quick iPad rendering tests this tool will do the job just fine. From what I can tell it does some things like a real iPad, such as adjusting to your sites width, but it still doesn’t render an iPad specific site correctly, like Sproutcore’s hedwig example app below.

CSSDesk – cssdesk.com

I’m not sure if I would ever use this but I had to include it because it’s a really slick looking tool. Made with HTML5, CSSDesk is a live updating development environment for html/css snippets. If you want to try out some code fast to see what it will look like, this tool is made for you. You can turn code highlighting off and on, change the background, download the code you’ve developed, and even share it.

Typetester – typetester.org

If your into testing out what different fonts look like in a browser then this tool is key. Typetester lets you try out all sorts of fonts (mac / windows / both) to see how they render within your browser. What’s nice is that you have 3 separate areas to compare fonts and other type options. For instance, the screenshot below shows renderings of Verdana, Trebuchet MS, and Arial from left to right, all set at a size of 1.2em. There are many more options available on the site and when you find a configuration you like, just download load the CSS for it. It’s simple.

Another type tool worth checking out is this Web Font Specimen that allows you to test any font you want on a pre-made html type specimen page. The good thing about this is that once downloaded, you can test out any font you want easily, including those imported via the @font-face tag.

Nav-o-matic – labs.engageinteractive.co.uk/nav-o-matic

Nav-o-matic creates the markup and css needed to create a navigation menu based on an image sprite for normal, hover, and active states. All you have to do is upload your menu image, mark the vertical boundaries of each button, and bam, beautiful css is produced automatically for you within a matter of seconds. I just found out about this but I wish I had known about it long ago. Creating the css to do this is not hard, but nav-0-matic makes it far to easy to do it any other way. Definitely go check this out if your making a sprite based navigation menu.

Check out the article: 24 ways: Make Your Mockup in Markup.

I really like the point the author makes about using RGBA to set all the background colors, thus making it extremely easy to change the whole color scheme of the page instantly. That could save a ton of time.

The Concept

The basic concept I started with was to have a home page that would show small excerpts of blog posts with a corresponding thumbnail. Upon clicking one of these excerpts, the full post would then be loaded inline via ajax. In addition, I wanted to have everything align to a grid at all times. Before making this site I had seen this done on a couple of sites, but none of these were running on WordPress.

The Main Problem

With WordPress you normally have one template for your homepage and one for a single atomic post which means that a single post on its own can only be loaded via the single template. Because of this a post only exists on the homepage, where all posts are normally shown, and on its single, or permalinked page. There is no way to grab an atomic post on its own using WordPress’s default functionality. To get the layout I described above I could have made the single post template only return the post’s content and have that load through ajax via its permalink. However, the problem with that is when a user navigates to a permalinked post, all that would show up would be the content of the post. What I needed was a way to grab a post’s content on its own while also providing a nicely styled single page for permalinked posts.

How I Did it

I realized that I would have to write custom functions to query the wordpress database in order to do this, and so I started with that. Then one day I stumbled across the Carrington, a CMS theme framework that extends WordPress and makes it extremely easy to customize. The main difference between WordPress and Carrington is in how the code is abstracted and what can be done with those abstractions. Here is a diagram that shows the difference between the page load for a single post view in the WordPress Default theme and how the same in done in Carrington:

Now all this is great for customization, but why I eventually settled with using the Carrington Framework was because of the built in Ajax loading. It was exactly the thing I needed for this site as it gave me a way to show both excerpts and full posts on the homepage, while also providing a template for permalinked posts. Plus, its slick. Carrington provides it for viewing archives, but it’s easy to apply it to all posts.

Another wonderful resource I found for use on this site was jQuery Masonry, a layout plugin that auto-aligns elements based on a given grid. I’ve always loved sites that auto-align elements of different sizes so I was happy to apply that same look to this site. I had to hack the initialization part of the plugin a bit to get it to work right with Carrington right but it turned out to work great! I love this plugin.

Technology Used

• WordPress 2.9
• Carrington Framework
• jQuery
• jQuery Masonry

Overall, I am very satisfied with how the new version of tylerwolff.com turned out, though there are still problems to be fixed (IE7 layout, contact form messages, etc). In the future I plan to repair these problems, as well as add more content to the entire website. I might even write some more entries on the making of this site, going through some of the custom code I had to write to get everything to work together. What’s cool is the site is now featured on the Carrington homepage and showcase page. Check it out ↓

HTML 5 Experiment from 9elements.com