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 + Design­ersMX = Bliss.

Thursday, May 12th, 2011

I’ve enjoyed every bit of Designers.MX since it launched, their iPhone optim­ized web site is fenom­enal, how­ever the desktop exper­i­ence (for brows­ing listen­ing to music) wasn’t ideal for me, so I set out to find a solu­tion for this.

First, if you haven’t checked out Designers.MX yet I sug­gest you head over there now. They have won­der­ful mixes with beau­ti­fully designed cov­ers by fel­low design­ers, a match made in heaven! Truly fant­astic. I even con­trib­uted my own mix.

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

DesignersMX App

We are basic­ally tak­ing advant­age of the beau­ti­fully optim­ized mobile exper­i­ence and serving it on the desktop as an app. Isn’t it awesome?

Set Up Your Designers.MX Desktop App:

Down­load and install Fluid (Older Ver­sion with all fea­tures at http://fluid.en.softonic.com/mac), launch it and set the URL field to http://designers.mx/, Give it a name (I chose Design­ersMX) and Click “Create”.

Fluid App

Once you receive the suc­cess mes­sage, 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 optim­ized ver­sion of Design­ersMX at this point. Adjust the win­dow to the width/height you prefer.

Mobile Optimized

Go to the pref­er­ences menu.

Fluid Preferences

Click on appear­ance and change win­dow style to “HUD (Black) and re-start the app.

Fluid Appearance

The win­dow chrome now matches the color scheme of the site:

DesignersMX Floating Window

At this point you already have a nice Design­ersMX app. If you prefer hav­ing a float­ing win­dow on your desktop you are done… How­ever if you are like me and prefer menu bar icons fol­low the next step.

Go to the app’s menu, select “Con­vert To MenuEx­tra SSB” and click ok.

MenuExtra SSB

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

Menu Bar Icon

Voilà!

You now have a beau­ti­ful Designers.MX Desktop App.

Thanks go to Cameron Moll for provid­ing the soundtrack while I wrote this blog post, to Designers.MX for provid­ing an awe­some ser­vice and to all those that have con­trib­uted awe­some mixes and covers.

Cheers all, enjoy!