<link rel="icon" href="/favicon.png" type="image/vnd.microsoft.icon" />

What is becoming just as popular is to add a custom iPhone icon that will appear on your iPhone’s Home Screen. Again this is very straight forward with one line of code in between your header tags, as shown below:

<link rel="apple-touch-icon" href="/iphone_icon.png"/>

If you use an image of anything around 50px by 50px in size that will be, as the iPhone will resize and round off the corners for you on the fly. To add your site to your Home Screen, simply visit the webpage on your iPhone, then select the plus sign, followed by Add to Home Screen. You will get a prompt now and your icon should show, to finish, simply click add.

You will now be taken to your Home Screen where the icon should now be appearing. Here is the example below for Design Woop:

Now if your a picky sod like me, you will notice the horrible gloss effect that Apple adds to the icon by default. Until today I was using jQTouch to remove this until I came across this page on Apple.com which brought my attention to the additional -precomposed option. This stops mobile Safari adding any effects to the icon which is just what I was after! The line of code we use for this is now:

<link rel="apple-touch-icon-precomposed" href="/iphone_icon.png"/>

After refreshing the page and re-saving it to my iPhone Home Screen I was left with the much nicer…

I hope you agree with me but I think the no gloss icons are nicer!

Here are some related posts:

• Popout Details on Hover w/ CSS
• Supersize that Background, Please!
• Code an Email Newsletter from PSD to HTML
• iPhone Made With CSS3 Only
• jQuery Text Change Event

We decided to stay dispassionate and take a look at the current achievements of both platforms. In this post you can find a showcase of some well-designed websites that implement HTML 5 and Flash features at their best. This is by no means an attempt to put any of the platforms in a favorable light, but an endeavor to see what advantages each of them is actually able to deliver to the end-user at this stage.
Hopefully, the following collection will highlight the benefits of HTML 5 and Flash to you and give you some visual inspiration for your own projects as well.

Websites built with HTML 5

Eye Styles

Unique eyewear shop Eye Styles from Portland, Oregon shows wonderful rollover effects implemented by means of HTML 5.

Clearideaz

This is a personal portfolio of French designer Olivier Gorzalka. Very good markup can be observed on this site which is powered by WordPress, by the way.

Jamie Wright

By viewing the portfolio of the British web designer Jamie Wright in Google Chrome or Safari 4.0 you will be able to enjoy this vivid and colorful website to the fullest. The latest version of Firefox reveals the roughness of typography, while Opera breaks the text positioning altogether.

CatCubed

Unlike the previous website, Colin Fahrion’s HTML 5 powered personal blog feels best in Firefox 3.6 and Google Chrome.

Shannen Coslow

The portfolio of Pennsylvania-based designer Shannen Coslow is fully coded in HTML 5 and has an orderly structure and an beautiful, minimalist design.

Nathan Staines

The personal site of Starkers HTML5 theme developer Nathan Staines is simple and elegant. Besides a great implementing of HTML 5 markup it displays a stylish monochrome color-scheme with felicitous color inclusions.

Slim Kiwi

The site of the web studio Slim Kiwi has a unique and eye-catching design mostly due to the beautiful graphic elements used in it.

Go On Web

French web design agency Go On Web created its website with HTML 5 and used some lovely little interaction features.

Sheep in Disguise

Website of the web design and development studio Sheep in Disguise shows a neat layout and stylish typography, and of course, HTML 5 well using a number of the new structural elements.

New Zealand International Art Festival

Even though you can see some Flash components on this website, it still shows a solid implementation of new HTML standards and better browser accessibility might be a reason for the use of flash files here.

Cameron Chamberlain

In spite of being the most anticipated feature in HTML 5, video tag is still rare to see on live websites. Cameron Chamberlain’s personal site contains the new video element implemented using Video for Everybody.

Zoe Ann Baker

This website is clean and beautiful, big arrows pointing at post sections when you hover a mouse over menu categories are a nice touch.

We love 02 SCT

This website belongs to the community of graduate students of Jimei University (China), 2002 Computer Science and Technology.

Ella Design

This site shows a sleek use of HTML 5 and CSS 3, truly an eye-candy.

Narkoba

On Narkoba website you can find various audio samples, videos, snippets and other DJ music stuff. On a page Happy Love visitors can play with some audio and video elements which are quite fun despite being experimental. Thus, you can trigger audio loops directing the mouse at the white border rectangles and you can also launch video by typing “happy love” on the keyboard.

9elements.com Project

This is a sweet online experiment showing the great possibilities HTML 5 provides for audio & canvas. It loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

Flash Sites

Canvas

Canvas is a unique poster shopping website featuring an amazing user interaction process.

Burger King

Visitors of the Burger King website can literally customize it on the fly. Using three basic sliders you can control the subject area of the content to display. What a clever navigation solution!

PepperWorks

Website of the Polish media agency PepperWorks is done in an elegant, minimalist style. Great use of high-quality photos and fast loading provide a pleasant browsing experience.

Fynn

Another example of uncluttered and usable Flash website design.

magneticNorth

A creative navigation mechanism can be observed on magneticNorth website – a user can access the content drawing various shapes with the help of a mouse.

Simods Homes

Flash can work well for business and the site of the Australian construction company Simonds Homes proves this.

We Are All Fans

Flash can also be a good tool to render streaming content. This is well illustrated on the We Are All Fans website. Here portraits of selected Grammy-nominated artists are created in real time from social media content generated by fans across the web.

The Blues Maker

This is a funny Flash application you can use to compose your own blues song.

Converse

Converse online store is Flash-based, still the shopping process and website usability are on a very high level here.

Lego Click

Lego Click website contains information on art and creativity, mostly Lego-inspired.

Andreas Smetana

Website of the well-known photographer Anreas Smetana features an original navigation and full-screen photo galleries for the best visual impact.

Djeco

Website of the toy brand Djeco is a celebration of interactive design. Besides, it shows awesome illustrations and work with sound.

Plate Interactive

A good bunch of elegance and beauty in this one. After all, what else can be expected from a globally renowned interactive agency Plate?

F.One – Bandit 3 Most Wanted

Promo website of the kiteboarding brand F.One has a spectacular 3D designs and brings an excellent interaction experience to users. By the way, be sure to watch the video in the category Cinema – it’s a masterpiece indeed!

Adhemas Batista

The artworks of Adhemas Batista used to design his personal website are enough to give it a remarkable look.

As you might see, HTML 5 has a lot of wonderful features to offer and it’s surely worth anticipating. However, people declaring HTML 5 will kill Flash are grossly exaggerating. Why don’t we just try think more positively and assume that both Flash and HTML 5 will exist in harmony to the glory of the Web. After all, none of the platforms can be a solution to everything. Each of them is just a tool with a certain amount of capabilities and it’s up to you, dear designers and developers, to decide which tool will help to achieve the best results in your job.

Written exclusively for Design Woop by FlashMint, the top-class provider of flash templates and flash components.

Here are some related posts:

• Beautiful Vintage Design: Showcase and Resources
• 40 Excellent Examples of Single Page Websites
• 30 Examples of Excellent Website Navigation
• 40 Inspiring Blog Designs
• 40 Tasty Restaurant Websites to Inspire You

New Growl Styles

Visit Source: http://fixedgear.ca

Christopher Lobay has posted two new notification styles for the popular Mac app Growl which can be downloaded for free.

10 Fresh Must Read Blogs For Creatives

Visit Source: http://www.inspiredm.com

InspiredMag have posted a great article showcasing 10 ‘Must Read’ blogs that are great for us ‘Creatives’. There are some great reads here and lots of useful resources worth bookmarking.

Exobotics

Visit Source: www.exopolis.com

A very clever site built in Flash that lets you build a robot (Cool I know) and then bust some moves with it to a nice dance beat. Give it a try, very cooly designed!

35 CSS-based Layouts that Look Awesome

Visit Source: http://net.tutsplus.com

Nettuts+ posted a article showcasing 35 awsum CSS based websites! Another great article to bookmark for inspiration at a later date. There is a whole range of differently styled sites here so something for everyone.

Outstanding Website Background Guide: 60+ Impressive Resources

Visit Source: http://www.noupe.com

Noupe’s article on Website Background’s offers tonnes of great links and resources for getting the perfect website background. There are plenty of Tutorials, Texture Packs and Links where you can get loads of free background tiles/images.

30 Website Navigations that Make You Wanna Click It

Visit Source: http://webdesignledger.com

Web Design Ledger (One of my favourite subscribed to websites) posted this awesome article showcasing 30 Websites with class Navigation menu’s. A great post and really good source of inspiration when building a design concept.

Hacked STOP Signs

Visit Source: http://www.urlesque.com

Great set of Stop Sign’s that have been modified and there are some funny ones! My favourite is “STOP! Hammertime!”.

Rio Ferdinand Online Magazine

Visit Source: http://www.rioferdinand.com

Not design related but a cool site anyways. Footballer Rio Ferdinand has started an online magazine which is a great read. He interviews different celebs each edition and covers alot of general stuff.

24 Ways: CSS Animations

Visit Source: http://24ways.org

Tim Van Damme posted this cool article on 24ways about CSS Animations, showing you how to create one yourself. A great read and this is definately going to be something that we will start to see more and more of.

7 Open Source And Free URL Shortener Scripts To Create Your Own

Visit Source: http://www.webresourcesdepot.com

Web Resource Depot posted this article reviewing 7 open source URL Shortener scripts that are all free. I went for Yourls myself but a handy link for anyone else wanting to get on the URL Shortening bandwagon :)

Here are some related posts:

• iPhone Made With CSS3 Only
• The 960 Grid System Made Easy
• Give Your Website A Custom iPhone Icon With/Without The Gloss Effect
• HTML5: An Introduction From a Designer’s Perspective
• Different Stylesheets for Differently Sized Browser Windows

There is a simple line of code that will fix this and clear your message when they click on the textarea box. First you need to create your form, below I have included some sample form code:

<form name="test_form">
	<dl>
		<dt><label for="field_one">Field One</label></dt>
		<dd><input type="text" name="field_one" value="" size="100" /></dd>

		<dt><label for="field_two">Field Two</label></dt>
		<dd><textarea name="field_two" rows="10" cols="100">Type your message here...</textarea></dd>
	</dl>
</form>

To make the text disappear on click we use the event handler onFocus which will basically run once the Textarea is in an ‘active’ state. We need to add in the following to our form:

onFocus="this.value=''; return false;"

Add it inside the opening textarea tag so you will end up with a form looking like this….

<form name="test_form">
	<dl>
		<dt><label for="field_one">Field One</label></dt>
		<dd><input type="text" name="field_one" value="" size="100" /></dd>

		<dt><label for="field_two">Field Two</label></dt>
		<dd><textarea name="field_two" rows="10" cols="100" onFocus="this.value=''; return false;">Type your message here...</textarea></dd>
	</dl>
</form>

Thats it done, nice and simple! You can download the source code for this below or view a demo here.

Here are some related posts:

• Give Your Website A Custom iPhone Icon With/Without The Gloss Effect
• HTML5: An Introduction From a Designer’s Perspective
• Best Practices for Hints and Validation in Web Forms
• Favourite Links 1