30th Mar 2011

Twitter Upgrades Embedded Tweets


Twitter has updated its developer tools, making embedded tweets more interactive and functional. The new tweets allow users to reply, retweet or favorite a tweet directly from its embedded version.

Twitter introduced embeddable tweets last year — and while the end result has been quite effective, the set-up process involved in actually embedding tweets is more trouble than its worth. Fortunately, plugins like Blackbird Pie for WordPress have made the process less cumbersome.

The new functionality of embedded tweets comes courtesy of a developer tool called Web Intents. Users must first insert a script on a page that will use the intent. Those that already use the Tweet button on their websites will be able to start using Web Intents right away.

The integration process is still surprisingly cumbersome — especially for users that just want to easily and quickly embed a tweet. But the code itself looks a lot more clean. Already, WordPress.com users can take advantage of Web Intents powered embedded tweets. We imagine that the WordPress.org version of that plugin will be updated soon.

There are some cool things about Web Intents. Not only can content creators embed a tweet on their website, they can also embed a pre-filled Twitter message window. Web Intents are mobile-friendly and work with both iOS and Android, which is a nice touch.

The fact that users can send a tweet directly from a webpage or retweet messages without having to use a third-party program or extension could make for some interesting possibilities — at least for web developers and app makers that want to add more seamless social ability to their sites.

Developers, what do you think of the new Twitter Web Intents? Let us know in the comments.

[via ReadWriteWeb]

More About: blackbird pie, twitter, web intents, WordPress.com

For more Dev & Design coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

13th Feb 2011

37 New Digital Media Resources You May Have Missed

icon heads image

Notice something different in the air? No, it’s not hordes of people rushing out to buy Valentine’s Day presents — we’ve added a section to our weekly roundup.

We’re still bringing you all the tools and resources from the past week or so, but we’ve also combed through to pull out some of the best, most useful, or most interesting reads as collected by our editors. These include stories on the smart grid, a guide to Facebook privacy, and a break down of how 3D technology actually works.

Looking for even more social media resources? This guide appears every weekend, and you can check out all the lists-gone-by here any time.

Editors’ Picks

Social Media

For more social media news and resources, you can follow Mashable’s social media channel on Twitter and become a fan on Facebook.

Tech & Mobile

For more tech news and resources, you can follow Mashable’s tech channel on Twitter and become a fan on Facebook.

Business

For more business news and resources, you can follow Mashable’s business channel on Twitter and become a fan on Facebook.

Image courtesy of Flickr, Rosaura Ochoa

More About: business, Features Week In Review, gadgets, List, Lists, Mobile 2.0, social media, tech, technology

For more Social Media coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

13th Jan 2011

Teens In Tech Launches Startup Incubator for Young Entrepreneurs


Beginning Thursday, young entrepreneurs and developers have a new advocate and a new aspiration: the Teens in Tech Incubator.

Teens in Tech launched three years ago as a support network for young people who were starting their own companies and getting involved in the tech world. Now, the organization is taking the next logical step by providing hands-on instruction and mentorship to young teams.

The incubator will begin this summer and run for about eight and a half weeks. Only teens ages 13 through 19 who are local to the San Francisco Bay area can apply for this session, and teams should have at least one developer who can code the project at hand.

Appcelerator in Mountain View will be providing the physical space for the startups to work from, and Teens in Tech will also be courting sponsor companies to fund the program.

Other benefits will include free web hosting, marketing and PR, and legal advice.

The application deadline is March 18, 2011, and the program will begin June 20. On August 10, Teens in Tech will hold a Demo Day for incubator teams to show their products to press and VCs.

Teens in Tech co-founder Daniel Brusilovsky says one of the biggest issues facing teen entrepreneurs is that “people don’t take them seriously. So we’re putting them in a room with 30 people who do take them seriously and who want to help them.

“Most people give these young entrepreneurs a thousand reasons why they shouldn’t jump off a cliff. I’m giving them 1,001 reaons to do it, and we’ll help them grow wings as they’re falling off.”

Brusilovsky speaking at the Teens in Tech Conference, one of the organization’s most successful endeavors.

Teens in Tech has built a substantial network over the past three years, both in terms of having broad connections in the sphere of young developers and entrepreneurs and in having solid ties to a large group of all-star mentors in their twenties and thirties. Many of these mentors are serving as advisers for the incubator.

In fact, this incubator’s roster of mentors is one of the most impressive things about it. Teen entrepreneurs and developers will be schooled in design by Jesse Thomas of JESS3 fame and über designer Joey Primiani. They’ll get coaching from investors like Paige Craig. And they’ll get coding and marketing tips and advice from the makers of Seesmic, Twilio, PBWorks, Disqus, Posterous, Eventbrite, Paypal, Salesforce and more.

“When we talk with young entrepreneurs and ask them about their struggles,” said Brusilovsky, “the top thing they always say is, ‘I wish there was someone I can go to and ask a question or get some advice.’ That was something we took to heart… so we have some fantastic mentors that are going to help shape these companies.”

Brusilovsky says his incubator is “not looking to compete” with organizations like Y Combinator and TechStars, which he said were his inspiration. “For them, this is their business model. For us, this is a learning expereince.

“Our number one goal is that every person in this program walks away learning at least five news things about startups that they didn’t know.”

The first season of this incubator will involve five startups. The Teens in Tech team hope to grow that number as well as the number of cities with Teens in Tech incubator programs in the years to come. Brusilovsky also hopes to hold some events for teen entrepreneurs and developers during the school year.

Along with giving solid legal advice for these business-owning minors (Brusilovsky says having parents involved is key), the Teens in Tech co-founder told us, “One of the most important things we can teach is balancing school, personal life and startups.”

Image courtesy of Flickr, nimbuzz.

More About: daniel brusilovsky, incubator, paige craig, startups, teens in tech, y combinator

For more Startups coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

23rd Dec 2010

HOW TO: Make the Most of TextMate


The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

For web developers, a key part of the toolkit is a solid text editor. Vi and Emacs wars aside, there are lots of good choices for web developers, ranging from the ultra-sparse to the full-on IDE.

One of the most popular text editors for Mac OS X among coders is TextMate. Despite not receiving many major updates since 2007, TextMate is still a favorite amongst developers, front-end coders and even writers (a few of Mashable’s bloggers use TextMate to compose first drafts of blog posts).

On its own, TextMate is a good program. With the right add-ons and modifications, however, TextMate it can be a dream come true. Even if we never see a TextMate 2, here are some tips to making the most out of your TextMate installation.

Install Some Themes

Out of the box, TextMate comes with a handful of themes, but there are many more options for your text editing enjoyment.

In a previous post, I compiled some of my favorite TextMate themes from over the years and put them together in a handy package on GitHub.

To install a theme, just double click it. TextMate, like other text editors, is designed for monospaced fonts. Mac OS X comes with several choices, including Menlo, which made its appearance in Mac OS X 10.6 Snow Leopard.

If you want to further explore your programming font choices, check out this article, written by my friend Dan Benjamin, which provides a great overview of some of the most popular choices.

Add Some Plugins

Despite not receiving any major updates for well, years, TextMate remains a favorite amongst old and new developers. If I had to pick a single reason, it would be the extensible nature of the program.

Simply put, TextMate can be extended and improved via the use of plugins and bundles. Plugins can impact the program as a whole, whereas bundles are specific collections of commands, snippets and shortcuts.

Some of my favorite TextMate plugins include:

  • WebMate — This lets you preview and edit HTML content in TextMate.
  • MissingDrawer — This adds a better project window interface to TextMate.
  • SVNMate — A nice SVN integration for TextMate.

What’s even better than just downloading the plugins is downloading the plugins and a set of UI modifications. One of my favorite TextMate “packages” is Green Moleskine, which has recently been updated to version 1.2. The new version includes Snow Leopard support for some of the UI modifications.

Green Moleskine also includes SVNMate, WebMate and MissingDrawer, but the link to MissingDrawer on GitHub has an updated version of that plugin.

For new TextMate installations, I usually just start with Green Moleskine and then build out.

Get GetBundles

Without a doubt, bundles are my favorite part of TextMate. I never thought I would be the type of person who got religious about my text editor, but the bundles feature in TextMate has made me a disciple.

Over the years, TextMate bundles have been created for practically every web framework and task you can imagine. You can find these bundles online and double click the *.tmbundle file to install.

But what if there was a better way to discover and install bundles, within TextMate itself? There is, and it is called GetBundles. GetBundles has a graphical interface that allows you to search the official TextMate bundle repository, the review queue and GitHub. The GitHub support is really slick, because these days, that’s where most of the updates and new code ends up being released.

The easiest way to install GetBundles is to pop open Terminal in Mac OS X and paste in the lines that Trey Piepmier thoughtfully setup on his blog.

Once GetBundles is installed, you can search the various repositories and click on a bundle to install it — and also check for updates to the bundles you already use.

Bundle Bonanza

Once GetBundles is installed, the final step to an awesome TextMate experience is track down some bundles.

These are a few of my favorites:

  • Blogsmith Bundle — Back when I wrote for TUAW and DownloadSquad, my colleague Brett Terpstra created a bundle to help us with our blogging. He did this because the backend of the publishing tool we used was unable to connect to XML-RPC clients like MarsEdit. This bundle, which included things like the ability to select a group of words and quickly insert a link, search archives or add tags and other information to a post, became something that I was so reliant on, I commissioned Brett to write me a Mashable-specific add-on bundle when I started working here. If you do any type of web writing, this Bundle, which works with MultiMarkdown, is an absolute gem.
  • MultiMarkdown Bundle for TextMate — John Gruber’s Markdown syntax is a format for writers who want markup that is readable and fast. MultiMarkdown adds even more features in the form of a TextMate bundle.
  • CSS3 Bundle — David DeSandro (of jQuery Masonry fame) created this excellent CSS3 bundle for TextMate, complete with browser-specific prefixes.
  • HTML5 Boilerplate Bundle — Darren Wood made this bundle, which puts all the HTML5 Boilerplate goodies at your fingertips.

How have you tricked out your TextMate install? Let us know in the comments.

More Dev & Design Resources from Mashable:

- Hacker Web Design: Words of Wisdom for Building Great Apps
- 5 Better Ways to Read “Hacker News”
- A Beginner’s Guide to Integrated Development Environments
- 10 Chrome Web Apps to Check Out
- HOW TO: Make Your WordPress Blog More Like Tumblr

More About: IDEs, mac apps, mac software, software, text editors, textmate, web development series


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

01st Dec 2010

5 Better Ways to Read “Hacker News”


The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Hacker NewsHacker News is one of our favorite places to find interesting stories, learn about apps and side projects from the dev community and stay connected to the early stage startup scene.

The only problem is the interface. It’s simple and easy to get used to, but it’s also a trifle — dare we say it? — ugly.

We’re not the only ones with the same complaint. Over the years, many a developer/designer has tried his or her hand at reimagining the Hacker News interface. Here are a few we like and think are interesting.

1. Hacker News UX

This is a clever extension for Google Chrome users. It basically delivers the same no-frills UI to which you’re accustomed, but splits it into two columns. On the left, you will see the top stories, and on the right, the newest, giving you an integrated, at-a-glance interface for exploring both the popular and the fresh on Hacker News.

Cooler still is the tooltips feature. When you hover over a username on Hacker News, you’ll immediately see the user’s stats and bio.

Another Chrome extension of interest is Hacker News OnePage, which, as the more astute among you might guess, creates a single-page interface in two columns, with top stories on the left and individual stories’ comment threads on the right.

2. hckr news

This site is, as the creator writes, a minimalist Hacker News alternative that displays a “chronologic list of items that have made it onto the Hacker News homepage.”

You can filter this list by number of posts — just see the top 10 if you’re pressed for time; if you’ve got a couple hours to burn, you can browse through the top 50%. You can view what’s new or easily catch up if you’ve spent a few days offline — like, say, if you were in a coma or otherwise unable to access the Internet.

The thoughtful chap who designed hckr news also made Chrome and Safari extensions that help manage and monitor comments on the site.

3. Flipboard

We’ve gone on before about how Flipboard is a great, gorgeous interface for Twitter and general, end-user social media tools, but we’re not alone in thinking it’s also an awesome way to digest Hacker News. It brings Flipboard’s typically glossy, magazine-like interface to the bare-bones feed, rendering it easier to skim and read.

Polaris Venture Partners’s Ryan Spoon writes that the way the Flipboard app renders Hacker News is “inspiration to (re)consider product design.”

4. Hacker Newspaper

Suppose you don’t use Chrome and don’t own an iPad. Here’s a UI you can try out in any browser.

As you might gather from the name, this “miniapp” gives Hacker News a traditional newspaper-like skin. Its creator considered that the “complex, structured heirarchy” of a print paper had a lot of sophistication that most for-geeks publications lack. Hacker Newspaper marries this heirarchy with an hourly update from the Hacker News feed via a Python script. It’s easy to read and easy on the eyes, as well.

5. “Hacker Monthly”

If there’s anything more old school than a print-like interface on the web, it’s an actual print publication.

Hacker Monthly is just that: a print curation of the top-rated articles and stories posted to Hacker News. You can subscribe to the print version for $88 per year, and you can get a year-long digital subscription for $29. Single editions run $10 plus shipping for a physical copy or $3 for the digital edition.

And just think of all the time you’ll save when you don’t have to make — or, heaven forbid, read — those troublesome comments.

What Did We Leave Out?

Aside from “the point of Hacker News,” is there anything you think we’ve missed? We’d love to hear about your favorite Hacker News redesigns or alternatives in the comments.

Series supported by Rackspace

rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

- 11 Trends in Web Logo Design: The Good, the Bad and the Overused
- Essential Web Design Advice From a Wireframing Master [INTERVIEW]
- 10 Beginner Tips from PHP Masters
- 10 Intermediate and Advanced Tips from PHP Masters
- 4 Game-Changing Trends in Web App Design

Image based on photo from Flickr, dsevilla.

More About: Flipboard, hacker monthly, hacker news, hacker news UX, hacker newspaper, hckr news, UI, UX, web development series

For more Dev & Design coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

23rd Nov 2010

Aviary Debuts HTML5 Photo Editor


Creative web app powerhouse Aviary has just announced its latest product, an HTML5-powered photo editor.

Like Aviary’s other apps, the HTML5 photo editor — code named Feather — is easy to use and surprisingly powerful. Beyond its use of HTML5 (as opposed to Flash, Silverlight or other RIA frameworks), what sets this app apart is that it’s designed to be portable and embeddable.

Aviary already has a very solid Flash-based image editor, Phoenix. It’s been around for over two years and has a wealth of features. So what makes Feather different and special?

On its blog, Aviary discusses the the rationale for building Feather. First, Aviary says that it knew it wanted to be able to reach out to the world of creativity happening outside of Aviary.com. Because Feather is portable and embeddable, developers can directly integrate it into their sites and apps. That means that users don’t have to leave one page or experience in order to complete a task and then shift back.

Furthermore, as powerful as Phoenix and some of Aviary’s other image tools are, many third parties who use Aviary’s products were requesting a simpler tool. You don’t always need to have a full-fledged photo suite. If a website just wants to make it easy for a user to upload a product photo and maybe add a caption, they probably don’t need to the ability to create multiple layers, make magic wand selections and add different type of brush effects.

So with Feather, Aviary decided to take the most popular functions of Phoenix and put it in one portable package. Plus, third-party developers can customize what features they want to include or exclude. The great thing about being in HTML5 is that the tool is easier to integrate and embed into third-party solutions. Aviary also says it has plans to open source the editor and create a mobile version too.

Already Everloop, Fashism, Shopify and other companies have signed up to integrate Feather into their apps.

How it Works

If you want to get a feel for Feather and see how it might be useful in your project, head to http://www.aviary.com/html5 and click on the “See it in Action” tab. Then upload an image and get started!

While simple in nature, the app is really powerful. I uploaded a photo from my online collection and then applied one of the pre-formulated “effects” — in this case, “Instant.” The results were a photo with cooler tones and already framed in a Polaroid. I was then able to add text, save the image and download the file.

Super simple, super effective. The fact that developers can take advantage of this portable toolset on their own sites is super cool. Even better, the functionality of this product is totally top-notch.

Aviary deserves kudos for showing off what HTML5 can do. Do you use any web-based image editors? What do you use and why?

More About: Aviary, feather, HTML5, html5 image editor, web apps

For more Dev & Design coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

10th Nov 2010

Mozilla Launches F1, a New Way to Share Links


Today, Mozilla’s Messaging group launched F1, a Firefox extension that aims to make sharing content around the social web much easier.

For webmasters and web surfers alike, seeing a row of a half-dozen “share this” buttons above or below every piece of web content can be both visually distracting and existentially confusing.

Many companies are building work-arounds for this common interaction design problem of the digital age, and Mozilla has just thrown its hat into that particular ring.

F1 gives users an all-in-one frame above the content they’re viewing. Once your accounts are connected, you simply click the tiny F1 icon in the toolbar to share the page you’re viewing with friends on Facebook, Twitter and Gmail. (Those three services were chosen as the first three supported sharing mechanisms for F1 because of their popularity and OAuth implementation.)

In an ideal world, if every web user was a Firefox F1 user, publishers wouldn’t have to provide the usual slew of sharing buttons, and users wouldn’t have to connect their social accounts and login credentials to scores of websites around the Internet. Sharing would be more secure, simpler and (let’s face it) a lot easier on the eyes than it is now.

Here’s a brief demo of the new feature:

As a Mozilla Labs project, F1 is still being expanded. As Mozilla designer Bryan Clark wrote today on the company blog, “[Eventually], the system should know which sharing service you use, and offer to use those! That will require sharing services to advertise to the browser that they offer a sharing API and the browser to see which services you use.

“Furthermore, sharing is not a standardized activity, so some protocol is likely needed for user agents to offer users the service they want without having to know about all of them.”

He also emphasized that publishers can also experiment with this feature; interested parties should check out the F1 wiki for details.

While we’ve seen similar cross-browser, all-in-one sharing frames and toolbars in the past, this offering from Mozilla is particularly well designed. In fact, we wish there was a cross-browser standard for social sharing; all these buttons have got to go at some point.

What’s your take on F1 so far? Let us know your opinions in the comments.

More About: design, f1, Firefox, firefox add-on, interaction design, mozilla, social sharing, web design

For more Social Media coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

29th Oct 2010

Microsoft Shifts From Silverlight to HTML5


Adobe isn’t the only company being tempted by the sweet taste of HTML5, Microsoft has a hankering for the stuff too.

Despite its past efforts to shape Silverlight into the leading cross-platform runtime for the web and the desktop, Microsoft now says that its strategy and plans for Silverlight “has shifted.”

ZDNet’s Mary-Jo Foley spoke with Bob Muglia, the president of Microsoft’s server and tools business about the lack of focus on Siverlight at the company’s Professional Developers Conference this week.

Muglia’s response was pretty telling. Although he reaffirmed Microsoft’s commitment to making Silverlight the development platform for Windows Phone, he noted that the cross-platform solution Microsoft sees going forward is HTML.

Speaking with Foley, Muglia said, “HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform.”

This is a big admission from the company that has spent years trying to push Silverlight as a cross-platform technology forward. As a video technology — indeed even as an application technology — Silverlight and WPF are actually pretty nice. I attended a two-day XAML workshop held at Microsoft’s Atlanta offices in 2009 and was very impressed with the capabilities and the toolsets that were possible within Silverlight.

However, despite the prevalence of the .NET platform on Windows and in the enterprise, Silverlight has had a problem gaining traction across the web. With the exception of the Olympics and a few other live broadcasts, you almost never see Silverlight used on the web.

Likewise, the number of desktop applications built using Silverlight are nascent in comparison to the growing number of Adobe Air applications. Aside from Seesmic Desktop, it’s hard to think of any cross-platform apps that are built using Silverlight.

All the while, Microsoft is increasingly embracing HTML5. The company’s recent launch of Internet Explorer 9 beta was promoted using a number of different HTML5-specific web pages and promotions. Silverlight may not have been mentioned much during PDC, but HTML5 certainly was.

It’s clear that Microsoft — like Adobe, Apple and Google — sees that HTML5 is the technology that will work across the broadest stretch of devices — and more importantly, will work on future devices.

Yes, the W3C has stated that the HTML5 spec isn’t yet ready for full use, and in a broad, global sense, this is true. However, when you look at the types of devices that individuals will be buying today and tomorrow, and not the device they already own, it’s clear that HTML5 is the technology that is going to have built-in support.

As a technology, Silverlight has a lot of promise and we think it is still interesting. Still, we can’t help but think Microsoft is making a better strategic move to focus on HTML5 as its cross-platform solution going forward.

Reviews: Google, Seesmic Desktop, Windows, adobe AIR

More About: HTML5, microsoft, pdc, Silverlight

For more Tech coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

15th Sep 2010

Why Designers and Developers Should Care About Internet Explorer 9


This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Today, Microsoft is releasing the first public beta of of its next-generation web browser, Internet Explorer 9.

With the release of IE 9, Microsoft is aiming at a total reboot of its venerable (and often derided) web browser. We’re talking renewed emphasis on performance and an investment in web standards.

Still, for many web developers and designers, IE is viewed as a necessary evil. You support it and test around it because of its large userbase (a userbase that has been in steady decline over the last six years), but it isn’t taken very seriously.

With IE 9, Microsoft is hoping to change that. Here are some of the big reasons that designers and developers should care about the latest version of Internet Explorer.

1. Standards, Standards, Standards

In the early days of the web, Microsoft was actually a pretty involved party when it came down to drafting and implementing web standards. Microsoft is a member of the W3C, but over the last decade or so, standards and IE have rarely worked well together.

This is frustrating because it means that designers and developers have to designate little work-arounds to make a web page work with IE. With Internet Explorer 9, it looks like fewer and fewer work-arounds will be necessary.

IE 9 boasts support for lots of the features that are in the HTML5 spec, including:

  • HTML5 audio and video elements
  • The new WOFF web font format
  • SVG
  • HTML5’s Canvas bitmap
  • ECMAScript 5

IE 9 also offers much more robust and true CSS3 support. In other words, more and more of the sites and features you build for Firefox 4, Opera, Chrome or Safari are going to work without IE 9 the same way. This is great news for designers and developers alike.

2. Performance Gains

The new IE 9 is faster and more efficient. In the modern browser wars, JavaScript is becoming the new battleground for speed supremacy. Right now, Google is really taking charge with its V8 JavaScript engine, but Microsoft isn’t backing down with its new engine, dubbed Chakra.

Chakra is similar to V8 in that it can run JavaScript directly from the processor, rather than through some sort of layer. That means that animations and scripts can run faster and with less overhead.

Charka has also been optimized for modern hardware, so if you’re running IE 9 on a multi-core Windows 7 machine, you can really see a big difference in performance, especially when several highly intensive web apps are open at one time.

As we’ve discussed before, Microsoft is also taking charge on making sure IE 9 has support for GPU acceleration. By using the graphics card rather than the CPU to offload things like animations, you can get higher frame rates, more detail and use less processor resources.

Microsoft showed off some of this GPU acceleration support back in June and the results were impressive.

3. More Modern, Easier to Use

Designers and developers often build and test around what browsers and versions their users use. Firefox and increasingly Google Chrome are starting to become the de facto browsers that even less tech savvy users reach for.

Chrome in particular is really gaining popularity because it has a clean interface, focuses on speed and knows how to get out of your way.

Microsoft has taken a lot of cues from Chrome’s playbook, and the UI in IE 9 makes the browser decidedly less prominent. The focus is instead on the website.

Because of these enhancements, as well as the better performance and better support for modern standards, we expect that more and more Windows users will give IE 9 a chance and consider using it as their default browser.

That means that even Mac designers and developers (like myself) need to be prepared to open up a virtual machine and run their sites through IE 9.

Your Thoughts

IE 9 is a huge step for Microsoft and we think that the current beta shows a lot of potential. For the first time in a while, Microsoft might actually help push innovation forward instead of holding it back in the browsing space.

Designers and developers, let us know your thoughts on IE 9 in the comments. Do you think this is a chance for IE to become relevant to the developer community again?

Series supported by Rackspace

rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

- HOW TO: Implement Google Font API on Your Website
- Top 10 Accessories for Typography Nuts [PICS]
- 40+ Web Design and Development Resources for Beginners
- 10 Tools for Getting Web Design Feedback
- 10 Free Wireframing Tools for Designers

Reviews: Chrome, Firefox, Google, Google Chrome, Internet Explorer, Opera, Safari, Windows

More About: Browsers, HTML5, ie 9, internet explorer, Internet Explorer 9, microsoft, tech, web browsers, web design series

For more Dev & Design coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

04th Sep 2010

35 Entertaining 404 Error Pages


“404 Not Found.” These three little words can make any Internet explorer an unhappy camper. After all, who hopes to click on a broken link or stumble upon a moved or deleted page while cruising around the web?

Luckily, some web designers have chosen to end the misery of encountering a 404 error page. Instead of letting their site readers bump heads with a nasty dead-end error message, they’ve managed to squeeze a little entertainment out of it.

Below you’ll find some of the most entertaining 404 error pages on the web. We’ve listed them alphabetically to avoid playing favorites, but they’re all worth a look. Share your favorite 404 error page designs in the comments below!


1. 501st Legion




501st Legion is a Star Wars costume organization. It only makes sense that its 404 page would play on Obiwan's famous jedi mind trick with a "weak-minded" stormtrooper.


2. Abduzeedo




Yes, Houston, a 404 is definitely a problem.


3. Apartment Home Living




A nice ol' chap comes to your assistance on ApartmentHomeLiving.com if you run across a 404 error page. Click the lovely lady peering from behind the frame for proper navigation suggestions.


4. Astuteo




"Uh-Oh! SpaghettiOs!" You know you're a part of pop culture if your jingle makes it into a 404 error page. The popular SpaghettiOs marketing jingle is here to stay.


5. Blippy




Head over to Blippy's 404 page for an adventure. Keep clicking on the boy dressed in a unicorn outfit to discover a triple rainbow! Who knew a 404 page could be so fun?


6. Factor D




In an ode to early horror films, Factor D features an appropriately horrific 404 error accompanied by a beautiful, yet terrified scream queen.


7. SureDev




Many 404 error pages apologize for the error. Not this one. It's obviously your fault.


8. Blue Daniel




This 404 error page is a beautiful depiction of "Track 404," a fictitious NYC subway line. Check it out to experience the full animation.


9. Brandstack




"You can click anywhere else, but you can't click here." Love it.


10. Center'd




Bottom line: You can't go wrong with cute kittens.


11. Chris Jennings




Most of us would like to run into a 404 error page just as much as we'd like to run into the Grim Reaper.


12. Colour Marketing & Design




When you're facing "sharks with laser beams attached to their frickin' heads," what do you expect? Definitely a 404 error.


13. CSS-Tricks




Well, that can't be good.


14. CSSscoop




Picking a 404 error page design that is consistent with your name is an appropriate move. CSSscoop chose a melting ice cream cone, with a scoop of ice cream, of course.


15. Digitalmash




Sarcasm in dire situations is always appreciated, right?


16. Good Old Games (GOG)




Try not to make any missteps on GOG, or you'll end up lost in the cosmos.


17. HomeStarRunner.com




Insulting your readers doesn't usually help, but this 404 made me chuckle.


18 Hoppermagic




Hoppermagic chose to stick to its brand imagery when creating its 404 page.


19. iFolderLinks




There's just something about a really frustrated baby that catches your attention. And if you've made it to this 404 page, you probably feel his pain.


20. Itchy Robot




If you can't think of something clever to say on your 404 page, just write exactly what your users are thinking.


21. Jackfig




Jackfig added a creative touch to its 404 error page, with an inspirational haiku.


22. Jolie Poupée




Jolie Poupée, creator of eco-friendly children's clothes, serves up an audience-appropriate 404 on its site.


23. Mark Dijkstra




This 404 error page is reminiscent of the kitschy tourist shirts that your lousy friends and relatives buy you when they visit amazing places.


24. Merge




Prithee, go medieval on your site's visitors if need be.


25. Milrayas




Imagery always makes a 404 more entertaining.


26. OrangeCoat




Some 404 error pages do a wonderful job of explaining to users exactly what caused the 404 error. OrangeCoat provides a fun decision tree for lost web surfers that is sure to help them along their merry ways.


27. Oroza




Have fun with colors, shapes and exclamations.


28. Sick Designer




Sick Designer captures the depression that a 404 can cause on its error page.


29. Student Market




How fitting that a student-centric site would feature an addition problem on its 404 page.


30. The Brand Surgery




This page just pops. We like it.


31. The North Face




For true entertainment value, why not just tell a story? The North Face does just that by creating a tale about link-eating mountain goats.


32. Tinsanity




You might have been pwned, burned, punk'd or rickrolled recently, but have you been 404'd? Click here to join the party.


33. TK Designs




Excitement! Adventure! Ahhhhh, where I am?!


34. Urban Outfitters




Our sentiments exactly.


35. Urban Pill




If, after searching for hours, you still can't find the page you were seeking, Chuck Norris probably has it.

More Web Design Resources from Mashable:

- 12 Beginner Tutorials for Getting Started With Photoshop
- Use Adobe Fonts in Your Own Web Designs
- 10 Essential Free E-Books for Web Designers
- 12 Beginner Tutorials for Getting Started with Adobe Illustrator
- 6 New Mac Apps for Designers and Developers

More About: 404, 404 error pages, error page, web design, Web Development

For more Dev & Design coverage:


Posted by Posted by Yogi Liman under Filed under Did You Know... Comments No Comments »

« Previous Entries
Next Entries »