neography by

Alex Girón

A designer living in Old Town Alexandria San Francisco. Co-founder of nvite, canvas and nclud. Founder of worthy. Formerly Design Lead at twitter.

Fluid + DesignersMX = Bliss.

Thursday, May 12th, 2011

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:

DesignersMX App

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”.

Fluid App

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).

Fluid User Agent MenuUser Agent

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

Mobile Optimized

Go to the preferences menu.

Fluid Preferences

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

Fluid Appearance

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

DesignersMX Floating Window

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.

MenuExtra SSB

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

Menu Bar Icon

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!