Digital UK Design Blog

S352U2RER.smallWhether you are an IT professional or a computer novice, choosing the right backup system to use at work or home is a difficult, and frankly uninspiring use of time, and one which almost always results in making undesirable compromises. There always seem to be far too many options and the good solutions come with a price tag that almost matches the cost of the system they were designed to support. A good backup system should satisfy, at least, the following requirements:

  • It should be affordable.
  • Operation should be reasonably well automated.
  • It should be easy to restore to one of several points in time.
  • There should be some redundancy.
  • It should be simple to store some backups offsite.
  • Media should be encrypted for security.

Read the rest of this entry »

Viewing historical browser market share statistics the old fashioned way is a pretty dull task. There’s nothing less inspiring than sitting staring at a table of data that visually tells you nothing. On the flip side we all like a good pie chart right? All those colourful segments that kind of look like a Terry’s Chocolate Orange, indicating immediately the impact of the resulting data in a visual form.

Historical browser statistics

Current browser share statistics is something I reference from time to time and I use W3schools.com as a primary source for this data. A tool I recently discovered from Axis shows the historical browser statistics from W3schools.com in a custom visualisation. It tracks back to January 2002 and includes historic deprecated browsers such as IE4.

Conclusion

A cool online tool for viewing historical browser market share statistics. Witness the demice of Internet Explorers dominant control of the market with this intelligent custom visualisation. Let us know what you think of the tool and the market share as a whole.

I’m a web designer by day and a web designer by night, I pretty much live and breath the web. I use many tools to assist me in my workflow, tools that both assist me in maintaining quality in my work and also in saving time, time I’d much rather spend catching up on the latest season of The Wire.

One pretty cool tool I use to assist in the development side of web design are grid overlays. Grid overlays are exactly what they sound like, a grid that overlays your website. I use them as a quick visual guide to check to see in all my elements line up as intended and are pixel perfect.

Browser plugins

One option is to use Firefox and an extension called Gridfox. This is useful as I already use Firefox as my main development browser.

Scripts

Andy Budds Layout Grid Bookmarklet

A more die hard approach would be to use Javascript. Andy budd wrote a nice overlay grid bookmarklet, originally inspired by Khoi Vinh’s post about using a background image of a grid for layout. The script is also demonstrated on the SubtleGradient website.

#grid

A personal favourite is this Hashgrid script you can embed on your site. The clever part is you can turn it on and off by typing ALT + G – g33k! The clever scripting gives me the functionality I need, if I have a particular layout to test with a different structure I can simply replace the bg image.

Designing with Grids in mind

Do you or have you considered using a CSS framework when developing sites? Personally I don’t as I feel I can write lightweight CSS which is both flexible and cross browser. Photoshop guides and grids help in the design phase but you lose these when developing, until now of course.

In summary

These tools help bridge the gap between the design phase (Photoshop, guides and grids) and the development phase (using these tools to test and compare). Let us know if there are any other tools out there that do something similar, I’m sure I’ve missed some, oh and let us know what you think of these, if you already use them and what your experiences of working with them are.

Free Secret Santa Random Name Generator

November 17, 2009 | Tools | Gary Hartley | No Comments »

Christmas isn’t far away now, 38 days to be precise, and if you’re even a little bit festive there’s a chance your place of work may do a Secret Santa. It’s a fun way of buying a colleague a Christmas present without them knowing who sent it. It’s also fair because everyone normally has a small set budget in which to purchase the present. We use a simple online Secret Santa organiser that randomly pairs present givers and receivers. Simple enter the names and email addresses of each participant and each person will receive the name of the person they need to buy for, all done surreptitiously.

The Site

boogspace

The process

4 simple steps

  1. Enter your name, email address, and a group name
  2. Select the number of presents for each participant.
  3. Enter the names of the participants.
  4. Click on the Pick Names button.

Visit the Free Secret Santa Random Name Generator →

Orbitron - Satellite Tracking System

A moving light in the sky is guaranteed to catch my attention. If it is slow moving and flashing then I know that it is likely to be an aircraft. If it shoots across the sky in an instant then I know it to be a meteor or shooting star. If it is fixed then I conclude that it is a star or a planet. But what if it is none of these? What if it is bright orange and moves across the sky slowly over a period of thirty seconds or so?

I asked myself that very question recently as I watched in amazement as an object that looked to me like a distant ball of fire passed silently and slowly from north-west to south-east across the clear evening sky. My initial thoughts were that I had just seen my first fireball but I knew that to be very unlikely and, besides, I was sure that fireballs were associated with freak weather conditions and on this night everything was still.

The object, whatever it was, appeared to be some distance off and moved across the sky with a speed that I readily associated with that of orbiting satellites which I had seen many times before. But these had always been white in colour and this one was a distant flaming red.

I wondered if it would be easy to check whether any satellites had passed overhead and so turned to the Internet for a solution. I came across a number of great resources which provided more than enough information to solve the mystery.

The first was a free piece of software by Sebastian Stoff called the Orbitron Satellite Tracking System which gives graphical and tabular information about the position of satellites and their visibility at a given time and place. The Orbitron software suggested that what I may have seen was a satellite which goes by the name of Iridium 43, one of a family of about seventy such satellites that provide communication services and orbit the earth from pole to pole at a height of about 500 miles and at a speed of about 17,000 miles per hour.

The Iridium satellites made the news back in February of this year when one of them, Iridium 33, collided with a retired Russian satellite and with a combined impact speed of 26,000 miles per hours both were destroyed leaving thousands of pieces of space debris to fall back to earth over the following days. The Russian satellite had been uncontrolled since, at least, 1995 but the authorities had predicted that the two satellites should have missed each other by about half a kilometre – they were clearly wrong.

Iridium satellites are known to give rise to an interesting phenomenon – the Iridium Flare. The satellites are equipped with three highly reflective door sized antenna made of silver-coated Teflon on polished aluminium  and occasionally one of these will pick up light from the sun and reflect it down onto the earth’s surface generating an illuminated spot on the earth about 6 miles across. To an observer on the surface of the earth the satellite appears as if from nowhere as a faint object that slowly increases in brightness to a maximum and then just as quickly dims until it is no longer visible, with the whole show lasting no longer than, perhaps, thirty seconds. A simulation is shown here. The satellite that I saw appeared a rich flaming red in colour but I put that down to atmospheric conditions and its effect on the light as it was reflected from the satellite down to earth.

A really excellent web site that makes it easy to determine when and where to look out for satellites that are likely to be visible to the naked eye is Heavens Above. Start by declaring your location and follow links from the main page to get predictions for when Iridium flares, the International Space Station or other such objects will be visible in your area. The site also displays charts showing you where in the sky these objects will appear.

If you like to see a more earth-based and dynamic view of how any given satellite is orbiting then this real time satellite tracking web site has a mashup showing the live movement of selected satellites superimposed over the familiar Google Maps background. You can combine this view with an Iridium flare  prediction from the Heavens Above web site to get a Google Maps view of the expected track of a visible satellite too.

It is all a little geeky, but I find it reassuring to be able to get an explanation for such phenomena.

Smush.it is an image optimiser developed by Yahoo! that lets you decrease image file sizes without losing image quality. If you’re running Wordpress, there is a plugin that’s optimises images on the fly when you upload them. WP Smush.it takes just moments to install and can make a big impact on the performance of your website.

Smush.it for Wordpress

How does it work?

Every image you add to a page or post will be automatically run through Smush.it behind the scenes. You don’t have to do anything different.

N. B. In some cases GIFs should be replaced with PNG files. You can control this behaviour on the Options page. It is off by default.

Smush.it vs PunyPNG

We use Smush.it because it comes in an easy to use Wordpress plugin that optimises images uploaded. PunyPNG however compared their compression engine against Smush.it in a recent test and achieved a 41% compression rate, while Smush.it only achieved 14%. So if you want to optimise the websites main template images it would be worth checking out PunyPNG as well as Smush.it.

PunyPNG vs Smush.it

Other image optimisation tools

There are many image optimisation tools available, here are just a few:

I’ve been using IETester for a few months now and find it invaluable in my day-to-day development or new and old websites. IETester is simply a browser that allows you to view your website in multiple versions of Internet Explorer while keeping your standard install of Internet Explorer.

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

So far IETester by my-debugbar.com has had over 750,000 downloads and so is a popular choice amongst web designer across the globe.

IETester

IETester has some limitations:

  • The Previous/Next buttons are not working properly
  • Focus is not working properly
  • Java applets are not working
  • Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.
  • CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.

5 Second Usability Test

July 6, 2009 | Tools, Web Design | Gary Hartley | 1 Comment »

Calling all web designers, you may be interested in this cool little tool we discovered that lets you test the usability of your brand spanking new website. So before you start slicing and dicing, stop! Like Grolsch Lager, “it is not ready yet!”

As a designer I can stand up tall and confidently say I have designed a lot of websites that have under performed (not lately of course ;-) ). Designs that have failed to fulfill the objective of the brief and work for the client. A successful design isn’t just made up of a few pretty graphics and a jazzy logo, it’s strategically planned to give the user exactly what they want. Within 5 seconds they need to know who you are and what you do. Secondly comes the every so important ‘Call to Action or CTA’.

JARGON BUSTER : CTA : Simply getting the user to do something specific, like signup or leave a comment.

fivesecondusabilitytest

Now the best way to see if your new design works is to do a very simple usability test. Five Second Test is a smart, yet simple online tool that lets you upload a design to be tested. It’s a simple process:

  1. Upload a JPEG of your swanky new Badger Traps website.
  2. Choose whether you want a Classic or Click Test
  3. Sit back and wait for the results.

Classic Test: Testers have 5 seconds to name things they remember about the design they have just seen.
Click Test: Testers have 5 seconds to click on the design then describe what they clicked on.

So far over 17,000 tests have been completed (17,000 x 5 seconds is like…. a whole lot of time). If your new Badger Traps websites gets comments like:

“I have no idea what they sell” or “I think the name of the website was Cat Houses” then the design may need some work.

It’s so easy to use it’s worth a go. Spending 2 minutes to upload a design to ascertain these valuable comments could save you a lot of heart ache down the line.

iFrame Buster Script!

April 14, 2009 | Tools | Gary Hartley | 1 Comment »

The following script will stop your website from being encased within an iFrame. With the recently social media toolbars that have started to pop up it has become harder and harder to launch successful linkbait campaigns through traffic streams such as Social Media.

Digg is the latest culprit when they introduced their Social Media Toolbar, effectively killing linkbait in the process.

Digg toolbar

Basically websites like Digg have the potential of referring thousands upon thousands of visitors to your website if an article or post becomes popular, now what they do is refer that click into an iframe setup where they effectively remain on the Social Media website. The visitor therefore never physically steps foot on your website and no traffic is recorded.

Wikipedia have a great article on ‘Framekiller‘ and offers the following scripts to elinimate your website from being encased within an iframe.

Place either script with the <head> tags at the top of your web page.

<script type="text/javascript">if (top !== self) top.location.replace(self.location.href);</script>

Variation that lets the user know why they are being redirected with the use of a pop-up alert:

<script type="text/javascript">
    if (top !== self) {
        alert('The URL '+self.location.href+' cannot be viewed inside a frame.  You will be redirected.');
        top.location.href = self.location.href;
    }
</script>

Limitations

Because this is a client-side Javascript solution, it relies on the end-user’s browser to enforce their own security. This makes it a beneficial but unreliable means of disallowing your page to be embedded in other pages. The following situations may render the script above useless:

  • The user agent does not support JavaScript.
  • The user agent supports JavaScript, but this support has been opted out of by the user.
  • The user agent’s JavaScript support is flawed or partially implemented.
  • The user agent’s behavior is modified by a virus or plug-in (possibly without the user’s knowledge) in a way that undermines the framekiller script.

Other useful scripts and tools

Bruce ForsythWe all know IE6 is a bag ‘o’ shite poo right? Well unfortunately there are still loads of people who use it. This is not necessarily a problem in itself, after all as long and we do our CSS properly and understand the limitations of the browser, everything should be ok.

One area that does cause loads of headaches though is transparent PNGs and with more and more of our designs using gradient backgrounds and varying levels of transparency in their graphics, it’s inevitbale that you’ll have to use PNGs as opposed to GIFs to achieve the desired look of the site.

There is a really good and simple PNG fix which I’ve been using for a while and all you need to do to implement it is this:

  1. Get yourself downloading this JS file – PNG Fix for IE6
  2. In your header, insert the following code:
    <!--[if IE 6]>
    <script src="js/pngfix.js"></script>
    <script>
    DD_belatedPNG.fix();
    </script>
    <![endif]-->
  3. The function DD_belatedPNG.fix loads the png fix at runtime and all you need to do now is pass it each element that needs the fix applying. This can either be a class or an id for example:
    <!--[if IE 6]>
    <script src="js/pngfix.js"></script>
    <script>
    DD_belatedPNG.fix('img, .png_img');
    </script>
    <![endif]-->

Some Further Notes on this:

  1. You cannot use ‘body’ as one of your elements
  2. It doesn’t work on <TR> or <TD> elements, but this *shouldn’t* be a problem should it
  3. <INPUT type=”image”/> doesn’t work but why use a transparent PNG for a form button anyway?

Page 1 of 212

©2006 - 2009 The Floating Frog