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

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.

Are standard blue hyperlinks conducive in modern web design?

nasarik — Wed, 20 Jul 2011 12:52:16 +0000

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…

Will I bite the HTML and CSS bullet in 2011?

nasarik — Fri, 31 Dec 2010 16:14:21 +0000

2010 has been a time when the next stage of web design was born with the introduction to most modern web browsers of HTML5 and CSS3. I have dabbled and experimented as I expect most other designers have throughout the year, yet compliance always bugs me.

The technology I can see on the horizon excites me, CSS3 and HTML5 will help to make web design a far more fluid process, HTML5 will improve structure and CSS3 will reduce the need for as many images within the design, while together these languages will bring a far more interactive web to our browsers without the need for too much additional code.

As always with new technology come new problems, with browser compatibility yet again at the top of the list. I know that HTML5 can be supported on all browsers with some clever Javascript and CSS3 can simply be left to degrade but is that what I really want to be doing with the sites I create? No, it isn’t, I want my websites to be identical no matter how the user visits them so complicating the build process with Javascript and another round of HTML hacks doesn’t fill my heart with joy.

For me, both these technologies are massively important and exciting steps sending the web in the right direction; but that is all they are for me, steps. Currently my site is based on the HMTL5 ready Starkers theme and I already incorporate some CSS3 values to the sites I build, but I will be waiting to see how quickly the compliance machine moves in 2011 before I commit fully to using them as standard. 2011 is sure to be an interesting and progressive year, I just think 2012 may be the year to get really excited about designing for the web.

Wishing you all a happy and prosperous 2011