Skip navigation

Category Archives: Tech Talk

I have been frustrated as of late, it comes down to the price of cheep ‘Twisted nematic’ (TN) flat panel monitors. Because of the low price and acceptable quality for 90% of users these TN monitors have become the standard.

But for designers, digital artists and webmasters, we require a higher level of colour accuracy on our panels. The problems has always been the price tag that meant that many home users and small offices were priced out of the better quality panels.

Good news is the Dell has now launched two ‘In-plane switching’ (ISP) panels at consumer prices. ISP panels give a high higher level of colour accuracy and consistency across the panel so no more moving your head to try and work out what the colour should look like.

Enter the Dell UltraSharp U2211H (21.5-inch) and UltraSharp U2311H (23-inch) both panels offer:-

H-IPS Panel
10000:1 Contrast Ratio
8ms Response Time
one DVI-D
one DisplayPort
one VGA connectors
a 4-port USB hub
resolution of 1920×1050

They are priced on the Dell website as U2211H – £292 ($279), U2311H – £351 ($319).

Look out for other manufactures following with their own consumer priced ISP panels over the coming months, watch the space.

So for those of you who are think of trying Diigo out, this makes things better. As well as all the normal import option you can link Diigo and Delicious so when you add bookmarks to Diigo it adds to Delicious automatically.

To do this scroll down to the bottom of the page (in Diigo) and click “Save to Delicious” enter login and password and they are linked.

So I the other month I decided to start using dropbox. The problem was I like to save to my hard drive but then need to files in the office so have to save to USB key, and sure as day and night I frequenty forget either the USB key or to save the newest versions to the key.

If you dont know dropbox then click the link bellow and watch the video.

dropbox video

Why you should use it:-

1) Its free for 2Gb basic package

2) It uses less then 50Mb of RAM, most cases less then 30Mb (thats a good thing)

3) It does not use much CPU time (also a good thing)

4) It seems to upload and download quickly (will depend on your bandwith)

5) You can share files with others up-to 1Gb file size I think (bets email or sending CDs)

6) No messing around it works smoothly in the background

What you need to do:-

1) Use this link sign up to drop box and get extra free storage.

2) Enter your email, and name

3) Download a small program (12.9Mb) to your computer

4) Save your files to the dropbox folder (which works like any normal folder)

5) Thats it! or you have to download the small program on each computer you use but that really is it. Does not take more then 3 or 4 minutes to get started.

Problem

So yesterday I was working on an iphone UI design and got desk dropped by the boss and a developer. They proceeded to fire changes at me which I tried to make real time. Now this involved selection multiple layers and shifting them around. I have to say that the workflow felt all wrong at that moment and I wished I was using fireworks or illustrator so I could select and move quickly without having to use the layers pallet.

Solution

Now I was aware the move tool had an auto-select option but I have not really used it as much as I should but from now on I will. To make it even better from most other tools you and hold ctrl which will give you move tool. But also you can hold shift which allows you to select multi objects in the document window.

shift + ctrl + click objects in document window.

You need to have the auto-select option ticked and the layer or group selected in the drop down.

There is also the option to Show Bounding Box, which means you can see what is selected. You will need to select the move tool to see these option.

Well hope this helps, I know next time I get desk dropped I will be able to move multiple items briskly without having to use the layer pallet which remain the only pallet I have open 24/7. Maybe one day I will work pallet less!

For further reading have a look here.

So I have recently started to design layouts for smart phones, clearly it is a different world from web design. One thing that struck me was the resolution/pixel density seems to vary depending on the handset in question ranging from 150 to 300 ppi. While looking around I could not find any one source of data for a mix of handsets so I thought I would start at list. If I miss any (and I will) than please feel free to add to the comments section

iphone

160 ppi

3.5 inch

480 x 320 pixels

itouch

163 ppi

3.5 inch

480 x 320 pixels

HTC Touch Pro

287ppi

480×640 pixels

Palm Pre

3.1-inch

480×320 resolution,

186 ppi

ipad

9.7 inch,

1024 X 768

(132 ppi)

For furth reading you might like to see this.

You might also like to try this pixel calculator.

If you have details from other phones please add in comments and I will update the post.

So last year Photoshop.com brought out a Mobile App on your iPhone. While still quite basic in it functionality it seems to be quite a nice start. Bellow are some images of the app.

So I have just received my new toy. It is a electric monitor buy CurrentCost, I selected this monitor over the others on the market as it out puts an XML data stream. I am hopping to capture this data and publish it to the web.

First impressions of the monitor and the packaging it comes in are very good. It looks like a nice piece of kit. In the box you have the clamp, transmitter, monitor unit and power pack. I also got an extra clamp and a USB data cable.

This video by current cost will give you a better idea of the product (note this is the first generation I have the new cc128):-

So I will be setting up the unit and plugin into my CP with the hope of getting all that lovely data. I will update you to how it goes.

I have given the blog a new look, working on wordpress.com is quite limiting with regards to design. But I have not got the time at the moment to design a wordpress.org blog (no point in using templates if you are using .org). So for now I am still on wordpress.com and have gone for the ‘ChaosTheory’ template.

Let me know your thoughts on this template, I think it is cleaner than the old one. Also I big plus is the extra width of the main column.

So every time I start a new development I grab the standard templates and resets and get going. Now the other day I was out and about without my flashdrive and so had to hunt around for some templates rather then code up from scratch. In the end it took me 15 minutes to find what I was looking for and so saved me every little time if any.

So I thought for future reference I would add some basic templates to my blog so I can find them easily if I am caught short in the future. Hope you can make some good use of them.

Generic XHTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <!-- google hosted --> <script type="text/javascript" src="common.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <div id="wrapper"> <div id="main"> </div> </div> <div id="footer"> </div> </div> </body> </html>

CSS template with Eric Meyer’s Reset

/* index -------------------------------------------------------------------------------------- */ /* * Filename: style.css * Description: global CSS (master) * Version: 1.0.0 (YYYY-MM-DD) * Website: website-url * Author: authorname == STRUCTURE ============================================================================ * Page width: 990 px * Number of columns: 1 */ /* colorscheme --------------------------------------------------------------------------------------- */ /* white (bg): #fff grey (intro text): #333 grey (h3 headlines +contact bg) #a3a3a3 black (text): #000 red (link active): #670001 dark red (link hover + visited): #431611 */ /* Browser CSS-Reset --------------------------------------------------------------------------------------- */ /* Eric Meyer's Reset Reloaded */ /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus {outline: 0;} body { line-height: 1; color: white; background: black; } ol, ul {list-style: none;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} /* images and linked images without border */ img, a img {border: 0;} /* globals --------------------------------------------------------------------------------------- */ html {background: #fff;} body { background: #fff url(image.jpg) no-repeat left top; color: #000; display: table; font-size: 100%; /* reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px. */ width: 100%; /* This rule is primarily there for Internet Explorer 6 and below on Windows */ } html>body { font-size: 16px; /* sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera */ } a { border-bottom: 1px solid #670001; padding-bottom: 1px; text-decoration: none; } a:link, a:visited {color: #670001;} a:hover { background: #431611; border-bottom: 0; color: #fff; } /* Typography --------------------------------------------------------------------------------------- */ p { font: 1em/1.75em Georgia, "Times New Roman", Times, serif; margin: 0; text-indent:0; } p+p {text-indent:2em;} .first {text-indent: 0;} h1 { border-bottom: 1px dotted #a3a3a3; font: 3em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; font-weight: bold; margin-top: 80px; margin-left: 310px; margin-bottom: 1em; padding:0 30px 30px 20px; } h2 { font: 2.5em/1.75em Georgia, "Times New Roman", Times, serif; margin-top: 1em; margin-bottom: 0em; } h3 { color: #a3a3a3; font: 1.88em/0.934em Georgia, "Times New Roman", Times, serif; margin-top: 1.068em; margin-bottom: 0em; } h4 { color: #fff; font: 2em/1.5em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } h5 {color: #ccc; font: 1.25em/1.75em Georgia, "Times New Roman", Times, serif;} .amp { font: 1em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } /* use the best Ampersand */ /* layout elements --------------------------------------------------------------------------------------- */ /* wrapper */ /* nav */ /* content */ /* footer */ /* end of this stylesheet -------------------------------------------------------------------------------------- */

google-SERP-heat-mapclickdensitycrazyegg1CrazyEgg_heat-map

Two years back I was at Adobe live in a lecture about the changing internet. During what was an excellent talk I was introduced to the idea of heatmaps. They are a way of showing traffic trends via mouse movement and clicks. For me they are clearly a great tool for showing hotspots.

Recently I was reading a blog on a similar subject and it reminded me of heatmaps. I have been doing some searching and found an interesting article here which talks about how times are changing with regards to how people use google, they use a heatmap very interesting have a read.

How to use them

So I thought how do I use a heatmap, they are so handy I want to use one for my blogs. Searching around I have found some solutions:-

 

http://www.clickdensity.com/

these guys work on the first 5000 clicks being free and then you pay £2.50 – £1000 depending on the quality of clicks required.

 

http://crazyegg.com/

Crazyegg offer more than just heatmaps they do full stats. They charge from $9 to $99 depending on the quality of clicks needed.

 

https://addons.mozilla.org/en-US/firefox/addon/4779

I found this add-on which is now out of date but maybe it will get updated.

 

http://www.feng-gui.com/

Feng-GUI creates a heatmap of your website of an image and delineates which areas get the maximum attention. You can either enter your web page address or upload an image and make a heatmap in a few seconds.

 

http://nevyan.blogspot.com/2006/12/free-website-click-heatmap-diy.html

this site has a DIY solution to heatmaps.

 

http://blog.corunet.com/english/the-definitive-heatmap

Another solution for the coders out there.

Bellow are some examples of heat maps I found on the web.

I will look to test some of the service above and repost when I can give you more info on the subject.

f_reading_pattern_eyetracking2

google-SERP-heat-map