Graphic Design services covering Lancashire the Fylde coast and beyond - nasarik.com » 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…

CSS sprites – What they are, and how to use them?

nasarik — Fri, 15 May 2009 21:51:06 +0000

This is short article to briefly explain what sprites are and how you can implement them into you CSS designs.

CSS sprites are the combination of many images into one large image, each individual image is then moved using background position to be visible within each container; this process is extremely usefull in navigation menus where you would want two or three button image states (This method also nicely replaces the need for unnecessary javascript libraries).

What you will gain from using CSS sprites is better performance from you site as it needs to make less HTTP image requests which will ease the load on your pages.

A simple example:

Firstly, create an image 250px wide and 100px deep, within the image area create two button states with slightly different styles so that each state will be clear to the user (As in the example below). Save the image as a JPEG ready to use in the CSS.

The CSS:

Then place the following CSS into the head of your document; this will create the display area for the sprite while the background position will display the first button state.

ul.menu { list-style:none; padding:0; margin:0; }

ul.menu li a { list-style:none; display:block; width: 250px; height:50px; background:url(btn_eg.jpg) no-repeat; background-position: 0 0; }

Next we need to add the hover state, this will simply move the image up withing the same container when the mouse is over the button. To include the hover state simply add the following CSS after the main menu code.

ul.menu li a:hover { background-position: 0 -50px; }

The HTML:

Finally reference your button in the body as you would normally with the following HTML:

To see the final example click here

Overview

And you are done, a simple an effective way to start using CSS sprites in your pages. I have added two links to more in-depth articles on the subject of sprites below enjoy.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials