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

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.

Spoon run in to trouble with Microsoft

nasarik — Sun, 02 Jan 2011 23:22:23 +0000

Recently I posted on my discovery of spoon.net, a service which allowed you to virtually run web browsers on a PC with no install for free. This service seemed to answer the cross-browser testing problem for all PC based web designers; until I re-visited the site again in the last few weeks and discovered Microsoft support had been stopped.

As I am a Mac based designer I hadn’t been using the service that often, so when I revisited the service to see if Mac support had been added I was stunned to see IE had been removed. I was greeted with a message explaining that they hoped to have IE support back soon, so I waited a few weeks and visited again, this time the message was a little more vague, it read ‘Come back soon for more information on how to use Internet Explorer with Spoon!’. So it would seem that Microsoft have pulled the plug and after doing a little research discovered that apparently it is to quote a phrase ‘violating Microsoft’s intellectual property rights’.

Just when something as user-friendly as spoon looked like curing the age old issue of cross-browser testing Microsoft come in with their size 9 boots and squashed the most important part of the service. Yet again Microsoft fail to make their already free software totally user friendly and web designers the world over will need to find alternative ways of checking their websites in all versions of IE. What Microsoft fail to see is the bigger picture, this move will surely just help accelerate and compound the hate for all things IE and even Microsoft in an increasingly competitive browser market?

I personally hope spoon manage to overcome this ridiculous issue with Microsoft, or at very least Microsoft realise they are being so small minded it will ultimately be detrimental to their already floundering business.

Until then if anyone has discovered any great alternatives to the IE testing issue for both Mac and PC please let me know.

Stirring it up virtually, with ‘spoon’

nasarik — Mon, 27 Sep 2010 21:14:49 +0000

I am always looking for new and easy ways to test websites I have created in all the modern browsers, and recently stumbled across ‘spoon‘.

In a nutshell spoon gives you the ability to run any app virtually, with no complex setup or install. Simply download and install the spoon plug-in and you’re ready to run a huge selection of open source apps for free including web browsers, media editors, audio players, office suites and the list goes on.

Obviously this appealed to me and certainly seemed like a great way to test my web projects; with its support for all major versions of IE, Firefox, Chrome, Safari and Opera it would make my life so much easier and bring a more consistent look to my designs across all platforms. The great thing is that once you have downloaded and installed the plug-in you are only a few clicks away from running any open source app virtually, and for cross browser testing I have been hard pushed to find anything better.

As well as running free open source apps spoon does offer a premium service where developers are able to run and test their own applications.

However, as with most things there are always a few draw-backs. spoon doesn’t support Mac; I made some inquiries regarding the development for this and was given the impression it would be quite some time before this was released, late 2011 was the advised date which is a shame for all those Mac based designers out there. Personally I do own a PC laptop, but this certainly doesn’t give me the best experience when viewing any of my sites. I also found the service to be inconsistently slow for no reason but in its defence it is still far quicker than any of the alternatives such as browser shots.

spoon is certainly a step in the right direction for both app and cross-browser testing; I would just like to see the support for Mac hurried a little.