Category Archives: Web Design

Topics and discussion relating to web design.

WordPress Design Trends for June 2013

WordPress evolves at a steady and predictable pace.  This is a nice feature of the core WordPress.org project.  Since version 1.5, the theme system has allowed designers and WordPress admins to create cutting edge designs that are portable across almost any WordPress site.  With a virtually instantly available design, administrators can change the overall look in a heartbeat.  As WordPress evolved, the theme engine allowed people to install a framework and customize it quickly and easily without affecting the core code.

Even though modifications became easy to do, the theme system created enormous competition for designs.  With the ability to download a theme that is ready to go out of the box, designers were forced to get creative.  Now it seems as though there is a WordPress theme shop next to every Starbucks (that is to say, on every corner, ubiquitous).

With a vibrant theme community, designers have to adapt quickly to changing trends.  And boy do they change quickly.  Here are some of my favorite design trends that have emerged in this first half of 2013.  If the first have is any indication, the second half of 2013 will be incredible.

Responsive Designs (vs. mobile)

responsive

When mobile devices were first starting to be built with enough oomph to handle modern web applications, designers had to think quickly and incorporate mobile designs in good WordPress themes.  Initially, each standard theme came packaged with a corresponding mobile theme.  This mobile theme was compatible with the ipad and blackberry devices.  Then the iPad came out and changed everything.  Designs were faced with a decision to add a third layout to their themes (some chose this path) or develop a new way to handle different screen resolutions elegantly.  In 2013, responsive designs really came into their own.

Responsive designs (in case you’ve been living under a rock, trying to get Joomla to work for the last year) is concept that allows a design to scale in all sizes.  Although scaling and moving elements may change how the site looks, it won’t distort, squeez, squish or otherwise befuddle your design.

Specialized mobile navigation

mobile nav

In concert with the advent of responsive designs, WordPress custom menus allow designers to create a menu that is only to be used for mobile browsers.  This doesn’t matter if you only have 3 menu items.  But scrolling through 10 menu items and their 50 sub-items can be frustrating on a mobile device.  So frustrating you can easily lose visitors.  Developing a mobile menu can resolve this frustration.  A restaurant I recently worked with has a full menu for standard browsing, but the mobile menu only offers information on their story, location and menu.  The three critical pieces of information for the mobile user.

Media-centric designs

media-centric design

With more households having high speed internet, and mobile device load time improving for that matter, design limitations have decreased.  I remember using AOL as my browser, with a 14.4kpbs modem to browse the web.  When I came across a website with lots of images, I had to either go run an errand, or look elsewhere.  Not anymore.  2013 designs are riddled with high-resolution images.  Not just as content, but as design elements.  New media-centric designs focus on the media, not the structure.  Examples include sites with entire backgrounds taken up by high-res images.  Without the featured images, there wouldn’t be much to the design, in fact.

Single-page designs

single page design

Single-page designs have really taken off this year.  A couple of things make this possible.  First, the web design community as a whole is moving back toward simplicity.  Simple sites mean more focus on content.  Second, the evolution of infinite scrolling technology has made single-page designs more realistic since all of your content can eventually be displayed without navigating.  This is most effective with two types of websites: 1) those with minimal content (business or splash type pages) and 2) those with socially generated content or a steady flow of content (read: Facebook, Pinterest, traditional blogs).  A cool design element that I’m keeping my eye on is called Parallax Scrolling, see an example.  Parallax connects the scrolling action to other design elements.  Scroll in the example and watch the navigation menu.  Check out OnePageLove.com, a gallery dedicated to single page designs.

Custom fonts

custom fonts

Custom fonts are not new in 2013, but they are quickly becoming the standard.  It used to be there was one choice for font, then a few, then limited to your browser’s capabilities.  Now, due to evolving browsers and the beauty of CSS3, virtually any font can be packaged with a WordPress theme.  This has opened the floodgates for designers that were previously limited to Times New Roman and -GASP- Comic Sans.  I personally never realized how much of an impact a font could have on the overall design feel.  Then Google Fonts muscled into web design and my eyes opened in a totally different way.  Thanks to Theme.fm for the above image.

What is your favorite WordPress design trend for 2013?

 

 

20 WordPress Theme Design Trends for 2013

If you’ve been watching WordPress for years like I have, you will have noticed various design trends that come and go.  WordPress is old enough now that it has gone through a number of these cycles.  From minimalism to complexity, from sidebars to single column, here is an outline of the latest WordPress theme design trends for your perusal.

Minimalism

This style is coming back, strong.  Designers are figuring out how to do more with less and make things stylish without gimmicks.  This is very appreciated.

minimal design

Single Page

Single page designs were once popular because, well, the internet was boring and there was no reason for multiple pages.  Then we went through a phase when every site has millions of pages.  Now we are backing off to a more reasonable level.  A site that can put most content on a single scrollable page is a user-friendly site because page load speed is minimized.

Masonry Portfolio

Masonry is a jQuery library that has allowed designers to compile various block sizes automatically and dynamically.  This allows for some impressive portfolio and gallery layouts.  The most famous example is the new (WORST OPERATING SYSTEM EVER) Windows 8 desktop.

masonry design trend

Responsive Design

Responsive is the big kahuna.  A WordPress admin no longer has a need for a separate mobile theme.  Rather, new themes in 2013 have the ability to scale up and down seamlessly.

Retina Ready

Retina is the name of Apple’s latest screen resolution.  An ultra-sharp resolution is like a close up camera.  It makes pretty things beautiful and mediocre things ugly.  The retina displays has so many pixels crammed into each inch, the human eye can no longer distinguish between pixels.

retina design element

Image Sliders

Image sliders are back baby.  With the advent of new javascript libraries to handle transitions and effects, image sliders are flexing their muscles.  Big, bold images flying across the screen is a popular design element for 2013.

Shortcodes

Shortcodes are not new, but their widespread use in WordPress themes is relatively new in 2013.  Shortcodes make for good design continuity when they are developed by the theme designer.  When executed well, they keep the site fluid across pages, buttons, columns, etc.

shortcodes design

Unlimited Colors

Gone are the days of “skins” that pre-determine color schemes for your design.  New WordPress themes are including a color selection feature that chooses the primary and secondary colors that permeate the entire theme.  Good for most people, bad for the color blind.

Google Fonts

As mentioned below, people are focusing on typography more than ever.  The ability to integrate Google’s web-friendly font library has opened up a whole new world for designers.

google fonts in wordpress themes

Single Column

A good single column theme is a nice piece of art.  To incorporate usability into a theme of this layout is tricky.  But when done well, it makes for a  very cool design.

Custom Post Types

WordPress has offered custom post types since version 3.0.  But designers have just begun to really take this feature for a ride.  Post types let you determine how a particular theme displays content based on the type chosen by the author.  This lends itself to nice mixed-purpose blogs that may highlight a link, then a video, then an image, then some text.

custom post types

Integrated Plugins

New themes are starting to integrate premium plugins through partnerships with developers or custom plugins.  Sometimes these plugins are unavailable as a standalone purchase.  Sometimes they are readily available but are thrown in as a perk for the theme purchaser.

High Contrast

WordPress themes this year have definitely taken on more high contract color schemes.  Bright yellow on black is an example of a color combination we’re seeing more of.

high contrast web design

Infinite Scrolling

This is a technique made popular by Facebook and Pinterest.  Keep users on the page by not requiring a click to see more content.  Most designers utilize AJAX for this feature.

Block Designs

The blocky feel has definitely made a comeback.  This design trend uses blocks, squares, and sharp corners to define elements like menu items.  There was a time when this was a sign of an old, outdated design.  But now it’s progressive.  Huh.

blocky designs

Left Sidebar

For some reason the left sidebar has come back with a vengance.  It could be the natural inclination to look to the left for navigation. (as opposed to the top or right)

Big Typography

I’m not sure why, but I like the focus on typography in new WordPress themes.  Lately, the typography has gotten larger and more pronounced.  The text used to be what went in between design elements.  Now the text IS a design element.

typography wordpress

Image Reliant

There was a period of time when WordPress themes moved away from images incorporated into the design.  This was often because of the connection between page load speed and search engine rankings.  However with faster hardware and ubiquitous high speed internet, this has become less of an issue.  So designers are incorporating more image dependence into their themes.

Filtering Media

The filterable portfolio is a design element we started to see widely used in late 2012 and early 2013.  This is really a user interface feature as much as a design element.

filterable portfolio

Grid Based

Grid based design is not new but it’s deployment in most new, premium themes is.  Grid based designs lay out the content is easy to find, intuitive locations so users experience an easy to interpret design.

5 WordPress Themes for Political Candidates

WordPress is a simple tool used by millions of webmasters.  Did you know Google has a whole department dedicated to political adword accounts?  We didn’t either until recently.

There are many political candidates using WordPress to manage their online presence.  As the United States Presidential campaigns of Barack Obama and Howard Dean showed, the web is one of, if not the most important tool for political organizing.

Here are our picks for WordPress themes best suited for political applications.  The criteria we used to evaluate themes were:

  • Layout – political WordPress themes need to grab visitors’ attention quickly and convert visitors to action-takers.
  • Design – political WordPress themes send a message about an individual candidate.  They are not just a design, but a brand that must be sold.
  • Function – themes should have lots of room for widgets and sidebar content.
  • Integration – good political WordPress themes should integrate smoothly with social networking sites, social bookmarking, streaming media, Twitter and similar organizing tools.
  • Customizable – no political candidate should use an out-of-the-box theme without customizing it to fit their campaign, their constituency and their message.

Update: Here are some new WordPress Political Themes for 2011 2012.  Enjoy!

Update to the update: Since this post was originally written, there have been many more political WordPress themes developed.  We just removed a couple outdated/no longer supported themes, and added some very cool new ones.  Check them out below!

Campaign <– My new favorite!

Campaign is my new favorite because of the look and feel, and built in functions.  This theme is fully translatable, and comes in 4 color schemes so it’s good for any political perspective.  It comes with some cool jQuery powered hover effects and a neat slider.  It also has support for multimedia including Vimeo.  Like any good WordPress political theme, it has great styling for email capturing and event management.  What’s more, the latest update makes this theme fully responsive so it looks good on all devices.  An optional donate button can be set up with any payment gateway as well.  The designers thought of everything, even the FEC elections disclaimer (for those in the United States).

campaign wordpress theme

Candidate

Candidate was built as both a political campaign WordPress theme, but also a social issue/grassroots campaign theme.  The designers claim to have experience building real political themes, and their design suggests they’re telling the truth.  Although not as trendy a design as Campaign, this one is definitely a good choice.

Politico

Politico is a straight WordPress theme that you can customize to add features common on political websites such as donation widgets and signup forms.  Lots of buyer feedback suggests folks are really happy with this theme.  Also, this theme has a strong media slider which is important for political campaigns that need to showcase their candidate kissing babies and such.

Victory Framework

The Victory Framework is essentially a theme, with tons of built-in features.  It is an out-of-the-box website for political campaigns that only needs basic information to go live.  Of course, any candidate would need to make it their own before launching officially.  But it includes all the basic functions of a political website.  This is one of two complete campaign packages.victory framework wordpress political theme

Win With WordPress

This is also a highly-evolved WordPress Political Theme.  It has built in features underneath a political design.  It also boasts contact management features which is a plus for any campaign.  Rather than signing people up for email lists, you can turn them into advocates and constituents.

win with wordpress political theme

Who’s Who @ Elegant Themes

Who’s Who is a clean, multi-level navigation theme with not a lot of options, but the right framework.  If your campaign is purely informational, this theme will do great.  It also has multiple color options so you don’t have to go blue.

Whos Who Political WordPress Theme

 Politic @ ThemeForest

This theme comes with 9 custom widgets and is one of the most professional political/campaign themes available without going completely custom.  The theme supports 5 different post formats and audio/video.  Here’s what’s extra cool: this political WordPress theme supports BuddyPress!  This means you can easily build a community on your site with chat, forums, connections, messages and more.  Politic has a custom skin for the Events and WP Email Capture plugins which are very helpful tools for political campaigns.

Compositio @ Design Disease – FREE!

A cool blue theme with a design that never seems to get old.  This isn’t a new theme, but it seems to always look stylish even as design trends change.  I like the blocky design and clear, simple navigation.  For a not-too-complex political WordPress site, this theme would be perfect.

 

Review of Thesis Theme

Thesis makes some serious claims including having 25k + purchases. (At a minimum $87 license, assuming every purchase was through an affiliate, that’s $1.47 Million)  Here are some of them:

  • Separated HTML, CSS and PHP for superior SEO qualities
  • Robust theme options panel for style and layout customizations
  • A big time support network
  • A number of influential bloggers using Thesis such as Laughing Squid (Web Host endorsed by WordPress)
  • Child/Sub skins that can be applied with relative ease

After reviewing the claims made by others that used thesis (decreased bounce-rate, pagerank bump, etc.) I decided to give it a try.  I fronted the $87 and purchased the individual license.

As Thesis version 2.0 rounds the corner, here is what I found with version 1.7, the current stable release.

  1. Thesis installs fast, and is very small.  It uses minimal server resources because there is barely any images in the entire thing.  In addition, there was a noticeable loading time difference over most other themes I’ve used.
  2. Customization is pretty easy for the basics.  We’re talking changing navigation menu color, adding pages to the menu, and changing from 1, 2 and 3 columns.  However, this is where the simplicity stops.  Thesis was incredibly hard to customize as a non-coder.  Doing something as simple as finding where to add some custom code was incredibly tricky.  Granted, someone adept at coding PHP could probably fly through this.  But many people use WordPress because it is simple, easy and fast.
  3. The “skins” available for Thesis are quite lame.  I could find no skins that wowed me or offered any eye-pleasing design.  It seems that Thesis offered two possibilities: make my own boring design, or use someone else’s boring design.
  4. I liked the idea of using an premium SEO theme, one that would help me reach more people.  What I found was just that, a theme with major SEO muscles, but wasn’t much to look at or work with.  I spent two days trying to learn the inner workings of Thesis, and failed.

Regardless of your feelings on the matter, it is worth checking out Thesis Theme if you’re interested in converting your current theme to an SEO rockstar.  If you can code, try it out.  If you’re a novice at the coding side of things, you might want to check out Themeforest and get a shiny, out-of-the-box theme.

6 tips for making your blog stand out

With hundreds of thousands of blogs being created every day, yours will take a lot to stand out in the crowd. These tips have been assembled from years of experience navigating the blogosphere. Stick to these 6 principles and you’ve got a pretty decent chance of making it.

1. Use a custom design

This is less difficult or expensive as you may think. There are tons of beautiful themes and templates available for blogs. Find the one that best suits your needs (see #6) and customize it by adding a unique background, menu, icons, etc.

Using some of the online marketplaces like Graphic River, you can find new images to spice up your design that is both unique and aesthetically pleasing.

2. Give away something (quality) for free

One of my first blogs found success in giving away a premium quality CMS template for free. This helped in almost every component of my blog. It encouraged link building, increased credibility, and encouraged repeat visits.

The investment is well worth the return. Give away a quality asset like a theme, icons, or something else related to your blog topic. You will find an increase in traffic, backlinks and favorable mentions on other sites.

3. Post frequently (reference other article)

This article discusses this topic further, but you should respond to your readers and post often. Don’t flood your blog with content so that readers can’t filter through it all and quality suffers. However, posting on a regular and frequent schedule will build credibility and show readers you can be depended on for quality content.

4. Develop relationships

There’s no subsitute for pounding the internet pavement and building relationships. All relationships matter, but focus on connecting with others who share your passions and topics. I regularly reach out to other blogs that I follow.

Reaching out can be guest blogging, exchanging links or collaborating on a freebie release. (See #2)

5. Be unique

The web is full of duplicative, useless content. There is a special place in hell reserved for those who saturate the web with boring content meant only to encourage ad clicks.

Have you noticed the increase in “list” sites? Mashable.com and Tutorial9 are just some examples of websites that create helpful posts of lists like “100 of the best free WordPress themes”. Your content should be unique, informative and easy to read. If you can do this, the links and traffic will follow.

6. Leave out the excess (focus on the content)

The big content management systems (WordPress, Joomla, Drupal, etc.) offer countless addons and plugins. These can be both helpful and harmful to your blog. Don’t think that the coolest features are necessary. Focus on quality, informative content and leave the fancy sliders and effects out.

7. Be patient

The top blogs were not made in a day. Popularity, traffic, links and credibility are earned over time. If you’re passionate about a topic, you will continue to be motivated by changes and innovations. Be patient, offer consistent quality and useful content that people can expect every time they come back.

Tips to make your website User Friendly

Almost all businesses are going online these days but most of the business owners completely ignore the importance of a User friendly website. Getting a website is Simple but still most of the website designers don’t give any attention on how to provide a friendly experience to the visitors of the website. User friendly website not only makes the overall experience of your Customers Happy but it would also help in increasing conversion rate and online revenues. In this article, I am going to discuss few tips which would help you to make your website more user-friendly.

Loading Time: Nobody would like to wait for your website to get loaded. Many people are still using dialup connections for accessing the web. Hence your website should have low loading time. An idle website should load in 8 seconds. You can reduce the loading time of your website by avoiding excessive use of Flash, pop-ups and other unobtrusive elements. Also you can use image compressors to reduce the page size.

Proper navigation: Make sure that your visitor can access the important pages of your website easily. Make it easy for your visitors to find information they are looking for.For eg: If your website is an ecommerce store, link to page with shipping information or contact us page. Try to provide shortest and simplest path to your visitors to complete a process. Replace all broken links on your websites with new urls.

Browser Compatibility: Your Website should be compatible with all the major Browsers like Firefox, Internet explorer, Opera, Google Chrome. Most of the time a website which looks good in one browser doesn’t looks well in another. Make your website compatible for all browsers so that you do not lose any customers.

Proper Color Combination and Font Size: Take Care of Aesthetics while designing your website. Your Website should be pleasing for visitors eyes. Avoid Excessive use of Bright Colors or small Font Size which makes your website very hard to read. Select Color Combination and Font size of your website according to your Target Audience. For eg:- If your website is for aged people, text should be easy to read and If your website is basically for kids you can use bright colors like red.

Above the Fold: Above the fold means the portion of the page which a visitor can see without scrolling the page. Put all the important elements of your Website like call-to-action link, Features of the product etc above the fold.

Relevant Titles and Headlines: Use Relevant titles and headlines for each page of your website so that user could feel that he is on the right page. Start your Headlines with keywords which can grab user attention and help user to find information quickly and easily.

User Friendly Urls: Don’t use Dynamic Urls which are generated automatically by your website Friendly. Make them short so that it would be easy to remember or share. Try to include relevant keywords in url so that user can get the idea of the content on the page by seeing its url.

These are the few tips which can guide you to start the process of making your own Website user friendly.

 

12 Well Designed BlogSpot Blogs

There are some fantastic Blogspot blogs out there. But all too often I see fantastic content laid out in a cookie cutter style theme that I have seen 100’s of times before. I decided to make it my mission to find some well designed and unique blogspot blogs to showcase. Below are 12 Blogspot blogs that have either unique or well designed themes:

Nobs Tutorials

IT Log

Your Jobs

Popcorn Not Included

Music From The Pants

Simon So

Bicycle Design

The Brand Builder

Blogger Templates

Firewalker

Designklub

Chicken Girl Design

Food For Design

All The Best

Update: Added 2 more: nobs Tutorials and IT blog to the top of the list.

www.pingable.org

Technorati Top 20 Validation Woes – Who Has The Most Errors?

How important is XHTML validation? Only one of the top 20 blogs on the Internet validated without errors, with another topping out with a total of 630 validation errors. So is validation important. I think most of these A-list blogger’s would have you believe it isn’t. Check out the list:

Technorati Top 20

Rank Blog XHTML Validation
1 WordPress Development Blog Passed validation
2 Arstechnica Failed validation, 22 Errors
3 Lifehacker Failed validation, 42 Errors
4 Gizmodo Failed validation, 84 Errors
5 Perez Hilton Failed validation, 99 Errors
6 Seth Godin Failed validation, 113 Errors
7 Tree Hugger Failed validation, 139 Errors
8 Engadget Failed validation, 166 Errors
9 Readwriteweb Failed validation, 178 Errors
10 Mashable Failed validation, 178 Errors
11 icanhascheezburger Failed validation, 228 Errors
12 Problogger Failed validation, 284 Errors
13 TechCrunch Failed validation, 288 Errors
14 TMZ Failed validation, 298 Errors
15 Post Secret Failed validation, 310 Errors
16 Huffingtonpost Failed validation, 328 Errors
17 Official Google Blog Failed validation, 329 Errors
18 Daily Kos Failed validation, 397 Errors
19 Boingboing Failed validation, 437 Errors
20 Blog di Beppe Grillo Failed validation, 630 Errors

The main reason validation is important is that Non-valid pages are relying on error-correction by a browser to display the page correctly, this will vary depending on the browser. I guess I share the sediments of most people on this topic, if the Official Google blog doesn’t validate, why should I care if mine doesn’t. There are many things  that can cause errors, such as scripts, plug-ins and widgets. I feel as a blogger you need to weigh the value that these bring versus the value you loss by not having a valid XHTML page. Other validations issues such as not setting alt text for images are less forgivable and should be followed. What do you think?

www.pingable.org

5 Simple CSS Tricks

  1. CSS Image Replacement

    System fonts can look ugly, and appear rigid. Using CSS you can replace text with a beautifully formed anti aliased image, yet still have all the accessibility and SEO benefits of text headings.

    Inline:

    <h1>Hello World</h1>

    CSS:

    h1 {
    display:block;
    width:100px;
    height:0;
    padding:30px 0 0 0;
    background-image:url(“heading.gif”);
    overflow:hidden;
    }

    Example of fonts

    The first image is a system font in the browser, see the edges of the “S” are rigid. The second is the same font as an image, the third is a non system font with a shadow, because you can use any font and apply effects to them when using Image Replacement.

  2. Rounded Corners Without Using Images

    To create CSS objects that have rounded edges without using images you can use the following technique:

    Inline:

    <div id=”container”>
    <b class=”rtop”>
    <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
    </b>
    <!–content goes here –>
    <b class=”rbottom”>
    <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
    </b>
    </div>

    CSS:

    .rtop, .rbottom {
    display:block
    }
    .rtop *, .rbottom * {
    display: block; height: 1px; overflow: hidden
    }
    .r1 {
    margin: 0 5px
    }
    .r2 {
    margin: 0 3px
    }
    .r3 {margin: 0 2px
    }
    .r4 {margin: 0 1px; height: 2px
    }

  3. RSS Feed Icon Without Using an Image

    With the increasing importance of RSS, finding crafty ways to display an icon is a useful skill. This method displays a tidy RSS icon without using an image.

    Inline:

    <a href=”http://pingable.org/feed/” class=”feed”>FEED</a>

    CSS:

    .feed { border:1px solid;
    border-color:#FC9 #630 #330 #F96;
    padding:0 3px;
    font:bold 10px verdana,sans-serif;
    color:#FFF;
    background:#F60;
    text-decoration:none;
    margin:4px;
    }

  4. Size Fonts Without Using Pixel Units

    It is important to size text using a method that is not absolute, so it can be enlarged for better visibility in a browser.

    CSS:

    body {
    font-size: 80%
    }

    p {
    font-size: 1.1em;
    line-height: 1.2em;
    }

  5. Using Images For Bullets

    An easy method to create list with images as your bullet points:

    Inline:

    <div id=”navcontainer”>
    <ul id=”navlist”>
    <li id=”active”><a href=”#” id=”current”>Item one</a></li>
    <li><a href=”#”>Item two</a></li>
    <li><a href=”#”>Item three</a></li>
    <li><a href=”#”>Item four</a></li>
    <li><a href=”#”>Item five</a></li>
    </ul>
    </div>

    CSS:

    #navlist {
    list-style-image: url(images/arrow.gif);

    www.pingable.org

The Top 15 Web APIs For Your Site

Machine-based interaction is a common feature of Web 2.0 sites like Digg, Facebook and Dilicious, and these days it goes well beyond simple web feeds. An application programming interface(API) is what allows programmers to write applications and widgets that interact with services on these sites. The API gives them web-based access to data and functions from such sites. For example using the GoogleMaps API one could pull data and mapping information from Google that enables users of a site to view an embedded map of the location of a business.

Although typically using an API does require some expertise in programming, many of the APIs which are being released by sites are well documented with good examples on how to implement them, WebAPI. This article also details many of the user created scripts which have been generated using the various API’s which will give end users something to play with too.

15 – MediaWiki API

With over 2 million articles Wikipedia is a valuable resource, the Mediawiki API allows access to this content. Sites based on the MediaWiki API include Wikitravel, Wiktionary, and WikiNews.

14 – Upcoming

The Upcoming API allows you to take data from the Yahoo site upcoming.org. It’s useful if you want current events information on your site.

Yahoo Upcoming

13 – Audio Scrobbler API

Last FM uses the Audio Scrobbler API to gather information about music you listen to. It is also the source of many various “is currently listening to” plug-ins for various applications.

12 – Ebay API

Ebay’s API is very comprehensive, and supports almost all major web scripting options, including flash and Ajax. It has a sandbox for testing scripts, and offers you sample script blocks which it calls widgets to help you getting started. Visit Widget Blog Ebay for some examples.

11 – Facebook API

Everyone knows about Facebook, it’s a hugely successful social networking site, that my girl friend assures me is very addictive. The site has loads of code samples, application creation guides and libraries for developers to play with. As Facebook is completely driven by user generated content it has a huge market of users just waiting to get their hands on fresh content, so for those that have the skill the Facebook API is a goldmine. Visit Mashable to read 10 awesome things built on the Facebook API.

10 – Feedburner API

As you may already know Feedburner is an RSS feed creation tool. The API gives developers a few toys to play with, the best of which is the Feedflare API which allows you to add new functionality onto Feedburner feeds.

9 – Google Search API

The Google Search API Is a AJAX Search API that lets you put Google Search in your web pages with JavaScript. Google gives you some very useful examples of sample code to use.

8 – Yahoo Search API

You may not believe it , but the Yahoo search API is actually more popular than the Google alternative. You can use it to create a simple spell checking tool or site wide search widget… useful stuff

7 – Windows Live API

The API for Microsoft’s portal contains a whole heap of different APIs for different MS services. Here is some of the applications that have been created using the API,  Windows Live API list, which includes content ranging from Halo 3 user guides to major league baseball videos.

6 – Google Ajax Feed API

With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, and easily mash up feeds with your content, and each other. It is super fast and is the quickest way to display real time RSS content on your site. Dynamic Drive’s gAjax RSS Feeds Displayer is a great example of a script created from this API.

5 – Digg API

Using the Digg API you can access individual stories, comments, or data on particular user activities. For some examples of the Digg API is action check out: 7 awesome things built on the digg API, Who’s digging You and Digg Comment Spy.

Digg API Flickr API

4 – Delicious API

Although the Delicious API is not as complex or comprehensive as most of the other APIs featured, it is so simple, you can see results just by typing a URL into your browser. You can also write data to Delicious such as adding bookmarks or renaming tags. for example:

http://del.icio.us/api/posts/add?description=Pingable&url=www.pingable.org

..would add Pingable as a bookmark in to your delicious account after a username and password challenge.

3 – Google Maps

The Google Maps API is probably the most implemented API on the net. It is used in applications such as Google flight simulator.

2 – Flickr API

The Flickr API gives two way access to the site and some of its features and photos. Tasks that can be completed using the API include creating new sets, editing comments, changing photo notes, as well as pulling existing data from the site. Here is some examples of the Flickr API in action.

1 – <a
href=”http://www.youtube.com/dev”>YouTube API

A very popular Number 1, because the YouTube API is both simple, and purely limited only by your imagination. Data which can be pulled from YouTube includes: Video titles, rating, length, tags, url, your favorites, your friend list and the thumbnail location. For an example of the YouTube API in action check out : CoverPop, and you may also want to check out: A YouTube and Google Map Mashup.

Other API resources: GotAPI , API finder, Mashery and a full list of Google APIs.

Digg and flickr icons from: ilemoned.com Web 2.0 Services Icons

Some of the content in this article was inspired by “The Top 20 APIs for your site” article in issue 167 of .net magazine.

www.pingable.org