I recently downloaded Pixelmator 2 without researching it fully online; looking back this was a foolish thing to do!

The search has been on now for a decent Photoshop replacement, Gimp and Sumo paint have been in the running but none of them really felt as easy to use. Then version 2 of Pixelmator started to be discussed via Twitter, so I decided to wait until it’s release and see what the general consensus was.  The initial comments were positive, it seemed to do everything I would need (with no mention of CMYK support) and I foolishly took it as a true Photoshop alternative and promptly downloaded it from the App store. I should also add, that my eagerness to download was not just due to my own impatience, but also to cash in on the $29.99 price offer before it rose to a slightly less appealing $59.

It may sound cheap, but times are hard!

So happily I played with the functions, all was going well and then I decided to colour balance some images ready for a magazine I was working; and that is when I noticed, no CMYK! What!, surely a product offering Photoshop like functionality would be aimed at a market of designers who may get involved with print at least now and again? Well it would appear not, and the $29.99 I spent now feels a little like a silly waste of money as I revert back to using the amazingly expensive Photoshop for all my work.

There are ways of converting images to CMYK outside of the Pixelmator app; but do I really want to be balancing images in Pixelmator and then firing them through Colour Sync to convert them to CMYK? That just feels like a bloated process to me.

So, for now Photoshop still rules for me as far as usability and functionality, even though it is one of the most unstable applications out there.

If in the meantime anyone knows of any good alternatives or processes that can get around the short fall in Pixelmator, then please feel free to contact me; and if I manage to find a solution I will update this article so we can all try and save some money instead of lining Adobe’s pockets.

If you use Twitter, read Smashing Magazine or any of the other leading design blogs on the web, then no doubt you will be aware of responsive design and the impact that the industry knows it will have on all web developers and designers. If you don’t, then here is an overview of what it is and why I decided now was the time to get on-board.

So what is response design

Responsive design is basically adapting a website to appear appropriately dependant on the device being used by the user. This has existed in web design for some time, particularly when a designer has needed to ensure that a site appeared correctly in all web browsers, and more notably IE6. Usual this was achieved by using media queries which detected the browser version and delivered the appropriate style sheet, eliminating the need for crude hacks or work-arounds to create a consistent experience for all.

Today with the introduction of CSS3, we are not simply limited to browser specific queries, we have much more control and can detect a browser screen size and deliver a set of specific styles to that as well. This new ability means that we can choose to build our projects with a set of structured options or alternatively with a fluid response meaning that one site can potentially work comfortably on many devices without a huge amount of work.

A simple responsive experience, and why?

With all the hype I simply couldn’t ignore the seemingly inevitable future for our industry, so I finally bit the bullet and gave it a go. Now, as I have only every really created fixed width designs my first job was to update all my values to percentages so that the design would scale effectively, however, I still wanted to keep a maximum site width, so in addition to the width:100%; value I added the max-width: value as well, specifying my desired pixel dimension (sorry, I know pixel!). So this would give me a desired maximum site look while still giving the overall flexibility of the percentages.

Once the scaling was complete (feel free to test this by resizing the browser window), I then did my research which took me to a great article on Smashing Magazine. Articles like this give invaluable information on all aspects of the responsive design process and I would recommend taking your time to find the most appropriate option before really trying to get to grips with responsive designs. For me however, I explored the '@media screen' function, this gave me the control to adapt my design when hitting certain screen dimensions, for example the first thing I tried was to remove content when the screen dimension was that of an iPhone, which looked like this:-

@media screen and (max-width:400px) {
#primary {display:none;}
}

You will see that if you reduce the browser window to below this dimension the sidebar of my site disappears, and the same happens on the iPhone, and that is how the responsive journey of nasarik.com began.

Stumbling blocks

I hit a few novice snags along the way which nearly caused me to give up, one of which was the iPhone still scaling my site even though I had included queries. Don’t panic a simple meta value in your <head> ensures that the iPhone behaves as you would expect and here it is – <meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

Finally, testing can be an issue particularly if you don’t have an iPhone, so try using http://iphone4simulator.com/ it seems to render perfectly and is free.

Conclusion

Responsive design isn’t to be feared, play with it, try and break your site and see what happens.

A more detailed overview of this security issue and other ways to stay secure can be found here – http://wordpress.org/development/2009/09/keep-wordpress-secure/