Design Woop | The Web Design and Development Blog » HTML http://designwoop.com The Web design blog brought to you by David Martin Mon, 21 May 2012 07:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3 http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/ http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/#comments Thu, 02 Feb 2012 08:00:00 +0000 David http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/ designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.]]> This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initially designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

The Design

Resources Used

Titillium Text – Using @font-face for heading typography.

Form Producer – Used for basic form demo.

Apple iOS Linen Texture – Used for the background texture.

Jribbble – A jQuery plugin to pull in some dribbble shots.

HTML5 Boilerplate – A HTML5 framework to build our design on.

960 Grid System – A CSS framework to provide pixel perfect from design to code.

Basic HTML5 Layout

Our basic layout section starts with the HTML5 doctype and the usual stuff such as the title/meta tags and the CSS links to two stylesheets. One is the 960 grid frame work which will allow me to quickly and easily code up the site from my previous design, the other stylesheet is where I place the styles for the page. I have kept these separate for demonstration purposes. I lastly use the HTML5 Autocorrect form attribute in the message text area, this is again useful for mobile users who may have fat or clumsy fingers ;).


<!doctype html>
<head>
  <meta charset="utf-8">
  <title>David Martin - A Web Designer &amp; Developer - Tunbridge Wells, Kent.</title>
	  <meta name="description" content="David Martin - Web Design Tunbridge Wells">
	  <meta name="author" content="David Martin @webadelic">
	  <meta name="viewport" content="width=device-width,initial-scale=1">
	  <link rel="stylesheet" href="css/grid/960_12_col.css">
	  <link rel="stylesheet" href="css/style.css">
</head>
<body>

Header

The page concept is pretty simply so semantically dividing the sections up is easy. I use HTML5 elements such as <header> to markup the intro block as this is the introduction to the section and <hrgroup> to markup the intro text for the current section.

  <div id="header-line"></div>

  <div class="container_12">

  	<header>

		<div class="grid_3 push_1">

			<img src="img/webadelic-logo.png" alt="Webadelic - Web Design Tunbridge Wells" border="0" width="140" height="94" />

		</div>

		<hgroup class="grid_7 push_1 intro">

			<h1>Hello! My name is David!</h1>

			<h2>A web developer &amp; designer from Tunbridge Wells, UK.</h2>

		<hgroup>

    </header>

    <div class="clear"></div>

Body

I group the body contents of the page using the HTML5 elements <section> and <article>. I use the <section> element to group the small ‘About’ left column and the right side ‘Contact’ form.

Notice I also nest both the left and right columns using the <article> element. I used the <article> element to markup the left and right content areas as two separate pieces of content inside the main <section> element.

When constructing the form you can see I was able to use some new HTML5 form elements to improve the form functionality. Notice for the text inputs I use the Placeholder attribute, this displays text in the field until the field is focused.

A useful HTML5 form attribute is Auto capitalization, this is useful for mobile users who may not want their phones to add capital letters to their email fields.

I lastly used the HTML5 form attribute Autocorrect on the message textarea to help mobile users who may have clumsy fingers ;).

There are more HTML5 form elements you could add to this form, but for now this is simply a demo.  I would recommend also using the Required attribute to improve your form validation. Have a play around and enjoy!

The Dribbble shot feed is pulled in using the jQuery plugin, for now I simply add <ul id=”feed”></ul> to the page, this is where the feed will be pulled in. There are some configuration options you will need to amend in the plugin, you can read up on this here or simply view the demo.


   <div id="horizontal-line-full"  class="push_1"></div>

		<div id="main" role="main" class="grid_10 push_1">
			<section>

				<article class="grid_4 about">

					<header>

						<h3>About</h3>

					</header>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

				</article>

			</section>

				<div class="grid_2 column"></div>

			<section>

				<article class="grid_4 contact">

					<header>

						<h3>Contact</h3>

					</header>

							<section class="contact-me">

								<label for="name">Name</label>
								<input type="text" name="name" id="name" placeholder="Your name" autocapitalize="on" autocorrect="on" />

								<label for="email">Email</label>
								<input type="email" name="email" id="email" placeholder="Your email" autocapitalize="off" autocorrect="on" />

								<label for="website">Message</label>
								<textarea name="message" id="message" placeholder="Your message" autocorrect="on"></textarea>

								<button class="button" name="submit" id="submit">Send</button>

							</section>

						</form>

				</article>

			</section>

			<section>

				<article class="grid_10 projects">

						<header>

							<h3>Projects</h3>

						</header>

						<p>You can check out some of the designs I am working on which are being fed from my <a href="http://dribbble.com/webadelic" rel="nofollow">Dribbble feed</a>, one day when I have some spare time I’ll develop this site a little further to actually show some full project details...<em>I promise</em>.</p>

						<ul id="feed"></ul>

				</article>

			</section>

Footer

I can once again use more HTML5 elements to semantically divide the footer section up,  I first wrap the entire footer with the <footer> attribute.

The <footer> attribute can be used at the end of documents and sections and typically are used to provide the author information or other miscellaneous text.

Inside the <footer> attribute I divide the left and right links into two separate sections using <section>, this allows me to separate the grouping of content in more semantic way.


    <footer class="grid_10 footer">

    	<section id="social-procrastination" class="grid_6">

    		<ul>
    			<li id="twitter">
    				<a href="http://twitter.com/#!webadelic" rel="nofollow" title="David Martin (@webadelic) on Twitter">
						<span>David Martin (@webadelic) on Twitter</span>
					</a>
    			</li>
    			<li id="gplus">
	    			<a href="https://plus.google.com/108725634593324907312/posts" rel="nofollow">
	    				<span>David Martin (@webadelic) on Google Plus</span>
	    			</a>
    			</li>
 				<li id="dribbble">
 					<a href="http://dribbble.com/webadelic" rel="nofollow">
 						<span>David Martin (@webadelic) on Dribbble</span>
 					</a>
 				</li>
    		</ul>

    	</section>

    	<section id="footer-email" class="grid_2 push_2">

    		<p><a href="mailto:david@webadelic.co.uk" rel="nofollow">david@webadelic.co.uk</a></p>

    	</section>

    </footer>

  </div> <!-- end of #container -->

</body>
</html>

Using CSS

Now we have created the basic HTML5 layout, we are ready to add the CSS. Here I will walk you through a few basics of the CSS I used to code up the design. To see the full CSS I used to achieve the exact layout view the demo and have a snoop around.

I use the 960.gs grid with some custom styles in order to match the site with the design, if you take a look at the source code you will see my references to the grid columns in the code, a good write up on using the 960 grid is available from Six Revisions. If you would like to explore the CSS code better, its all available in the demo.

Before I add the CSS:

Header

First off I am setting the background texture to the downloaded and modified Apple iOS Linen Texture. Next I am setting the body fonts, I want the fonts to show as Helvetica Neue if possible but if this font is not available I will roll back to either Helvetica or Arial respectively.

body {
margin: 0;
background-image: url(../img/bg.png);
font: 11px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.231;
}

Heading Fonts

As stated I wanted to use Titillium text on the heading fonts, as the font is available in various different formats and is font-face compatible I can use @font-face. I download the fonts and place them in a folder in the site directory and call them using the below @font-face code:

</pre>
<pre id="line1">h1 {font: 35px/15px 'TitilliumText22LXBold', Arial, sans-serif;letter-spacing: 2px;}
h2 {font: 20px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px; 	color:#8a8989;}
h3 {font: 28px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px;}
p{color:#8a8989;}

@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('../fonts/TitilliumText22L001-webfont.eot');
    src: url('../fonts/TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L001-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L001-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LRegular';
    src: url('../fonts/TitilliumText22L003-webfont.eot');
    src: url('../fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L003-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LBold';
    src: url('../fonts/TitilliumText22L005-webfont.eot');
    src: url('../fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L005-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L005-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LXBold';
    src: url('../fonts/TitilliumText22L006-webfont.eot');
    src: url('../fonts/TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L006-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L006-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Form

Styling the form allows me to use some nice CSS3 effects to match up with the design without having to use images.

I use the following CSS3 to achieve an indented effect on the form inputs, I think this is a pleasant and simple way of making the form inputs. I achieve the indented textfield using the CSS box shadow technique and using a -1px black line:  0 -1px 0 0px which has its opacity set to 0.1: rgba(0,0,0,0.1). See below:

   -moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   -webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);

The Complete Form CSS

</pre>
<pre id="line1">/* Contact Form */

 label {
 	margin: 0 0 10px 0;
 	display: block;
 	font-weight: normal;
 }

 .error{color:red;}

 #form_producer input[type="text"], .contact-me input[type="email"] {
	float:left;
	clear:both;
	margin:0 0 15px 0;
	padding:3px 6px;
	width:300px;
	height:24px;
	border:none;
	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 #form_producer textarea{
 	float:left;
 	clear:both;
 	margin:0 0 15px 0;
 	padding:3px;
 	width:305px;
 	height:90px;
 	border:none;
 	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 .button{
 	float:left;
	clear:both;
	background-color:#ebe9e9;
	border:solid 1px #ebe9e9;
	width:140px;
	height:30px;
	text-transform:uppercase;
	font-size: 0.9em;
	letter-spacing:1px;
		background-image: linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -o-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -moz-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -webkit-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -ms-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);

		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.5, rgb(241,241,241)),
			color-stop(0.5, rgb(235,233,233))
		);
 }

 	.button:hover{
 		opacity: 0.8;
 	}

 		.button:active{
 			opacity: 0.4;
 		}

The Dribbble Feed

The dribbble shot feed is styled using some simple CSS to remove the list bullets and to get each image to sit next to the next correctly. See below:

ul#feed{
list-style-type: none;
margin: 60px 0;
padding: 0;
}

#feed li{
float: left;
margin: 0 45px 45px 0;
padding:5px;
width: 200px;
height: 150px;
border: solid 1px #dedbdb;
background: #fff;
}

Footer

To give the social icons a little hover effect, we can use the CSS3 opacity attribute. When a user hovers over, the opacity is changed to o.8.


#twitter a:hover, #gplus a:hover, #dribbble a:hover{
opacity:0.8;
}

Demo: View the demo – Single Page HTML5 Portfolio

]]> http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/feed/ 15 30 Great Examples Of HTML5 In Web Design http://designwoop.com/2011/08/30-great-examples-of-html5-in-web-design/ http://designwoop.com/2011/08/30-great-examples-of-html5-in-web-design/#comments Thu, 18 Aug 2011 07:30:00 +0000 David http://designwoop.com/?p=5178 It is great seeing so many new and existing websites embracing HTML5, with HTML5 comes a ton of new features available to web developers allowing for cleaner and more powerful code, which essentially is there to benefit the end user. HTML5 is still in its infant stages and we are really only scratching the surface of what can be done, take a look at the 30 HTML5 sites I have added in from my bookmark list and dissect their source!

Rob Edwards

30 Great Examples Of HTML5 In Web Design

Rockstar Working

This is Bliss

Chilly Sheep

Goup

Symb

Facturandum

Apollonet

Wantist

Sublime Video

Arjan Jonker

Jonathan Krause

Waratsuyoshi

Cultural Solutions

Austin Knight

Labels and Labeling

Free Faces

Matias Mancini

Stormen

Learn Something Every Day

Full Fathom Design

Great Tohoku

Quentin De Smedt

Wantist

Sushimonstr

Hoot Hoot

Mustache Wax

the Room

Forefathers

Forgotten Presidents

If you have a HTML5 powered site or know of more that should be featured drop a comment and I will update the list.

]]> http://designwoop.com/2011/08/30-great-examples-of-html5-in-web-design/feed/ 2 Give Your Website A Custom iPhone Icon With/Without The Gloss Effect http://designwoop.com/2010/05/give-your-website-a-custom-iphone-icon-withwithout-the-gloss-effect/ http://designwoop.com/2010/05/give-your-website-a-custom-iphone-icon-withwithout-the-gloss-effect/#comments Tue, 25 May 2010 21:29:36 +0000 Stu Greenham http://designwoop.com/?p=1780 When creating a website, it is more common then not now that we will add a custom favicon that will display in the browser tab alongside the website page title, this is fairly simple in fact only one line of code as below:

<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!

]]> http://designwoop.com/2010/05/give-your-website-a-custom-iphone-icon-withwithout-the-gloss-effect/feed/ 10 Show me whatcha got! HTML 5 vs. Flash Showcase http://designwoop.com/2010/04/show-me-whatcha-got-html-5-vs-flash-showcase/ http://designwoop.com/2010/04/show-me-whatcha-got-html-5-vs-flash-showcase/#comments Wed, 21 Apr 2010 20:20:24 +0000 Karen Myers http://designwoop.com/?p=1591 “HTML 5 vs. Flash” topic has been actively discussed in the global web dev circles lately. Apple devices don’t support Flash and this adds the fuel to the discussion fire. And while the advocates of the Open Standards are prophesying the near end of Flash, Adobe Flash fans are desperately defending their platform.

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.

Eye Styles

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.

Clearideaz

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.

Jamie Wright

CatCubed

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

CatCubed

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.

Shannen Coslow

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.

Nathan Staines

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.

Slim Kiwi

Go On Web

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

Go On Web

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.

Sheep in Disguise

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.

New Zealand International Art Festival

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.

Cameron Chamberlain

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.

Zoe Ann Baker

We love 02 SCT

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

We love 02 SCT

Ella Design

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

Ella Design

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.

Narkoba

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.

9elements.com Project

Flash Sites

Canvas

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

Canvas

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!

Burger King

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.

PepperWorks

Fynn

Another example of uncluttered and usable Flash website design.

Fynn

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.

magneticNorth

Simods Homes

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

Simods Homes

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.

We Are All Fans

The Blues Maker

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

The Blues Maker

Converse

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

Converse

Lego Click

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

Lego Click

Andreas Smetana

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

Andreas Smetana

Djeco

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

Djeco

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?

Plate Interactive

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!

F.One – Bandit 3 Most Wanted

Adhemas Batista

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

Adhemas Batista

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.

]]> http://designwoop.com/2010/04/show-me-whatcha-got-html-5-vs-flash-showcase/feed/ 26 Favourite Links 1 http://designwoop.com/2009/12/favourite-links-of-the-week-1/ http://designwoop.com/2009/12/favourite-links-of-the-week-1/#comments Thu, 31 Dec 2009 13:34:12 +0000 Stu Greenham http://designwoop.com/?p=636 I am going to start a set of weekly posts that will show you my favourite links I have found, been sent or have used myself at some point. Please, if you have time to take a few minutes to help spread my posts using the share links at the bottom of the page I would be very greatful! Right heres my #1 set of links….

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.

Growl Notification Styles

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.

10 Must Read Creative Blogs

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!

Build a Robot

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.

35 CSS Based Websites

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.

Outstanding Website Background Guide: 60+ Impressive Resources

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.

30 Website Navigations

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!”.

Hacked Stop Signs

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.

Rio Ferdinand Magazine

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.

CSS Animations

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 :)

URL Shortener Scripts

]]> http://designwoop.com/2009/12/favourite-links-of-the-week-1/feed/ 0 Tutorial: Clearing the Textarea value onFocus http://designwoop.com/2009/12/clearing-form-textarea-value-onfocus/ http://designwoop.com/2009/12/clearing-form-textarea-value-onfocus/#comments Wed, 09 Dec 2009 22:16:23 +0000 Stu Greenham http://designwoop.com/?p=606 Quick tip that will always come in handy when creating forms. More often then not you will see a textarea that initially has some text in, something like… ‘Type your message here…’. On some websites, I have noticed that when you go to type in that same textarea you have to first remove the message before you start typing yours which I find very frustratings.

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.

View Demo

Source Code

]]> http://designwoop.com/2009/12/clearing-form-textarea-value-onfocus/feed/ 17