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

Aeroplane – We Can’t Fly (album preview) by eskimorecordings

Here’s an extended version of Superstar, such a solid track. So good Pete Tong even plays it twice in a row in this segment!

23rd July 2010. Essential New Tune: Aeroplane – Superstar by PeteTongsEssentialNewTune

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 »

“This mix is automatically generated by my car when I start the engine. This is the music that flows in my veins. My car knows this. For the first time ever, you are able to listen to this program outside of my car. Enjoy.” -Kavinsky

Check out Kavinsky’s Autocruise mix for Dazed Digital. It’s really good!

Track Listing:

1. History Lesson – The Beepers
2. Flashing – Goblin
3. Spleeper In Metropolis – Anne Clark
4. Crockett’s Theme – Jan Hammer
5. Kiss Me Hardy – Serge Gainsbourg
6. Fire In My Heart – Escape From New York
7. Moochi’s Death – John Carpenter
8. Overdose – Cerrone
9. Beach Theme – Tangerine Dream
10. Roche (Kavinsky Remix) – Sebastien Tellier
11. Nightcall – Kavinsky

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.

Vital Signs – Midnight Juggernauts from midnight juggernauts on Vimeo.