A Designers Desk

For me, having a setup that both looks and functions well is paramount to doing any design jobs. Well actually it helps with anything I’m doing You work better if your desk is tidy (no distractions), its just common sense.

United States of Eurasia

Muse fans are some of the most dedicated people I know. Muse management knows this too, which is why they made a little treasure hunt for the people of Europe and Asia. Co-ordinates of where the location were put on a Muse Microsite, and there were codes to be cracked. This “treasure hunt” brought people from Paris, Berlin, Moscow, Dubai, Toyko and Hong Kong to meet agents, who gave them a USB Key (below). They then had to upload a video and photo on to a Youtube group and Flickr group respectively.

Each stage had a seperate cryptic clue, and different instructions. During the second stage this was posted on the Microsite

FLASH MESSAGE TO ALL ACTIVE HUMINT RESOURCES.

WARNING: PROJECT IDENTIFIER IS AT STATUS BLACK AND NON-TRENDING.

PLEASE USE IDENTIFIER #USOE TO COORDINATE PROJECT EURASIA/GRAN AJEDREZ.

ALL ACTIVE HUMINT RESOURCES INSTRUCTED TO INCREASE RECRUITS AND TO MAKE BEST EFFORTS TO TREND IDENTIFIER. ALL AGENTS ARE ADVISED TO USE DISCRETION.

Obviously this meant spreading the word on Twitter, and Muse fans managed to get #USOE to 6th and #muse to 9th spot on Twitter trending.

After that, a code located on the aforementioned USB key. This was repeated six times, for each stage (or city) and bit by bit, the “treasure” slowly revealed itself in the form of a song.

The result is this.

I quite like it. From first listen its very Queen-esque, but after second or third, you realise that Queen would never have had the ambition to do this sort of thing. This is why I reckon these guys are the best thing to come out of Britain, even perhaps eclipsing the Beatles?

Designrlink and Topofthenet

Part of being a desinger/developer is filling open gaps in the market. The sites I’m building wont. Well not exactly. There are dozens of CSS Gallleries, and honestly I’m quite sick of them. The problem is, what else are you supposed to do with a domain called Topofthe.net? A toplist? I think not.

The other one is also user-generated, but its about collecting links to decent design/development articles. The thing I like about these sites is that they have the same design. I’m a sucker for uniformity. Am I hinting may be the start of a long list of sites , maybe turning into a network? I dont know.

I’ve been working on these sites sporadically over the summer. But things are taking a turn for the better, I’m working faster than usual, and I hope to have at least one online before the weekend is over.

Why? First and foremost, I’m doing this to fill out my portfolio (which is coming soon, honest!!). Secondly its gonna make me think, something I havent had to do since mid-May. And thirdly I’ve domains to use and I’ve been putting it off for much too long.

For more info about either follow their Twitter Accounts @topofthenet and @designrlink

Stay tuned.

Create a Tabbed Content Box with jQuery Tools

jQuery is without a doubt one of the best frameworks out there. It has a pretty low learning curve, its small for what it does, and its extensibility is endless. jQuery itself boasts its own UI library, but recently FlowPlayer has designed a lightweight, very easy to use UI Library called jQuery Tools

jQuery Tools website says

jQuery Tools is a collection of the most important user-interface components for today’s websites.

Honestly, I love this plugin/addon for jQuery. It makes so many things that would usually take maybe 30 mins, doable in 5 or less. Below I have a very simple tabbed content box perfect for displaying latest posts , comments or tweets in your sidebar. You can view the demo here .

The Setup

For this tutorial you will need to create three files

• index.html
• style.css
• script.js

Dont worry about download jQuery or jQuery Tools just yet, as we will include them from external sources.

The HTML

Open up your index.html and type the following code

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	
		

		
		
		

	

	

jQuery Tabbed Content Box

Tab 1
Tab 2
Tab 3



Tab 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.


Tab 2

Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum auctor dapibus neque.


Tab 3

Vestibulum auctor dapibus neque.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.




	

As you can see from the above code I have included our script.js and style.css, along with Google-hosted jQuery and the jQuery tools plugin.

Also please look at how simple and clean the above code is. Very easy code as jQuery Tools does all the messy stuff for us. I got the filler content from HTML-Ipsum.

The CSS

The CSS in this is pretty straight forward. I make a quick CSS Reset and the rest is basically just standard practices. Notice, however that I include an “a.current” rule.This is what jQuery tools adds to each of active tabs so that you can show the user which of the tabs is active. I’ve also added a few CSS3 rules, mostly -moz-border-radius, which makes turns a block element into a rounded rectangle.

/* Makeshift CSS Reset */
*{margin: 0; padding: 0; list-style: none; outline: none; border: none;}

html {
font-size: 16px;}

body {
background: #2a2a2a;
font-family:"Helvetica Neue", "Myriad Pro", Helvetica, Arial, serif;
font-size: 62.5%;
}

#contentbox {
margin: 70px auto;
width: 400px;
padding: 20px;
}

#contentbox h1 {
margin-bottom: 40px;
color: #fff;
font-size: 3em;
text-shadow: 1px 1px 1px #232323;
}
#contentbox h1 span {
color:#55addc;
text-shadow: 1px 1px 1px #1e2e3c;
}

ul.tabnav {
width: 400px;
overflow: hidden;
}

ul.tabnav li a{
margin-right: 5px;
float: left;
padding: 5px;
font-size: 1.1em;
text-decoration: none;
color: #55addc;
text-transform: uppercase;
display: block;
font-weight: bold;
}

ul.tabnav li a.current{
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
background: #fff;
color: #1a1a1a;
}

div.tabpanel div {
background: #fff;
padding: 10px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topright:3px;
}

div.tabpanel div h2 {
font-size: 2em;
color: #2a2a2a;
border-bottom: 1px solid #2a2a2a;
margin:0 5px 10px;
padding-bottom: 3px;
display: block;}

div.tabpanel div ul li {
padding:0 0 3px 5px;
font-size: 1.3em;
}

The jQuery

Here is where the fun bit begins

$(document).ready(function(){
$("ul.tabnav").tabs("div.tabpanel > div");
});

Yes, three lines of code is all that it takes. Basically you call the function when the document is ready. When its ready it will link the contents of “ul.tabnav” with the direct descendants of “div.tabpanel”, which are divs.

Conclusion

Simple no? I love using this method, however there are a few drawbacks.

• Not Enough Power – Its a very weak piece of code. It may not be useful if you need to do more advanced things. However, I’ve only touched the fringe of jQuery Tools. I’m not saying that jQuery Tools cannot be used. It has an extensive range of possibilites, you just have to know how to use them
• Totally Javascript Based – This is less of a problem these days, because so many sites require Javascript for their applications to work, but you should consider it nonetheless
• Animations – The jQuery Tools tabs has no included animations, which is kind of a let down, seeing as it does everything it’s supposed to really well

Overall this method hits the mark. Its easy, its fast and its free Enjoy.

Demo Download

Thanks

Listing on Bing? Coz It’s Kinda Important

Bing.com, the new “decision engine” from Microsoft builds upon, Live.com and of course MSN.com. Because of this you probably think that your site will automatically be listed. Turns out mine had some trouble being found by Bing so I had to do it manually, which you can do here.

But why is pinging Bing so important? Surely it has no dent on Google.

Well, recently stats came out for June and it recieved almost 50 million vilitors for that month. You may think that 50 million is pretty small, but lets just put this into content. It got more than Twitter, which is getting publicity left, right and center. More than Digg, a very popular user generated news site, and more than CNN, one of the most accurate and well-respected news sources in America. I know that Microsoft arent competing with these sites, but to get more than pretty established websites in the first month of launch, its great. For any site that is a hug achievement, but its a momentous one for a site that Microsoft owns.

Now how did they get it? Well obviously most of that was redirected from Live.com, and even more obvious is the influx of new visitors, dying to see what the whole fuss is about. But to keep 50 million users a month, they need to start getting people to make the switch. How? Relevant searching. I’ve started using Bing, whilst going cold turkey on Google, in order to see if it has any effect on my daily search needs. For the most part, no. But there are a few things missing from the “decision engine” before I decide  to make the switch permanent. Things like money conversions are missing. The extended features the US site has is missing, we have localized search and that is it. And I dont think its integrated enough with the rest of the Microsoft websites.

Overall getting listed on Bing may not be a priority right now. But soon, we might have Microsofts second coming. And I cant wait, Google is getting boring.