Web Designer - Defining the internet through beautiful design » Tutorials http://www.webdesignermag.co.uk Web Design for real people Wed, 08 Feb 2012 10:09:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Create interactive animations from a Twitter feed http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/ http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/#comments Tue, 07 Feb 2012 17:10:08 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8307

Create interactive animations from a Twitter feedTwitter is a great tool for getting the pulse of the world, and is becoming more and more pervasive as mainstream media starts to include tweets in audience participation. The majority of users access and use Twitter through the http://twitter.com website, but thanks to the public API, we can now take the data from Twitter and do something a little different with it.
This tutorial is inspired by the excellent Tori’s Eye site, found at http://toriseye.quodis.com/#webdesigner. This is a visualisation of a Twitter stream that places some stylised birds into a landscape, flying across the screen to deliver tweets. It uses the Twitter JSON API to grab tweets from the Twitter timeline and a smattering of JavaScript to present them in an engaging manner.
In our version we’ll simplify how this is done, but we’ll be using the same basic principles to create an animation along similar lines to Tori’s Eye. Once you’ve completed this workshop you should have the understanding and tools at your disposal to create your own visualisation in new and exciting ways. Perhaps you’ll feel compelled to let us know what you come up with by Tweeting us (naturally) via @WebDesignerMag.

tools | tech | trends: Adobe Illustrator, Dreamweaver, jQuery, HTML, CSS & Twitter
expert: Sam Hampton-Smith
tutorial files: download here

01. Design a mockup
We start off by taking direct inspiration from the Tori’s Eye visualisation and designing a replica inside Illustrator. Our file can be found on the disc, but to get the textures we’ve used you’ll need to visit www.sxc.hu and search for paper and rusty metal stock. Note that we’ve separated out the background and the birds onto different layers for easier export later.

02. Output to PNG
Once we’re happy with the overall visual look, we need to export the graphics in a format suitable for use in the final HTML design. The background can be a straight JPEG as it doesn’t need any transparency. The birds, however, must be in PNG format. You need to isolate one bird and export it – this will become the master bird graphic.

03. Other elements
In Tori’s Eye the trees are separated into a layer above the birds, so that the birds can fly behind them. We’ve chosen not to mimic this for ease of understanding, but we did separate out the trees onto their own transparent PNG layer just in case we want to replicate the layers later down the line. You can find all our graphics on this month’s CD.

04. Create the HTML structure
We’ve got our graphics sorted, so now let’s create the basic HTML structure. Add the step code to a new page in your web editor. We’ll create some basic CSS rules, and to keep it simple we’ll retain all our style and script code in this one file. If you want a quick step up, we’ve included the basic HTML page on the disc – just open up ‘start.html’.

 <html>
<head>
<title>Twitter Animation</title>
<style>
</style>
</head>
<body>
<div id=”container”>
<div id=”trees”>
<div id=”tweetscontainer”>
</div>
</div>
</div>
</body>
</html>

 05.  Add some CSS
Apply this CSS; the full code is on the disc.

body {
 font-family:    arial, helv, sans- serif;
font-size:    66%;
background:    #f9f9f9;
padding:    20px;
}
#container {
position:    relative;
width:            1024px;
height:        700px;
margin:        auto;
background:  transparent url(styles/background.jpg) no-repeat top left;

06. Grab jQuery
Visit http://jquery.com and download the latest version of the library. jQuery makes it easy for us to interact with different elements on the page and create animations. To this end, we’ll install it at the top of our page, and set up a function beneath ready to hold all of the code to make our visualisation work.

<script type=”text/javascript”  src=”scripts/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
// Your jQuery code will slot in     here
 });
</script>

07. Connect to Twitter
Twitter has an API that’s publicly accessible. If you’re creating a full application, you may want to sign up for a specific developer API key, but for our purposes we’re just going to use the public version. We can call this using jQuery’s JSON method. Note that we’re passing in a search term that will return matching tweets – change this to suit you. Full code is on the CD.

var url = “http://search.twitter.com/ search.json?q=iphone&rpp=15&callback=?”;
var tweets = $(‘<ul id=”tweets”>’).         appendTo(“#tweetscontainer”);
$.getJSON(url,  function(data){
// Do something with the data returned

08. Parsing JSON
The data is returned from Twitter as a JSON object. JSON is a straightforward way to wrap data as a set of keys and values in an array. All we need to do is to iterate through the returned array and generate HTML. code from the values for each set of data. Add the code below to do this; full code is on the cover disc.

$.getJSON(url,  function(data){
$.each(data.results, function(i,item){
tweets.append(‘<li><div><img src=”‘  + item.profile_image_url +’” alt=”‘ +
item.from_user + ‘” width=”73″           height=”73″ /><p><a href=”http://twitter.       com/’+item.from_user
+’/statuses/’+item.id+’” title=”Click    here to view this on twitter”>’+item.from_      user+’</a> at
‘+item.created_at+’: ‘+item.text.           replace(/(\w+:\/\/[A-Za-z0-9-_]+\.              [A-Za-z0-9-_:%&\?\/.=]+)/gi, ‘<a
href=”$1″>$1</a>’).replace(/             [\@]+([A-Za-z0-9-_]+)/gi, ‘<a href=”http://     twitter.com/$1″>@$1</

09. Output results
Our code generates a list item (<li>) for each tweet, wrapping the actual contents of the tweet inside a <div> tag. We’ll use this later on to show and hide the tweet, but for now you should have 15 list items once the code has finished doing its work.

10. Test it out
It’s worth taking a moment to make sure your script is loading the tweets and outputting them in HTML. Although this will look pretty ugly, it’s a quick way to verify everything is working as it should. Once you’ve loaded it in your browser and observed all your tweets loading, you can move on to the next step.

11. More style
Let’s deal with the ugliness first of all. Each list item will become a bird that we animate across the screen. We’ve already set our container to have overflow:hidden, so we’ll be able to position our birds so that they start off outside the visible area, then animate them into position. Add the CSS below to set the start position for each <li>. Full code is on the disc.

#tweets {
position:    absolute;
top: 0;
left:  0;
width:  2000px;
margin-left:  -300px;

12. Create speed variables for the birdies
We’re going to generate a speed variable for each list item and run a function periodically to set the position of the bird. Each time the function runs, we’ll use the speed variable to reposition the list item by a set amount, and as we repeatedly run our function, so the list items will appear to be animated across the page.

13. Generate random values
We’re going to use random numbers to set the speed of each bird so that the birds don’t all fly across the screen at the same rate. JavaScript lets us generate random numbers using the Math.random() function. Add the code below to call up a random number between 0 and 9 to represent the speed of each bird.

var speed=Math.floor(Math.random()*10)+1;     

14. Set the start position
We don’t, however, want them all to be at the same vertical level, otherwise it’ll become very monotonous – so to avoid this we need to set a random starting position. We also need to store the speed value for each bird, and we can do this using the .data() method in jQuery. Add the code below to set the vertical position and store the speed. We also set the horizontal position to offset a little for each <li>.

var offsettop=Math.floor(Math. random()*400)+10;
$(“#tweets li:last”).data(“speed”,speed).css({top:offsettop,right:2000+(i*30)});

15. Get things moving
Although jQuery has the animate() method, we’ll use a straight setInterval function and set the position of each bird using CSS alone. This will enable us to control the frame rate more easily and give more predictable results. To start we’ll need a function that fires periodically; add the code below to create this.

var t = setInterval(function(){
// we’ll set the position of each bird every 30 milliseconds
},30);

16. Get things moving 2
Each time the function fires, we want to update the position of every bird to its new location on screen. Add this step’s code to grab the speed for each bird from the data() object and update the position of the bird accordingly. Again, full code is on the CD.

var t = setInterval(function(){
$(“#tweets li”).each(function(){
// grab the speed variable
speed = $(this).data(“speed”);
// and the current position
xpos = $(this).css(“left”);
// if the bird is off the left hand side of the screen, reset it to the right

17. Time to test
It’s time to open your page and test it out. All being well, after a short delay while the Twitter feed loads, you should see birds flying across the screen with tweets sitting on top of them. We’re nearly there now – just a bit of tidying up to do!

18. Pause for thought
The first thing that we notice is that it’s a little tricky to read the tweets as they zoom past. Let’s make the bird stop in position when the cursor is hovered over it. We’ll want the bird to carry on moving when we mouse off the bird, so add a clause to the animation function, and add a class to the bird as we mouse over to exclude it from the animation.

$(“#tweets li”).not(“.hover”).each(functio…
$(“#tweets li”).hover(function(){
$(this).addClass(“hover”);
$(this).css({zIndex:1000});
},function(){
$(this).removeClass(“hover”);
});

19. More style
Now we’ve got our birds flying across the screen, it would be nice to have the actual tweets appearing only when each bird is moused over. We’ll apply a little more panache to the way the tweets are displayed at the same time. Add the CSS below to hide the tweets until mouseover, and get them looking a bit more presentable. You will find the full code for this step on the cover disc.

#tweets li div {
display:  none;
padding:             10px;
background:    rgba(0,0,0,0.7);
color:                 #fff;
min-height:    93px;
margin-top:    100px;

20. Another quick test
If you test again now you should see the birds without all the tweets sitting on top of them, and as you move your mouse over the top of a bird it should stop in its tracks, and the tweet should then display underneath it. With these changes, we think the page is looking much slicker, plus it makes the Twitter stream much more fun to interact with!

21. Tweak to suit
When you test out your page you’ll almost certainly find that you want to modify some of the values – especially the random number generation and setInterval delay, as this will affect how quickly the birds fly across the screen. Try experimenting with a few different values to see the effect they have, and tweak values to taste.

22. Take it to the next level
Your overall visualisation should now be working nicely. Test in all your target browsers and check that everything works as it should. You might now want to consider extending the functionality so that the user can input their own search term, or so that some birds are bigger/faster than others – get creative and show us what you produce. You might end up in the Lightbox!

Create interactive animations from a Twitter feed

]]> http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/feed/ 0 Take control of your backgrounds with CSS3 http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/ http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/#comments Tue, 07 Feb 2012 17:02:16 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=8308

Take control of your backgrounds with CSS3

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties

Background images have played a key role in web design for as long as CSS has been popular, and support has been available. They are the aesthetic that creates the persona of a page. The big issue with background images is their lack of flexibility. They can repeat – perfect for textures, and they can be fixed to stay in place on screen but they cannot be resized. This means that developers who want a beautiful full-screen canvas, or simply more flexibility, have to improvise with absolute positioned tags, image sizes or code.
The background-size property, part of the CSS3 Backgrounds and Borders module, grants designers far more scope to be creative and with cleaner code. And, with support for multiple backgrounds by its side, this tasty duo is set to finally give web designers a chance to make the most of their backdrops.

This article was originally featured in Web Designer issue 190, authored by Steve Jenkins. There are no project files required for this tutorial.

01 Default value

Take control of your backgrounds with CSS3

The default value for the background-size property is auto. This displays the background image at its original size, eg 1,000 x 700px. The background-size property works in tandem with the background property so if the image is set to no-repeat only one instance will appear; on the other hand, if set to repeat it will do just that.

02 Specific size

Take control of your backgrounds with CSS3

An alternative to the auto option is a specific set of dimensions, eg 500 x 350px. The first value refers to the width of the image while the second refers to the height. Again, the repeat property helps to determine how the background appears.

03 Auto values
Background-size allows for the combination of specific sizes and the auto option. If the first value (width) is set to 500px and the second value to auto, the height will be automatically reduced proportionately to the width. This keeps the image’s original aspect ratio. If only the first value is added it is assumed that the second is auto.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: 500px auto;
004 }

04 Auto width
Adding the auto value first changes the perspective of an image. The first value (width) will now be determined by the second value (the height). The height will become the static value and the height will be automatically reduced/increased proportionately to the width, again keeping the aspect ratio.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px; 
004 }

05 Percentages
To add more flexibility to the size of a background image the values can be added as percentages. Adding a percentage as the first value, eg 50%, determines that the width will be 50% of the screen or 50% of the containing div tag. The second value (height) will be set to auto and its size will be kept in proportion.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px;}

]]> http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/feed/ 0 Optimise WordPress & enhance site performance http://www.webdesignermag.co.uk/tutorials/optimise-wordpress-enhance-site-performance/ http://www.webdesignermag.co.uk/tutorials/optimise-wordpress-enhance-site-performance/#comments Tue, 17 Jan 2012 15:50:05 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8243

Optimise WordPress & enhance site performanceAs the web evolves, it is of even more importance for your new-look WordPress site to respond quickly and efficiently, giving your users and visitors exactly what they’ve searched for without them waiting around for an eternity for it to load.
Site optimisation is more important now than ever, as users access your content on a variety of devices across varying levels of connection speeds.
In this tutorial, we will have a look at some of the plug-ins available to download and implement within your WordPress installation to help reduce server load, optimise code and templates, and go some way to improving the speed and performance of your site.
We’ll primarily focus on adding a caching plug-in to generate and serve static HTML versions of your dynamic content, as well as look at other areas where performance can be enhanced.

tools | tech | trends: WordPress, PHP
expert: Matt Gifford
tutorial files: download here

01. Start caching
Optimise WordPress & enhance site performance
There are a few plug-ins out there to assist in setting up caching, but we’re going to be looking at WP Super Cache. Go to the Plugins>Add New menu option in your WordPress administrator and search for the plug-in by name in the available form field.

02. Install plug-in
Optimise WordPress & enhance site performance
The results from the search displayed in the admin interface should list WP Super Cache as the first option. Select the ‘Install Now’ link to automatically download the plug-in. Alternatively, you can download the plug-in separately and use an FTP client to upload to the plug-ins directory in your WordPress installation. Finally, activate the plug-in.

03. Set permissions
Optimise WordPress & enhance site performance
Depending on the current access configuration of your WordPress installation, you may see an error message regarding the ‘advanced-cache.php’ file. To resolve this issue you simply need to temporarily alter the permissions of the wp-content directory to 777 to allow write privileges, which you can do via your FTP client. Revert to 755 when finished.

04. Caching enabled
Having successfully generated the required files for the plug-in, the WordPress installation should have also made an amendment to the ‘wp-config.php’ file to enable caching. If you see any errors relating to the config file, try adjusting the permission levels and activating the plug-in once more to generate the required changes.

001 /** The name of the         database for WordPress */
002 define(‘WP_CACHE’, true);     //Added by WP-Cache Manager

05. Simple caching
Optimise WordPress & enhance site performance
The plug-in should now present you with a number of tabbed menu options within the administration panel. Within the Easy tab, set Caching On to enable the abilities and static file generation. For the majority of simple blogs this may be enough, but we’ll progress and see what advanced options are available to us.

06. Advanced settings
Optimise WordPress & enhance site performance
There are a number of options available to implement here. The success and availability of some will depend on your hosting plan and server setup, so try them out. Start by checking all recommended settings, specifically the mod_rewrite setting to serve cached files. You can also restrict caching for frequent visitors.

07. Mod rewrite
Optimise WordPress & enhance site performance
The mod rewrite rules required to serve up
the static html-generated files are quite extensive, but the plug-in will warn you that your ‘.htaccess’ file needs to be updated and provides you with the ability to update on your behalf or the content to manually update/create the file yourself.

08. Test caching
Optimise WordPress & enhance site performance
Return to the Easy tab option and run a test on the cache, which retrieves two static-generated files for timestamp comparison. Any issues found here can be a good indication as to what settings on the server you may need to change. You can also delete the cache and start again if you need to.

09. View source
Optimise WordPress & enhance site performance
Check your site and view the source in a number of different browsers to test the caching procedure. The WP Super Cache plug-in will automatically insert cache information at the bottom of every page, with information on caching times and compression to let you know it’s working and hopefully quicker than before.

10. Consider CDN
Optimise WordPress & enhance site performance
If your site relies heavily on static components such as images, CSS or JS files, consider the use of a content distribution network (CDN) to serve these up and share the load. Services such as Amazon S3 or Rackspace Cloud Files can be of help here, and the cache plug-in can be configured to work with these services.

11. Optimise plug-ins
Optimise WordPress & enhance site performance
Deactivate any plug-ins you no longer need or use. These could be having a large impact on loading times and response. Consider the possibility of streamlining any active plug-ins. If you see any code that could be written more efficiently, do so. The smallest tweak to a function could improve loading times and functionality.

12. Combine CSS and JS
Optimise WordPress & enhance site performance
One clear way to improve the performance of any website is to reduce the number of http requests made to obtain resources and assets. Where possible, combine multiple CSS and JS files into one. The WP Minify plug-in assists in collating and minimising the contents of these files. You can get it here: http://bit.ly/wpminify.

13. Load JS in footer
Optimise WordPress & enhance site performance
When creating or amending your WordPress theme, try to place any JS files into the footer of the template. This helps to ensure that all DOM elements have been created on the page before any manipulation or JavaScript functions are performed. WP Minify can help you with this option automatically or manually.

14. Reduce image sizes
Optimise WordPress & enhance site performance
Images can create unnecessary overhead, due to file size and compression. When uploading images, consider reducing the file size where possible to optimise for the web. Alternatively, download and install the WP Smush.it plug-in (http://bit.ly/wp_smush), which will run any image in your media library through Yahoo’s smush.it service and compress the image without losing quality.

15. Browser caching
Using the browser cache doesn’t necessarily increase the loading time of your WordPress installation, but it can help to reduce strain on the server by caching objects that are loaded often. Add the code for this step to your
‘.htaccess’ file, to help reduce the load when requesting static files and images.

001 FileETag MTime Size
002 <ifmodule mod_expires.c>
003 <filesmatch                 “\.(jpg|gif|png|    css|js)$”>
004 ExpiresActive on
005 ExpiresDefault “access plus     1 year”
006 </filesmatch>
007 </ifmodule>

Query performance

WordPress makes it incredibly simple to create custom queries to obtain data not easily provided by the default functions available, but these database interactions need to be as optimal as possible to avoid any latency or lag. Any possible bottlenecks and issues need to be discovered and resolved as quickly as possible, but they’re typically quite hard to track down.
To assist you in finding any query issues, download and install the Debug Queries plug-in (http://bit.ly/oLnht3). This will display all queries running on a page at the bottom of the screen, complete with total time taken to return results, also showing you the full SQL query being run so you can copy it and revise if necessary. It will only show the results for logged-in administrators to the site, so your users never see the output.


]]> http://www.webdesignermag.co.uk/tutorials/optimise-wordpress-enhance-site-performance/feed/ 4 Build responsive sites using the 320 and up framework http://www.webdesignermag.co.uk/tutorials/build-responsive-sites-using-the-320-and-up-framework/ http://www.webdesignermag.co.uk/tutorials/build-responsive-sites-using-the-320-and-up-framework/#comments Mon, 02 Jan 2012 08:30:27 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8101

Build responsive sites using the 320 and up framework

Build responsive sites using the 320 and up framework

The hottest trend in web design right now is responsive design. Thanks to the powers of CSS3 and HTML5, we can finally embrace the concept of One Web, which lets us build one website that adapts to the device it is being viewed upon. This is necessary since the plethora of devices on the market is ever-growing, and with that we get more and more screen resolutions to take into account. For most projects it just isn’t possible to build a mobile version, an app and then a tablet version, and a desktop one at that – there is no sense in the economy there.
Luckily responsive web design can help, thanks to the possibility to query the screen resolution using   @media and min-width, and then act upon that. This means that we can have one set of styles for resolutions up to 768 pixels, and one for those above, for example.
320 and Up is an interesting framework developed by Andy Clarke that helps you build sites, starting with the most common denominator, which is the smallest screen. Then we add to it with additional styles. This tutorial will help you understand how to start working with it, so that you can apply it to your own projects.

tools | tech | trends: HTML, CSS, JavaScript, 320 and up (framework)
expert: Thord Daniel Hedengren
tutorial files: download

01. Download 320 and Up
Build responsive sites using the 320 and up framework
The first thing we need to do is download the 320 and Up framework. At the time of press the most current version available is 0.9, and you can access it directly by visiting http://stuffandnonsense.co.uk/projects/320andup/latest.zip

02. Examine the package
The 320 and Up ZIP archive contains two folders, one titled Multiple linked style sheets and one called Single style sheet. These contain different versions of the 320 and Up framework, either as one style sheet or split up into several. The fewer style sheets you use the better, since it makes it easier on the server due to fewer requests, but it also means the files get bigger and perhaps harder to work with. Copy the contents of the Single style sheet folder to a place of your choosing. That’s what we’ll work with.

03. A closer look at the contents
Build responsive sites using the 320 and up framework
320 and Up is an organised framework, as you’ll see when looking at the contents of the Single style sheet folder. You’ve got your style sheets in a folder called ‘CSS’, images in the ‘img’ folder and JavaScript files in the ‘js’ folder. You’ll also notice ‘index.html’ and ‘404.html’, which will help us create our mobile site.

04. Let’s take a look at ‘index.html’
The ‘index.html’ file is essentially empty of content, the only thing we get is a h1 heading at the top and the basic HTML markup needed. What’s interesting is the actual markup obviously, and the style sheets that make it all happen. Get familiar with ‘index.html’ and, if things like viewport are Greek to you, at least take a look at the page markup, starting with header on line 63, down to the closing off footer on line 78.

05. ‘index.html’ in the browser
Looking at ‘index.html’ in the browser as it is now doesn’t tell us much, but the developer has been kind enough to leave us a grid that we can ”activate”. Open ‘style.css’ (in the CSS folder) and scroll down to line 64. There, uncomment the url(../img/tmp/grid.png) repeat-y 50% 0 part for the html tag. Reloading ‘index.html’ in the browser will show a grid image being repeated, which will be helpful as we go along.

06. Let’s add some content
Let’s add some content to ‘index.html’. First of all, change the contents of h1 (on line 64) to something else, and then put a few simple paragraphs within the <div role=”main”> tag on line 69. Dragging the Browser window now
will just let the content flow to almost full width.

07. Populate the other columns
To really get an idea of how things relate to each other, let’s add some paragraphs to the <div role=”complementary”> as well. Then, while we’re at it, put something within the <footer role=”contentinfo” class=”clearfix”>, preferably something that tells you it is from the footer.

08. It doesn’t work!
Build responsive sites using the 320 and up framework
Taking a look at ‘index.html’ as it is now, you’ll notice that nothing aligns – the content is just presented in one long column. That’s because 320 and Up doesn’t come littered with stylings for your desktop experience.

09. Find our way in the style sheet
If you want to learn a thing or two on how to organise a style sheet, look no further than to ‘style.css’. There’s even an index at the start of the file, which is nice. Consult it to find your way in the file.

10. Let’s add some style
Build responsive sites using the 320 and up framework
In ‘style.css’, you’ll find that the media queries start at line 423. There you’ll find a placeholder for adding styles for screens larger than 480 pixels (min-width: 480px is the rule). Let’s make some changes to the h1 tag here, shall we? The added code changes the h1 color to blue, gives it padding and a line below it whenever the screen is more than 480 pixels. Obviously we could add more, but this will do for this particular size.

001 /*480px ______________ */
002 @media only screen and (min-width: 480px) {
003 /* 2.HEADINGS */
004 h1 {
005 color: blue;
006 padding-bottom: .1em;
006 border-bottom: 1px solid #bbb;
007 }

11. Column markup
If you drag your Browser window right now, you’ll find that larger screens also inherit the style we added in step 10. That’s because we’re designing from the small screen out. Next resolution is 768 pixels upwards (line 453 in ‘style.css’), so let’s make this the point where we start using columns. First, open ‘index.html’ and find <div role=”main”>, to which you’ll add class=”content-main”. Then do the same with <div role=”complementary”> but add class=”content-complementary”. This will make it easier for us to style the div containers using CSS.

12. Add the main column style
Build responsive sites using the 320 and up framework
Next, go back to ‘style.css’ and the @media rule for min-width: 768px (and up). Here, under ”11. MAIN”, we’ll add the necessary style to float the div.content-main container left.

001 /* 11.MAIN */
002 div.maincontent {
003 float: left;
004 width: 65%;
005 }

13. Add the secondary column style
Build responsive sites using the 320 and up framework
Now, let’s give the secondary column, the one with the role ”complementary” in ‘index.html’, float: right and a better suited width. In fact, let’s also make sure that the font size differs and the color is dark grey rather than black as the main content. Refer to ”3. TYPOGRAPHY” and ”12. COMPLEMENTARY” in the code below, still within the @media rule with
min-width: 768px, of course.

001 /*768px ___________ */
002 @media only screen and (min-width:     768px) {
003 /* 3.TYPOGRAPHY */
004 div.complementarycontent p {
005 font-size: 0.9em;
006 color: #666;
007 }
008 /* 11.MAIN */
009 div.maincontent {
010 float: left;
011 width: 65%;
012 }
013 /* 12.COMPLIMENTARY */
014 div.complementarycontent {
015 float: right;
016 width: 30%;
017 }
018 }/*/mediaquery*/

14. Draw the line
Build responsive sites using the 320 and up framework
There are several sizes beyond min-width: 768px, but chances are you want to draw the line somewhere as to how wide your site can be. We’ll do that in the @media query with min-width: 992px, setting the maximum allowed width to 960 pixels. While we’re at it, let’s also make that blue h1 heading a bit larger, shall we?

001 /*992px ____________ */
002 @media only screen and (min-width:     992px) {
003 /* 1.ROOT */
004 body {
005 max-width: 960px;
006 }
007 /* 2.HEADINGS */
008 h1 {
009 font-size: 4em;
010 padding-bottom: .5em;
011 }
012 /* 17.MODERNIZR */
013 }/*/mediaquery*/

15. Add an image
Images need some love if they are to fit to the screen size. Let’s open ‘index.html’ and add one to the HTML markup, between two paragraph tags in the main div container. For demonstration purposes, we added ‘image.jpg’ to the img/tmp/ folder.

16. Scale the image
Build responsive sites using the 320 and up framework
We need to make sure that the image scales with the content. The solution is to give all img tags max-width: 100%, which will make sure that it never exceeds its wrapping container’s width. Adding max-width: 100% to img on
the screen sizes you want this behaviour on is easy, of course. You might want it to be a global thing, in which case you would add it to the img tag globally.

001 div.content img {
002 max-width: 100%;
003 }

17. Hide an element
Let’s say that we don’t want to show the complimentary column’s content if the screen width is smaller than 480 pixels. We do this with display: none applied to div.complimentarycontent, which will stop it from rendering. To make it work, we first must add it under ”12.COMPLIMENTARY” on line 255 in ‘style.css’, to make it a starting point.

001 /* 12.COMPLIMENTARY */
002 div.complimentarycontent {
003 display: none;
004 }

18. Show the element when needed
So now div.complimentarycontent is hidden on small screens, and since that is where the code begins, all other resolutions will inherit it. To sort that out we’ll have to add display: block to div.complimentarycontent at the @media rule, where we want it to start appearing. In this case, that would be at min-width: 768px, where we’ll add display:block to the already present stylings of div.complimentarycontent.

001 /*768px ______________ */
002 @media only screen and (min-width: 768px) {
003 /* 3.TYPOGRAPHY */
004 div.complimentarycontent p {
005 font-size: 0.9em;
006 color: #666;
007 }
008 /* 5.FIGURES & IMAGES */
009 div.content img {
010 max-width: 100%;
011 }
012 /* 11.MAIN */
013 div.maincontent {
014 float: left;
015 width: 65%;
016 }
017 /* 12.COMPLIMENTARY */
018 div.complimentarycontent {
019 display: block;
020 float: right;
021 width: 30%;
022 }
023 /* 17.MODERNIZR */
024 }/*/mediaquery*/

]]> http://www.webdesignermag.co.uk/tutorials/build-responsive-sites-using-the-320-and-up-framework/feed/ 7 Create Cinemagraph animated gifs from video http://www.webdesignermag.co.uk/tutorials/create-cinemagraph-animated-gifs-from-video/ http://www.webdesignermag.co.uk/tutorials/create-cinemagraph-animated-gifs-from-video/#comments Mon, 26 Dec 2011 08:30:59 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8070

Create Cinemagraph animated gifs from video

The internet is filled with strikingly beautiful photos, along with clever and entertaining animation. When these two elements are mixed together, the result is something that captivates by denying expectations. Enter the cinemagraph, an art form made popular by artists such as Jamie Beck and Kevin Burg. At first glance, these pieces appear to be merely another entry in an accomplished photographer’s gallery. But then a suggestion of movement catches the eye and the image suddenly comes alive with magic and mystery. This form of art makes the tired technology of the animated GIF relevant again. What once was used only for cheesy signature lines has now become something exceptionally artful.
This tutorial demonstrates how to create a cinemagraph from either a video clip or a sequence of photos. Note that the Extended version of Photoshop is required for its animation features.

tools | tech | trends:Photoshop CS5 Extended
expert: Kirk Nelson
tutorial files: download

01. Video layer
Create Cinemagraph animated gifs from video
Open Photoshop CS5 Extended and make sure the animation panel is visible by going to Window>Animation. If working with a video file, go ahead and open it here by dragging the file onto the empty Photoshop workspace. If working with the sequential images provided on the CD, you can feel free to skip forward to step 5.

02. The sweet spot
Create Cinemagraph animated gifs from video
In the Animation panel either press the Play button to preview, or drag the playhead handle to scrub through the video. Look for the best portion to keep as the animated part of the cinemagraph. Then drag the beginning and ending timeline markers to define the work area as just that portion.

03. Trim work area
Create Cinemagraph animated gifs from video
In the top-right corner of the Animation panel is an icon of a small triangle next to horizontal lines. Click it to trigger the flyout menu and choose Trim Document Duration to Work Area. This will cut off the ends of the video that lie outside the area specified in the last step.

04. Frames to layers
Create Cinemagraph animated gifs from video
From the same flyout menu, choose Flatten Frames into Layers. Photoshop parses the video and creates a new layer for each individual frame. The number of generated layers/frames is determined by the length of the video segment. If working with a video file, please now skip to step 6.

05. Photo sequence
Create Cinemagraph animated gifs from video
Note: This step is NOT for the video file! If using the photo sequence from the cover disc, please start here. Copy the photos of the swinging tyre to your hard drive. Then go to File>Scripts>Load Files into Stack. Use the dialog box to browse to and add the photo sequence.

06. Frame animation
Create Cinemagraph animated gifs from video
Photoshop views animation in two different ways. The first is a timeline, tweening approach that is very similar to the way Flash operates. The second is a frame-by-frame approach which is what is required for this project. If the file is in Timeline mode, open the flyout menu and click on Convert to Frame Animation.

07. Frames from layers
Create Cinemagraph animated gifs from video
Open the flyout menu again and choose the Make Frames from Layers option. Photoshop creates a new frame from each layer sequentially. All the layers are still present, but Photoshop hides all but a single layer for each frame. Click through each frame and see how the layers are revealed in sequence, creating the animation.

08. Timing adjustment
Create Cinemagraph animated gifs from video
In the bottom-left of the Animation panel, look for a small drop-down menu that controls the repeat of the animation. Set this to Forever. Then Shift-select all the frames in the animation and click the timing setting beneath one of them. From the pop-up menu select Other, and set the timing to 0.06 seconds.

09. Helpful setting
Create Cinemagraph animated gifs from video
Open the flyout menu once again and make sure the New Layers Visible in All Frames option is checked. This will ensure that the next few steps appear throughout the entire animation. Without this, one would have to reveal the new layers for each and every frame of the animation.

10. Freeze frame
Create Cinemagraph animated gifs from video
Go to the top layer and press Ctrl/Cmd+J to duplicate it. Be sure the layer is visible and rename it ‘Frozen’. The point of this layer is to cover up any extra movement taking place in the frame, so the movement of the swing will be what draws the viewer’s interest.

11. I see you!
Create Cinemagraph animated gifs from video
Use the small button at the foot of the Layers panel to add a mask to the Frozen layer. Make certain the layer mask is targeted (click on the thumbnail just to be sure) and then use a large, soft brush with black paint to reveal the animation layers beneath.

12. Troubleshooting and touch up
Create Cinemagraph animated gifs from video
Play back the animation and watch closely to make sure the Frozen layer is not concealing any of the swing’s movement. If it is, touch up the mask with the brush again. If the paint strays too far, use white paint to reverse the effect. That’s the beauty of using a mask in Photoshop!

13. Added effects
Create Cinemagraph animated gifs from video
Add in any additional effects like adjustment layers, vignettes, text, etc. Just be sure the items you add are layer-based. If on playback you find that things are shifting around between layers, try Shift-selecting all the frames and then adjusting the position of the elements so the change is applied to all the frames.

14. Save for web
Create Cinemagraph animated gifs from video
Go to File>Save for Web and Mobile Devices to get this dialog box. Set the file format to GIF – Photoshop detects the animation automatically. Even though JPEGs give better image quality, they do not support animation. Set the colours to 256, the maximum allowed by the GIF format. Then remove the Transparency checkmark. Don’t hit Save just yet!

15. Finish up
The method of dithering is going to be different for each image, but for this particular image, choose Adaptive and Diffusion. Notice that at the bottom-left is a Preview button, which allows a preview of the animation in a browser. Once the settings produce a satisfactory result, hit Save to finalise the project.

]]> http://www.webdesignermag.co.uk/tutorials/create-cinemagraph-animated-gifs-from-video/feed/ 0 Animated infographics with HTML, CSS & jQuery http://www.webdesignermag.co.uk/tutorials/animated-infographics-with-html-css-jquery/ http://www.webdesignermag.co.uk/tutorials/animated-infographics-with-html-css-jquery/#comments Mon, 19 Dec 2011 08:30:43 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8034

Animated infographics with HTML, CSS & jQuery

Infographics are a great way of presenting data in an easy-to-understand, digestible form that can highlight the key learning points without the need to get down and dirty with numbers. Because of their ability to convey a message with high impact, they’ve become hugely popular on the web over the past few years. But the vast majority of them suffer from being static, un-interactive and formulaic. As a result, day by day they are losing their original impact as viewers tire of seeing the same visual approach – think of it like eating the same meal over and over.
At the heart of the infographic is the idea that data is being shared, so why not use that to build an interactive, animated design that retains the core link to a data source, and looks great at the same time? In this tutorial we’re using HTML, CSS and jQuery to do just that…

tools | tech | trends: Adobe Illustrator, HTML editor of choice, jQuery
expert: Sam Hampton-Smith
tutorial files: download

01. Choose a data source
Animated infographics with HTML, CSS & jQuery
The first thing we need to do is to decide on a data source we’ll use to create our infographic. There are numerous sources of interesting data across the web, including data.gov.uk, data.un.org and www.imf.org/external/data.htm, or take a look at gapminder.org to get some inspiration. We’ve cheated and made up some dummy data for our graphic.

02. Mockup design
Animated infographics with HTML, CSS & jQuery
As it’s an infographic, we really want to mock it up in some graphics software first, so we have a good idea of what our final output will look like. We can also use the mockup to output any graphics we need to render. Illustrator is perfect for this, but you can use whatever software you have installed to the same effect.

03. Create core HTML
Animated infographics with HTML, CSS & jQuery
We’re going to create our interactive infographic using an HTML table as the data source. This has the benefit of making the data accessible – if for some reason the user doesn’t want to, or can’t render the graphical version, the data will still be visible. Start off by creating a basic HTML page.

04. Data goes in tables
Animated infographics with HTML, CSS & jQuery
Convert and format your data source into an HTML table. Try to keep it easy to navigate and sparse, though – remember that we’ll be using code to get access to the values within the table, so it needs to be simple. Don’t nest your data many tables deep!

05. Static HTML for design
Animated infographics with HTML, CSS & jQuery
Separately from the table, we’re going to create the necessary HTML to display our full infographic, and then we’ll use jQuery to show and animate this. Start off by creating the core <div>s for the infographic area, the two bar charts and the area chart. Don’t put the real data in these, just make sure you give each a hook for jQuery by using a unique class or ID.

06. Add placeholder structure
We need to create the placeholder content and structure for the rest of the infographic. Again, don’t worry about putting in the final data, but do make sure you separate the label and values within your markup, and add appropriate hooks for your script to grab onto.

07. Build your CSS
Animated infographics with HTML, CSS & jQuery
Having created the markup, it’s time to style it to look vaguely like our mockup, so add the necessary CSS rules to create the look in the browser. Position the bar charts absolutely, from the bottom of their parent <div>s to get good alignment. Do the same for the area chart at the bottom of the page.

08. Test your layout
Animated infographics with HTML, CSS & jQuery
Before you proceed any further, you should test your layout in all the browsers that matter to you – it
will become much more difficult to bug check once you’ve got your jQuery code in place, so spend the time now to make sure everything renders as planned across all desired browsers.

09. Bring on the script!
We’re going to use jQuery to grab the data from the table and populate all the placeholder content in our infographic. Start off by grabbing the latest build from jquery.com, and add a new script to your page to hold your own jQuery code. Finally, add a $(document).ready() function.

10. Pull out the data
Animated infographics with HTML, CSS & jQuery
As we’re using a table on the same HTML page as our data source, we don’t need to worry about being too careful with unexpected data in our code. You can either take a manual approach to extracting a piece of data, or try to do it programmatically. The latter would be preferable if you wanted to allow for 2011 data at a later stage, but here we’ll go for the easiest route.

11. Place the data
Animated infographics with HTML, CSS & jQuery
All the hooks you created earlier are now useful as we copy and transplant the individual bits of data into their final positions. Now we can update our table, and the data values will automatically change in our infographic. The next thing we’ll need to do is to apply CSS relative to the data.

12. A little maths
Animated infographics with HTML, CSS & jQuery
This is where it can get a little messy, especially if you’re not keen on maths, but stay with us – it’s quite straightforward. We need to work out how big each bar in the chart should be, relative to each other. We’ve got four bars overall, and they all relate to one another.

13. Work it out
Animated infographics with HTML, CSS & jQuery
To get the range, work out what the tallest you want a bar to be, and the shortest. The tallest will be mapped to the largest figure in our data, and the shortest to the lowest value. Now it’s simply a case of using an equation to get the height for the other two bars. Use jQuery to apply the CSS to the bars.

14. Repeat for the area chart
We need to repeat the same steps for our area chart at the bottom of our graphic, but instead of just height, we’re also working out width, which makes it a little bit more complicated. A lot of infographics on the web cheat here and don’t use real area comparisons, so don’t worry too much about applying some artistic license along the way.

15. Calculate the change
Animated infographics with HTML, CSS & jQuery
Finally we need to calculate the change between the two years. To do this, we’ll add the female and male figures for each year and compare the two results by dividing the second by the first. The result shows the percentage of the original, and by subtracting from 100% we get the percentage change.

16. Making it animate
Animated infographics with HTML, CSS & jQuery
So far we’ve created a static infographic programmatically. As you change the data in the table, the charts update to the new values as appropriate. But we’re no better off than had we saved a graphic (other than making it simple to maintain). What we want is animation of our chart when the user loads the page. Change each of your jQuery CSS() calls to an animate() call.

17. Stagger it
Animated infographics with HTML, CSS & jQuery
We need to customise our animations to take a little longer, and also stagger them so that they don’t all animate into place at the same time. We can do this using the delay() method to offset the animation. You can also make the charts animate from zero rather than the original defaults we mocked up by adding a CSS() call before the delay() method.

18. Respond to the user
We want to respond to user interaction, so we’ll need to add some functions and additional animations. The easiest choice for interaction is mouseover(), as we won’t need to explain to the user what they need to do – as they move their mouse over the chart, it will change appearance accordingly.

19. Opacity is king
One way we can draw attention to the current data is to darken down the remainder of the infographic. Add an ‘opacity’ class to each  top-level container and add a separate jQuery function for mouseover, setting all but the current container to animate opacity down to 0.7.

20. Hide the raw data
Animated infographics with HTML, CSS & jQuery
You might choose to format your table nicely so that it adds to the value of the completed piece, but for our purposes it doesn’t fit into our design, so we’ll use jQuery to hide the table from view (see shot below). In doing it this way, should the JavaScript not load for any reason, the table will remain visible, making the data accessible.

21. Test cross-browser
Animated infographics with HTML, CSS & jQuery
Congratulations – you’ve created an interactive infographic. All that remains is to test the cross-browser thoroughly to make sure everything works as expected. Some of the CSS effects might not work perfectly in every browser, but hopefully you picked this up in step 8. Now go forth and create some compelling content to replace all those static infographics!

LOVE INFOGRAPHICS – TRY THIS

Animated infographics with HTML, CSS & jQueryPhotoshop: Vector-style infographics
Learn how to design a simple infographic which combines a statistical message and the current trend for stylish vector graphics

]]> http://www.webdesignermag.co.uk/tutorials/animated-infographics-with-html-css-jquery/feed/ 0 Optimise layouts with the Treesaver framework http://www.webdesignermag.co.uk/tutorials/optimise-layouts-with-the-treesaver-framework/ http://www.webdesignermag.co.uk/tutorials/optimise-layouts-with-the-treesaver-framework/#comments Thu, 01 Dec 2011 12:57:05 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7907

Optimise layouts with the Treesaver framework

As tablet devices take off, digital magazine production is web design’s next big challenge. There are already many platforms and services catering to digital mag publication, from freebies like Issuu to Adobe’s extremely pricey Digital Publishing Suite. But there are other problems here besides cost, not least of which is Flash. To be more precise, Flash on the iPad. There’s no use pretending that Apple hasn’t already cornered the digital mag market, because it has. It came first to market with a world- beating tablet, then slammed the doors on the many Flash-based methods of distributing digital content.
Enter Treesaver (www.treesaverjs.com), a JavaScript library that takes your content and enables you to build magazine-style layouts in HTML5. In other words, a format that’ll run on your browser, your mobile and your tablet device, no Flash required. We look at the basics of getting it up and running.
In this tutorial we take some public domain content and show you how get it working using a simple Treesaver-powered layout, with nothing more fancy than a text editor and a local web server.

tools | tech | trends: Treesaver framework, HTML5, CSS, XAMPP, Notetab Light / Dreamweaver CS5
expert: Hal Devlin
tutorial files: download here

Optimise layouts with the Treesaver framework

01. Set up
Because Treesaver is a JavaScript library, you’ll need to develop using a live web server to see the results. We chose the open-source, low-budget approach. XAMPP – a Windows-based Apache and MySQL server with its own installer, plus Notetab Light for coding. If you have it, you could use Dreamweaver CS5’s Live View instead.

02. Install Treesaver
At the moment, documentation and none-commercial templates for Treesaver are thin on the ground, so we made a basic installer for you. Create a folder called ‘magazine’ in the root of your web server’s documents directory. Place ‘treesaver-0.9.2.js’ in this folder, then extract the archive ‘raven.zip’ from the CD to this folder.

03. Edit the boilerplate
You can run the code at this stage if you want, but all you’ll see is a placeholder column with a bit of text. We’re using the public domain poem ‘The Raven’ by Edgar Allen Poe in our example. We’ve already converted it to HTML, so all you have to do is open the file ‘boilerplate.html’ from the directory magazine/raven in your text editor and paste the contents of ‘raven.txt’ between the tags. Save the edited file as ‘index.html’ in the folder labelled ‘raven’. Go to 127.0.0.1/magazine/raven/ to test your work.

001 <article>
002 <!– place your content between the   <article> tags –>
003 <p>This markup is an example of a page  using Treesaver for layout. It is not very  exciting right now.</p>
004 </article>

04. Change styles
The basic functionality is already there, including the ability to flick through pages with the mouse wheel or cursor keys. We want to make it look at little better, though. Open ‘style.css’ from the folder ‘magazine/raven’. A look at this file reveals the fact that you can change the size of columns and the overall grid. Set column and grid widths to 450px.

001 .grid {
002 width: 450px;
003 border: 1px solid #ccc;
004 margin: 9px;
005 }

05. Text styling
There are other secrets embedded in the default CSS file. Although there’s no default text style, you can format all your content using standard CSS. We wanted our font styles to fit the gothic poem a little more effectively, for example, so we set the base font to Georgia using the body element, adding it to ‘style.css’.

001 body {
002 font-family: Georgia, Serif;
003 font-size: 14px;
004 }

06. Editing resources
There’s one file we’ve yet to touch – the mysterious ‘resources.html’. Open this now and you’ll see an HTML file containing structural elements. For example, we can add buttons to the code using the built-in class “controls” – the following code goes within the opening and closing “chrome” <div> class elements, after <div class=”viewer”></div>.

001 <div class=”controls”>
002 <div class=”pagewidth”>
003 <button class=”prev”>Prev</button>
004 <button class=”next”>Next</button>
005 </div>
006 </div>

07. Page numbers
Why stop at buttons? We can also use built-in Treesaver attributes to grab and display current page numbers and restrict the total number of pages, too. The code between <span> tags below fits directly after the line <div class=”pagewidth”> from the last example.

001 <span class=”pagenumbers”>
002 <span data-bind=”pagenumber”>1</span>
003 <span data-bind=”pagecount”>5</span>
004 </span>

08. Styling buttons
The code in the last two steps creates buttons, but we need to tweak our style sheet to position them and make them work. The CSS code’s a little long and involved, so we’ve provided it as a snippet. Open ‘controlstyle.css’ from magazine/raven and paste the contents into ‘style.css’.

09. Editing grids
We’ve added in UI elements – another key element of Treesaver pages are grids. The documentation describes these as HTML ‘skeletons’ that content slots into. We could add a second column, for example, by adding the following code to resources.html, after the closing </div> of the existing grid markup:

001 <div class=”grid cols-2”>
002 <div class=”column”></div>
003 <div class=”column col-2”></div>
004 </div>

10. Styling grids
For a two-column grid to work, we would also need to tweak ‘style.css’, declaring sizes for single-column and double-column layouts. We already have a declaration that styles a basic single column grid. We would need to style that second column as well. The code goes after the first .grid declaration in ‘style.css’.

001 .cols-2 {
002 width: 900px;
003 left: 460px;

11. More columns
The workflow is as always – add the column code to resources.html after the last declaration, then edit ‘style.css’ to add the dimensions and position of the new column. When you add a second grid column the dimensions are twice that of the first. On a third column, the dimensions are three times that of the first, and so on. The positioning in our code allows for 10 pixels of space between columns.

001 .cols-3 {
002 width: 1250px;
003 left; 910 px

12. Figure it out
Our content is perfectly suited to a single- column layout, so we’re sticking with that as we go into the final lap. To add an image to our layout, we need to get our head around “Figures”. These are HTML5 elements that enable you to define content outside the normal workflow.

13. Add images
In Treesaver, the documentation suggests using Figures for elements that stretch over more than one column. In practice, they’re the only reliable way to insert images into columns. Using standard HTML markup for images is hit and miss, so we use something like the code below instead.

001 <figure><img src=”images/midnight.jpg”   width=”430” height=”618” alt=”Once upon a midnight…”></figure>//

Optimise layouts with the Treesaver framework

14. Headline news
We can also use Figures for other elements. Each element encapsulated in “Figure” tags becomes a discreet block (rather like a span in standard markup). Figures appear in the layout in the order they’re placed, though a known bug means they tend to float to the beginning of the current content. In the code below, we define a figure for our headline.

001 <figure>
002 <h2>
003 The Raven – by Edgar Allen Poe
004 </h2>
005 </figure>

15. Fallback content
Figures can also be used to define content that fits specific circumstances, using the “fallback” built-in class. When a browser is incapable of showing an element, the “fallback” element will be shown instead. Ideal for mobile authoring or targeting browsers that can’t parse Treesaver.

001 <figure>
002 <div data-sizes=”standard”>
003 <img src=”big.jpg” /></div>
004 <div data-sizes=”fallback”>
005 <img src=”small.jpg” /></div>
006 </figure>

CODE LIBRARY – Treesaver’s boilerplate

From these basic code snippets, all Treesaver-powered documents can be built. Use the boilerplate code as a beginning for your projects

001 <!doctype html>
002 <html class=”no-js no-treesaver”>
003 <head>
004 <meta charset=”utf-8”>
005 <meta name=”viewport” content=”width=device-            width,height=device-height,initial-scale=1,minimum-            scale=1,maximum-scale=1”>
006 <title>Sample Treesaver Page</title>
007 <link rel=”stylesheet” href=”style.css”>
008 <link rel=”resources” href=”resources.html”>
009 <script src=”../treesaver-0.9.2.js”></script>
010 </head>

001 <body>                                        002 <article>
003 <p>This markup is an example of a page using Treesaver         for layout. It is not very exciting right now.</p>
004 </article>
005 </body>
006 </html>

001 <!doctype html>
002 <html>
003 <body>
004 <div class=”chrome”>
005 <div class=”viewer”></div>
006 </div>
007 <div class=”grid”>
008 <div class=”column”></div>
009 </div>
010 <div class=”loading”>
011 Loading
012 </div>
013 <div class=”error”>
014 Error
015 </div>
016 </body>
017 </html>

]]> http://www.webdesignermag.co.uk/tutorials/optimise-layouts-with-the-treesaver-framework/feed/ 0 Build mobile apps with Sencha Touch http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/ http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/#comments Mon, 14 Nov 2011 17:17:09 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7788

Build mobile apps with Sencha Touch

Build mobile apps with Sencha Touch

Mobile frameworks highlight the ability to create native app-like experiences through standards- based web technologies such as HTML5, CSS3 and JavaScript. This tutorial concentrates on Sencha Touch, which is an open-source framework for creating mobile apps built using ‘Ext.js’ JavaScript.

Sencha Touch uses a HTML document that links to JavaScript and CSS, while the HTML contains an empty body tag with no content. Using JavaScript, the content is built on the page for the user so that the content can be built specifically for the screen size of the device. The good news is that you get some very polished results that scale to fit the browser of any device, which is key when designing for a variety of different devices. The downside of this is that Sencha Touch is a little harder than jQuery Mobile and you will probably spend far more time learning the framework, but the results are excellent for a very native app experience.

tools | tech | trends: Dreamweaver CS5, Sencha Touch, iOS Simulator
expert: Mark Shufflebottom
tutorial files: download here

01. Get the project started
From the cover CD, drag the ‘start’ folder onto your desktop. It’s a good idea to point your browser towards the Sencha Touch www.sencha.com/products/touch site and download the framework. In the start folder create a new HTML page, ‘index.html’, in Dreamweaver and add the code to the head section.

001 <link rel=”stylesheet” href=”resources/css/sencha-touch.css” type=”text/css”>
002 <link rel=”stylesheet” href=”bolt.css” type=”text/css”>
003 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true”></script>
004 <script type=”text/javascript” src=”sencha-touch.js”></script>
005 <script type=”text/javascript” src=”bolt.js”></script>

02. Start the app
The previous code links up to the Sencha touch CSS, our own CSS ‘bolt.css’, the Google Maps api and the Sencha Touch JavaScript. We’re going to create our own App JavaScript, so create a new JavaScript file and name it ‘bolt.js’. Now add the code shown which associates start up screens and icons to the app if saved to the home screen in iOS.

001 Ext.setup({
002     tabletStartupScreen: ‘tablet_startup.png’,
003     phoneStartupScreen: ‘phone_startup.png’,
004     icon: ‘icon.png’,
005     glossOnIcon: false,
006     onReady: function() {
007     }
008 });

03. Basic structure
Inside the onReady function add the code shown. This sets up four pages, which are the four variables, home, work, blog and map. This is how Sencha creates pages. Some of these pages will change in their functionality as we go through the tutorial but this is useful in helping us to get the basics in place.

001 var home = {
002     title:’Home’, scroll: ‘vertical’, html: ‘home’
003 }
004 var work = {
005     title:’Work’, scroll: ‘vertical’, html: ‘work’
006 }
007 var blog = {
008    title:’Blog’, scroll: ‘vertical’, html: ‘blog’
009 }
010 var map = {
011 title:’Map’, scroll:vertical’, html: ‘map’
012 }

04. Create the menu
Add the next code under the last variable from the previous step. This creates a tab menu bar for us, and creates the transition between the ‘cards’ (pages). Notice the items added are the four variables from the previous steps. Save all pages now and test ‘index.html’ in the browser.

001 var myPanel = new Ext.TabPanel({
002     fullscreen:true,
003     cardSwitchAnimation: {type:
004     ‘slide’, duration: 500},
005     ui: ‘light’,
006     layout: ‘card’,
007     items: [home, work, blog, map],
008 });

05. Create the homepage
You might have noticed the ui being set as ‘light’, just try changing this to ‘dark’ and check your browser again. It’s always worth exploring the built-in user interfaces. Now go back to the home section and replace the html with the code shown. Notice the last line, ‘cls’ – this sets the
pages’ class, and you can check this out in ‘bolt.css’.

001  html: ‘<img src=”img/ logo.png” width=”280” height=”133” alt=”logo” class=”mainImg” />
002 <span class=”rounded”><h2 class=”welcome”>Welcome to Bolt</h2>
003 <p>We produce beautiful design and illustrations. Explore our work to find out how we can enhance your digital experience.</p>
004 </span>’,
005 cls:’home’

06. Change the work section
We’re going to completely replace the work section now with a Carousel component, so copy in the new code shown. The Carousel is a swipe-enabled system to swipe left or right to flick between pages, just perfect for showing off your work. Save the files and then test it out in your browser.

001  var work = new Ext.Carousel({
002     title: ‘Work’, scroll: ‘vertical’,
cls:’home’,
003     items:[
004 {title: ’Work1’, html:‘Work1’},
005 {title:’Work2’, html: ‘Work2’},
006 {title:’Work3’, html: ‘Work3’}
007     ]
008 });

07. Real content to the work
We’ll add real content to the work sections, so that we can see the content being swiped. Change the html of ‘Work1’, as shown. This will place in an
image and some text below that. Notice the class names here – they are again found in the ‘bolt.css’ file, which is worth keeping open to compare the classes with the final result.

001  html: ‘<img src=”img/3d.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Illustrations</h2>
003 <p class=”alt”>3D Illustration and visualisation. <br><small>Swipe left to explore more.</small></p>’

08. Further develop the carousel
The carousel looks much better, however there is only one section complete and the others still look empty. Replace the ‘Work2’ html with the following code that will add some content to the second panel. The main difference here is the image, and the text reflects that with the description.

001  html: ‘<img src=”img/web.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Web Design</h2>
003 <p class=”alt”>Bespoke Web CMS and Site Design  <br><small>Swipe to explore more. </small></p>’

09. Last carousel panel
Now we’ll add the final code for the ‘Work3’ panel in the carousel. Replace the html section with the code shown here. Once added, save your work and view the file in your browser. You should be able to swipe left and right now, to see different panels sliding in and out much more clearly with the content.

001 html: ‘<img src=”img/mob.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Mobile Experiences</h2>
003 <p class=”alt”>Mobile App and site design  <br><small>Swipe right to explore more. </small></p>’

10. Start the blog
We’re going to start the process of importing data from a blog, and we’ll do this through RSS and the YQL method. Move to the very top of the JavaScript document and add the following code. This sets up a new object that we’ll call later to draw in the data, this will be an object that can call any RSS source.

001  Ext.YQL = {
002     useAllPublicTables: true,
003     yqlUrl: ‘http://query.yahooapis.com/v1/
public/yql’,
004     request: function(cfg) {
005         var p = cfg.params || {};
006         p.q = cfg.query;
007         p.format = ‘json’;

11. Call with JSONP
The YQL request uses JSONP to get the data from the URL that will be passed in when called. Once the data has been received from this URL, the ‘callback’ function will be called. This function will parse the data and pass it into a template for the blog for each entry.

001  if (this.useAllPublicTables) {
002     p.env = ‘store://datatables.org/alltableswithkeys’;
003 }
004 Ext.util.JSONP.request({
005     url: this.yqlUrl,
006     callbackKey: ‘callback’,

12. Send back to function
Once the content has been pulled out of the YQL statement using JSONP, the content is sent back to the function that has called the query. We will set up the function that passes the URL for the feed in the next step. The closing brackets just finish off this section of the code as a separate function.

001 params: p,
002 callback: cfg.callback,
003 scope: cfg.scope || window
004 });
005 }
006 };

13. Call the RSS feed
Scroll down to the ‘var myPanel’ code. After the closing brackets, ‘});’ start adding the code shown. This is the variable that sets up the function to make the  YQL request, as indicated by the name of the function. Here the query is passed to the Ext.YQL.request we set up in step 10. Feel free to change the URL to your own RSS feed.

001 var makeYqlRequest = function() {
002 Ext.YQL.request({
003 query: “select * from rss where url=’http://www.webspaceinvader.com/feed/’ limit 5”,

14. Answer the call
The callback function is added next, straight after the previous code. The code we added in step 11 and 12, call this code. A variable is set up called results, which is an array. We use the if statement to check the query has been handled and if there are some results, we store them in the results array.

001 callback: function(response) {
002 var results = [];
003 if (response.query && response.query.results) {
004 results = response.query.results;
005 }

15. Pass it on
Add in the code, following the last steps code. Once we have the results stored in the results array, we call the blog variable and update it by passing over the results array. The closing brackets close off the function and then the function is called by using makeYqlRequest().

001 blog.update(results);
002 }
003 });
004 };
005 makeYqlRequest();

16. Update the blog
Find the ‘var blog’ code we added in step 3 and completely replace it with the code shown below. Notice the blog is now a component? This will enable us to create a template for each of the blog posts from the RSS. The ‘<tpl’ denotes a template and it creates a new heading for each of the posts.

001  var blog = new Ext.Component({
002     title:’Blog’,scroll:‘vertical’, cls:’home’, tpl:[
003     ‘<tpl if=”item”>’,
004     ‘<tpl for=”item”>’,
005      ‘<h2 class=”blog”><a href=”{link}” target=”_blank”>{title}</a>

17. Close the blog section
Add the following code directly under the last. This adds the author of the post in smaller text next to the post title. Under this, the description is dropped in. Again, this is repeated for each of the posts. The closing template tags complete this section. Save this file and preview in the browser after you refresh the view.

001 <small> by {creator}</small></h2>’,
002 ‘<p class=”alt”>{description}</p>’,
003 ‘</tpl>’,
004 ‘</tpl>’
005 ]
006 });

18. Add a geo position
If you’ve got a good memory, you’ll remember adding a JavaScript link file for Google Maps in step 1. Directly underneath the last code and before the map variable, add the following map variable, which adds a geo position to a new variable that we will add to the map when we display it on the map screen.

001 var position = new google.maps.LatLng (50.743213, -1.896901);

19. Replace the original map
Remove the entire map variable, as we are going to change it now to reflect a real map – what we had before was just a placeholder. As you can see from the code shown here, we set up a new map object and give it a title. An important property here is to not use the current location, however you might need this for your own apps.

001  var map = new Ext.Map({
002 title: ‘Map’,
003 useCurrentLocation: false,

20. Always have options
Continue adding the code to finish off the map section. This code centers the map on the position variable and sets the zoom factor of the map. Save your file now and refresh your view in the browser. You will now be able to click the map button, and it will display a map of our example location Bournemouth, UK.

001 mapOptions: {
002     center : position,
003     zoom: 12
004 }
005 });

21. Add a map marker
Under the ‘myPanel’ section, add the code shown. This sets up a new variable to hold the information for a marker. The position of this marker
is set to the position variable defined in step 18. We also have to tell the marker what to be added to – in this case, it’s the map found in the map variable. Yes, it’s confusing!

001 var marker = new google.maps.Marker({
002     position: position,
003     map: map.map
004 });

22. Add an info bubble
Add the final section of the code that adds a unique bubble when the map marker is pressed. The event listener adds the bubble to the marker. Finally, save the file and test it out in your browser. This should conclude your first introduction to Sencha Touch – you can view the Kitchen Sink demo to go even further and expand the complexity of the project.

001     var infowindow = new google.maps.InfoWindow({
002 content: ‘<img src=”img/bolt.png” width=”50”
003 height=”44” alt=”logo” align=”left” />Bolt
004 Design<br>Tel: 01202 123456’
005 })
006 google.maps.event.addListener(marker,
‘click’, function() {
007         infowindow.open(map, marker);
008 });

]]> http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/feed/ 2 Photoshop: Graphical blog themes http://www.webdesignermag.co.uk/tutorials/photoshop-graphical-blog-themes/ http://www.webdesignermag.co.uk/tutorials/photoshop-graphical-blog-themes/#comments Mon, 31 Oct 2011 12:00:18 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7727

Photoshop: Graphical blog themes

The main issue with WordPress templates today is that there are way too many that look pretty much the same. Because they are too simple to create, the likelihood is that most designers just bang out a bunch at once, without considering the quality.
It’s high time designers started pushing the boundaries of WordPress – besides, that’s how WordPress itself will innovate. Let’s make WordPress innovate with us, rather than designers innovate with WordPress. Inevitably the only way for that to happen is to get creative! In this tutorial, we’ll talk about some ways to do just that, using our surf-themed template.

tools | tech | trends: Photoshop CS5
expert: Dann Petty
tutorial files: download here

01. Empty your trash
Photoshop: Graphical blog themes
The first step should always be the same, no matter what you’re creating – empty your trash. That’s right, throw out those web standards – there’s no need for those ‘rules’ of the web. Most importantly, get weird with creativity. Think of a unique theme for your template. In this case, that’s California.

02. Narrow down the idea
Photoshop: Graphical blog themes
Now that we know we’re creating a California theme for this, let’s narrow that idea down even more and create something that’s specifically based on surfing. California itself would be way too broad, and more than likely your first choice of design assets would be to add palm trees – but stay away from clichés.

03. Quick setup
Photoshop: Graphical blog themes
Be quick with the set up – do it however you like, but don’t be constrained. We’re not creating a template here for the late adopters; this site will viewed by early adopters, probably with larger screens. So let’s make this puppy a little wider, at least. Allow for the sizing to change as you progress through the creative process.

04. Sweet landing page
Photoshop: Graphical blog themes
Make it sing! This page determines whether or not someone else will stay on your site for longer than a second and, if you’re lucky, even consider coming back. Most people won’t, generally because the homepage is boring and has too much going on. So be sure to create something unique, in order to keep the users craving more.

05. Fold myth
Photoshop: Graphical blog themes
Ignore the rule that everything important on your site has to be above the fold. Who came up with that misleading statement, anyway? Most of our target audience’s fold, in this case, would be 1,000 pixels plus, at the least. So make a sweet interactive logo/map and place it smack in the middle, and forget the fold.

06. Simple but awesome
Photoshop: Graphical blog themes
Most people think simple means no content and plain colours, but they couldn’t be further from the truth. Keeping it simple actually means placing an emphasis on quality content. So for this design, keeping it simple means creating the perfect background image, using bigger
type, less of a word count and, most importantly, no unnecessary design details.

07. Background that talks
Photoshop: Graphical blog themes
This most important piece of this template is the use of imagery. It adds the visual impact all designers strive for. You can’t just have any old background here. Create a background that absolutely no one else has. A well thought out background can also help differentiate content in creative ways.

08. Less type
Photoshop: Graphical blog themes
The less you can say on your site, the cleaner and more appealing it will look. Let people see your product more and talk about it less. Visually show the data in creative ways. Create whatever it is you are trying to achieve with more visuals and less reading. Remember, interactions speak louder than words.

09. Carry it over
Photoshop: Graphical blog themes
Once the style is set on the landing page, carry every last pixel of that style over to the interior pages. Looking at these interior pages at bird’s eye view, you can immediately tell they belong in a family – but not just any family, a unique one unlike any other.

10. Lifestyle blogging
Photoshop: Graphical blog themes
Let’s face it – the less words, the better. If you can feature a really nice image, especially at a unique size, then let it do the talking first. Let the image say “hello” and the headline give the following important statement: “my name is…” Visual cues work.

11. Support your headline
Photoshop: Graphical blog themes
Add a few supporting lines of text underneath the headline, which helps to describe or set up what you’ll get after the jump on your blogs or features. It’s not always necessary but it’s a nice addition to any headline, especially if you’re not a good copy writer.

12. Type it big
Photoshop: Graphical blog themes
Keep it big and keep it small. What this means is, up that point size and down that word count. Words can be powerful. Cut out all the filler text and add emphasis on the important text by making it larger. Try some new webkit fonts. You can never go wrong with any Helvetica when enlarging a few words.

13. Support Vimeo
Photoshop: Graphical blog themes
…Well, only if you want your videos to look awesome, that is. YouTube videos might get more views, but you can customise a Vimeo player to look and feel just like your site. The simplicity of its player could fit into anything with ease. YouTube, not so much.

14. Huge graphics rule
Photoshop: Graphical blog themes
Why say something in several paragraphs of text, when you can simply just show it? The infographics in this design speak for themselves in their own creative way. Not only do they add visual awesomeness, but you don’t have to read the unnecessary copy. You can never have too many infographics.

15. Footer size small
Photoshop: Graphical blog themes
Big footers are out of style, if they ever were in style. It’s added clutter and content you could easily add somewhere else, like an About page or something. In order to create the best visual site possible, you can’t try to cram everything into one spot. It’ll look like the streets in Time Square – crowded.

16. Bring the noise
Photoshop: Graphical blog themes
It’s always a good idea to keep your elements and styling consistent. An easy trick to that is to add layer style overlays over everything in your PSD. Another trick is to add noise to everything, even the photos you upload as content. Simply add some noise to create some nice subtle texture.

17. Social importance
Photoshop: Graphical blog themes
Don’t flood your site with things like social buttons: ‘500 people like this’-type stuff. Brands only do it for marketing purposes, it actually could hurt your content if you don’t have a large number of followers. Keep it simple with just custom icons on the bottom of every page.

18. Finalise colours
Photoshop: Graphical blog themes
When you started to design, there’s no way you nailed the colours off the bat. Go through the design closer to the end and figure out what’s working and what’s not. Lack of colour is just as important as colour itself. White can stand out more than orange, as it does here.

19. Tad more depth
Photoshop: Graphical blog themes
If you feel your design still doesn’t have enough depth even with the creative background image, try layering smaller images on top of your content. Lay this over even your web fonts. In this case, the surfer’s surfboard barely cruising over the interactive map demonstrates that added depth.

20. Necessary details
Photoshop: Graphical blog themes
Not all details help the creative side of the site. However, in this case, adding creative cues as simple as crossing out the schedule events that already occurred in unique hand-drawn lines, selecting the navigation items with hand-drawn circles and even using subtle hand drawn arrows really adds to your overall feel.

21. Done and done
Photoshop: Graphical blog themes
Looking back at your design from a bird’s eye view again, you should be able to see how you just created a great-looking template that could push some of the limits in WordPress and showcase the true meaning of creative simplicity, speaking through large type, a minimal word count, simple shapes and, most importantly, broken standards.

]]> http://www.webdesignermag.co.uk/tutorials/photoshop-graphical-blog-themes/feed/ 2 Rapid iPhone and iPad Prototypes with Realizer http://www.webdesignermag.co.uk/tutorials/rapid-iphone-and-ipad-prototypes-with-realizer/ http://www.webdesignermag.co.uk/tutorials/rapid-iphone-and-ipad-prototypes-with-realizer/#comments Tue, 25 Oct 2011 13:16:38 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7628

Rapid iPhone and iPad Prototypes with RealizerRapid iPhone and iPad Prototypes with Realizer

The popularity of iPhone and iPod apps has gone through the roof since their launch in 2007. As everyone now carries their phone around with them, more and more clients are asking for apps to push their products and services.

Whether you’re pitching your killer app ideas to investors or a client, or simply just brainstorming something you’ve been thinking about for a while, building prototypes can save a lot of time and money.

Realizer enables you to quickly build a simple prototype from a series of images, allowing you to demo your app idea on an iPhone or iPad. In our tutorial we’ll explore the main features of this tool, using a preformatted set of screens.

tools | tech | trends: Realizer, iPhone
expert: Jo York
tutorial files: download here

01. Get started
Rapid iPhone and iPad Prototypes with Realizer
Open up your browser and go to realizerapp.com. Click the Start building now button. To set up an account, fill in your email address and a memorable password. You’ll need these details to log in using the Realizer app later, so pick something you will remember. Then click the Register button.

02. Add a prototype
Rapid iPhone and iPad Prototypes with Realizer
Click the Add new presentation prototype button. A pop-up will ask you to give your app a name, a description and device. For the sake of our example select the iPhone option from the device drop-down list. Click Create and you’ll see your presentation prototype with the details you just gave it in the list.

03. Start building
Rapid iPhone and iPad Prototypes with Realizer
Click Edit on the prototype you just created. From here you can edit the name, description, change it to an iPad app and change the view to landscape in the future. It is also where we will add all the screens in our prototype. Click the Add new screen button.

04. Upload a screenshot
Rapid iPhone and iPad Prototypes with Realizer
When the Upload a screenshot pop-up appears, click on Browse and navigate to your first screenshot. Select the file and click Upload. You’ll be redirected to the ‘My Test App’ page, where the image you uploaded is shown.

05. Upload the rest
Rapid iPhone and iPad Prototypes with Realizer
Repeat this step for each screenshot image as required. Once you’ve uploaded all the images, rearrange the list by dragging and dropping the screens into the desired order above. This is the resulting order that our demo prototype will adopt for the final Realizer app.

06. Add link areas
Rapid iPhone and iPad Prototypes with Realizer
Click the Edit button for Add Task 1, then click the Add a Link button. A draggable drop-down box will appear. The first link we’re going to create is from the name and notes field, to the next screen. Drag the box into position and resize it using by pulling the corners.

07. Link between screens
Rapid iPhone and iPad Prototypes with Realizer
Once the box is in position, click the drop-down arrow to the right. The list of your other pages will be displayed. Select Names and Notes 1. Now do the same for the ‘starting’ field, linking it to ‘Start nagging’ and link the How Often field to Often 1. Then click Save.

08. Link icon
Rapid iPhone and iPad Prototypes with Realizer
Now Add Task 1 in the list has a link icon instead of a warning triangle, representing pages that have no way out. Next, go to Names and Notes 1 and place a link over the fields, link it to Names and Notes 2 and Click Save. On Names and Notes 2, link the same area to Add Task 2.

09. Continue linking
Rapid iPhone and iPad Prototypes with Realizer
In the Task 2 screen, create a link from the starting field to Start nagging. In Start nagging, create a link to Add Task 3. From Add Task 3, link the How Often field to Often 1 and Often 1 to Often 2 over the Every 5 minutes option – this will give the impression that it has been selected, with a tick.

10. Completed task
Rapid iPhone and iPad Prototypes with Realizer
Now we’ve gone through all the screens to create tasks in our prototype, link the Back and Done buttons in Often 2 to Add Task 4. This will show all of the details that have been entered. Then link the Back buttons in Add Task4 to task list, which shows tasks in a list.

11. Editing tasks
Rapid iPhone and iPad Prototypes with Realizer
Now we need to show that existing tasks can be edited too. In the Task List screen, create a link over ‘Bins out’ to Add Task 5. Then create links from the Back and Done buttons at the top of Add Task 5 back to the Task List screen.

12. The Nagg screen
Rapid iPhone and iPad Prototypes with Realizer
We’ve shown how to set up the Tasks, so now we need to show what happens when an alert is generated. Form the Task List screen create a link to the Nagg Screen in the dead space at the bottom. And from the Nagg screen back to the Task List.

13. Download the app
Rapid iPhone and iPad Prototypes with Realizer
Now it’s time to download the app. On your iPhone or iPad, go to the App Store and search for Realizer. You should recognise the icon from the website. To download the free app, you’ll need to enter in your iTunes account email address and password.

14. Login
Rapid iPhone and iPad Prototypes with Realizer
Once the Realizer app has downloaded, tap it to open. Enter the email address and password that you entered in step 1 and click Login. You should then see your presentation prototype. Once you have more prototypes, this page will display them all. Tap the prototype that you’ve just created to open it.

15. Your finished prototype
Rapid iPhone and iPad Prototypes with Realizer
You can go through to the different screens you have uploaded by tapping the areas you put the links. If you need to make any adjustments, you can make the amends in your web browser and refresh your app. And there you have it, a quick and easy iPhone or iPad app prototype.

Tools to help plan and design your app

Those helpful folks at Realizer have also gathered together some other free resources to get your app planning started. To start with, have a look at the Yahoo! Pattern Library and see how other UX designers have tackled your interface issues.
If you consider yourself to be more of a pen and paper kind of person, Oliver Waters has created a gridded template for iPhone apps that you can print off and scribble on.
For those that prefer a more ordered approach, you can use OmniGrafffle for all your wireframing, and can download templates for iPhone and iPads from Graffletopia.
Once you’re ready to get some polished designs together, Teenhan+Lax has produced stunning iPhone and iPad GUI PSD to save you some time. You can find them in the footer at realizerapp.com.

]]> http://www.webdesignermag.co.uk/tutorials/rapid-iphone-and-ipad-prototypes-with-realizer/feed/ 0