BlogmyQuery – BMQ

I’ve enjoyed every bit of Designers.MX since it launched, their iPhone optimized web site is fenomenal, however the desktop experience (for browsing listening to music) wasn’t ideal for me, so I set out to find a solution for this.

First, if you haven’t checked out Designers.MX yet I suggest you head over there now. They have wonderful mixes with beautifully designed covers by fellow designers, a match made in heaven! Truly fantastic. I even contributed my own mix.

Before I tell you how to set up your DesignersMX Desktop App, let me show you what it looks like:

We are basically taking advantage of the beautifully optimized mobile experience and serving it on the desktop as an app. Isn’t it awesome?

Set Up Your Designers.MX Desktop App:

Download and install Fluid (Older Version with all features at http://fluid.en.softonic.com/mac), launch it and set the URL field to http://designers.mx/, Give it a name (I chose DesignersMX) and Click “Create�.

Once you receive the success message, launch the app. Go to the App’s menu, set the User Agent to “Mobile Safari� and refresh (Command+R).

You should be able to see the mobile optimized version of DesignersMX at this point. Adjust the window to the width/height you prefer.

Go to the preferences menu.

Click on appearance and change window style to “HUD (Black) and re-start the app.

The window chrome now matches the color scheme of the site:

At this point you already have a nice DesignersMX app. If you prefer having a floating window on your desktop you are done… However if you are like me and prefer menu bar icons follow the next step.

Go to the app’s menu, select “Convert To MenuExtra SSB� and click ok.

The app should restart and you should now see a menu bar icon on your toolbar like so:

Voilà!

You now have a beautiful Designers.MX Desktop App.

Thanks go to Cameron Moll for providing the soundtrack while I wrote this blog post, to Designers.MX for providing an awesome service and to all those that have contributed awesome mixes and covers.

Cheers all, enjoy!

http://www.deals2buy.com/

This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting.

These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

Our Solar System in Modern Browsers

Take a look for yourself, using only CSS and HTML I managed to create a small simulation of our solar system.

For a better experience please view it on Safari, under chrome the animations lag for some reason.

The Details

Orbits and planets are all created using border-radius, while the animation is done via –webkit animation properties and transform. Below are examples of the code used.

border-radius

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Animations & Transforms

ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } }

Animations and transitions will only work on –webkit browsers, other modern browsers will display a static version of the solar system rendered using border-radius, with the exception of IE of course.

Internet Explorer’s Parallel Flat Universe:

Yep, in the eyes of Internet Explorer our universe is flat and boring.

So there you have it, I think it’s pretty impressive what we can accomplish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)

Like many designers out there I like collecting images of good graphic design, but I have a problem with current image bookmarking services. So I decided to set up my own system.

Who doesn’t love looking at clean, simple, beautiful graphic design? I’m obsessed with discovering great talent and great design. Ever since I can remember wanting to be a designer I’ve collected and/or cataloged bits of designs I find inspiring and useful. Like many of you however, I’ve struggled to find the perfect solution for my image bookmarking needs.

Over the last few years I’ve been using web based services for my design bookmarking, and while there are some good solutions out there, non are perfect for me.

The Problem with Current Solutions

My biggest issue with current image bookmarking services is their lack of simplicity, both from a design perspective and the features they offer. All of these services ffffound, imgspark, vi.sualize, emberapp, while good solutions for most, are just not what I’m looking for.

I want a service that let’s me focus on the images themselves and not it’s related content/metadata. I don’t want to see how many people liked a specific image, or if it has other related images, or how many tags it has etc. I’m there to consume the visuals, the image!.

A Note on Dropular

Dropular is an image bookmarking service that showed promise, it had a simple interface and a very elegant solution for bookmarking images via a simple bookmarklet. I started using the service last year and I finally felt I had found the perfect solution. That is, until they destroyed any confidence I had in them. Not only did they shut down for several months promising a new and improved service, but ended up launching a completely useless website. I respect the people behind dropular, but they really let me down.

After the dropular fiasco, I figured it was time to find my own solution.

Enter Visual Bits

Visual Bits is my own personal image bookmarking website. I had one goal in mind when setting it up, it needed to be simple, it needed to feel simple.

The site is powered by tumblr and it’s using a custom tumblr theme I designed that basically eliminates any other piece of data associated with the image and leaves the image and source intact. No related images, no tags, no followers, no “likes�, etc.

It’s perfect.

I’ve been meaning to give Flavors.me a try for a while and yesterday I finally had a chance to play around with it.

Flavors.me is a service that lets you to create your own personalized webpage, it gathers your content from various social media sites and displays it nicely and neatly in a one-pager. In their own words “Ideal for personal homepages, lifestreaming, splash and microsites, celebrity fan pages, commercial promotion, brand marketing – and everything in between.�

Now this isn’t something new, there are plenty of services out there that offer the same functionality, however, none of them offer a simplistic approach like flavors.me does.

My Flavors.me Page

Within minutes of creating an account I was able to put together my own personal customized webpage. The beautiful thing about is it’s easy of use. Basically everything you need to do to customize your page is accessible via a single panel. Within this panel you can select services you want to connect to, you can add a blurb about yourself, chose a layout you like, upload a background image, set your color scheme and choose the typefaces you prefer.

It’s so simple and yet you have just the right options you need to create something compelling. Kudos to Rob Morris and company for putting together an excellent service.

What are you waiting for? Go give it a try.