Internet Marketing Blog

Learn a little, learn a lot, share the knowledge, catch up, discuss and spread the word.

Be inspired!

User experience is paramount

Web Design has matured over the last 10 years and has foregone a lot of the whizzy coolness of the early web to pursue a more practical approach to designing websites. This has been through embracing ‘user experience’ as the central tenet of web design. It is a pity then, that user experience is now becoming overlooked in other areas of design.

Over the last weekend I went out a couple of times to enjoy the lovely spring sunshine and was crossing the main road through Shoreham By Sea, the small coastal town where I live. The crossing here is governed by a set of pedestrian traffic lights which were replaced last year with a new type that has merged the button pressing module with the screen showing the green or red man indicating whether it is safe to cross or not. This means that the visual indication of whether it is safe to cross is now on the pavement, next to me, facing away from the road. All well and good except that now when crossing I no longer have a visual indication showing me it is safe to cross. Not a big deal to most, perhaps, but these visual cues add to our user experience and would make me feel a little safer, even if that safety is illusory.

I also went on a bike ride over the weekend and experienced two incidents where I felt that the experience of a user had not been fully thought through.

Firstly we decided to go get a new bracket for my wife’s bike to allow her to use the bike seat we have for our daughter on her bike as well as mine. I had my daughter on the back of my bike on the way there and managed to ride over a drain cover that I had not looked at carefully enough. This drain cover had holes the width of my wheel and the length of the hole allowed about a third of my wheel to disappear down it. The hole went with the flow of the traffic and so I managed to put my wheel down it, luckily I was going very slowly so no harm was done except for me hitting the crossbar in a painful place.

Had the orientation of the drain cover been the other way it would have been no problem. This is not strictly ‘user experience’ as I am not the intended user of a drain cover but I feel it is related. The fact that the drain cover was just outside Halfords which was the bike store we were heading for, seems to be good enough reason to me to consider that cyclists may be using that stretch of road so it should be safe for them.

We managed to get to Halfords with no further mishap and looked for somewhere to tie up the bikes but there is no bike parking facilities at Halfords. Now, I estimate that the bike department of that particular Halfords store is about a quarter to a third of the store’s floor space, so not having bike parking facilities seems to me to be bizarre to say the least.

And there you have it, a small illustration of how designing for user experience could have made my weekend just that little bit better and less painful. It certainly gave me a timely reminder that user experience is of paramount importance to all design work and should be at the core of everything we do. At Juretic we have design processes in place that mean we start out with ‘UX’ (as it has become known), as the first consideration of the design process allowing us to ensure that this is at the forefront of our design work and throughout the project cycle.


Martin Gordon wrote this on 29 April, 2009 @ 1:15 pm
Filed under: Web Design & Development

10 Most Beautiful Twitter Bird Images

Mart came up with a great write up on benefits, values & ethics of conversation on Twitter. I wanted add a creative touch to the subject by presenting 10 beautiful twitter birds that I found over the past few days which you can use on your blogs/websites. The twitter bird images presented here are linked to their source where you can download the High Quality version!

Most Beautiful Twitter Bird

Noticing how Twitter can potentially help to increase followers & readerships, more bloggers are promoting their twitter profiles through blogs & websites. You can use these images on your websites/blogs to promote your profile or business.

So let’s get started and don’t forget to subscribe to our RSS-Feed and visit our twitter page if you want to keep track of our next compilation series post.

10 Most Beautiful Twitter Bird Images

1. Productive Dreams / @gopalraju

Most Beautiful Twitter Bird

2. iPotion / @youmago

Most Beautiful Twitter Bird

3.  function / @liammckay

Most Beautiful Twitter Bird

4. The Design Superhero / @aravindajith

Most Beautiful Twitter Bird

5. iampaddy / @paddyonnelly

Most Beautiful Twitter Bird

6. Darkmotion@darkmotion

Most Beautiful Twitter Bird

7.  Sigler Design /@michaelsigler

Most Beautiful Twitter Bird

8. Mau Russo Design / @maurizio

Most Beautiful Twitter Bird

9.  Luc Latulippe / @luclatulippe

Most Beautiful Twitter Bird

10.  Smashing Magazine / @smashingmag

Most Beautiful Twitter Bird

Extras:

On a side note, if you are interested in designing your own Twitter Bird (Mascot), Rype Putnam has a wonderful tutorial called “Create a Twitter Bird Mascot” & HongKiat has a couple of Twitter Bird Wallpapers (using iPotion’s twitter bird) to use on your desktop.

Feel free to suggest any beautiful twitter bird images that you come across and don’t forget to follow me on twitter @iVinay ;)

Happy Tweeting!


Vinay Chandrasekaran wrote this on 11 March, 2009 @ 3:57 pm
Filed under: Social Media,Twitter,Web Design & Development

Google Analytics, iPhones & Apps

If, like us, you  love the freedom your iPhone gives you for surfing the web on the go; on a train, bus,  in a cafe or down the pub. The freedom is fantastic, some might say slightly geeky or even sad – they just don’t understand. Whatever people may say the iPhone (& other imitations such as Smart phones) has brought a whole new world to surfing the web and updating your social media and blogs on the go. 

This may have got you thinking how many people are browsing your site with iPhones. Well your luck is in as the Google Analytics team have released a new Advanced Segments Report for iPhone traffic. Look for the “Advanced Segments Beta” link on the lefthand menu of your Google Analytics accounts, just under Customer Reports. Here you can manage different segments of visits.Look down the list for “Visits from iPhones” and away you go. Fully segmented reports on all your iPhone visitors. 

Its quite interesting; our site gets most of its iPhone traffic from Google searches. The traffic volumn isn’t huge and accounts for less than 2% of our traffic but it will not be long before it is time to develop an iPhone friendly site. Will have to get our CSS team onto it.

Now you know all about your iPhone visitors, the next step it to get a good iPhone App to view your Google Analytic data.  I’ve been testing  Analytics App for iPhones. It gives you all the top level reports you will find on the normal Google Analytics with non flash graphics.The Google Analytics app lets you view multi accounts and is extended to view ecommerce, goals and event tracking.  

First impression is very good. It costs £3.49,  which is one of the more expensive apps out,  but for any webmaster or web geek it is well worth it. The only downside is that you don’t get the “Advanced Segmented iPhone Report” – bit of a cart before the horse situation here, but its early days. 

Happy iPhoning ;0)

PNG colour discrepancies can be cured easily

I have been working on a site build that required a PNG to sit over the background to provide a nice fade into the footer of the site. A PNG graphic seemed to be ideal for this until I encountered a problem. This problem manifests itself in a colour discrepancy between the background colour set via the CSS and the saved PNG. All other graphics saved from the PSD as a jpeg or gif using the colour seemed to match the CSS colour correctly, it was only the PNG that was causing a problem.

PNG discrepancy

I have had this problem before but have always skirted around tackling it directly and always found a different solution, but this time I wanted to tackle the problem head on. I knew from previous investigation regarding PNGs (trying to get them to achieve transparency in IE6 most probably) that there was something that PNGs did to offset their Gamma so as to achieve the same degree of brightness in the image as was perceived on the creating monitor. This is not a bad thing in itself but does cause problems when matching these colours up to CSS background colours. However, there is a way of stripping out this extraneous information to leave the image with the intended colours. There is an application named TweakPNG that allows you to play with the meta data that gets saved out with a PNG including the offending Gamma offset.

Tweak PNG application

The highlighted row above shows the file gamma offset to 0.55000 which when set to 0 provides the correct colours for my purposes. And gives the desired result.

PNG after correction


Martin Gordon wrote this on 27 November, 2008 @ 11:02 am
Filed under: Web Design & Development

The importance of web standards to clients

Web Standards has been a term often heard by web professionals over the past decade and it seems that this has been a good thing for increasing the professionalism of our industry. But often the client has been left out of the loop on why web standards are important and not only that but can benefit them and their ROI.

The advantages for web designers are perfectly clear in that the first thing a designer or developer will notice when adopting web standards is that their code is:

  • Easier to read
  • Less bloated
  • Much easier to bug fix

The first and third of these are directly related and provide the client with the benefit that maintenance costs should be trimmed as bug fixing becomes quicker. However, the second point in this list also provides a number of benefits to the client.

Lets look at these benfits in detail.

Firstly, with less bloated code comes smaller file sizes which equates to less bandwidth used by your site which can save some of the operating costs of your site.

Secondly, this smaller file size then equates to faster page loads which is highly beneficial as there have been many studies over the years that suggest that users are not prepared to wait too long for a site to load before finding somewhere else to go (how long is too long is a contentious point).

Lastly, though is an important benefit for many of our clients who use our Search Engine Marketing services to market their site and attain good traffic through Google. This benefit is that since April 2008 Google Adwords account users landing page load times have been taken into account when judging the quality of the page so quicker load times can directly benefit your Google campaign: How does load time affect my landing page quality?

Using standards is also good from the point of view that the code will then be future proofed against advances in web technologies such as new browser launches etc. As the new Google Chrome browser is a a standards compliant browser we are not having to recode to make any of our sites work in it, they work in it anyway due to being standards compliant.

Standards compliance is not as big a topic these days as it used to be but it is still worth reminding clients that there are benefits to adhering to the standards.


Martin Gordon wrote this on 3 October, 2008 @ 3:18 pm
Filed under: Web Design & Development

Renaming File Extensions Uncovered

Every now and then you have one of those little problems, you are sure there must be a simple solution, yet for the life of you – you can’t find it.

Today I had the task of converting a few hundred supplied images into a useable format for web use. The supplied files were produced on a mac, and were free of defining extensions.
We Windows users do tend to find file extensions useful as do many online and offline applications.

Martin, our Senior Designer, who is recovering swiftly from allowing his 2 year old daughter to shave his head, managed to work out that the correct extension for these files would be a .tiff – (Tag Image File Format), having tried .eps , .bmp, .jpg and a few others.

I looked into the options available – those of you who have tried the Windows rename tool will understand that this was not the best way to proceed.

Initially I looked at Microsoft Picture Editor which, though not a great editor, has a very useful file renaming routine. The program, however, did not recognise the files I pointed it at as image files ( as they had no extensions ) – so refused to have anything to do with them. Next I researched several downloadable programs which promised to batch rename files, but had no real luck.

Ah, the joy of the Internet ( only last week I fixed my washing machine following advice on a forum), I found mention of a command line rename tool which I could use directly from Windows Vista. It recommended me to try opening up command line in the folder ( shift and right click ) I wished to edit :

ren *.* *.tiff

You can of course change the last bit to be anything.

As if by magic all files in the folder were immediately and swiftly renamed with the chosen extension.

Now that the files are viewable and editable Martin is batching them into .jpegs.


Sam Swanson wrote this on @ 12:53 pm
Filed under: Web Design & Development

Older Posts »
Email a Friend Print this page