nasarik.com - A Lancashire designer's journey through life, print and web design » future

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.

Banner adverts – animated or static?

nasarik — Fri, 05 Feb 2010 22:01:46 +0000

I was contacted today by a colleague for whome I had recently designed a static banner, she requested that I animate it, when I asked why an advert with one simple message needed animating she told me that during a presentation to her superior she was reprimanded and told it should have been! – I was stunned that a senior member of our company should have such an uninformed view of online advertising, and worse still be preaching it to their staff!

As a fairly experienced designer of adverts from print to web I understand the balance between customer satisfaction and user response quite well, I also have equally successful examples of both static and animated artwork; unfortunately sales teams don’t have this wealth of experience and prefer something esthetically pleasing or dynamic to wow a client and make the sales pitch that much easier for themselves, while I sympathise with sales teams wanting to keep their task simple in difficult times I can’t help feeling that it’s ignorance that makes the pitch difficult, not the dynamics of the advert.

Let me explain why I feel ignorance is the issue – Banner advertising has been around for a number of years now and web users are more switched on than ever before, at the same time various web browsers along with off-the-shelf software make it relatively simple to block banner advertising, one click and a web site’s ads are gone which is not good news for companies that have a banner advertising website model! This is where the ignorance of sales people and teams starts to become a real issue, their need to keep the sale simple will inevitably damage advertising effectiveness as users either stop visiting your site or just simply block your advertising content.

My ethos is ‘less is more’ – yep not the first time you have probably heard this, but as far as I can tell there are three clear types of banner advert -

The adverts with one clear message and minimal text
Adverts for brand awareness only and again minimal contact copy
Those with a few clear key messages.

For me the first would be static this is because the simple message is the important part of the advert, it needs to be on screen for as long as possible giving the message the best chance of being absorbed by the user, while the second is using general content with no clear call to action, this naturally could use subtle animation to draw the users eye without distracting them too much (colour blends and changes would work well), the third where content is an issue I would use interactive animation i.e. when a user rolls over the advert an extra element is presented.

Using the correct advert type for the content you are presenting is key, but because of the fear some businesses have of the Internet coupled with a lack of understanding the industries most in need of these revenues may simply cut their own throats. Many web design blogs and websites have adopted the static advert model and seem to be making money, maybe the media industry should pay attention to this!

To prove that this can be successful Fusion Ads delivery network deals in only static advertising and currently delivers over 20,000,000 page views per month to its design network – Seems this is working quite well and may just be worth keeping an eye on.

I think some animation is necessary and sometimes you simply cannot get around it but it certainly shouldn’t be the industry standard. If you have to animate an advert to make the sell then the advert is probably not going to succeed!

Slowly advertising is going to change and banners will disappear, so adapt now it will make a huge difference to the future and life of all online services.

The dark side and Google

nasarik — Sat, 29 Aug 2009 22:04:45 +0000

In the last ten years Google has moved from humble search engine to dominant web superpower and with no sign of easing up, but are they running the risk of becoming the new Microsoft which for the early part of this decade were hated. Surely Google can’t move to the dark side and become the new un-stoppable machine?

So let me begin by saying that ‘I love Google’ and all it has brought with it, with its free open-source attitude and none corporate mentality it has helped revolutionise the web and how it is used by business and personal users alike; I would go as far to say that no other web company has even come close to offer all that Google has, Youtube and Facebook have done some great things for user interaction but Google not only led the way in user interaction but molded it in the shape it saw fit, not giving in to the money making model of less successful businesses.

There you go, I love Google – but for all that makes Google amazing is at the same time making me wonder just how long it will be before those that love it will start to hate it? A few weeks back I wrote an article looking at the competition that google has and the potential for its crown to slip, but as time roles on and Google starts to move into other areas such as operating systems and mobile devices I can’t help feeling that it won’t be the competition that brings Google down, but Google itself! - Google is starting to become way too much like the Microsoft of old, you may disagree completely with this theory but don’t forget it wasn’t that long ago Bill Gates was the blue eyed boy of Microsoft who was making the world a better and easier place for us all to live, Bill Gates and Microsoft is a prime example of how people have very short memories and when things go bad they can go really bad!

Microsoft problems started when they corned the PC operating system market, rumours of bully-boy tactics and the Monopolies ruling in the late nineties saw Microsoft’s trusted persona disappear in an instant. Google has started to mirror some of the same actions that Microsoft took, for example Google now owns Youtube, feedburner and Double Click a large online advert delivery service, these acquisitions are turning Google into that un-stoppable machine that Microsoft once was.

Like I said earlier I love Google and the thought of them going the same way as Microsoft brings me a feeling of sadness, but if the company keeps heading in this direction then I fear for its future as our friend in the world of the web. Other great companies such as Apple have managed to diversify releasing mobile phones and becoming major deliverers of music, but they have stayed within their comfort zone of home user/entertainment products which have fitted into our lives beautifully. If Google stray too far they may just find themselves out in the technological wilderness with the trust of users lost for ever.

Please Google just stick with what you are good at and don’t get greedy!