Web Designer - Defining the internet through beautiful design » HTML

Create interactive animations from a Twitter feed

Steve Jenkins — Tue, 07 Feb 2012 17:10:08 +0000

Twitter 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’.

Twitter Animation

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.

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 = $(‘

’). 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(‘

Take control of your backgrounds with CSS3

Mark Billen — Tue, 07 Feb 2012 17:02:16 +0000

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

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

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;}

Build responsive sites using the 320 and up framework

Steve Jenkins — Mon, 02 Jan 2012 08:30:27 +0000

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

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

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

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

as well. Then, while we’re at it, put something within the

Animated infographics with HTML, CSS & jQuery

Steve Jenkins — Mon, 19 Dec 2011 08:30:43 +0000

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

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

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

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

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

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

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

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

s to get good alignment. Do the same for the area chart at the bottom of the page.

08. Test your layout

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

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

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

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

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

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

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

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

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

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

Photoshop: Vector-style infographics
Learn how to design a simple infographic which combines a statistical message and the current trend for stylish vector graphics

Cross-browser fonts and CSS styling rules

Steve Jenkins — Tue, 20 Sep 2011 10:58:20 +0000

Ever since the web started, designers have desired to bring the beauty of their favourite fonts into their designs. Unfortunately, we’ve been limited and just been able to use a handful of ‘web-safe’ fonts (fonts that most computers will have installed) for the dynamic text in our designs, leaving using images or flash movies of non web-safe fonts (our precious, expensive and beautiful bought fonts) as our only resource for bringing them alive on the web.
Our desire was so strong that tools were created to bring these fonts into our tool belt – sIFR, Cufón, Flir and a few more – all with pros and cons, but none was really giving us the flexibility we needed. Today, with the strength and support CSS3 is getting, especially from browser developers, we can now make use of one of its greatest features: @font-face. This nifty tool gives us the power to embed any font we want into a website as native text (rather than an image or an object). Of course, it comes with a few limitations, but nothing that can’t be easily learnt and mastered in order to get all major browsers to display it exactly the way you want it.

tools | tech | trends: HTML5, CSS3, Dreamweaver CS5 / Espresso
expert: Enrique Ramírez
tutorial files & code: Download here

01. The markup
On your text editor, create a new file. Add an HTML5 doctype, an empty

Quick Brown Fox jumps over…

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02. The basic styling
Go to your