On some websites visited links look exactly the same as unvisited links. This doesn’t always cause problems, but sometimes it can slow you down. As an example I’ll compare two sites that have lots of outgoing links: Delicious and Twitter.
Let’s say you’re looking for interesting reading about a particular subject like… HTML5. There will be plenty of links tagged with HTML5 on both Delicious and Twitter:
Posted in Accessibility, Quick Tips, Usability.
  |
In the mid-80s the desktop publishing revolution began with the introduction of the Mac Plus, Aldus PageMaker and the Apple LaserWriter printer. It took quite a few years for these tools to make an impact on the design and publishing world, but once they did, there was no looking back.
In 2010 we see a similar revolution starting to take shape with web fonts. Even though @font-face was introduced in the CSS2 spec in 1998, it wasn’t until this past year that all in-use web browsers added support for it. This year we’re seeing a wave of web font services being marketed, and this could have a profound impact on web typography.
Web font services, like Typekit and now the Google Font API, have captured a lot of attention. But in the past 3 months there’s been an explosion of new services; services like Fonts Live, Fontdeck, Webtype and others with conjugated names involving “Font” or “Type”.
While all of these services are unique, they each provide a tool for web designers and developers to legally display professional fonts on their website. The guide below compares 10 of these services, breaking down the pros and cons of each. We hope this comparison will help you make a more informed decision on which service to use when you venture into the ever-growing, sometimes confusing, world of web fonts.
[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]
Typekit, Inc. is a popular web font service from Small Batch Inc and founder Jeffrey Veen. Typekit was one of the first services on the scene and is currently one of the most widely adopted services on the market.
Font Selection
4000 (about half of these are through the Typekit library, and the other half via licensing arrangements with foundries who sell their own web licences)
Advantages Over Other Services
Strong platform integrations. Typekit is a scaled service, with well over 80 million unique users each month.
Pros
Extremely easy setup for designers and developers, allowing integration within minutes. Integration with Google Font API and blogging platforms including WordPress, Posterous and Typepad. The full font library is available via most plans for a single low price, allowing customers to try different fonts on one site as well as use different fonts on multiple projects. Now offering Adobe fonts. Enterprise customers can self-host using their own CDN. The service allows you to host custom fonts. The simple free plan doesn’t expire.
Cons
Implementation requires JavaScript (although on the Typekit blog they list some reasons that JavaScript-based implementation has its advantages). Fonts are not available for desktop use.
Pricing
Free trial account includes the use of 2 fonts on 1 website. Paid plans start at $24.99 per year (2 sites, 5 fonts per site). The more popular plans allow unlimited font usage on unlimited domains.
Fee Schedule
Annual subscription
Setting up TypeKit is fairly straightforward. You just set the domains you want to use (the free trial site includes one domain and up to two fonts) and then build your Kit by adding fonts. A little JavaScript inserted into the header pulls in all the necessary CSS information. You can also reference the fonts in your own CSS, and use wild cards when adding to your list of allowed domains (e.g. *.domain.com will work on sub.domain.com).
As is the case with any web font service, there is a brief delay before the proper font is shown, but it’s barely noticeable. Since Typekit’s fonts are loaded via JavaScript, Typekit offers tools to control the loading process, so delays are not as noticeable to the user.
Webtype is a recent creation of The Font Bureau, Ascender, DevBridge, and font experts Roger Black and Petr Van Blokland. Webtype is all about quality and boasts “fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading�.
Font Selection
365
Advantage Over Other Services
Font quality
Pros
Quick and easy setup. Flexible pricing. Ability to host custom fonts as well as self-host. JavaScript-free integration. Desktop license available.
Cons
Some fonts are expensive compared to other web font services.
Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.
Fee Schedule
Annual subscription
Webtype was easy to set up and use from the signup process on. Just browse and purchase fonts (a 30-day free trial license is available for testing fonts) and then create projects. Select the font you want to use for each project and you’ll be given a link code and CSS selector for each font. Then you copy and paste them into your HTML and CSS files and you’re ready to go.
Make sure you click “Save� from the CSS resource page that gives you the code, or it won’t be live. Resource size is also given on this page, which can be helpful if you’re trying to estimate bandwidth usage. The load time for the font was possibly a bit slower than some of the other services here, despite the small file size of the font tested.
Fontdeck is a relatively new service by Clearleft and OmniTI. It was conceived in March 2009 by Jon Tan and Richard Rutter as a way to bring quality fonts to a wide audience while levelling the playing field for type foundries. It went into private beta in January 2010 and was open to the public in June of 2010.
Font Selection
600, with plans for this number to be doubled before Christmas.
Advantage Over Other Services
Only pay for the fonts you want to use. No bandwidth limit. Unlimited trial periods for all fonts (with a 20 IP address cap).
Pros
Easy to set up. Affordable options available. Automatically include similar style fonts in the font stack. Pure CSS with no JavaScript required.
Cons
No self-hosting option available. Fonts not available for desktop use.
Pricing
Some free fonts, but most start at $2.50 per year per site.
Fee Schedule
Annual subscription (which applies only to fonts on live web sites; as mentioned, all fonts have unlimited trial periods).
Fontdeck was incredibly easy to set up. While it does require manual insertion of the CSS selectors into the stylesheet for your site (which is by design, to give designers as much control as possible), it provides the code for this immediately without the added step of setting up a stylesheet (the link is ready as soon as you select to add the font). Prior to purchasing the license, the first 20 visitors to your site can see the font.
I did find that I had to add the subdirectory to the hostname in order to get it working. But all the options and controls are located on a single page for each font, making it easy to update settings. Fonts are displayed quickly, but as with the other services, there is a split of a second when you can see the default font.
One added bonus from Fontdeck is that they include similar style fonts in the font stack, in case the user’s browser doesn’t support @font-face, and to help with the perceived change in text. Many of the other services just use the default font or a generic serif/sans-serif.
Fonts Live is a new web font service from Ascender Corporation — the company behind the “Droidâ€� fonts for Google’s Android mobile platform, the “Segoeâ€� family of fonts for Microsoft Windows, and the Ascender Fonts desktop font web store. Fonts Live is similar to Webtype (both were developed by DevBridge), however, Fonts Live serves fonts exclusively from Ascender and its partners.
Font Selection
499
Advantage Over Other Services
Font quality
Pros
Flexible pricing. Desktop license available. Option to self-host web fonts. Integration with Google Font API. JavaScript-free integration. Now offering Hallmark fonts.
Cons
Some fonts are expensive compared to other web font services. Back-end was among the least user-friendly of the services featured here.
Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.
Fee Schedule
Annual subscription
Setting up Fonts Live is a bit more labor intensive than setting up some others featured here. Setting up the service wasn’t without its bugs, either. First of all, read the documentation before you start, or you’re likely to get confused. With the first font I tried (Corsiva Italic), the site was unable to set up the resource and kept returning errors. It also created blank files for each of these failures, meaning I had to go in and manually delete them. Not sure if this was just an exception for that particular font or if it’s a more widespread problem. There was no mention of it in the site’s documentation.
I had better luck with the second font I tried (Romany). This time it created the resource without any issues. From there, you have to insert the stylesheet (“resourceâ€� in Fonts Live terms) link in your header and then insert the font family, style, and weight for whichever elements you want styled. The plus side here is that you don’t run into issues with your original stylesheet interfering.
Once it was up and running, however, it was noticeably faster serving the fonts than TypeKit, though this is likely due to smaller file sizes in the fonts used.
TypeFront is a hosting-only service which lets you upload a font you already own, as long as it has a web-friendly license (make sure you read the license agreement carefully!). Once you add the domain(s) you want to use, TypeFront provides you with the code to add to your website.
Font Selection: N/A
Advantage Over Other Services
Ideal for do-it-yourself designers and developers who understand the ins and outs of web typography.
Pros
Inexpensive. No noticeable delay when displaying web fonts.
Cons
You must supply your own fonts. Requires a solid understanding of your font license agreement.
Pricing
Free plan offers 1 font and 500 requests per day. Paid plans start at $5 per month (Australian dollars) and include 10 hosted fonts and 5000 requests per day. 30-day trial on all paid plans.
Fee Schedule
Monthly subscription
Once you’ve signed up for an account, uploading fonts is simple. Just make sure the fonts you’re using have a web-friendly license. From this point you have to enable the format you’d like to use for the font (included are EOT, OpenType, SVG, TrueType, and WOFF — at least for the font I used). Once one of those formats is enabled, you have to add domains.
After you’ve enabled your formats and set up the domains you want to use, you have to copy the @font-face code into your CSS files and add the font to your font stacks. The big advantage TypeFront has over the other services listed here is that there is no noticeable delay before the correct font is displayed.
Fontspring offers downloadable fonts for self-hosting. Unlike a hosted service, Fontspring provides downloadable font files and sample code to host web fonts on your own.
Font Selection
1,937 families
Advantage Over Other Services
No recurring subscription fee
Pros
Large font selection. No recurring fees or bandwidth restrictions. Desktop license included.
Cons
Font quality varies. Self-hosting only, which requires additional setup and technical skills.
Pricing
Free or up to several hundred dollars depending on the font family
Fee Schedule
One-time fee
Because these are self-hosted files, it’s a bit harder to get everything set up properly than it is with the other services here. When you purchase and download a font that includes an @font-face license, the download package includes all the files you’ll need for web implementation, including the various font file formats like EOT and WOFF.
I found it easier to just copy and paste the stylesheet information included into the existing site’s stylesheet. Once that’s done, you need to make sure your fonts are loaded into the same folder as your stylesheet (or change the URL information in the CSS). Add the font to your font stack and you’re ready to go.
The speed at which the fonts loaded was roughly the same as for most of the other services here. The advantage to using this service is that you own a permanent license to the fonts, without any recurring annual fees and with no restrictions on bandwidth or traffic.
Web fonts from Fonts.com is a new venture from Monotype Imaging, the largest font distributor on the web. Fonts.com currently has, by far, the largest web font selection with more than 7,500 fonts.
Font Selection
7,500+
Advantage Over Other Services
Large Font selection
Pros
Currently the largest selection of fonts on the web. Exclusive home to popular fonts like Helvetica, Frutiger and Univers. Support for more than 40 languages. Use on unlimited domains. Download up to 50 desktop fonts per month with the Professional plan. JavaScript-free integration available to Standard and Professional subscribers.
Cons
Relatively expensive on a price-per-font basis when using a limited number of web fonts. The font selection interface is slower than average.
Pricing
Various tiers ranging from free up to $500/month. With a free tier, you have the ability to use any of 2000 fonts on an unlimited number of websites (up to 25,000 page views). Standard and Pro tiers will give you access to any of over 7,000 fonts. All pricing is dependent upon page views.
Fee Schedule
30 days
The service looks pretty straightforward. You set up a project with as many domains as you want and then select the fonts you want to use for that project. Selecting fonts is a bit slow (it takes 30 seconds or more for a font to actually be added to a project), but not enough to be prohibitive. There’s a huge selection of fonts and powerful tools for sorting through them, in addition to search capability.
From there, you have to enter each CSS selector for which you would like to use a web font and select the font used for that particular selector using a drop down menu that lists the fonts you already selected for the project. One place where Fonts.com really stands out is in the options you have for publishing your new web fonts. There are two different JavaScript options — an “Easyâ€� option and an “Advancedâ€� one — that let you add the fonts to selectors directly in your stylesheet rather than just through the web interface, as well as two non-JS options (also “Easyâ€� and “Advancedâ€�).
Again, the Fonts.com site was a bit slow overall but the end result is just as fast and seamless as any other service listed here.
Google Fonts, announced last May, represents Google’s foray into web fonts. Google offers the service free of charge. Although the selection is currently limited to certain public domain fonts, it has the potential to have a significant impact on the future of web fonts.
Font Selection
60 (including international fonts)
Advantage Over Other Services
Free
Pros
Easy to implement. Fast font loading. Google’s WebFont Loader lets you use their service with multiple web font providers.
Cons
Small font selection in the Google font directory. No support for iPhone or iPad (Mobile Safari). Now with support for iPhone and iPad (Mobile Safari).
Pricing
Free
Fee Schedule
N/A
The Google Fonts API is probably the easiest of the services listed here to get started with, mostly because there is no sign-up process. You simply browse the fonts they offer, select one, and then get the code. Link the stylesheet in your website’s head, and then add the font to the font stack in your stylesheet.
The service is very fast, with only a barely noticeable lag before loading the proper font. The fact that there are no limits on usage of the service puts it among the top contenders on this list. The only major drawback is the limited number of fonts available.
Kernest is a hosted or self-hosted (you can also use Fontue, Kernest’s open source web font serving engine) web font tool that converts fonts into web font ready formats and sample code.
Font Selection
2,450
Advantage Over Other Services
Most fonts are free
Pros
Open source web font serving engine. Large font selection.
Cons
Self-hosting only, which requires additional setup and technical skills
Pricing
Free or up to $15
Fee Schedule
One-time fee
Kernest has a great selection of free and paid fonts available. Free fonts could be set up without having to sign up for an account. Just find the font you want to use, make sure the permissions are acceptable for your intended use (not every font is allowed to be used on commercial sites, for example), and then copy and paste the link and CSS code into your files.
Kernest works as well as any of the others on this site, with minimal lag time before the fonts load.
Typotheque is a graphic design studio and type foundry located in the Netherlands. Their hosted web font service includes a relatively small selection of Typotheque fonts. Typotheque was the first foundry to start its own web font service, and all fonts are designed in-house.
Font Selection
37 font families, many supporting various styles and languages; this means there are over 500 single fonts.
Advantage Over Other Services
Use on unlimited websites
Pros
Option to purchase a full (web and desktop) license. Over 250 languages supported, and from those up to 5 languages can be embedded. All fonts are exclusive to and designed by Typotheque. Offers self-hosting for large websites.
Cons
Limited font selection (although this is only true because their fonts are exclusive) and monthly bandwidth (500MB for each font within a font family).
Pricing
20% of the full desktop license (ex. Fedra Sans Std Book: Full @ €90, Web @ €18). Includes 500MB monthly bandwidth.
Fee Schedule
One-time fee (€5 for every extra GB over 500MB)
Setup is similar to the other services listed here. Just select the font you want to use and the domains on which it will be used, add the stylesheet link to the head of your page, add the font to your font stacks, and you’re ready to go. Lag time for the font to load is comparable to the other services. The biggest drawback is the lack of font selection, but as mentioned, this is due to the fact that their fonts are exclusive to Typotheque.
The service did return an error when generating the font subset, but it appeared to work fine, so not sure if that’s a bug or if there would actually be problems with more extensive testing.
WebINK is a hosted web font platform developed by Extensis, a software development company based out of Portland, Oregon and specializing in font management.
Font Selection:
2,000
Advantage Over Other Services
Can be affordable for the right type of user
Pros
Affordable pricing structure (similar to Typekit). Decent selection of fonts. Offers access both through the usual web interface, or alternatively through a desktop font management application called Suitcase Fusion 3 (Mac and Windows). This application has a live website preview mode for testing different fonts, and something called QuickMatch that finds the closest match to the chosen font on your computer.
Cons
Confusing interface and back-end. Each plan is limited to 4 websites (Note: Each user can set up as many “Type Drawers” as they want, allowing 4 websites per Type Drawer; so really the number of websites is only limited to an individual plan within a single user account, whereas the number of Type Drawers is unlimited).
Pricing
Free 30-day trial on all fonts. Packages start at $0.99 per month (only includes “Promotional� font selection) for 1GB usage and up to 4 websites.
Fee Schedule
Monthly subscription
We only tested the web interface for WebINK, not Suitcase Fusion 3. The WebINK online interface is probably more confusing than the others listed here. The service allows you to create an unlimited amount of Type Drawers to hold the fonts for your different projects. To add fonts from the library into your Type Drawers, you need to click the “add fonts” button within a specific Drawer. Going directly to the font library will not allow you to have direct access to your Drawers, so this takes some getting used to.
Once you get the fonts you want into your Type Drawer, setting them up on your website requires adding the @font-face information to your stylesheet and placing the fonts into your font stacks. The speed at which the font loads on the site is about the same as any other service.
Font-Face recently scrapped its project after the recent Google Font announcement. However, according to their website, they are “hatching a new plan” so we may hear more from them yet.
There is no “right� answer when it comes to choosing a web font service. Selecting the proper service usually depends on what you or your client need. You could ask yourself the following questions to help assess your needs:
Based on your answers to these questions you should be able to use the quick comparison chart below, along with the more detailed information above, to make an informed decision, or at the very least find a few starting points to start digging deeper (also be sure to check out the great chart @font-face face off).
Here is a short overview of the services reviewed in this article, including the number of fonts in each, advantages over other services, price and fee schedule.
| Service | Fonts | Advantage Over Other Services | Price | Fee Schedule |
| Typekit | 4000 | Integrations | Plans start at $24.99 | Annual |
| Webtype | 365 | Font quality | Fonts start at $10 | Annual |
| Fontdeck | 600 | Pay-per-use | Free / $2.50 and up | Annual |
| Fonts Live | 499 | Font quality | Fonts start at $10 | Annual |
| TypeFront | N/A | Do-it-yourself | Plans start at $5 | Monthly |
| Fontspring | 1,937 families | No recurring fee | Free to $100s | One-time |
| Fonts.com | 7,500+ | Font selection | Free or up to $500 | 30 days |
| Google Fonts | 60 | Easy to implement | Free | N/A |
| Kernest | 2,450 | Most fonts free | Free or up to $15 | One-time |
| Typotheque | 524 | Unlimited websites | 20% of desktop license | One-time |
| WebINK | 2,000 | Affordable | Plans start at $0.99 | Monthly |
Web font services, like any relatively new popular technology, are complex and rapidly proliferating. While there is no “perfect� service, it’s promising to see such a wide variety of companies entering the industry and continually raising the bar for web fonts. I hope this breakdown helps you get a better handle on what’s available. If you’ve had your own experience using a web font service, please let us know in the comments.
Disclosure: This article was co-written by Andrew Follett and Cameron Chapman. Andrew has provided consulting services for Ascender Corporation. Impressions were written exclusively by Cameron. All facts were checked and updated by Louis Lazaris.
© Andrew Follett for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, font-face, fontdeck, Fonts, services, typekit, typography
 |
Showing one’s teeth doesn’t always mean they’re smiling for the camera. Animals tend to expose their teeth especially when it comes to territory and lack of food sources. The fight may end up harmless, but sometimes also very brutal. The opponent may bleed to death and this may seem merciless to us, but that’s how nature occasionally works. As a matter of fact, we tend to describe a merciless fight between humans as animal-like.
Taking close-up pictures like these can be highly risky, as animals don’t like any hindrance during their combats. For whatever reasons they may be fighting, this can injure the person or animal coming between them. Today we have come up with some dazzling shutterbug shots to inspire you and take you on a walk with us through the wild side. Enjoy with us some spectacular animal fighting moments!
Corsac Foxes (Vulpes Corsac) Fighting, Hamerton Zoo
Just as there are fantastic web designs launched every year, there are even more websites launched that are atrocious and go too far with design. What are the parameters for an artist or web design creator on knowing when to step on the brakes with their design?
Need hosting? Visit host monster reviews community.
The most common mistakes made in designing a website are:
Too Much, Too Soon
Ever opened a website and felt dizzy seeing too much content, color, intricate borders and graphics? The top web layouts always have just one or two focal points, nothing more. In the first place, you don’t have to limit the website to just one page. However, you should also not bombard your main home page with too many directional guides and links to the other pages. If a web design has too much going for it, it will be its own worst enemy. Remember that a visitor to the website has a million other site choices, and so your window of opportunity to keep him interested is so small and be just a matter of seconds. The general idea is that a person should be able to tell within 4 seconds after opening a site what it’s all about.
Using The Wrong Design Elements
You may know a lot about web design, but you do not have to use them all at once. Neither should you be random about which design elements to use.  For instance, if the website has products to sell, then do not let design detract from the product so much so that the person looks at the design rather than the product. Neither should you have elements that stop a person from buying by using “come on,� “wait,� or “there’s more� kind of tactics.
Getting Drunk on Contrasts
The use of contrast is a great design technique, but it can get in the way, especially if you try too hard to create a visual smorgasbord battling for attention. On the other hand, many designers tend to disregard the use of contrast because they know the content by heart, and fail to look at the design from the angle of a visitor. Â Thus, they look at the overall effect, and end up using too light text color that affects visibility and readability.
Inconsistency From Top To Bottom, Side to Side
Often a web design gets attention because it has no focus, which means it’s not a compliment. Think of it as a room – you cannot have gothic mixed with country because they do not work together at all. It’s wrong to have a different theme for every page in your website, just as it can get to be too much if you keep changing the color scheme.
Creating a Navigational Maze
Web navigation refers to links to different parts of your website. An inconsistent web design uses different kinds of navigational designs in one page, or even in the entire website. Again, you need to maintain consistency. At the same time, the navigational keys should be concise and simple. This is the wrong aspect of the web design to “decorate.� It should be as easy for a 10 year old as it is for a 70 year old to figure out how to get to the Home Page or About Us page.
Making Web Design More Important Than the Content
Unless you are creating a design or artsy website, then content should reign supreme. The web design should not be the main selling point. It should be whatever the main focus of the site is. If anything at all, design should enhance content, and by doing so, get its due recognition.
Using Flash Techniques Improperly
A web design that incorporates a video that automatically pops up when a person goes to the Home Page should always have a Skip option. Making visitors go through the same Flash animation every time is abusive and inconsiderate. It will also cause a drop in interest. The same applies with music, especially in game sites. Not everyone wants to listen to the same tune again and again. There should be the option to lower the volume or put it in mute mode.
Playing Around With Text
Adding design to the fonts is generally a bad idea. People just want to read the content, not be impressed with its font, size, or color. It will also cause a problem with optimization. Thus, it is important to choose a font that is easy to read, and not be too small or too big.
Web design can easily go overboard, so the best way to avoid this problem is to have an objective independent person give you his or her point of view. If you get several opinions, you can come up with a consensus. Just choose your critics well.
|
There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. At Smashing Magazine, we are regularly looking for such useful tools, gather them, review them and eventually prepare for a truly smashing round-up. Such posts are quite lengthy and extensive, but they are always worth checking out.
In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Some tools are more general, the others are more technical, yet we hope that this round-up has something to offer to every one of our readers. Please feel free to leave your comments and share with us which one of the tools you’ve found most useful and interesting.
[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]
House of Buttons
A growing collection of various buttons spotted in the wild by Jason Long. Very nice and useful collection, and submissions are welcome.
Historious
Historious makes bookmarking work the way you want it. Bookmark sites with a single click, then come back to Historious and find sites by entering a few keywords!
Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.
A/B Split Testing Calculator
A/B Test Calculator shows you a comparison of several versions of a particular web page. In order to discover which one is most effective for your audience, you have to enter ‘statistically significant’ numbers.
What deux yeux have teux deux teuxday?
TeuxDeux is a simple, design to-do app that can be used for your iPhone. If you like making to-do lists, you will love TeuxDeux. This free browser-based app can be used everywhere; this way you have your to-dos ready to hand all the time. Check out the various TeuxDeux features included in this iPhone App shown in the left column.
Fillerati – Faux Latin is a Dead Language
‘Fillerati’ instead of ‘Lorem ipsum’… something different for a change. Modern browsers such as Chrome, Firefox, Safari or Opera are recommended.
Inline Code Finder
Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them. It finds inline JavaScript events, inline CSS coding and javascript:-links.
Share your ideas – Mark (them) Up!
MarkUp works in any browser without the need of being downloaded nor installed. Simply add the MarkUp icon to your bookmarks bar and share your ideas and thoughts swiftly!
Placehold.it
Format, Text, Color and Size – Quick and simple image placeholders. You may want to check Dynamic Dummy Image Generator, too.
ResizeMyBrowser
This site helps you adjust your browser automatically, starting with a simple iPhone-sized browser (320×480) to a MacBook Pro (1440×900).
Note: This web application requires JavaScript. Please check your browser’s settings and make sure JavaScript is enabled.
XRefresh for web developers
A browser plug-in which refreshes the current web page due to file change in selected folders and communicates with browser extension using TCP/IP. This makes it possible to do live page editing with your favorite HTML/CSS editor, especially when working with two monitors at the same time.
Kodingen
The so-called ‘Cloud Development Environment’ which lets you connect to your own FTPs. Web-based access to file-system & svn integration. Also includes an Online Code Editor and Cloud Hosting.
LiberKey
LiberKey is a large collection of portable applications that can be run without installation on your local PC nor from any portable media. You may want to check Portable Apps as well.
Notes for Later
This bookmarklet is a web service for remembering websites. It creates a unique bookmarklet for your personal browser in which you can simply receive the content you need via email. If you select nothing, you still get the current page’s URL and a time stamp. Registration is quick and painless. No login is required – just an email address.
Timy
An easy-to-use desktop application to fill out your Basecamp timesheet and save a lot of time completeing your own personal timesheet.
Slammer – Designer’s Geometry Box
Overlays any grid you want, anywhere you want. A variety of themes and overlays are presented: Typographic Grids, Golden Sections, Fibonacci series, Rule of Thirds and more! Slammer also includes Rulers, Crosshair, Magnifier, Measurements and Screenshots; watching the movie on the Slammer main page will help you learn more. However, Snow Leopard is required.
URList
By dragging the bookmarklet to your browser’s bookmark bar, you will instantly save time in browsing the web and have a preview of the collected links that have been grouped previously. By clicking on the bookmarklet, you can always add a link. URlist not only enables you to create and save link lists easily, but also lets you access those links from anywhere. And creating lists is dead easy. Try it!
Licorizer
A new bookmarking service which allows you to mark relevant content without losing focus. Using a bookmarklet such as this one, enables you to add web pages and clippings to Licorize without leaving nor interrupting the web page you are currently focusing on.
Readability – An Arc90 Lab Experiment
Readabilityâ„¢ is developed to make reading on the Web more enjoyable and remove any clutter around what you’re reading at the moment. A preview of a given text is available to give you an idea of how the style, size and margin can be adjusted. Installing Readabilityâ„¢ into your Web browser is quite easy…and makes it easier on your eyes!
Joli: Print to PDF in Google Reader
Joliprint bookmark provides you an easy and quick way to print a Google Reader post as a PDF. First, you have to create a bookmarklet onto your browser’s bookmark bar, then select a post in Google reader and finally, click on the Joliprint bookmarklet to convert the activated post into a PDF document. Ta-dah! You can check Clipr Bookmarklet as well.
Spoon
Spoon lets you run desktop applications with no installs, conflicts or dependencies such as .NET, Java nor AIR. By virtualizing your existing apps, you can turn them in standalone EXEs, MSIs or flash drives. This tool is also very useful for cross-browser testing right within your browser and is provided in two versions: Spoon for Business or for Developers.
Web Development Project Estimator
A simple tool for web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project. A personal task list can be created, leaving you to decide which ones to include or even exclude. Most importantly, hours and rates of the particular project allow you to calculate the estimated final fee.
Golden Ratio Calculator
This online tool helps you calculate the width of your containers to achieve the golden ratio. You can have a column with a certain width (perhaps to achieve a nice word:line ratio) and you wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. Or if you have a container and wish to divide it in two, type in the container width and use the right side measurements.
My DebugBar
Companion.JS is a Javascript debugger for IE. The current version is 0.5.5 and contains features such as JavaScript error reporting as well as a console feature which helps inspect JavaScript objects at runtime. Please note that CJS requires a Microsoft script debugger.
Entitifier
Cleaning up text for the Web can be very time-consuming and prone to error. In case your client ever ends up delivering content in Microsoft Word or a similar format, cleaning it up is definitely a necessary task to do — if you don’t want to end up with characters that don’t display properly online. By entering a HTML or simple text into the given text box and clicking on the ‘entitify’ button, you instantly have discovered a new tool which helps you escape any nasty characters that should be entities!
Every Time Zone
This tool shows an interactive chart of time in various cities across the globe. It also includes a slider to see the time in a particular city at any time of the day.
Instapaper
This is a simple tool that helps you save web pages for reading later, when you have time — for instance on mobile devices, iPad or Kindle.
Redmark: the easiest way to mark up a design and track revisions
Communication is very important and helps designers and their clients come to clear terms with each other. This site offers visual communication in just three simple steps between designers and clients. It is also possible for a client to find a particular designer they need to match their business. A Demo Project is portrayed for a quick view about how the site actually works.
Awesome Fontstacks
Fonts have always carried an important meaning to web typography. As we all know, a lot of work is required to match and adjust a satisfactory web font for a website. This site helps you create a font stack bundle and also gives you a preview into CSS coding inclusive.
Framebox: a wireframing tool
With Framebox, you can sketch your wirframes or just visualize your ideas using UI units such as boxes, headers, buttons, inputs, links, text, text links etc. You can then save it and get a link to created frame, and then send a link to your colleagues.
Droplr
Drag, drop, share! Droplr is the best way to share files from your Mac OS X on the internet, aiming for simplicity, ease of use and flexibility. This application is also completely free to use with ad supported content. Once the selected file is uploaded, Droplr returns a URL in which a user can share with anyone.
Mockingbird: Website wireframes
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
CodeBurner: Reference Tool for Web Developers
CodeBurner is a suite of tools for web developers that provides reference material for HTML and CSS, integrated with a range of popular development environments.
HTML Soft Hyphenation Generator
Configurable generator for automatic soft hyphenation in static HTML text without a script.
SelfControl
Is email a distraction? SelfControl is an OS X application which blocks access to incoming and/or outgoing mail servers and websites for a predetermined period of time. For example, you could block access to your e-mail, Facebook, and Twitter for 90 minutes, but still have access to the rest of the Web. Once started, it can not be undone by the application, by deleting the application, or by restarting the computer — you must wait for the timer to run out.
MinutesPlease.com – Manage your web time
This is an extraordinary website that you can have to help you control the time you spend on a particular site. Just type in the URL and the time you are willing to spend on this site – you will notice how fast time flies by!
Clue
A fun and easy way to create memory tests and see how much and what exactly people remember on your website.
Neuskool.com
Neuskool is a personal start page for all your browsing needs with a collection of useful search services, all on one page.
Check My Colours: analyze the color contrast of your web pages
This tool checks foreground and background color combinations of all DOM elements and determine if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the W3C.
COPASO: Color Palette tool
COPASO is an advanced color palette tool that helps you create the perfect color palette.
Pixel Perfect Firefox Extension
This extension allows you to overlay a web composition on top of the developed HTML. Letting the developer visually see how many pixels they are off in development.
SenSEO Firefox Extension – Official Website
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.
Firefinder
Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.
Firediff
Firediff is a Firebug extension that tracks changes to a page’s DOM and CSS and implements a change monitor that records all of the changes made by Firebug and the application itself to CSS and the DOM.
SEO Checklist
When it comes to SEO, there are certain elements that need to be in place for any newly-designed or updated website. Have 301 redirects been put into place? Is the robots.txt file authored to allow adequate crawling? This infographic depicts a handy checklist that will help get you through any new site launch or transition.
Typographic Sins
Typographic Sins (also available as PDF) by James Godfrey and Patrick Wilkey covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design.
Entity Code: a Clear and Quick Reference to HTML Entities Codes
A website that eliminates the frustration and the wasted time caused by constant need to add those hard to remember HTML entity codes, such as the copyright symbol © or em-dash —, every time you’re developing a new website or writing a new article.
Thirty Conversations on Design
The site creators asked 30 of the world’s most creative professionals two questions: “What single example of design inspires you most?� and “What problem should design solve next?� Their answers might surprise you. And, hopefully they’ll inspire you.
Essential Interaction Design Essays and Articles
A list of essays and articles that could be important touchstones and reference points for interaction designers.
Min.us
You can drag your data which you wish to share online onto the min.us page. Very convenient.
Mr. Data Converter
Mr. Data Converter will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML.
PDF Split and Merge
PDFsam is a free open source tool (GPL License) designed to split and merge PDF documents. Whether it be only extracting sections into a single document or changing the order of the pages. The basic version can be downloaded and simply used on every platform with a Java support.
Unsuck It
What terrible business jargon do you need unsucked? Unsuck It translates management speak to normal language, making your day to day on- and offline slogs through corporate jargon a little easier to bear. You can even tweet your results as they often turn out to be quite funny.
Temperature Conversion, Weight Conversion and Length Conversion
This simple online tool doesn’t do much, but it’s truly beautiful and it’s a pleasure to use. The tools lets you convert length values, temperature values and weight values.
Coffee Drinks Illustrated
With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. Lokesh Dhakar created a few small illustrations to help himself and others wrap their head around some of the small differences.
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: PDF, time-savers, tools, useful