Review: Gelaskins - protection for iPhone

As gorgeous and slick as the iPhone looks it can very easily have it’s looks tarnished by scratches and marks. That’s why one of the best selling accessories for the iPhone is the screen protector. The thin sheet of plastic protexts the screen from scratches but what about the rear of the phone. Often the phone is lying on it’s back on a desk getting scuffed while the protected screen is face up and unharmed.

I have tried several leather cases but always end up discarding them and going back to an unprotected phone. This is because one of the main attractions of the iPhone is it’s compactness and sleek curves which are lost when a chunky cases is added. No one likes the unsightly bulge in a suit pocket from a chunky phone or wallet.

So when GelaSkins contacted me about their protective skins for iPhone I was very interested to see if this could be a good solution. I must admit that when I first saw the skins they appeared to simply be colourful stickers, I was a little sceptical as to their value. However, after using it I would definitely recommend them.

Firstly the initial attaching of the protective sticker couldn’t be easier. I am not the most skilled at applying stickers correctly as I ruined several screen protectors in the past trying to get it to line up with the iPhone screen without bubbles, so was surprised with how easy it was to apply. The GelaSkins uses 3Ms special adhesive that allows you to remove and re-stick the skin without leaving a residue or losing stickiness. It also doesn’t bubble and I got it in just the right spot first time. My Brother-in-law had less success as he claimed there was some bubbling for him but when he tried to show me the bumps had worked themselves out so he had a perfect finish to.

GelaSkins offer a range of designs from over 50 artists. They really do look eye catching on the phone and make your phone stand out from other plain iPhones. You can also download a matching graphic from the GelaSkins website to use as your phone background image. Then the design appears on both sides of the phone. As several of my friends have the iPhone it’s great to be able to pick mine out from the bunch when they are all lying on the coffee table.

The skin is thicker than a screen protector and has a nice feel to it. It definitely feels touch and despite my best efforts I was unable to scratch it, let alone the iphone underneath. The skins add very little thickness to the iPhone, infact I was still able to use the same leather cases with the skin on.

I was a little worried that the skin would cause the iPhone to overheat as it already gets very hot when using wifi/edge for extended periods. While the iPhone got very warm no more so than usual.

Although the skin is great for protecting the iPhone from scratches they do little to protect the phone from being dropped. If you are looking for protection from dropping the phone then I recommend getting a padded case and phone insurance.

One downside with the skin is that it covers over the most expesive component on the iPhone - the Apple logo. For me this is not a problem - for hard-core Apple fans that might be put off by this they’ll be pleased to know that it is easy enough to remove the skin and show off that Apple logo again without leaving a nasty stick residue.

Gelaskins also make skins for the Sony Playstation Portable (PSP), Nintendo DS, iPods and laptops. The 15inch laptop skins look fantastic.

Expanding the skillset: Advanced CSS Rollover effect without javascript

For a while I’d been using javascript for image rollover effects. They were fairly simple to implement and had the desired effect. However, if javascript was disabled visitors missed out on this. In addition to this I try to avoid javascript if there is a css solution.

I started using the css a:hover psuedo class to set a different background image. This mean a button had to be an element such as a div and have a background image set. The downside to this is it was sometimes it was difficult to get the exact effect desired.

More recently I’ve started using the alpha transparency filter in conjunction with the a:hover class. This has several benefits.

In some cases you can use a single image and just vary the opacity of the image with css when you hover over it. You can see an example in the main navigation on a site I am working on here. The advantage of this method is you can swap out the images anytime and the hover over effect with still remain. Also means faster page loading for visitors as there is one image instead of 2. The effect can be applied on a large number of images or text with a single css style rule making it easy to apply to existing webpages.

The css needed to make all links containing images to have this effect would go something like this:

a:hover img {
filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
Notice there are 3 rules applied to this style all doing the same thing. The first is for internet explorer, the second for Mozilla/firefox, the last for other browsers such as Opera and Safari. This is because this isn’t officially supported but it does work accross the major browsers (Firefox, Safari, Opera, and IE7 - IE6 supports jpg and gif but not PNG transparency)..

The second way to use this technique is over background images. If you want to make something in a background image have a rollover effect, such as a making a part of an image a button. This is achived by placing a white (or black) image over the top of the portion of the image and varying the opacity of the covering image. You can see this in action on a recent contest I designed for Gamespot UK and Amazon.co.uk. The 5 images under the entry form “light up” when you hover over them. This was achived by placing 5 white images over the background image and setting their opacity to “0″. When the mouse hovers over the opacity is changed to “20″ or “.20″ depending on your browser. In hindsight I should have created these images 1px by 1px and stretched them to save download time, however, it demonstrates the posibilities. In this example I had trouble lining up the white images over the background across all browsers so I opted for setting all the “buttons” in the background image as the background of a smaller div into which I inserted my boxes. This wouldn’t happen if I had reset all the default browser values using Yahoo!’s CSS reset as this removes the differences between browers margin, padding settings etc.

Anyway have fun trying out this technique and leave feedback if you get stuck or manage to use it on a project.

More Expanding the skillset articles to look out for are using flash and javascript to replace text with the fonts you wish you could display - yes I’m talking about sIFR

Expanding the skill set: JavaScript and CSS Background Changer

Once again I find myself confronted with having to use Javascript for a project. This time a dynamic background changer was needed (aka skin toggle). Using my feeble JavaScript Skills and a bit of copy and pasting I manage to put together a working template.

Here is an example. You can change the background of this site by clicking on the following thumnails:

How it works:
Firstly the background images are created/selected and placed in a folder together. Next name them the same with a just changing a number/letter/word at the end that. I recommend numbering them sequentially.

In an image editor crop small area of the image you will use as a button for it. You can of course use text buttons instead. In this case I have chosen to make the area around the buttons to change background to match the background image. If you want this effect then crop the large background images into smaller ones that match the size of the area you want to skin. Name the small background images the same as their larger counterparts adding a letter/number to the end. In the example I have used letter ‘a’.

Continue reading »

Dreamweaver (and other XML editors) break Vista help and support

If you are installing a web design tool such as Dreamweaver be vary wary over making it your default editor for certain file types.

When I installed Dreamweaver it, by default, becomes the default editor for xml files. In previous versions of Windows this was not a problem. However, in Vista if you accept this you will no longer be able to view help or support pages.

If you’ve already screwed up help and support you can use this fix:
http://www.chris123nt.com/guides/RTM_Fixes/Fix_Help_and_Support.zip

This registry edit will restore Help and Support in Windows Vista.

Credit for this fix goes to Kristan - you can see the full thread on the Microsoft newsgroups.

The Vista Experience

I’ve had Vista Ultimate installed for about a week now and feel ready to give feedback on the new Microsoft OS.

Installation

Having the full Ultimate 32-bit edition I had 3 install options - 1) Upgrade, 2) Clean install from within windows 3) Clean install booting from CD.

I used the Windows Vista Upgrade Advisor to see if I could expect any hardware/software issues. While my hardware checked out ok there were several apps that were not Vista friendly. Two were flat out incompatible and required removal before an upgrade should be attempted. This was Norton Internet Security 2006 and Nero Burning Rom OEM.

This is where I think some people come unstuck with upgrades, they don’t check the software incompatiblies before attempting an upgrade. However saying that after removing the offending programs and a couple of the apps classed as minor problems my clean install from within windows failed.

I opted for a clean install booting from the Disc.

Drivers/hardware

After a fairly quick install I thought all my hardware had been detected as Windows looked so good. However, closer inspection showed a lot of missing drivers including my graphics, and sound cards. Without drivers the display was limited to 800×600 but still appeared clear and colourful. I still had sound, if only in stereo. Once the correct drivers were downloaded and installed I could get full surround sound, high-resolution graphics and the long awaited Aero enhancements.

Finding how to turn on the Aero enhancements wasn’t obvious but a quick search of the help solved that.

I thought I would have little use of Flip 3D other than showing off. However, as my Logitech mouse has additional buttons I found one of them activated flip 3D. I could then use the scroll wheel to skip through the open apps. Rather than waiting for the one I want to come to the front I could use the mouse to click any of the programs in the deck to go to it. This soon became a very quick and easy way to navigate between programes. I still use Alt-tab too but Flip 3D is defintely more useful than I imagined.

Ultimate Extras

The main reason I got the Ultimate edition was for the Ultimate Extras. So far it’s not earnt it’s hype. There have been no cool updates to speak of. Even the DreamScene and GroupShot extras demoed at CES are absent. I did manage to download GroupShot from the Microsoft research site (which works great) but this is available to all windows users (even xp I believe) not just Vista Ultimate. DreamScene is still unavailable as far as I can see.

Access rights

As I did a clean install of Vista on a different hard drive my previous XP installation was still intact. A problem I had in the past with dual boot systems was not being able to access some files on the alternate installation due to access rights. This is not a problem for Vista. When trying to view my windows XP documents folder I am warned I do not have Access rights, however, I am offered the option to “take over ownership” As long as you are logged in as an administrator on your Vista build you can take over ownership of any folder and then access it anytime. As to what happens to my XP installation when I try restarting that again I can’t say as I haven’t tried yet.

From the viewpoint of Front-end developer

Of course it wouldn’t be a good blog post without looking at Windows Vista from the viewpoint of a front-end developer.

The first change is of course Internet Explorer 7 being built in to the OS. This means if you were hanging on to IE6 for testing purposes you will need to get the stand-alone edition. I haven’t tested installing this on Vista yet but this worked fine on XP.

Firefox installed seemlessly as always but I encountered a problem when trying to view online video. Although Windows Media Player 11 is installed as part of Vista the required dll files required by firefox and other browsers are missing. This means playing streamed windows media is only possible in IE7. This is quiet a sneaky move by Microsoft but easily remedied. Simply download the missing dll files into the firefox plugins folder (usually C:\Program Files\Mozilla Firefox\plugins) or better still in the windows media folder so it can be used by all browsers you may install.

You can find the missing files on dlldump.com

• npdsplay.dll
• npwmsdrm.dll
• npdrmv2.dll

If this doesn’t solve the problem get more indepth help here: http://forums.mozillazine.org/viewtopic.php?t=206213

What about the tools of the trade? The Adobe/Macromedia Apps -
You’ll be pleased to know Dreamweaver 8, Flash 8, Photoshop CS2 and Fireworks 8 all run on Vista. However, there are some compatibility issues. If you use the Windows Aero effects you will find they become disabled when you open Fireworks. Windows Vista will switch to “Windows Vista Basic” mode until you close the program. Flash also has issues. It will not force Vista in to Basic mode but you will probably want to do this manually as whenever you enter or exit a set of grouped items the usually near instant transition effect of entering or exiting the group is slowed to a snails pace. This means a 2-3 second wait every time you edit or exit a grouped object - nightmare.

If found no negative side effects in Dreamweaver 8. Photoshop I’ve only opened to see if it would run and haven’t done any indepth testing yet.

The Vista shadow versioning feature could prove useful. Often I make sequence of pages and use one as a template for the next page. In my absent mindedness I sometimes save over my template with the most recent work - trouble. With Shadow backup each individual file is backed up by windows so that I can get back to previous versions of a file if I save over it. Not actually got it to work yet as none of my files seem to have previous versions yet even when I tried a creating a test file. This works like a charm now.

I use a program called PowerDirector from Cyberlink to edit and export video in web friendly formats or for making home movie DVDs. This cannot be run or re-installed anymore. Tech supports solution is to upgrade to their new Premium edition which is Vista Compatible. I am still considering this. Other Apps not liked by Vista is Norton Internet Security 2007.

Continue reading »

James Myers: Microformats - FFE Interview #2

In Podcast two I interview James Myers of CNET Networks regarding Microformats. We discuss, what it is, how to get involved and how it was used on ZDNet.co.uk.
Download the Podcast here (right-click and save target/link as..)

or Play Here:

Transcript to follow shortly. 2 Awards were given out during this interview - you can view them here

Add to iTunes

Hacked to Death iii

While testing Krugle for my pending review I was able to find a Safari hack that works.

You may already have heard of the Safari Stokely Hack. It’s not as straight forward as most IE hacks but it works on even the latest versions of Safari and can be a real life saver.

View details on the Stormdetector website.

Now IE7 is here hacks have to be more specific in their targeting. Some Beta versions of IE7 ignore * html hacks and some apply them (The final release ignores them).

To be sure which browser will be affected by your styles you can use conditional comments.

e.g.
<!--[if lte IE 6]>
(html for IE 6 or older goes here)
<![endif]–>

This goes into your html not your css file. The version(s) of IE you specify will read the code you enter within the comments while other browsers will ignore it. This means you can link to a seperate style sheet with your IE hacks in and it will not affect other browsers.

Selecting versions to affect:
To affect just one version of a browser (e.g. IE7) simply start your conditional comment with <!–[if IE 7]> replacing 7 with whatever browser version you want to target. If you want to target a range of browsers you can insert an extra word before IE.

• lte - less than or equal to
• lt - less than

Because you have targeted a specific set of IE browsers future releases should be happy viewing your page without the hacks getting in the way.

These conditional comments can be used to hide any other html from non-IE browsers too, such as an IE only feature you may have on your page.

www vs non-www (301 redirect)

Most sites are accessible through either http://website.com as well as http://www.website.com. If anyone gave you a URL without the www would you assume that the same domain with a www would take you do a different site? Of course not. However, search engines are not always that smart. They may see http://fromthefrontend.co.uk and http://www.fromthefrontend.co.uk as two different sites.

Why is this a problem? Well it could have a negative effect on your search engine ranking. The “two sites” maybe viewed as a duplicate entry or you may have in cases promoted a www version and in others a non-www version without noticing and thus your efforts are diluted.

The solution?

Redirect traffic from your non-www to your www url (or visa versa). There are many ways to redirect a page - meta refresh, an info page advising to go to the correct url etc. But in this case your best option is the 301 redirect.

There are 2 main reasons
1) It is search engine friendly and will preserve your exisiting ranking
2) Most webhosts do not enable you to direct traffic for www and non-www to different destinations so you couldn’t put an info page or metta refresh in place to redirect the traffic
3) Using the wrong method can get you BANNED from google as Business.com discovered. Check out the full story on webpro

Fortunately the 301 redirect is easy enough to implement. You will need to be able to use .htaccess files (i.e using a Linux server running Apache and the Mod-Rewrite moduled enabled).

Continue reading »

Ask the Guru: Custom 404 (and other error) pages

What happens when a user is sent a link to your site (or manually types your URL) there’s a typo? What happens if you have a broken link on your site? What happens when a search engine brings up results for your site but it’s for a page you’ve removed?

The visitor is presented with their browsers (or webhosts) ghastly 404 page with no link to the correct page. The chances are the visitor may not bother to try and strip the URL down to your domain and search for the page, they’ll just close you page and look else where.

What can be done to avoid this? A custom 404 page! And example can be seen at MyPetsite.co.uk/ - enter anything random at the end and the custom 404 page will appear.

The .htaccess technique.
This method is designed to work on an apache server with html pages.

This technique can also be used to create different error pages for 403 - forbidden, 401 - unauthorised, 501 - Unable to connect to server etc. However, if simplicity is what you are after than you can have all such errors can be directed to the same page.

Continue reading »

Ask the Guru: How do I make text flow around complex images

In the the first of FFE’s (From the Front End’s) “Ask the Guru” features we look at shaping text so it flows nicely around images, even if the user is viewing your page with a different text size or browser than you.

Guru: Well a valid question asked have you!

Here we see an example (click any of the example images to view the XHTML page):

Download the example files here

There is not 1 but 3 possible solutions!
Continue reading »