Graphic Design services covering Lancashire the Fylde coast and beyond - nasarik.com » iphone

Don’t be afraid of responsive design

nasarik — Sat, 03 Sep 2011 20:56:19 +0000

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 ensures that the iPhone behaves as you would expect and here it is –

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.

Problems importing images to iPhoto from iPhones

nasarik — Sun, 22 May 2011 12:56:41 +0000

It has been quite a few months since the last time I backed-up the images from my iPhone to iTunes, so I decided it was probably a good idea to do it now considering the age of my iPhone 3G. When I connected the device to my iMac, it detected the iPhone and found all 1186 images, but then hit me with a ‘cannot read image format’ warning message!

After disconnecting and reconnecting my iPhone twenty times and restarting my iMac equally as often a change in strategy was needed. So to save others having to go through this frustrating process here is the what I did…

Hard reset your iPhone (Still not sure why I didn’t do this in the first place!)

To do this hold the power button and the home button simultaneously, keep holding this even when the red power off slider appears and until the phone completely switches off. Now restart your iPhone connect it directly to your Mac and launch iPhoto, now iPhoto should pick up all the images on your device with no problems, it’s as easy as that!

I am using an iPhone 3G and iPhoto 09 so this may only work depending on your setup. If this doesn’t work don’t despair, there is another way if iPhoto simply won’t play. On most iMacs there is a piece of software called ‘image capture’ which works just as well. Using the same process attach your iPhone while image capture is open, it will then detect your device and give you the option to download the images to a folder of your choice.

I hope this helps any iPhone and iPhoto users out there, however, if you have any other solutions or fixes for this issue I would like to hear from you.

More FREE iphone apps

nasarik — Sat, 07 Feb 2009 23:16:47 +0000

Since my iphone arrived way back in August I have had plenty of time to download and test a wide range of apps available. So I thought it was high time I recommended a couple more excellent free options that you just wouldn’t want to be without.

MMS Photo Messaging

One of the main problems with the iphone has been the lack of built in MMS capability which the majority of other mobile phones have as standard. Well just maybe that problem has been resolved for FREE, MMS Photo Messaging (by Ed Lea) is a great little app that allows your iphone to receive pictures directly without the need to visit that annoying 02 website.

The way it works is simple, a four digit code is within the standard notification SMS that you receive when a picture has been sent, take this code along with your phone number and add it to the MMS application, once this has been added the app will happily download the images directly into your inbox at no charge. Beware however, that sending messages is still a little expensive and you will need to purchase credit for this unless your contract already allows MMS.

There seems to be only one small problem with this app, every few weeks 02 change the four digit key that is required to download your pictures, so you have to remember to update this in the app which is more of an annoyance that a major issue. Even with this small draw back I still think this has helped overcome my concerns regarding the iphone’s lack of MMS capability and I would recommend that you give it a go.

Social networking

As MMS Photo Messaging makes the iphone do a job it should have done all along, the next two add something extra that I personally can’t live without, I’m talking about Twitterrific and Facebook. Twitterrific by The Iconfactory and Facebook are exactly what you would expect, great conduits into the social networking world. Between them they offer everything you should need to keep up-to-date with friends and let your followers know what you are doing.

As with most free apps there are a few draw back. Twitterrific doesn’t seem to have the functionality to search for people or the abilility to clear the list for ease of navigation, but this is more than likely available through the premium edition if you are willing to pay £5.99. Facebook on the other hand doesn’t have any obvious major flaws, although being able to have multiple accounts saved would be a nice addition.

There are many more apps that are worth a look, here is a short list of others I am using:-

Remote – Allows you to control your Apple Mac itunes via a WI-FI connection
Ustream – Watch live video broadcasts on you phone
Seadragon Mobile – Microsoft’s high resolution gallery

I will post again soon with a detailed overview of the 3G iphone, and maybe some more apps that you should pick up.