Alt Visions Blog

Today, Microsoft unveiled their re-boot of windows mobile, now called Windows Phone 7. I’m so happy that they decided to go back to the drawing board and start from scratch. Where everyone else was trying attain the success of the iPhone by basically replicating the device, Microsoft chose to create a new user interface with a function-centric appeal.

So what does this have to do with the Bauhaus? Those guys were all about stripping away ornamentation until you had a naked core function. In this absence of fluff, beauty arose from simplicity. Some of my greatest design heroes come out of this era of design, know as modernism, and I think this is why I love the Windows Phone design so much. I’ve grown so tired of the over polished, glossy look that we’ve seen everywhere for so long and it is incredibly refreshing to see what has been a growing revitalization of the modernist style finally hit a mainstream device. To be more specific, I’m talking about the clean, minimal layouts that use flat colors and large, thin sans-serif typefaces in order to bring information to the forefront as the user interface.

This can be seen especially in the pure typographic layout of the calendar shown above. When the design is simplified like this, it is easy to use basic tools like color to make different types of information conspicuously stand out from their surroundings (in this case, the business and personal appointments are shown in separate colors). I know that a lot of the visual aesthetics shown in Windows Phone 7 were used in the Zune platform (whose look and style I loved, by the way) but the difference is that this base style was greatly expanded upon and done so on a platform that has a huge market share and much wider appeal. Anyway, the phones are supposed start hitting the market by the holiday season and I can’t wait to see more information on them. If you would like to find out more now, you can check out Engadget’s hands on post or gizmodo’s post on the ui among many others.

I recently finished Gary Vaynerchuk’s book “Crush It” and one the things he covered was the need for some kind of call to action button on your website as a way to create return visitors and further their interaction with your brand, among other things. These buttons don’t have to just be about buying products such as a book, they can also be links to your social networks or anything that will further engage your audience. It seems like such an obvious idea after reading it but for some reason I had completely left anything like this off of my own website. To remedy this, I decided to add a follow me tab with drop down links to my main social networking sites and my rss feeds.

This is where I get the part that I want to share with everyone. While trying to figure out how to implement this new button, I stumbled upon a new way to create drop down menus with out the use of javascript. Now I’m sure someone else has figured this out as well but I was excited that I managed to do it on my own and thought someone else might find it useful as well. If you would like to see an example of what I am going to describe, just hover over the “follow me” button on the left side of this site.

Before you read on, I want to preface this section by letting everyone know this is my first attempt at writing a technical code explanation so if something doesn’t make sense or I got anything wrong, let me know in the comments and I will do my best to clarify. So, Let’s get down to it and take a look at the code. The html is nothing more than a unordered list made up of the various links you want to display:

<ul id="call-to-action">
  <li><a href="http://twitter.com/patrickrhill/">Twitter</a></li>
  <li><a href="http://www.flickr.com/photos/patrickrhill/">Flickr</a></li>
  <li><a href="http://feeds.feedburner.com/AltVisionsDesign">RSS</a></li>
</ul>

The magic happens when you add the CSS. Basically all that is happening here is the content of the unordered list is being hidden and replaced with an image of text saying “follow me”. When someone hovers over this, the image is removed and the list full of your links is allowed to expand. You can then style the links however you see fit. Keep in mind though that if you want all of the links to remain symmetrical and line up correctly, you will need to display them as block elements.

#call-to-action {
		min-width: 30px;
		position: absolute;
		left: 0px;
		height: 120px;
		top: 457px;
		text-indent: -3000px;
		min-height: 50px;
		background: black url('images/follow-me.png') no-repeat center center;
}

#call-to-action:hover {
		text-indent: 0px;
		height: auto;
		background: black none;
}

#call-to-action a {
		display: block;
		padding: 5px 10px;
		margin: 10px 0px;
		color: white;
}

#call-to-action a:hover {
		padding: 5px 10px;
		margin: 10px 0px;
		background: white;
		color: black;
}

To finish up, remember that this technique doesn’t have to be used solely in this way; you can apply it to any type of navigation you like. I’m currently experimenting with some new ways to utilize this and I hope to share them soon. Well, that’s all I can think up for this post. I hope someone finds this useful!