Add a Mobile Stylesheet

In the code below we’ve included two stylesheets, the first main.css targets desktop computers and laptops using the ‘screen’ media type, while the second mobile.css targets mobile devices. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.

<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Make phone numbers clickable

It’s easy to make phone numbers clickable, just like we can use ‘mailto:’ to link email addresses through (although this isn’t advised due to email harvesting) we can add ‘tel:’ followed by the number as shown below.

<a href="tel:+44203948578" class="phone-link">(+44) 203 94 8578</a>

Make filling in forms easier

HTML5 input types allows us to make it easier for users to fill in forms by providing the correct keyboard configuration. this can be achieved by changing the input type to either ‘email’ or ‘tel’.

<input type="email" name="email" />
<input type="tel" name="telephone"/>

Take if a step further with JavaScript and jQuery

jQuery just released the mobile version of its popular framework that allows you to use Its lightweight code is built with progressive enhancement, which also has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

1. Call to action

Users will click on a call to action buttons because they expect to see information that a button says the next page would provide. If your users don’t quickly recognise the content on the corresponding landing page, they will leave. Therefore, make sure that whatever message your CTA button promotes is the focus of the landing page.

2. Make forms easy to use

Providing the least amount of hoops to jump through for a user means your conversions will be higher. Users hate forms and complicated user flows. if you’re landing page is designed to push users to signup to your site make the process easy with the least amount of required fields, and keep the form above the page fold to maxamise its exposure.

3. Clear Messaging

You have one shot at convincing a user to buy your product or service. If you’re offering something free then make it clear what the benefits of signing up are. Make sure that your marketing campaign has continuity when it comes to design and messaging. As a user you don’t want to click a banner and be greeted by a page that bears no relevance to the message you’ve just seen

4. Give a little extra

Everyone loves a free lunch. Add value to your product by giving a little more away. Even the opportunity to win a t-shirt is enough to get users interested in your product.

5. Engage your audience

The use of online video viewership, by both businesses and consumers, is at an all time high. The average person watches 180 videos online each month. These are statistics just can’t be ignored. Video is a great medium to engage your audience and simple informative content can work wonders to drive conversions.

Check out the Mailchimp landing page to promote their free product as well as their social tools

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.

$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML

 <form method="post" action="">

	    <input type="text" class="form-field" name="Name" defaultVal="Name" value="" />
            <input type="text" class="form-field" name="Phone" defaultVal="Phone Number" value="" />
            <input type="text" class="form-field" name="Email" defaultVal="Email address" value="" />
            <input type="text" class="form-field" name="Url" defaultVal="Site URL" value="" />

	</form>

Generate the font

first of all you’ll need to head here and convert your font ready for cufon. There are plenty of options to adjust how the font renders, you can include different fonts for weights as well as italic etc.

Include the JavaScript

Once you have your font converted in the Cufon format you’ll need to include the Cufon JavaScript file which you can find here as well as the font file that you converted above.

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="junction_400.font.js"></script>

Specify your elements

	Cufon.replace('h1, h2, h3', { fontFamily: 'Junction' });

I thought i’d cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.

The Code

I don’t usually do this but here’s the complete code snippet so you can see the JavaScript CSS and HTML all in one space. most of the configuration is achieved thought the CSS but you’ll notice that on page load the bars animate to the correct height using the jQuery animate function which we’re passing a percentage height into.

<head>
<style>
.rating {
float:left;
width:180px;
background-image:url(images/poll-bottom.png);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:40px;
}

.graph {
float:left;
margin-top:10px;
position:relative;
height:380px;
padding:0;
}

.graph .bar1, .graph .bar2, .graph .bar3{
display:block;
position:absolute;
background-image:url(images/poll-body.png);
background-position:top left;
color:#fff;
width:159px;
min-height:70px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em;
bottom:0;
}

.graph .bar1 span, .graph .bar2 span,  .graph .bar3 span  {
position:absolute;
left:50px;
top:20px;
font-size:33px;
color:#333;
text-shadow:0 1px #fff;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function(){

  $('.bar1').animate({'height':'22%'},500);
  $('.bar2').animate({'height':'58%'},1000);
  $('.bar3').animate({'height':'88%'},1500);

  });

</script>

</head>

<body>

<div class="polls">

        <div class="rating">
            	<div class="graph">
                	<strong class="bar1">
                    <span>22%</span>
                    </strong>
                </div>
			<div class="ans">Answer 1</div>
	    </div>

	     <div class="rating">
            	<div class="graph">
                	<strong class="bar2">
                    <span>58%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 2</div>
	    </div>

            <div class="rating">
            	<div class="graph">
                	<strong class="bar3">
                    <span>88%</span>
                    </strong>
                </div>

		   <div class="ans">Answer 3</div>
	    </div>

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

</div>

</body>

The Code

Getting started with this plugin is really simple, you first need to include the cycle.js plugin you can find more info about the plugin including all the settings available here. This div structure allows you to assign different background images to each slide.

You can easily change the effect of the image transitions by replacing fx:’scrollVert’ with ‘fade’ for a simple transifion between frames, or ‘scrollHorz’ for the images to slide in horizontally.

Setup of the cycle plugin is simple with the settings below. you can adjust the speed, the initial timeout for when the page loads that the first frame is seen for and the delay between transitions.

  $(document).ready( function($) {

    $('#slider').cycle({
      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'
    });

  });

The HTML

  <div id="slider">
    <!-- slider -->
    <div id="iphone" class="slider">
      <a href="http://papermashup.com" title="iPhone 4 coming soon" class="slider_content">iPhone 4 coming soon</a>
    </div>
    <!-- slider -->
    <div id="macbook" class="slider">
      <a href="http://papermashup.com" title="Macbook Get One" class="slider_content">Macbook Get One</a>
    </div>
    <!-- slider -->
    <div id="ipad" class="slider">
      <a href="http://papermashup.com" title="The new iPad" class="slider_content">The new iPad</a>
    </div>
  </div>
  <div id="slider_controls">
    <ul>
      <li><a href="#" id="slider_prev">Previous</a></li>
      <li><a href="#" id="slider_next">Next</a></li>
    </ul>
  </div>

The CSS

#slider {
	width: 100%;
	overflow: hidden;
	height: 301px;
}
.slider {
	height: 301px;
	width: 100%!important;
}
.slider_content {
	width: 1020px;
	height: 301px;
	margin: 0 auto;
	display: block;
	text-indent: -9999px;
}
#ipad {
	background: url('images/ipad-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#ipad .slider_content {
	background: transparent url('images/ipad.jpg') no-repeat top left;
}
#iphone {
	background: #000000 url('images/bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#iphone .slider_content {
	background: transparent url('images/iphone.jpg') no-repeat top left;
}
#macbook {
	background: #000000 url('images/macbook-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#macbook .slider_content {
	background: transparent url('images/macbook.jpg') no-repeat top left;
}

#slider_controls {
	width: 958px;
	position: relative;
	margin: 0 auto;
	height: 1px;
}
#slider_controls ul {
	background: transparent url('images/nav.png') no-repeat bottom center;
	display:block;
	height:32px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	top:-31px;
	width:164px;
	z-index:9998;
}
#slider_controls li {
	float: left;
	width: 82px;
	height: 32px;
}
#slider_controls li a {
	display: block;
	height: 32px;
}

This slider is both elegant, simple to maintain and easy to code as well as being lightweight on the browser.

Each poll has its own page, for example here’s a poll i created: Visit Poll the bar graph is generated using basic CSS and PHP to determine the percentages for the number of votes. Here’s a tutorial I wrote a while back on how to implement a similar graph

The Design

Much like wedeliver I wanted to create an appealing interface that’s easy on the eye, simple to navigate as well as containing all the functionality needed.

Visit the site

You can visit the site here and create a poll yourself. As I said in my post about wedeliver as a designer and developer it’s really important to do personal projects as well as freelance work you learn so much more building small applications in your own time.

What’s in the Package

jQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy to get started by including the latest version of jQuery minified alongside the Tools plugin all in one link, and you can hot-link to their CDN link so you don’t need to even host the plugin code.

What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

The JavaScript

This might not be the best way to structure the JavaScript and I’m sure you hard core coders will pick up on this however one of the purposes of this tutorial is to show newcomers to jQuery exactly how flexible and easy it is to create something that on the outside looks quick complex. The code used in this tutorial is relatively simple to understand.

we start with out document ready function, you should be familiar with this by now. If you’re not you can read about it here. We now have an event handler, in our case its a ‘hover’ event meaning that when our cursor hovers over the div ‘.holder’ it will execute the function. When our mouse exits the div ‘.holder’ it will run the handler out function, which in our case will revert the div back to how it was originally.

You can see that we’re using ‘(this)’ to reference our element. this is used to specify the element that the mouse is hovered over at that moment as we’re specifying the class holder, if we didn’t use ‘(this)’ regardless of which element we hovered over all of them would animate, so ‘(this)’ specifys that specific element to animate.

Lets look at what happens when we hover over one of the divs ‘.holder’.

1. For the element our mouse is over we remove the class ‘notactive’
2. We then animate the width of the divs with a class of ‘notactive’ this is to compensate for the expanding width of the selected element as you’ll see in the next step
3. Now we increase the width of the current ‘.holder’ div to 380px
4. Next we slide the image up to make way for the text.
5. We then change the background color of the span header to black to highlight it.
6. And finally over 300 milliseconds fade in the ‘.text’ div.

Because the animations aren’t chained they happen all at the same time.

When you’re mouse leaves the div the function below it is run to revert the contents back to it’s original position.

<br><br>$(document).ready(function(){<br><br>	 $('.holder').hover(<br>		function () {<br>		$(this).removeClass('.notactive');<br>		$('.notactive').stop().animate({'width':'290px'},400);<br>                $(this).stop().animate({'width':'380px'},400);<br>        $(this).find('img').stop().animate({'top':'-165px'},400);<br>		$(this).find('span').css({'background-color':'#000'});<br>		$(this).find('.text').fadeIn(300);<br>      },<br>	    function () {<br>		  	$('.notactive').stop().animate({'width':'320px'},400);<br>		  	$(this).addClass('.notactive');<br>			$(this).find('.text').hide();<br>       	                $(this).find('img').stop().animate({'top':'0px'},500);<br>		        $(this).stop().animate({'width':'320px'},400);<br>			$(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); <br><br>      });<br><br>});<br><br>

The HTML

<br>&lt;div class="main"&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2784/4237135170_61a9938781.jpg" height=""/&gt; &lt;span&gt;Image One&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2599/4166210326_06d91ce72a.jpg"/&gt; &lt;span&gt;Image Two&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2443/4060303038_a630262185.jpg"/&gt; &lt;span&gt;Image Three&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="clear"&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>

The CSS

<br><br>.holder {<br>	overflow:hidden;<br>	width:320px;<br>	height:333px;<br>	float:left;<br>	position:relative;<br>	background-color:#000;<br>	margin-right:1px;<br>}<br>.holder .image {<br>	position:absolute;<br>	left:-100px;<br>}<br>.holder span {<br>	background-color:#333;<br>	font-size:27px;<br>	font-family:Arial, Helvetica, sans-serif;<br>	color:#dedede;<br>	font-weight:700;<br>	padding:4px;<br>	position:absolute;<br>	top:120px;<br>	left:4px;<br>}<br>.holder .text {<br>	padding:20px;<br>	display:none;<br>	font-family:Arial, Helvetica, sans-serif;<br>	line-height:26px;<br>	position:absolute;<br>	top:180px;<br>	font-size:16px;<br>	color:#fff;<br>	width:340px;<br>}<br>.clear {<br>	clear:both;<br>}<br>.main {<br>	width:1000px;<br>	height:333px;<br>	margin:0 auto;<br>	overflow:hidden;<br>}<br>