Before Ethan Marcotte’s A List Apart article on Responsive Web Design came along designers revelled in the constraints of the 960 grid; the limitations we imposed on our websites by determining a fixed grid system in an unfixed world gave us a false sense of control over our designs. Responsive design has led many to rethink the assumptions we make when building websites and forcing us to yet again think about the multitude of screens, devices and people that use the web. No longer can we simply increase the width of our websites every few years to what we feel is a size that then covers an acceptable percentage of users.

With responsive design the tried and tested processes we have employed over the years are being rewritten to suit a new and unfamiliar way of building websites. One such process that is being put to the test is our implementation of imagery.

Responsive Inline Images

Images in web design have been easy for years. In the last few years only CSS Sprites like those in use at Google have added something new to the mix. But in responsive web design a whole host of issues have come to the fore as many of the images we use in our designs are not created to suit anything other than the size for which they were created; images aren’t built to be responsive.

Luckily however inline imagery doesn’t provide all that many issues in a responsive design until you discover an image disappearing off to the right of your mobile screen. In some cases you can learn to avoid or work around certain issues, but this problem required a solution; it came quickly and simply:

img {height:auto; max-width:100%:}

The solution comes in setting the max-width to ensure that no image appears to overflow the constraints of its parent container and thus, hopefully, the constraints of a small screen device. The height is added to ensure the aspect ratio of the image is retained.
If your image happens to have a border or padding also then the above code needs a little extra something:

img {box-sizing:padding-box; }

Without setting a value for box-sizing then properties like width and max-width do not accommodate border widths or padding into their measurements. This means the visible width of an image with these properties would be greater than 100% and overflow the constraints of a mobile screen. Adding box-sizing means that where a border and/or padding are specified that all these are included as part of the stated measurement; in this case 100%.

If Only Background Images Were so Easy

We use background images for a multitude of purposes ranging from full body backgrounds to icons for links. The latter you wouldn’t expect to be too much of a concern in responsive design and the techniques we use for the former hint at how we can make background images responsive.

When implementing an image in the background of a website we intentionally make this larger to cover as many screen sizes as possible, understanding that those with smaller screens will not see the entire image. It’s this idea that we can use for implementing responsive background images, but first we need to add in another trick to help achieve the right effect; and this is background-size.

Background-size 101

This is one of those new properties gifted to us as part of the CSS3 specification and as is self evident it allows us control over the size of our background image.

The values you can apply to background-size are as follows:

background-size: <bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

Length, percentage and auto should be fairly obvious, but what may not be obvious is that when setting length or percentage values it’s up to the author to ensure the image aspect ratio is maintained, if they so wish.

Cover and contain however are somewhat new and what these do is allow us a way to increase a background image to fill its parent container whilst also retaining the correct image aspect ratio. The differences between the two of these come into how they deal with the overflow. In short using ‘cover’ allows for overflow and ‘contain’ does not. This diagram shows better how the same image would appear using either cover or contain:

Using Background-size In Responsive Design

For responsive web design it’s the ‘cover’ value that contains all the power as it will adjust the size of an image to fill a parent element whilst hiding the excess in the overflow; much like we do with large backgrounds in the body of a website.

These two images show how powerful background-size can be in responsive design:

Both images show the same page, with the same images, the only difference is the size of the browser. It’s the use of background-size and ‘cover’ that mean the images are able to adapt to the user screen size and in the case of these images not actually communicate any less information than if the full image was shown.

Much like when making inline images responsive the code is fairly simple:

<ul ><li><span id="onextrapixel"> Onextrapixel Team</span><h3>Onextrapixel Team</h3><p>Onextrapixel, or more commonly known as OXP is dedicated to delivering useful, comprehensive and innovative information for designers, developers and many others.</p></li></ul>
.list-img {
background-image:url(/img/onextrapixelteam.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
display:block;
height:140px;
text-indent:-9999px;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;}

#onextrapixel{
background-image:url(/img/onextrapixelteam.jpg);
}

In this example a height is also specified for the element; this is because the effect is trying to fake an inline image. This is so that it we can ensure it is responsive without the image’s height becoming excessive at certain breakpoints. Where an element contains something like text or other child elements the height property may not be required but the effect on the image would not differ.

What is the Support for Background-size Like?

Pretty good actually! Nothing older than Internet Explorer 9 knows what it is of course but you have to go back a few versions in all the other browsers to find one that doesn’t support it either with or without vendor prefixes.
But don’t think the lack of IE support is a bad thing. If you serve a fixed design to these browsers then generating a second version of your image would be the best solution. If you’re adding media query support then ensure the image is at the largest it is likely to be viewed at and as the screen size gets smaller the image will just hide into the overflow. You could even swap the image at various breakpoints if necessary.

Another String to Your Bow

Before responsive web design came along website layouts were getting more and more complex, but for the time being responsive design has hit something of a reset button on this as the rich interfaces we were beginning to create are not as easy to achieve using this technique.

But as we learn more about the process and as CSS becomes even more powerful we will become more familiar with the limits and opportunities of responsive design. As this happens we will be able to design richer interfaces for our responsive websites while also allowing us to enrich the user experience for all our users.

Both Print and Web Design are powerful mediums that have the power to pack a lot of impact and persuade the viewer to take action. If you’re looking to cross over into web design, or vice versa, it can be beneficial for you to understand the inherent differences that exist in each medium. And while these fundamental differences exist, each has made huge strides in working around their respective nuances to enhance the viewer experience.

This article seeks to uncover the differences (and similarities), and how both print and web design has advanced in acknowledging these disparities.

A Different Experience

It can be said that the experience of viewing and interacting with a website is entirely different than reading a full page spread in a newspaper. The experience of viewing a print publication is one of cohesion – where your eyes are guided from page to page with subtle variation throughout to keep interest.

The design is created for a fixed canvas size – which can be substantial when we’re talking about newspapers or posters. While on the web, the user interacts through a scrolling experience as opposed to a canvas experience. Throughout the reading experience, users will scroll even before all elements have rendered and to varying degrees.

In Summary:

• Print Design allows your eyes to walk around the information, letting you select information objects and using spatial juxtaposition to enhance and explain page elements.
• Web Design is a transient experience based on the users movements (clicking and scrolling) and is expressed through an interaction with user movement.

Image credit: william couch

Canvas vs. Screen

Two things both mediums have in common is they both take into account the audience and demographic of the end user. A print designer can rely on fonts, colors, paper stock, and other elements to effectively reach his or her designated audience, and a web designer can do the same to a greater extent. However, nothing is more different between the two than the constraints of designing for the web itself.

Computer monitors come in different sizes and users can re-size their browser windows according to their own needs. Also, monitor color and contrast settings can affect how colors are rendered on their screen. Finally, the differences between browsers and operating systems mean web designers are tasked with troubleshooting for a myriad of situations. Not as glamorous as the print designer who is making the switch over to web may have expected.

Although these issues exist, many web designers have embraced this as the norm and have learned to work around it. A lot of these issues can be addressed by analyzing your target audience: Are they likely to have nice new computers with the newest browsers and a complete set of plug-ins?

Are web designers restricted to their creativity by the capabilities of web technology, like HTML5, CSS3, JavaScript etc?

Krishna Solanki, Web & Graphic Designer: Personally I believe it is down to the web designer really. I mean, if they are able and happy to code their designs to degrade gracefully across the different browsers then I would presume they would take on board the ever-evolving technologies, and thus they may become less of a restriction as they may have an idea of development whilst designing and can use their creative skills wisely. All depends on if the web designer is also the developer, in my opinion.

Shannon Noack, Web Designer: I don’t think a web designer’s creativity is restricted online, it’s just a matter of learning to work with the limitations that are out there. A print designer is also restricted, by paper type, size, printer quality, etc. So any designer faces some sort of restriction, but it’s important to use your creativity to rise above these things, and work with them to come out with an awesome design.

David Airey, Designer: I don’t think it’s as much a restriction as it is just a different canvas you’re working with. Every medium has its constraints. If you’re working in print you have to decide what you’re printing on and how many colors you use. You’re going to pay more for bleeds or die cuts. You’re also restricted by physical space, you can’t scroll in print and every additional page you add costs money.

Brad Colbow, Web Designer: Great design is born from within the restrictions that you are given. Shepard Fairey’s poster of Barack Obama is a good example of design that embraces the restrictions of its medium. It was a screen printed poster so the artists used solid colors that would print well. When I see a website like Zaarly I not only see a beautiful design but a design that can only have been created on the web. Visually you could use the elements in print but you could never recreate the way the content interfaces with the design.

David Airey, Designer: I think both fields have restrictions. For instance, print design is restricted to a smaller colour gamut.

Calvin Lee, Designer: I would start with the design first, be as creative as you want like any other print project. Then worry about how to build it later. I also have to say, you should know a little about how all the web technologies work; HTML, CSS, JavaScript, etc. when designing a website. You don’t necessarily have to know how to build everything. As long as you know what the limitations are.

What are the challenges faced by the Print/Graphic Designer when asked to transition towards the Web?

Shannon Noack, Web Designer: There are a bunch of differences between print and the web, and many designers struggle with these differences and how to accommodate for them. Type restrictions are a big one and it takes some time to learn how to work with the options out there. Things are getting more flexible with typography options online but it’s important to learn the limitations and what you can do with them. Things like shadows, gradients, rounded corners, and all those extra touches are also important to learn about.

Chris Spooner, Designer: The main challenge has to be learning the basics of how to design for the web. Websites are viewed in a range of different applications and on many different devices. A print designer can expect their design to look exactly how they planned, but a web designer has to make sure their work is suitable for a various computing setups.

Krishna Solanki, Web & Graphic Designer: As I started off as primarily a web designer and then moved into Print, it is slightly different. I would say to be mindful of the “terms” and dimensions used in the web design world and the print world, I.E, moving from inches to pixels. Also to be considerate of the fact there is no bleed or crop for the web.

Cameron Chapman, Designer: I got my start mostly in print design, and one of the biggest challenges when I started doing more web design was changing the way I thought about designs. Print designs (at least the kinds I was doing) exist in a very finite form, while web design is much more flexible. The web can evolve constantly, whereas once a print design has been printed, it’s “finished”. That takes some getting used to.

Brad Colbow, Web Designer: In print design you have a fixed canvas size. On the web you don’t. For years we debated what width we should design sites at. Should they be 800 pixels wide? 960 pixels? As mobile has become more and more important designers have become even more conscious of the web’s flexibility. Designing for the web is now about embracing that flexibility and the unknown of screen size. This isn’t a new idea, John Alsop was writing about it over 10 years ago but the growth of mobile phones and tables have made us much more aware of it recently. That’s a big part of why we see so much about responsive web design (flexible layouts that use media queries to adjust to different screen sizes) nowadays.

David Airey, Designer: Learning code. It’s basically putting the time in. A lot of the same principles apply online and off, with layout and typography being two of the most important.

Calvin Lee, Designer: The biggest challenge for any printer designer, is taking a printed piece and making it look the same/similar for the web. It took me awhile and very frustrating, to wrap my head around using HTML and CSS to layout/move items around on the page. It’s very easy with a layout program like Quark or Indesign. Layout for the web was a huge problem, if you don’t know anything about coding. Sure you can use a wysiwyg app like Dreamweaver but it tends to add unnecessary junk code. Also the differences in the color modes for print and web can be frustrating too. You can come close. For web, colors will tend to be brighter.

Navigation

You’re probably so familiar with flipping through your favorite magazine that you haven’t even considered a navigation element, but this is how we get around a print design – by turning pages. Conversely, the web is all about moving around. The navigation of a website is a major component to its readability. Decisions like the appearance of links, visualization of where they currently are, and information architecture play an important role in navigating a website successfully.

Image credit: laurajo

Typography

One of the joys about designing for print is the wide array of fonts available at your disposable to communicate your message. The proliferation of free font sites has meant you can achieve custom graphic communications without relying on the fonts issued on your computer and without purchasing ones from type foundries.

Changes in typography on the web also are abundant. Ten years ago web designers thought they were restricted to the fonts available on the users computers and that’s it. This issue was tackled in 2009 with the introduction of Typekit, one of the first web font services. Many other services are available to remedy the typography constraints inherent on the web.

However, it’s still important to use fonts that are optimized for on-screen readability. The two popular ones, Georgia and Verdana, are always great options to fall back on as they were designed for on-screen use. Font size is also critical: while most print publications can get away with using 10- or 11-point type, the web demands font sizes of 12- or even 14-point to make articles reader-friendly.

Web Safe fonts are also something to fall back on, as they have been shown to ensure maximum compatibility between browsers/operating systems. These are fonts that you can expect everyone viewing your webpage to have. If the browser does not support the first font, it tries the next font. Examples of web safe fonts include Arial, Georgia, Gill Sans, Times New Roman, and Palatino Linotype, to name a few.

The use of CSS3 also means you can achieve unique and compelling effects not only in typography but in the design of the site in it’s entirety through the use of drop shadows, gradients, borders, etc.

Images

There’s a drastic difference between the way an image appears on screen and the way it appears in print. With online publishing, there’s more room for error versus print. The differences exist in the following:

Graystone

CMYK vs. RGB

CMYK stands for Cyan, Magenta, Yellow and Key (Key being whatever ink color makes black on the paper color you’re using — usually just black itself) and is the standard color space for printed material. Using these four ink colors in different screens, you can produce virtually any color in print. RBG, on the other hand, stands for Red, Green and Blue and is what every computer monitor, television and other digital equipment uses to produce color.

Image Compression

Your image will need to be 72dpi for the web. It’s also recommended to use JPEG (set to “high” quality, usually level 8 or 9) or PNG format for your image files. PNG offers a number of advantages to GIF, particularly when it comes to options for transparency and true-color palettes.

Interactivity

An abundance of tools exist for the web that aren’t readily available for print. With a web site, you can have animation, mouse-over effects, pull down menus, cross-referencing links, instant reader feedback, and on and on. The key is to know when and how to use them. Keep not only your target audience in mind when incorporating interactive elements onto websites, but the browsers and operating systems they use.

Atticuspet

Similarities

Despite the end result the user encounters when interacting with both mediums, there are similarities between the two. For one, both employ similar uses of data presentation, such as the heavy use of white space in easing the visual impact on the reader. The second similarity is that of grid-based designs. Since both rely on a heavy amount of information, structuring this information is paramount as it guides the user’s eye while providing order.

Grid Resources:

• The Grid System
• 960.gs

Is it possible to master both?

Cameron Chapman, Designer: I think it’s a good idea to at least be proficient in both. Print isn’t going to die completely any time soon, though parts of it have definitely been replaced to an extent by the web. Being able to create both awesome print designs and awesome web designs is definitely going to put you ahead of a lot of your competition.

Chris Spooner, Designer: It’s important as a designer to stay on top of the industry changes and keep your skillset up to date with the latest coding languages and technologies. It’s too easy to fall behind as a web designer, which is why I keep myself informed by socialising with like minded people over Twitter and subscribing to informative websites and blogs.

Shannon Noack, Web Designer: I think you can definitely master both print and web design, you just need to understand that they are different and design for the medium that you’re working with. Both have their own limitations and best practices so it’s best to focus on the task at hand and use the program and tools that are best for that project. As a print and web designer myself, I know that you can do both, you just can’t do both the same way. Design skills and creativity cross over, as well as any design principles, but even the best fonts to use are different so it’s important to keep them separate and distinct.

Brad Colbow, Web Designer: It would be hard to really master both but it would be possible. Honestly it’s really hard to master both the visual design part of web design and also front end development, that’s why so many places break those up into two different jobs. I feel far more competent in Photoshop that I do writing HTML/CSS. I learned the latter to improve the former.

For anyone who is working in print design and wants to jump in and learn more about HTML and CSS you should check out JD Graffam’s book. He does an excellent job of pointing out the similarities and differences between print and the web.

David Airey, Designer: Why not?

Calvin Lee, Designer: I think it’s very possible to master both print and web. It gives you an advantage over other designers and you get paid more. With that said, many designers can’t or don’t want to code. They would contract it out to developers and coders. That is very legit.

Showcases

Book Of Numbers
It looks like a book. It navigates like a book. Is it a book?

The New York Times
Designed to resemble the famed newspaper layout of the NY Times newspaper.

CSS Tinderbox
With grungy/paper-like textures, this site looks like a propaganda leaflet.

Netlash-bSeen
Website that resembles a poster.

The Dollar Dreadful
Website that resembles a newspaper.

Atlantis
Website that resembles a poster.

The Moon
Website that resembles a poster.

Wired
Website that resembles a magazine.

Sun Magazine
Website that resembles a magazine.

Conclusion

Designing for web and print are two entirely different experiences. If your background is in print, it doesn’t mean you have to neglect basic print principles and styles. The great thing about the modern web is it’s starting to imitate print in some respects. E-commerce, blogs, news and political websites are especially popular amongst the print crowd. Understanding the limitations of each will be a step towards creating a more unified experience for both mediums.

What do you feel is the biggest difference between print and web design?

Simple & Effective jQuery Plugins that Enhance Your Forms

Fancy Contact Form
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channels are contact forms.

Create a Neon Blink Effect For your Forms Using CSS3 And jQuery
How cool would it be to have a glowing blink effect behind your input boxes in a form without using Flash? Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, you can! This tutorial will show you how to build a nifty effect to enhance your forms.

Table-Sorter Plug-in
The third iteration of the Tiny Table sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function. At only 6KB it is still lightweight, quick, and includes all previous Tiny Table features.

Complete Transactions Form
Secure, PCI Compliant Transaction Forms With Fully Customizable CSS.

Design a Registration Form
Web Forms are a fundamental part of web design. From small login forms to complex administration panels, forms are probably the most important interactive elements in a web application. Some people prefer to design forms using a table whereas some prefer a table-less design using pure CSS .In this tutorial I have created a form using pure CSS and I have skinned the form elements such as textbox, drop down list ,radio button using a jQuery plugin.

Jq Transform Plug in
This plugin is a jQuery styling plugin which allows you to skin form elements.

Pretty Check List
This script is for people who want to have a consistent look for checkboxes across browsers, or those who simply want them to look better. By using this script you won’t lose any of the regular input usability.

Create a progress Bar With JavaScript
The Progress Bar is one of the latest components to be added to the excellent library of UI widgets and interaction helpers built on top of jQuery. It was introduced in the latest version of the library, which at the time of writing is 1.7.

jQuery Credit Card Validation Plug in
Smart Validate is a jQuery credit card validation plug-in, that makes credit card format validation a simple task. It ensures that the user has entered a valid credit card number before making the actual transaction.

jQuery Auto Tab Plugin
Auto Tab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within defined text fields, the focus is automatically set to the defined target of the element.

jQuery Highlight Plug in
Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.

Gmail-Like Client side Drafts and a Bit More
Here you may fill forms in the normal way, then close your tab/browser, refresh window or open this page in a new tab to see all your changes are saved and restored.

jQuery Plotting Plug in
JqPlot is a plotting and charting plugin for the jQuery JavaScript framework. jqPlot produces beautiful line, bar and pie charts.

Date Picker
Date Picker is a component with a lot of options and easy to fit into your web application.

Create a jQuery UI Form
UI is an important factor while developing any web application or website. jQuery UI is a powerful UI framework which supplies almost all standard widgets like tabs, accordions, sliders etc.

Conclusion

Do you use any of these plugins to style contact forms in your designs? Have you come across any other great jQuery plugins that we have missed from this list?

Please share your links and comments with us in the section below.

Although it is true that you can edit your photographs on software like Photoshop, to do that you will need a good enough knowledge of the software. If you are not well versed in photo editing software then you will have to hire a designer.

Instagram eliminates these technical difficulties by enabling you to edit photos with the mere click of some buttons. You also get an unlimited number of uploads on the Instagram website. This feature has helped Instagram to become a social media for beautiful images.

Thousands of images are uploaded and edited on Instagram every day. Here we have carefully selected 50 classic photographs to showcase. These images will prove to you how the filters and frames for Instagram can amazingly affect your photographs.

Beautiful Photos on Instagram

Westminister Skyline

Patrol Flashlight

Covered In Snow

Blinding Sun

Our First Pic Together as Cousin

Raising Gotham

Smirnoff

Cowboy

Wine Time

Flower Challenge

Batu Caves-Malaysia

Funny Elephant

Rayban

Lykke omg li

Breakfast at the NOHO Star

Happy Valentine’s Day

La-Maryline



Thanksgiving

Colorful

Men’s Autumn/Winter 2013 Runway Detail

Plants Living in Photo Lens

Big Ben On a Wet Evening

Black and White Night

Birds at Huntington Beach State Park

High in the Sky

Rosie Huntington-Whiteley

Parallel Worlds

Swing

Fish Eye Apartments

Sunset in NYC

Empty Studio

Palmerston North Airport

Moscow



Hibiscus

Birds

Steve Jobs

Pigeon

Sweetheart

The Road Not Taken

China Town

NYC Marathon

Transparent Shadow

Heartbreak

Tiny Little VW Bus

Street Light

Lock

Wind Farm In Iowa

Stairs

Morning

Plymouth, Rosalia Rd

Conclusion

We hope you liked our collection. Let us know your reactions in the comments below. If you want more information then head over to the Instagram website and try to play with the features given there. You will get the hang of it quickly. Happy photo editing!

Almost every article you’ll read advises you to kneel at the altar of the Regular Update. Regular updating is the key to more visitors, a lower bounce rate and increased Adsense revenue, we are advised with a scholarly nod.

While this advice is far from all-you-need-to-know (personally, I’d emphasise a few other things first: choose a narrow topic that you know a lot about, get involved in web communities covering similar topics, don’t try to monetize too quickly, choose a powerful platform like WordPress, etc, etc.) it is important.

A dead blog is one of the most obvious things to spot. A political homepage post about Hillary’s run for the democratic candidacy? A fashion blog with no mention of colour-blocking? A music site without a single snide remark about Dubstep? You’ve got yourself a deady.

But in our busy times, people are looking for shortcuts. Updating your blog with very short posts via email has become popular: no fuss, no stress, six posts a day, and you look as current as Agyness Deyn. The explosion in microblogging platforms like Tumblr has supported this trend: nobody expects blog posts to be long and comprehensive anymore. In fact (like Agyness Deyn’s hair), the shorter the better!

Another way to keep current is to add a Twitter feed to your site. Even if your last post was six hours ago, your tweet from six minutes ago can be there in a neat sidebar, breaking the news that Mitt Romney is the new republican candidate (or whatever) before anyone else.

There are many ways to use Twitter to enhance your blog – and vice versa. Integrating Twitter and WordPress sites is especially easy – there are tons of plug-ins, apps and tricks that can help you streamline your online life in this way, bringing all your web actions together.

Are you convinced yet? Integrating WordPress with Twitter is the new fibre: it will keep you regular, and keep you healthy.

5 Tools for Integrating WordPress and Twitter

TweetSuite
This WordPress plug-in will do a few different things: firstly, it will place a Tweet This button at the end of each blog post, allowing anyone with a Twitter account (not just your Twitter followers) to publicise your story on Twitter using one of those neat small URLs. You can choose to generate yours using Adjix.com, B2l.me, Bit.ly, Is.gd, Metamark.net, SnipURL.com, Su.pr, TinyURL.com, or Tweetburner.com.

This button is similar to the Digg This buttons that were popular a couple of years ago and allowed bloggers to be contenders in the Digg Wars – a successful battle could make a blogger like the Gallic campaign made Julius Caesar.

Secondly, you have the option of adding a few different widgets to your sidebar: Favourited Tweets, My-Last-Tweets, Most Tweeted Items and Recent Tweets. The most tweeted widget is especially handy – it works like a popular posts widget, adding a list of stories that are getting the most Twitter love.

Thirdly, a list of tweetbacks will appear at the end of your post. This will list any publicity your article is getting on Twitter.


Finally – and this is the most basic but perhaps most useful feature – all new posts will automatically go to Twitter.

This highly recommended app is compatible with WordPress versions 2.7 to 3.3.1. There are a lot of plug-ins that will do one or some of the things listed above; TweetSuite has rendered them obsolete in one fell swoop. Why download six plug-ins when you can download one?

You can manipulate your URL format and choose your Tweet This button in the TweetSuite options menu.

TwitterCounter
They’re calling it ‘Feedburner for Twitter’. This app is perfect for bloggers with a large Twitter following who want to show it off.

Sign up at TwitterCounter.com to get the code. You’ll have to paste it into your sidebar.php file, then the site will start tracking your activity. Follower stats will appear in your WordPress sidebar in the format you select.

The info menu can show you your follower growth in graphical format, as well as displaying handy stats like average growth per day.

TwitterFountain
A very innovative sidebar widget that blends visuals with details of Twitter action. Flickr images and tweets that share the same hashtags are mashed up.

Any topic can be covered, as long as there is a hashtag for it. In these days of #WillYouGetSlapped and #DisneyPickUpLines, you can bet there will be something!

Use TwitterFountain to produce an original content sidebar without signing up for any paid services.

TwitterRemote
A widget that shows Twitter users who have recently been to your blog. Find interesting people to follow – these users are likely to follow you back.

Twit-Twoo
Spending a lot of time on your blog? Want to tweet your brilliant ideas as they hit you, without leaving the page?

Twit-Twoo provides a sidebar that lets you do just this. Ajax takes care of the processing so your WordPress page doesn’t even have to reload for your new tweet to appear on your Twitter account.

No more rushing off to Twitter then returning to WordPress to find that your blog post didn’t autosave.

Twit-Twoo will also send you alerts (like appointment reminders) via Twitter – it is aimed at avid users who would benefit from integrating all their online activity within Twitter (rather than Google or Facebook).

Conclusion

Bringing your Twitter and WordPress activity together can save a lot of time and sometimes opens up new worlds – new ideas – you never thought of. Anyone wanting to streamline their online life or increase their following/visitor count can gain a lot from the available apps – these are just five of the best.

Have I missed anything? Please let me know about any neat integration ideas in the comments.