With the recent loss of Steve Jobs I felt I needed to write a little something to mark his passing; but with the eulogy that the Internet has become since his death I felt my words would simply be lost, or just not mean enough. A few days have passed and I felt now was a good time…

The thing is, that Steve, whether you liked him or not, had an attitude towards design, technology and life that changed the way the human race interact, communicate and learn with the devices around them. He was able to remove the technical boundaries from his mind and lead the creation of things that became extensions of ourselves, to make the way we create easier no matter what these creations needed to be; and that is why I think there has been such a reaction to his death.

Steve Jobs just knew what we wanted and gave his passion and eventually his whole life to make those needs a reality. Yes, there have been many visionaries before him, Bill Gates for instance has dominated the computer market with the Windows OS for nearly two decades, yet I don’t feel any empathy towards the man who created a system designed for those who had to have at least a basic knowledge of computers, and that is where Jobs differed.

Every piece of technology Apple has released in the last decade has not been made for geeks, they have been made for everyone! That is the genius of Apple and more accurately Steve himself, no matter who you are, what your knowledge, you should be able to use it, just like everyone can use a book or a pen.

And that is how I feel about Steve’s legacy, writing this on my iPad2, checking the responses to this on my iPhone and teaching my daughter how to use technology an her iMac – Thanks Steve

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.

Recently while proofing a design I had created a colleague of mine asked “Why do we not use blue links?”, to which my immediate response should have been ‘Why should we use blue links!”. However, to avoid an argument I let him speak about how users were used to the standard blue links shown on web pages and anything else could confuse, but does it and can it?

As a designer I try to understand aesthetics and usability in equal measure in an attempt to produce the best user experiences for the websites I create. Blue links as a standard however, leave me in an uncomfortable place; these have been the standard in web design since the beginning, but just because something has always been this way doesn’t mean it should never change, surely?

In my opinion there are three factors at work here, these are:-

• History
• Design
• Usability

So I feel I should touch on each separately…

History

As I mentioned above the blue link has been part of the modern web for as long as I can remember, which has created an expectation in some peoples minds as to how links should be represented online. Having understood this and accepted this concept it still doesn’t change the fact that blue link was conceved by someone technical, a logical thinker or programmer whose main objective was to keep plain text and active content immediately and visibly separate, in a world were web design hadn’t been born and where options were limited. Blue is naturally a vivid display colour so choosing this colour to highlight links was an easy choice. Yet things have changed massively since then, visual displays have improved, the addition of images and interactivity altered the web beyond all recognition, so surely we can move on and create new standards?!

Design

The history segment above can be argued with I’m sure, but here in design the blue link is the enemy! (Well in my mind it is anyway). Over exaggerated colours, animated gifs and cramped content are now becoming a thing of the past, or more accurately a remnant of the 1990′s. When the Internet was born it was the playground for technical geeks who communicated and shared, the interface that this occurred within was simply not important. Now however, users are born into the Internet, schools actively encourage very young children to play online and it all seems to come very naturally.

Every step of this modern learning is down to how the pages look and react; would children be as inclined to learn about web pages if they all looked and behaved the same. Is it not also interesting how as design has become part of the modern web the older generation embrassed the internet at a similar rate, and could this mean they are learning in the same way? The aesthetics of objects are tremedously important and dictate how we humans behave towards all sorts of things like magazines, advertising,  foods, books and even other people, but when the web was in its infancy the way the web looked was a relative low priority, with technical leaps being the main focus. Now however, the technology has slowed and people are now able to take a moment to look at the internet in a different way, with that slower pace comes an opportunity to start advancing the web in different other ways than just technical, shoudn’t now be the time where we can creatively improve the aethetics of the internet while at the same time improving users experiences, in the same way as we have seen with all other products over the years.

Usability

With this in mind I looked at the BBC Cbeebies website, here there are no blue links or at least very few. This is where my daughter took her first steps into the web and with no special guidance has been able to navigate this website and many sites since easily and instinctively since she was 2 years old. So how has she grasped this so easily? Well the BBC have used interactivity, anything that can be clicked moves or changes making its purpose really obvious to the user, and not a hint of blue or even plain text to be seen. This method moves away from the trusted blue links convention and assumes that users hover around a page, anything that looks different or interesting automatically makes a user gravitate towards it, once some activity is displayed, you click! – makes sense really. So if users are able to intuitively learn how a page works quickly and the design actively helps prioritise content either with colour, images, animation or activity then why shouldn’t it? Young children can grasp this without any direction so why shouldn’t everyone else, maybe we just need to have a little more faith?

Conclusion

Obviously there can be appropriate uses for blue links and I think search engines are a great example of this, I just feel that as long as links are obvious either with using colour or images that add to a design, or activity that emphasis the link we should be able to move forward away from this early method without causing any degradation of user experience.

Let me know what you think…