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
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:
]]>“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.
]]>
Nightcall
Download audio file (Nightcall.mp3)
Pacific Coast Highway
Download audio file (PacificCoastHighway.mp3)
Nightcall (Breakbot Remix)
Download audio file (Nightcall(BreakbotRemix).mp3)
I like the mellowness of Nightcall and the funked out Breakbot Remix. More at his myspace.
]]>I can’t wait for this.
]]>
]]>