With it’s wider screen and larger keyboard, there are several aspects you need to rethink as you are designing you web applications for this device. In this article I am going to walk you through how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the device is rotated between horizontal and portrait modes.

The beauty of this progressive enhancement methodology is that you don’t need multiple versions of your code for desktop or mobile devices.

If we look at a common design pattern for applications, we tend to see some sort of left-hand navigation with a large main area to display the content. This is the way the iPad’s mail.app works.

The left-hand navigation is a list of email messages, which you can then select to see the full message in the main window. It also isn’t chance that this left-hand navigation is the same width as the iPhone screen to re-use many of the same widgets and design elements.

When the iPad is rotated into portrait mode, the screen width becomes too skinny to display a two column layout.

Therefore, the left-hand menu is hidden away as a button which toggles the menu as an overlay. I am going to walk you through how to do all of this using CSS media queries. It’s much easier than you would expect.

Setting up the HTML

Firstly, we need to set-up a template for our content will flow into. We’ll start with the standard two column layout and progressively enhance it to handle different screen widths.

1
2
3
4
5
6
7
8

<div id="nav" class="saveSpace">
<ul>
<li>Navigation Here</li>
</ul>
</div>
<div id="main">
<h1>Content Here</h1>
</div>

Setting up the Basic CSS

With a bit of CSS we position these two items and give them specific widths and padding.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#nav {
width: 200px;
height: 100%;
border-right: 1px solid #ccc;
position: fixed; top: 0;
left: 0;
z-index: 1000;
}
 
#main {
margin-left: 200px;
padding: 0;
height: 100%;
}
 
.saveSpace {
display: block;
}

This mimics a two column layout, but we only want it to display like this when the iPad is in portrait mode. Using CSS media queries, this is very simple.

There are a few key words, such as “max-width”, “min-width” to create rules based on width, but there are also rules for orientation and dpi. For more information, Ethan Marcotte wrote an excellent article on A List Apart called Responsive Web Design.

For our example, we are going to put the threshold at 800 pixels. Anything larger than 800px gets the two column view and anything smaller will see only the content area with a hidden menu, just like mail.app.

Adding in Media Queries

Our previous CSS has the basic layout for the two column mode, now we need to add in some additional CSS which over-rides some of the previous styles during certain situations of size. At the bottom of your CSS file, you can added the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media all and (max-width: 800px) {
#nav {
border: 5px solid #131e31;
position: fixed;
top: 75px;
left: 10px;
height: auto;
}
#main {
margin-left: 0px;
}
.saveSpace {
display: none;
}
}

It is important that this is at the bottom so that it takes precedence over the other rules declared above. This saves us from having to wrap everything above in a CSS query to explicitly say only apply this when min-width is 800.

With the#main, we have removed the left padding and therefore it no longer appears as a two column design. The #nav has been moved slightly away from the edge to make it appear more like a floating menu and finally, we are adding a style for .saveSpace of display: none. This will initially hide the menu until the JavaScript adds or removed that class to view the contents.

If you put this into your HTML and resize your browser above and below 800 pixels you will see that the design shifts from a one column to a two column design and back. This is a great tool for websites, not just web apps attempting to emulate native design.

Several websites have use this technique to make 3-4 column layouts at wide screen width and adjusting the number of columns depending if the screen is skinnier. Hicksdesign is an excellent example of reformatting the layout based on design.

Adding in the jQuery

In this example, the next thing we need to layer on is the ability to show and hide the left-hand menu. We can do this with a button that toggles the menu through a tiny line of jQuery. To do this we need to change our HTML inside #main to account for a menu button.

1
2
3
4

<div id="banner">
<a id="menuButton" class="button" href="#">Menu</a>
<h1>Menu Title</h1>
</div>

This gives is the app banner and a menu button, but we need to add the corresponding CSS to hide some of this when it is not needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#banner {
border-bottom:1px solid #797f90;
border-top:1px solid #fff;
height:42px; text-align: center;
}
 
#banner h1 {
margin: 0 auto;
padding:0;
color:#000;
font-size:20px;
line-height: 20px;
padding-top: 8px;
font-weight:bold;
height:32px;
white-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 55%;
}
 
#menuButton {
position: absolute;
top: 8px;
left: 62px;
display: none;
right: auto;
}

Finally, inside our CSS media query we need to change the #menuButton so it is visible.

1
2
3

#menuButton {
display: inline;
}

After including jQuery,

1

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

We can add the following to the bottom of the HTML file.

1
2
3
4
5
6
7
8
9

<script type="text/javascript"> 
  $(document).ready(function() {
    $("#menuButton").toggle(function(){ 
         $("#nav").removeClass("saveSpace"); 
      },function(){
         $("#nav").addClass("saveSpace"); 
    });
   });
</script>

View the Demo

You can view a very basic working demo here. If you resize your screen you can see the left hand navigation change depending on the width. Notice that the content also re-adjusts to the presence of the left-hand navigation.

When the page is loaded, jQuery adds some behaviour to the #menuButton. The toggle function runs the first function the first time it is clicked and the second function the second time it is clicked.

On the third click, it runs the first function again and so on, toggling between the two. This is an easy way to create a show/hide button for our navigation. Rather than trying to show and hide the menu by directly adding display: none or block we add or remove a class called saveSpace.

This isn’t immediately obvious why, but because we are using CSS media queries to change our layout and the CSS is not re-applied.

If we had a hidden the #nav while in the skinnier mode and re-adjusted the width to make the screen wider than 800 pixels, the #nav would be hidden, even if we explicitly said in the CSS #nav {display: block;}. By adding and removing the class we get around this issue.

View Final Demo

Issues with Media Queries

Has anyone noticed the issue yet? In this example we are using two different technologies to layer behaviour into our HTML. CSS Media Queries are run based on something the user does. They resize the browser and the design changes.

Previously, this was done with lots of JavaScript running checking window dimension and then applying different styles accordingly. Luckily, CSS media queries relieve us and the browser from all this hard work. But in this example, we are using JavaScript to show and hide the menu at skinny screen resolutions.

We need a way to progressively enhance this situation for browsers with JavaScript disabled. The problem is that instead of having a 1×2 matrix, JavaScript versus No-JavaScript, we now have a 2×2 matrix, JavaScript and CSS media queries, JavaScript and No-CSS media queries, No-JavaScript and CSS media queries and No-JavaScript and No-CSS media queries.

In this example, if the JavaScript is disabled, then we need to make the #menuButton a real link that takes you to the same page, but the server would need to update the CSS when it spat out the page so the menu was toggled from the previous state.

This would solve the no-JavaScript with CSS media queries issue. If your browser does not support CSS media queries, then this is less of a problem because the left-hand menu would never be hidden.

JavaScript to the Rescue?

There have been efforts using JavaScript to bring media queries to older browsers. By including an additional JS file (http://code.google.com/p/css3-mediaqueries-js/) it is possible to make sure your design behaves in a similar fashion across all your customers’ browsers.

The downside is that this requires JavaScript, but it does eliminate one of the 4 possibilities reported above, JavaScript/No-Media-Queries.

Mixing behaviour between two different technologies can cause more issues that need to be handled as browsers catch-up to supporting CSS Media Queries. This means more work on your part as a developer, but it produces a better experience for the customer.

With all this hype surrounding the iPad, Kindle and other eReaders the world of electronic publishing is now more accessible than ever. With the new iOS 4.0, the iBooks application is available for the iPhone and iPod touch, further increasing the reach of your eBooks.

Digitimes is estimating sales of eReaders in 2010 to be greater than 11 million units. To put that in some sort of perspective, there was an estimated 36 million netbooks sold in 2009. While these eReaders won’t be overtaking desktops or laptops any time soon, it does represent a very niche opening in the market. The types of people who are buying eReaders are the types of people who like to read and more importantly, buy books. With 11 million+ customers it makes sense to directly target these potential customers with your content.

Creating Your own eBook

If you don’t know anything about how to create an eBook, that’s OK, there are several applications for both Windows and the Mac which can help you to quickly get through the process and generation of ePub files from your existing content. You have no excuse not to be exploring the eBooks possibilities.

Under the hood, an ePub file is basically a zipped-up set of XHTML files and a few XML files to describe the table of contents and where to find the XHTML. Joe Clarke wrote an excellent article on the topic of “HTML isn’t just for the internet”. So your years of HTML knowledge is transferable to creating ePub files.

If you’re not that comfortable with HTML, that’s OK, there are apps which can help. These are just a few examples of WYSIWYG editors. You can type or paste in existing text, do some quick formatting such as bold, underline, italics, headings, etc. Then save it all into the ePub format suitable for publishing.

• Sigil – http://code.google.com/p/sigil/
• Calibre – http://calibre-ebook.com/
• eCub – http://www.juliansmart.com/ecub

These programs are quick and easy ways for you to get started dabbling in eBook creation. Once you dig into the process you’ll find that there are some obvious limitations with the format. Different eReaders implement different aspects of the ePub format.

eReaders are Different

All eReaders work slightly different, some have screens that are only black and white, their screen resolutions vary and physical sizes are all over the map.

This means that you don’t have absolute control you do in print, infact, you probably have even less control than in HTML. With HTML, an absolutely positioned element left: 0 and top: 0 is definitely in the corner of the browser window. This isn’t always the case with eReaders because of the application chrome.

Platforms

We can look at the same book, Alice in Wonderland, available on several different eBook readers and dedicated applications.

The Classics App is a dedicated application with a fixed list of books available. You cannot add more eBooks into it, but as a stand-alone application has a very minimal user interface.

Free Books is another dedicated application which has a list of free books that you can download. The UI is pretty sparse and can only be read in portrait mode. There is a large list of books to choose from, but you can’t add any of your own.

Stanza app allows you to import your own eBooks and purchase them from many popular online stores. This is a screen shot of the iPhone version, but there is also an iPad version. As you can see, there is no UI chrome during the reading experience, you just tap on different thirds of the screen to turn the pages or activate the menu.

Apple’s iBooks application allows for both portrait and landscape reading. You can add your own eBooks via iTunes, but it has the faux book chrome which cannot be removed.

Amazon’s kindle application can import some formats, but not the standard ePub format. For this screenshot, the chrome is exposed. During reading, most of the UI buttons disappear for easier reading. It is also possible to read both landscape and portrait mode.

As you can see, the variety of styles, colours, fonts and designs used just to display a book is pretty varied. This opens the door to whether you should be creating a dedicated application for your content or sell it as an ePub file.

Your Content as an App versus an eBook

There have been several successful printed books that have been turned into eBook applications. The Alice application in Apple’s app store takes the classic tale of Alice in Wonderland and adds a layer of interactivity.

It has been called “a sort of pop-up book for the 21st century”, which describes it perfectly because, how many pop-up books do you own? Several of the Dr. Seuss books have also been converted into eBook apps. They are simply replicating the fully illustrated book, page for page in the app. No interactivity, but no eReader app chrome, just the original, classic drawings.

Pros & Cons

Developing your eBook as an application has pros and cons. The first major downside is that you are limited to the number of platforms it can run on. If you spend many, many man-hours developing an application like Alice which takes full advantage of all the different sensors, then porting the same book to different devices loses some of its functionality. Not to mention your app can only be sold in the countries that have App stores. And on top of all that are the restrictions and issues with Apple review process.

The obvious up-side of an application is that you have much more control of the experience and can avoid the native eReader chrome. The ePub format is a subset of XHTML and CSS, so the possibilities, while large, are not capable of the same full experience of a native application.

The major advantage of an ePub format eBook is that you don’t need to learn a new programming language like Cocoa or commit to a single platform. The ePub format works on most of the major eReaders (with the exception of the Kindle). So the same .epub file can be sold across different devices via different sales channels.

Reflowing Text

You can also reflow ePub data. Text can easily be increased or decreased and the font changed and the eReader handles the changing layout. This is not possible with an Application by default, nor with other formats such as PDF files. The dynamic rotating and reflowing of text in portrait or landscape mode is native to eReaders.

Ultimately, your goal is to making money from your hard work and content, so you need to balance all the issues and select the option that will best help you achieve your goals.

How to Sell It – Two Different Roads

When it comes to trying to sell your creation, the app route or the book route are two very different roads. With the app route, you need to join the Apple developer program at a set yearly fee or $99USD, choose your price and collect 70% on each sale. This is the only way to get your application sold to Apple customers’ devices. There is no legitimate way to sell your app independent of the Apple App Store.

With the eBook option, there are many more possibilities. Apple has an equivalent store for eBooks. If you are with a major publisher this is handled for you. If you aren’t, then it’s more difficult, but not impossible to get into the Apple iBookstore. Publishers such as Lulu can put your eBooks there, but they take a cut.

Depending on your needs and how much effort you want to put towards the project, this might be just fine. It also appears that Apple itself is starting to open-up and allow individuals with a US Tax ID to submit their books directly to the iBookstore. This might make it easier for self-publishing efforts to avoid losing a percentage to publishing houses and keep more of their hard earned cash.

Unlike apps which are compiled for a specific platform, you can sell your eBooks via any existing channel and your customers can upload them to their eReaders.

iBooks & iTunes

The iBooks application syncs with iTunes. Therefore, you can drop any .epub file in iTunes and it will be imported for reading into iBooks. This means that you can sell the ePub file on USB flash drive, on a CD or even as a digital download.

By connecting with other services such as PayPal, your customers could be buying your eBooks online directly from your own site and you can keep a larger chunk of the sale. You do lose the promotion of being in the Apple iBookstore, but the margins are higher, so it becomes a trade-off.

For a small, community focused book or industry report, selling it online as an .ePub file via your own website might be the best way to make the most money.

Get Writing

When the blogging phenomenon exploded, it allowed people to express themselves online in a way that was previously impossible. At no point in history had it been so easy for anyone to speak their mind and to publish to the masses freely without requiring permission, lots of money or a contract from a third party.

We are currently deep in the next extension to this, microblogging. Sites like Twitter allow quick short bursts of content to be deployed to those same masses which consumed blogs and other online content. We are now just beginning to see the next wave.

As the trend is moving from long blog-length content, to shorter SMS-length content, the eBook has an uphill battle for your attention, but at the same time, it has never been easier for an individual to publish quality, book-length content and get paid for it.

All the pieces of the puzzle are falling into place: a quality screen for viewing text, smart devices that allow downloading of additional content, online digital book stores and easy payment systems. Put all of these aspects together and the opportunities to sell eBooks has never been better.

At this point, you know about all the tools that are needed to create your own eBooks and sell them online. You just need a good idea and to start writing. So what are you waiting for?

Charts and graphs are an excellent way to dig deeper, tell a story and get to the information behind the numbers. As more and more data sets are becoming publicly available, we want to convert this dull tabular data into something more visually appealing. In this article I’ll walk you through 4 different ways to take a data set and convert it into a chart that’s suitable for display on a website.

1: HTML

In HTML, the simplest way to display a chart would be to drop it in as an image. This picture could be generated offline in an application like Excel, SPSS, or R and exported as an image.

The downside of this method is that it can’t easily be updated unless you go back to the original application, adjust the data’s value, export the graphic, then re-upload it to the server. A better solution would be to create the charts as images dynamically on the website itself.

Besides hiring a programmer to create some custom charting software, there are a few other options available online. Google Charts is probably the easiest and most widely known. You get all the benefits of the Google infrastructure, caching, image processing, geographic distribution, etc. all for free.

Getting Started with Google Charts

To get started, Google has a pretty comprehensive site with examples and instructions. By passing different attributes in the URL’s query string, it’s easy for you to create a static chart with a server-side or client-side script. For most use-cases, creating an image in this way will suffice. It’s fast, simple and works across browsers with no hassle.

Let’s see how easy it is to create a quick pie chart of browser statistics. I had a look at Wikipedia’s Browser Usage Page and went with the W3Counter values for the top 5 major browsers. As you can see it breaks down as follows:

1. IE: 47.9
2. Firefox: 32.3
3. Chrome: 7.4
4. Safari: 5.5
5. Opera: 2.1

Next we need to put these into the query string of a URL that Google Image Charts recognize.

http://chart.apis.google.com/chart?cht=p&chs=400x200&chtt=W3Counter%20Browser%20Stats&chd=t:47.9,32.3,7.4,5.5,2.1&chl=IE|Firefox|Chrome|Safari|Opera

Chart Parameters

There are several parameters, we’ll start from left to right. cht is the Chart Type, in this case ‘p’ stands for pie chart. Next we have chs, which is chart size. In my example I choose 400 pixels wide by 200 pixels tall. There is a maximum size, but it is easy to tweak these numbers as needed for your own site. chtt is chart title, which displays the text across the top to let readers know what this is a pie chart of.

Next we move to chd, which is chart data. There are several different ways to encode the data, but for this example I am using ‘text’, so we start with ‘t:’. Then it is just a comma separated list of the values. So far, pretty easy!

Finally, we have chl, which is chart legend. These are separated by a vertical bar ‘|’ and their order needs to correspond to the order of the chd values. My first data value was 47.9 which corresponds to the first chl value of Internet Explorer.

Now all you need to do is paste that url into your browser and you can see the result. You can even put that right into your own HTML using the <img alt="" /> element. You don’t need to save them and upload them to your own server. It is possible to link to them off Google’s server.

From Pie to Bar Chart

Now, let’s see what happens when you change cht from ‘p’ for pie chart to ‘bvs’ to make it a vertical bar chart! You probably want to add &chbh=a to the end of the URL, chbh stands for chart bar chart spacing and ‘a’ sets it to ‘auto’. Voila, a barchart of the same data. As you can tell, with almost no effort or knowledge of coding, you have made two different types of charts from a boring table of raw data.

The major downside to using images of charts is that your results are locked-up in as an image file rather than something that can be further manipulated by others. No cutting and pasting of the raw data, issues with screen-readers, and it doesn’t easily allow for further manipulation by the reader.

2: Flash

Flash and other plugins such as Java, allow you to create rich experiences in the browser. There are several free and paid applications to help you create charts and graphs which are more dynamic than an image. Again, Google offer many of their static image charts as interactive Flash versions, along with several new graphs that are only available in Flash.

Flash allows you to create visualizations which contain additional information. For instance, when the reader hovers over a section or clicks on a data point more information can appear. Interactive graphs allow you to drill down deeper into specific parts of a graph. Highlighting just a range of data can zoom in to the graph and view a smaller slice of the data.

Deeper Interactivity with Flash

An excellent example of an interactive chart is Google’s Motion chart. When you press the play button time progresses and you can see the sales figures versus the expenses of different fruits for different regions. This is something that is not possible with the static image charts. The ability to easily turn off and on different fruits, to add trails over time and to look at several days with of information in a single chart.

Flash used to be the goto technology for creating dynamic and interactive interfaces. You can still create robust, dynamic charts and graphs using Flash, but it’s becoming more and more problematic. As the next wave of devices don’t support Flash, no one seems to really miss it. What this means is that you need to consider alternatives to Flash-based content.

What about a pure web standards implementations? Well, there are at least two ways to achieve this, CSS and the new CANVAS element.

3: CSS

Many charts, like the barchart, can be thought of as just a list of values and we already have a pretty good way to mark-up lists in HTML. We can repurpose our old friends the <ol> and <ul> elements. With some CSS positioning and a bit of magic, it’s possible to make a nice barchart from a list. There are several implementations of pure CSS charts out there that can get you started.

Eric Meyer wrote a demo several years ago, but it is still as useful today as when it was written. He also managed to convert a table into a nice timeline using only CSS . This demonstrates the power and flexibility of HTML and CSS in creating charts and timelines.

The beauty of implementing this in CSS is that the data is directly in the HTML. Anyone changing the list values is updating this the chart for free. It’s also readable without any CSS or image capabilities, search engines can index the data, others can copy and paste out the information and screen-readers can easily access the information.

CSS Code Generators and Tutorials

Christian Heilmann has also been experimenting with CSS bar charts. On his website, he created a simple tool that will generate the code for you. This is all done in pure CSS, so there is no Javascript libraries or other heavy dependancies in the code, which makes it faster than some of the alternatives.

Another great article about CSS charts and graphs is from Wilson Miner and his A List Apart article called “Accessible Data Visualization with Web Standards“. He goes ever further and demonstrates “sparklines“, tiny nuggets of data inline with regular text. It is an excellent tutorial if you aren’t as comfortable with CSS. It walks you through the whole process really well with plenty of examples.

The downside to CSS charts is that they seem to be limited to bar charts and timelines, things with long lines, vertically or horizontally. Making complex charts and graphs are out of reach of the simple tools that CSS makes available.

4: Canvas

The newest and most exciting entry into this foray is the <canvas> element. It’s new in HTML5 and acts as an area in which you can draw 2D and 3D shapes. Now, you might be thinking to yourself, if canvas is some HTML5 thing isn’t that not going to be ready until 2020?

Well, yes and no. It is part of HTML5, but it is available in most browsers today, and the ones that don’t directly support it, can be made to support it with an extra javascript file. The <canvas> element can be retrofitted to earlier browsers including IE6, which makes it an excellent contender to Flash!

A Quick Canvas Demo

A simple example of the power of <canvas> is to draw two overlapping shapes with some simple opacity. To do this, we need two things. A <canvas> element and a few lines of javascript to draw the figures. In this example we’ll just create a canvas element that is 200 by 200 with an id of ‘figures’. The bit inside the canvas element will be ignored by browsers that support it, otherwise it will be interpreted as an inline element like a <span> for those who don’t.

The next major part to get the drawing working is a few lines of javascript. If you’re not comfortable with Javascript, that’s OK. These are pretty easy to understand, then we’ll show you a library which whisks all this code away for something much easier!

First, we need to get the DOM element that corresponds to the canvas. We do this by grabbing it based on the id, ‘figures’. Next, we need to tell it that this canvas we’ll be drawing on should be only 2D, that the bit about var context = canvas.getContext('2d');. Then we need to create a fill style. This is the colour of the shape we are creating. It uses the same rgb syntax as CSS, so you should be familiar with that.

Next, the fillRect() is used to create a simple rectangle. It takes four parameters, the X,Y of where to start and a length and a width. In our case we’re starting at 30 pixels from the left and 30 pixels from the top. Then creating a box 100 pixels wide by 100 pixels tall. If you stopped there you’d have a nice greenish rectangle, but that’s not very exciting.

Let’s add another one to the mix to show off a bit. Repeating the same steps, we give it a fill colour. This time we’ll use the rgba() syntax so we can give it an opacity of 50% or 0.5 from solid. We’ll then start the rectangle at 50,50 and have it the same width. What you see should look something like this:

Flot Makes it Easy

That’s the very basics in how to draw 2D shapes in <canvas>, but we’re talking about a charts and graphs replacement for Flash, not Paint! One open source library which does creates beautiful charts and graphs is called Flot. This works on top of jQuery and generates charts that are nearly indistinguishable from Flash, yet work on the iPhone and iPad platforms.

You don’t need to learn anything new since it’s using the jQuery and Javascript knowledge you already have, plus there are several tutorials and examples that can help you get started. The <canvas> element opens-up new doors and possibilities for web-based interactive charts and graphs. Pulling either from the local HTML or from a remote AJAX call, Flot can create beautiful charts on the fly with little or no coding needed. Lets look a quick example:

As you can see, we’ve generated a nice spiky line graph, but how much code did it take? Let’s have a look. Much like the previous example, we need some container. In this case we’ve started with a div with an id of ‘placeholder’ and a height and width. We didn’t use the <canvas> element here because the Javascript will automatically swap it out if the browser supports it, otherwise it will use some magic and use the <div> instead.

Then we have a two lines of Javascript code. The first sets-up all the x,y variables for the line. The second line is the flot jQuery function saying to created, or $.plot(), this chart. It takes two variables, the first is the element you want to use as the drawing canvas and the second is the data to be used. In this case the x,y coordinates we created to make a line.

That’s almost it, I did lie, you need to also remember to add a few lines at the top of your HTML to include jQuery, flot and a special javascript file to make this work in IE, but that’s just a cut and paste from the example.

This is probably the most basic chart you can create with flot, but it can get much more complex. Their examples page demonstrates multiple lines, stacked bar charts, selectable regions, and much, much more.

Conclusion

So next time you are looking to create charts and graphs dynamically online, you should remember the pros and cons of these four techniques and venture outside of your comfort zone and learn something new.

We know CSS has powerful abilities and that is backwards compatible with some help, so there is no reason you need to spend a large budget for designing a custom plugin or the slow workflow of creating static images when there are web standard solutions available.

I wondered if there was a way to find out a bit more about how twitter was being used within the local community and if it was even possible to take a smaller stream from the river of data Twitter produces daily. I chose as my local community Iceland.

I did so for several reasons, it is small-only about 300,000 people total, it has a distinct language so it is easy to find people using the only the text search, and it is where I live so any cool information I learn about, I can actually use it.

Any of the following steps can easily be reproduced for your local area, community or group. You’ll just need to find the key to unlocking like-minded people.

RSS not API

The Twitter API has plenty of great features, but to accomplish all of this I am using the twitter search RSS results. There are plenty of libraries in your favourite language to parse RSS, so I won’t go into depth about those nuts and bolts. The key to getting quality data is to formulate very specific searches.

In Icelandic, there are several characters and words unique to the language. In your niche group there is jargon which can be used to identify the people in the know, a sort of 21st century Shibboleth.

To try and find Icelandic Twitters, an easy first pass is to search for purely Icelandic words. This link will return an RSS feed of matching tweets.

http://search.twitter.com/search.atom?q=það

<entry>
<id>tag:search.twitter.com,2005:8243287523</id>
<published>2010-01-26T17:29:23Z</published>
<link type="text/html" href="http://twitter.com/username/statuses/12345" rel="alternate"/>
<title>...</title>
<content type="html">...</content>
<updated>2010-01-26T17:29:23Z</updated>
<link type="image/png" href="http://a1.twimg.com/profile_images/1234/profile5_normal.png" rel="image"/>
<twitter:geo>
</twitter:geo>
<twitter:source>...</twitter:source>
<twitter:lang>is</twitter:lang>
<author>
<name>Display Name</name>
<uri>http://twitter.com/username</uri>
</author>
</entry>

From this, we can then extract the display names and twitter usernames and plenty of other information about the tweet.

If you try searching for some jargon within your field, you can begin to collect like-minded people.

There is also a feature in the search which allows for language detection. Using the parameter &lang=is it is possible to further filter the search. For English speakers, this might be more difficult than other languages. The system isn’t perfect either, but it can be away to limit search results for terms like “schmuck” in German to jewelry and “schmuck” in English to an insult.

Finally, you can restrict the results to a geographically close group of friends by using the near parameter &near=New+York&within=15&units=mi. You can also specific the distance and units (miles or kilometers). At the moment this is trying to using the user’s Location, but in the future it might also use their new geolocation API. People don’t always list their location, or change it out of solidarity to a cause.

These systems aren’t perfect, but when put together they allow for an easy way to thin down the millions of twitter to a much smaller more manageable size.

Create your own Groups

This is ideal for local affinity groups or video game clans. Want to see what all “EVE Online” player who are in a specific company and live in “New York City” have to say? Well we can search twitter and start to collect matching usernames, index them and search for interesting conversations. Maybe you can make new friends locally beyond the game.

The downside of using search is that you will only find new people as they tweet. Search only goes back 10 days (maybe less as twitter gets larger and larger). There will also be some false positives, but if you select some good, specific search terms, then you minimize the work pruning out mistakes.

I am searching twitter once an hour for any new posts that meet the criteria. Once an hour is enough for me, but depending on the size and frequency of your group, you can poll more or less frequently. As I loop through the RSS results and find username not already in the database, I add them so I have a nice growing list of people. I then subscribe to their RSS and save all the tweets into another table for later analysis.

Find and Subscribe

Over time, I have managed to find 3900+ Icelanders on twitter. That’s over 1% of the population. Twitter does have a limit of 2000 that people you can follow before you need to maintain a ratio of following to followers. This prevent spammers from following thousands of people and wrecking the system.

Once you have the twitter username, it isn’t necessary to follow them via twitter’s functionality, it’s enough to subscribe directly to their RSS feed if they are public. Now it seems rediculous to subscribe to thousands of RSS feeds, that’s a bandwidth hog. So I have offloaded that work to Google Reader. Google has cached versions, so all I need to do is access a single feed in Google Reader which is a composite of all the Twitter RSS feeds I have found. This makes a single RSS fire hose of your groups tweets.

Twitter Stats

Since I started mining my twitter data, some interesting statistics have emerged. I looked at the last 24 hours to see how many unique usernames had posted. Roughly 10% of the twitter population in Iceland is posting on a daily basis, but how active are they? Well, we can look at how many posts there were in the last 24 hours and divide that into active users and get about 6.5 posts per active twitter account per day.

I also looked at a longer time span of the last seven days. This allows me to get a break down by day to see the activity. As you can see, Sundays are pretty slow, then it picks up again on Monday. Presumably, as people return to work and are back in-front of the computer they get back to twittering. You can see the current stats at http://icelanders.optional.is/

These stats are valuable information if you are trying to spread your message via social networks. Do you send it out on a Sunday where there is less traffic and it is more likely to be seen by fewer eyeballs or on Monday when more people are online, but there is a deluge of other tweets?

I also broke it down further into hour-by-hour slices. As you can see, the early morning hours from midnight until around 8am are pretty quiet. Still some activity, but not the time to expect someone to reply.

Once you are archiving a sub-set of twitter, it becomes possible to search this smaller list. Maybe the types of complains within the group vary greatly than with the general public. Are discussions staying within the niche group or are links and retweets getting outside of the core group? You can even find out how many people within this group are following each other and determine the level of interconnectedness.

Recently, I went through the database and using the Twitter API, found out when each person signed-up. I could then look to see if there was a growth spike or continual steady growth. It turns out there was a spike in early 2009.

Click image to view large version

Right around the time Twitter was being touted to the masses via Oprah, the major local newspaper joined and mentioned it a few times in print. These two, along with other factors really boosted the sign-ups from a few tens of people to several hundred a month! Even now, there is a solid 100+ new Icelanders coming to Twitter each month to see what it is all about.

Building something similar for your group allows you watch for spikes in discussion or sign-ups, look for trending topics within your community, engage in the discussion and find new friends.

I am going to demonstrate two examples of when and how :target can be used. Hopefully, this introduction will get you thinking about some of simple ways :target can add benefit your customers.

Tabs in CSS

A well structured document is one that makes sense in the ordering of sections and topics. It works well when there is no CSS and no JavaScript. Tabbed systems make use of some sort of display tab which shows the current section, and in doing so hides the other sections. We’ve all seen a tabbed system before, and probably plenty of poor implementations as well. Sometimes when you click the tab, it calls a JavaScript function to populate the area below the tab. The downside is that when there is no JavaScript the data does not appear.

The ideal way to build a tab system is to have all your data in the HTML, then use JavaScript to hide the other tab panes and build the tabs themselves dynamically. That way if there is no JavaScript, it just defaults to a linear set of text blocks. This is progressive enhancement; build for the lowest common denominator and add more functionality and styling as you go — no one is left behind, not even googlebot.

Instead of using JavaScript to do this show/hide, it is possible to use CSS3 using the :target selector. Before you get too excited, it must be said that the :target selector is not supported in IE6 or IE7, so the practical uses for this are pretty slim. Instead this can be used for user chrome type objects which don’t effect functionality, but improve usability. You can add the :target info today, and when browsers implementations catch-up they get the bells and whistles auto-magically. It is important to not use :target for mission critical things, but there are plenty of other possibilities. As an example, I will show you how make a simple tab system based on Daniel Glazman’s example.

First we should create the basic un-styled HTML.

<h2 id="topic1"><a href="#content1">Topic 1</a></h2>
This is the text for topic 1. Hello World!
<h2 id="topic2"><a href="#content2">Topic 2</a></h2>
Different text for topic 2. Ah, foobar.

Without CSS or JavaScript this text is completely accessible and reads normally, it just makes the page longer. Tabs are a way to compact the information into a smaller space, so lets proceed to do this.

If we add some simple styles to the page, we can get the two headings to appear and act like tabs through positioning. The interesting part is the :target selector.

// set the default state first
p {
display: none;
}

// When the link is clicked, set the contents to display
p:target {
display: block;
}


When the fragment (#content1) is not part of the URL, the :target selector does not match the

element, so it is set the default view of display: none. This is a very simple way to create a tabbed system.

The Yellow Fade Technique

There is a popular usability feature called the “Yellow Fade Technique”. This is used to direct the user’s attention back to a specific area subtly. For example, when you want to edit a piece of a page you may click edit which takes to a new page with form fields. When you press save you are returned to the original page where there is a brief yellow fade of the area that was just edited. It brings your eye to the area, possibly to confirm the changes look correctly in the template, or to just make people aware the change took place at all. Either way, it seems to be a welcomed usability feature that has been picked-up by several web applications.

Normally, this is accomplished through the use of JavaScript and page IDs or classes. The JavaScript runs an onload function looking for those classes or ID and once the parts of the page have been identified, the script runs a timer and ever few microseconds change the background color from pure yellow to white. This create a smooth, not too annoying, yellow fade effect.

The downside to all this is that there are several resources at work, including onload functions (which might be happening every time the page loads, not just the times when a form is submitted) and hooks into the classes and IDs and JavaScript timers. All this adds to the client download and subtracts from the speed of the page.

With CSS3 there is a much easier and simpler solution. Using the :target pseudo class it is possible to emulate the yellow fade without a single line of JavaScript.

First, you need to create a tiny 1 pixel-wide yellow animated gif. This will fade from yellow to white. The animated gif isn’t repeating, so it will fade once and then stay pure white. This also defines the length of the fade, so there is no need to for a JavaScript timer.

Second, we need to set this as the background image for the area which has been changed. To do this, we use the CSS3 :target pseudo selector.

#here:target {
background-image: url('yellow-fade.gif');
}


This will fade the element with an id=”here”, the URL would look like http://example.com/#here. It is good web architecture to use fragment identifiers for each of your headings and to use RESTful URLs.

Now, the downside to that CSS statement is that it will only fade the area with the ID.


<h1 id="here">Hello World</h1>
I am saying Hello to everyone in the World!
Only the heading element would get the yellow fade. So how do we fix this? Well, we could change the ID to a class and create something like:
.here:target {
background-image: url('yellow-fade.gif');
}
But then on the server, we’d have to add classes dynamically to all our elements.

<h1 class="here">Hello World</h1>
I am saying Hello to everyone in the World!
We could put a wrapper around both the heading and the paragraph.

<div id="here">
<h1>Hello World</h1>
I am saying Hello to everyone in the World!
</div>

But that seems too much work. Instead, we can make use of another CSS combinator, the adjacent sibling selector:
#here:target, #here:target p {
background-image: url('yellow-fade.gif');
}
This targets both the heading with the ID ‘here’ and the first sibling paragraph. So both will get the background image and the subsequent fade. You can easily change your CSS to fit your HTML design, but this is a quick and simple alternative to the Yellow Fade technique in JavaScript used on so many sites.

In CSS there is also a wildcard * to stand for all nodes. So you could further take the example to
#here:target, #here:target * {
background-image: url('yellow-fade.gif');
}
This would match the first sibling of #here no matter what the type of element it might be. Firefox correctly supports this, but as of writing, Safari does not.

Blurring the lines between behaviour and presentation

I am obligated by the behaviorists to mention that there is a debate over presentation and behavior, where does one stop and the other start? By adding the :target selector into your CSS, you are styling the HTML based on the behavior of the browser and the users. We talk about the “holy trinity” of web design, and we have spent the last few years campaigning to divide data, presentation and behavior into their respective HTML, CSS and JavaScript camps. The :target, as well as the :hover, selectors blur that line between presentation and behavior. Depending on how comfortable or how much of a purist you are, you may or may not agree with what has been demonstrated.

These examples were written to better understand the CSS3 :target element and to explore those blurry grey-areas. Hopefully, a discussion will emerge with even more ideas, caveats and problems that were not originally thought of. Together we can create some best practices on when to best use CSS behavior and JavaScript presentation.

Conclusion

Over a year ago, Andy Budd demonstrated the yellow-fade technique with :target and I was impressed! (http://www.andybudd.com/presentations/css3/) In the time in between, I have seen very little attention or articles on this little known selector. As I was started working on this article, I found several examples some from as early as January 2003 that talk about uses for the :target selector. The reason for not getting the traction it deserves could be the lack of information about when and how to use it correctly or documentation on the poor CSS3 implementations in browsers.

CSS3 is closer than you think, many of the selectors and attributes are available in several major browsers today. They can be used with progressive enhancement to add more style to your design at little cost, when other browsers catch-up they get the benefits of your progressive code for free. The CSS3 :target selector is just one example of some of the new selectors arriving that can be taken advantage of in interesting new ways.