The Art Company's Blog http://www.theartcompany.org/blog/index.php/ en 2009-05-18T15:26:58+02:00 daily 1 2009-05-18T15:26:58+02:00 Say goodbye to IE6! http://feedproxy.google.com/~r/tacblog/~3/iyeJTsFhHC4/89-bye-bye-internet-explorer-6 2009-05-18T15:26:58+02:00 en Marc Online Tools Despite being a very annoying roadblock for most web designers, IE6 isn't a necessary evil. The main reason it is still present in the browsers charts, is because visitors are using it — period. Despite being a very annoying roadblock for most web designers, IE6 isn't a necessary evil. The main reason it is still present in the browsers charts, is because visitors are using it — period.

A lot of various initiatives have been developed around the web, to bring down IE6 down to the ground and make sure it never rises again, leaving space for more modern and standards-compliant browsers. And to save web designers' time as well, since they would not have to spend valuable time to turn their websites compliant with the infamous IE6.

However, while being undoubtedly a massive success amongst the professionals, it might not have been the save with the other side of the world: visitors.

Too often, these initiatives tend to be too tech-centric, speaking a language that most users are afraid to read. Furthermore if that techy gibberish isn't even written in their own language...

Here comes “ Bye-bye, Internet Explorer 6 ”, which attempts to take a different approach: instead of speaking to the professional, its speaks to the end user, and explains in simple, everyday words, why IE6 isn't the best solution to browse the web anymore, and why they should change for something better. But most important, it provides this explanation in the visitor's language (eight are supported so far, more are added regularly), so the message gets even more chances to reach the audience.

“ Bye-bye, Internet Explorer 6 ” does not replaces or competes with the other initiatives out there: rather, it complements and supports them, providing a unified voice that will not frighten the end-user.

» Bye-bye, Internet Explorer 6
» How to use the initiative if you're a developer

]]> http://www.theartcompany.org/blog/index.php/2009/05/18/89-bye-bye-internet-explorer-6 15 Online Background Generators http://feedproxy.google.com/~r/tacblog/~3/CNNouTiCZkE/88-15-online-background-generators 2009-04-24T10:35:12+02:00 en Marc Online Tools Backgrounds are important. Whether they're used on a website, on a drawing, on an image compo or on a mobile phone, they give an undeniable "cachet" to your creation, while also improving the viewing experience by increasing the focus on the content. And while they're tons of free or shareware... Backgrounds are important. Whether they're used on a website, on a drawing, on an image compo or on a mobile phone, they give an undeniable "cachet" to your creation, while also improving the viewing experience by increasing the focus on the content. And while they're tons of free or shareware applications to create these backgrounds, there's also a lot of free online tools that will do the same in seconds. This list of 15 online generators will allow you to create your own background, stripes and tartans in a couple of clicks!

» 15 Online Background Generators

]]> http://www.theartcompany.org/blog/index.php/2009/04/24/88-15-online-background-generators Ultimate Collection Of Useful Photoshop Plug-Ins http://feedproxy.google.com/~r/tacblog/~3/kN5PC3no47o/87-ultimate-collection-of-useful-photoshop-plug-ins 2009-04-24T10:24:10+02:00 en Marc Software Our friends at Smashing just released an article that features nothing but the ultimate list of must-have plugins for photoshop. It doesn't mean these plugins are free, of course, but it gives you a clear idea of how your plugin collection should look like if you're info serious graphic design. »... Our friends at Smashing just released an article that features nothing but the ultimate list of must-have plugins for photoshop. It doesn't mean these plugins are free, of course, but it gives you a clear idea of how your plugin collection should look like if you're info serious graphic design.

» Ultimate Collection Of Useful Photoshop Plug-Ins

]]> http://www.theartcompany.org/blog/index.php/2009/04/24/87-ultimate-collection-of-useful-photoshop-plug-ins 600+ Free High-Quality HiRes Textures http://feedproxy.google.com/~r/tacblog/~3/4LB0UCBURdI/86-600-free-high-quality-hires-textures 2009-04-22T10:28:15+02:00 en Marc Graphics Once again, we crawled the web to offer you a great collection of nothing but exclusive, high-quality free high-resolution textures and background images for your projects. As usual, don't forget to read the terms & usage conditions before including these textures into your professional work. Once again, we crawled the web to offer you a great collection of nothing but exclusive, high-quality free high-resolution textures and background images for your projects. As usual, don't forget to read the terms & usage conditions before including these textures into your professional work.

Enough with the talking, here are the links. Enjoy!

Abstract Textures volume 2

Abstract Textures volume 1

Various Textures 1

55 Free Large Textures

Rusty Metal Textures

Metal Grunge Images - Part 1 / Part 2

Dirty Wood Textures

25 Free Hi-Res Fabric Textures

31 Free Original Textures

6 Hi-Res Concrete, Clay and Slate Textures

6 Hi-Res Wood Textures

12 Wood Textures Pack

80 Free Hi-Res Paper Textures

Free Liquid Textures

Free Hi-Res Paint Textures

Free Crack and Dirt Textures

Colorful Antique Fabric and Wood Textures

20 Free Original Hi-Res Stained Paper Textures

Free Hi-Res Textures and Tutorials

Free Hi-Res Cardboard Textures

Free Hi-Res Denim Textures

60 Impressive Free Hi-Res Textures and Backgrounds

60 Free Exclusive Textures from SXC.hu

Free Hi-Res Grunge Nebulae Textures

10 Hi-Res Quality Bricks Textures

15 Hi-Res Stone Textures

337 Free Textures at TextureKing

]]> http://www.theartcompany.org/blog/index.php/2009/04/22/86-600-free-high-quality-hires-textures File extensions: always use the right program! http://feedproxy.google.com/~r/tacblog/~3/R60-AN0bvBc/85-file-extensions-always-use-the-right-program 2009-04-21T08:43:30+02:00 en Marc Software As web developers, web designers, graphic artists or information architects, we deal daily with a lot of documents. Files, applications, archives, that's a lot of information. We also exchange a lot of data with colleagues, co-workers, contractors, freelances... And in this mass of data, sometimes there are pieces we don't know. What if you're sent an obscure .ABT document and don't have a single clue what this file format is? Of course, you can Google it, but wouldn't it be nice to always be able to open any file you have, regardless if you have its native mother application or not? Now it's possible, thanks to OpenWith.org! As web developers, web designers, graphic artists or information architects, we deal daily with a lot of documents. Files, applications, archives, that's a lot of information. We also exchange a lot of data with colleagues, co-workers, contractors, freelances... And in this mass of data, sometimes there are pieces we don't know. What if you're sent an obscure .ABT document and don't have a single clue what this file format is? Of course, you can Google it, but wouldn't it be nice to always be able to open any file you have, regardless if you have its native mother application or not? Now it's possible, thanks to OpenWith.org!

OpenWith.org provides detailed information about most file extension and links to free programs that can open and create each type of file. There are plenty of great programs out there that will cost you hundreds to do what you need. What you probably don't know is that there is usually free or open-source software that is just as good.

OpenWith.org is a little piece of (free) software that provides detailed information on most of the file formats you can meet in your life. Most important, it also provides links to free or open-source software that, once installed on your machine, will allow you to open (and most of the times, also manipulate) the files. All it takes is a right-click on the document in your favourite files explorer, and then select "How do I Open This?" from the popup menu. A couple of seconds later, you'll know what that infamous .ABT document is, and what you'll need to open it.

OpenWith.org currently recognizes more than 120 different formats, and more are regularly added as the application gets updated. It's definitely a must-have utility for every professional out there.

» Download OpenWith.org

]]> http://www.theartcompany.org/blog/index.php/2009/04/21/85-file-extensions-always-use-the-right-program Don't write for yourself, write for your audience! http://feedproxy.google.com/~r/tacblog/~3/3tDRnlpwWi0/84-don-t-write-for-yourself-write-for-your-audience 2009-04-15T11:52:51+02:00 en Marc General Writing for the web requires a certain discipline. Also, the way you put up your content can't be compared to the way you write for other media, such as newspapers, or any other form of more “traditional” communication. But most of all, what you write on the web should talk to your audience, not... Writing for the web requires a certain discipline. Also, the way you put up your content can't be compared to the way you write for other media, such as newspapers, or any other form of more “traditional” communication. But most of all, what you write on the web should talk to your audience, not to yourself. Our friends at WebDesignerDepot have written an excellent article over the subject, explaining the "ugly", the "bad" and the "good" of a efficient copywriting, and how it can impact the effectiveness and the core value of your websites. Read on!

» Is Self-Centered Web Copy Hurting Your Websites?

]]> http://www.theartcompany.org/blog/index.php/2009/04/15/84-don-t-write-for-yourself-write-for-your-audience Size your CSS for HTML e-mail with Premailer http://feedproxy.google.com/~r/tacblog/~3/NbOBVmMIgNs/83-size-your-css-for-html-e-mail-with-premailer 2009-04-06T18:30:05+02:00 en Marc CSS One of the main concerns when creating an HTML page to send via email (like a newsletter) is that the application that will be used by the recipients to read your page has, at best, a very vague interpretation of CSS (at worst, no support at all), whether that CSS is linked from an external stylesheet or directly inserted into the document (in the HEAD section). Hopefully, there are alternatives. But some are far more usable and effective than others... One of the main concerns when creating an HTML page to send via email (like a newsletter) is that the application that will be used by the recipients to read your page has, at best, a very vague interpretation of CSS (at worst, no support at all), whether that CSS is linked from an external stylesheet or directly inserted into the document (in the HEAD section). Hopefully, there are alternatives. But some are far more usable and effective than others...

One of the ways to solve the headache is to force the CSS description into each HTML element that will be needing one. This technique is called inline CSS, and is proven to work. However, it's quite a pain in the ... (well, where you feel pain when you have to spend hours on boring stuff), since it's a very time-consuming procedure.

To give you an idea, here is how inline CSS works. Imagine you have this:

<h2 class="sectiontitle">Welcome</h2>

and sectiontitle relates to:

.sectiontitle {
      font: bold italic 24px/30px arial, helvetica;
      color: #58fe2a;
      letter-spacing: -0.08pt;
      padding-bottom: 20px;
      }

Now imagine you have about 20 h2 headings with that sectiontitle class in your document. Using inline CSS means that you'd have to turn each of these 20 h2 tags into:

 <h2 style="font: bold italic 24px/30px arial, helvetica;
   color: #58fe2a; letter-spacing: -0.08pt;
   padding-bottom: 20px;">Welcome</h2>

Nice, uh? Oh, and the same applies of course for every HTML element you need to style.

Hopefully, here comes Premailer. It's an online service that turns a regular web page with attached external stylesheets to something understandable by Outlook, Thunderbird or GMail. Simple, neat, and effective.

The tool is pretty straightforward: paste the URL of the page you want to convert, specify a querystring if needed (for example, a tracking code if you have one), and click on "Submit". The engine parses your document and turns every CSS rule into its inline CSS counterpart, then displays a link to the converted document so you can check it and save it. It also provides a short analysis of the used CSS properties, and indicates how well each would be supported in the major email clients.

Needless to say, this service is really, really appreciated, and will save hours of headache to everyone who needs to create documents for an email communication campaign...

» Premailer
» Guide to CSS support in email

]]> http://www.theartcompany.org/blog/index.php/2009/04/06/83-size-your-css-for-html-e-mail-with-premailer jQuery perfect rounded corners http://feedproxy.google.com/~r/tacblog/~3/HaUpDr3LjI0/82-jquery-perfect-rounded-corners 2009-04-01T16:30:12+02:00 en Marc Javascript Rounded corners have become one of the essential design components of modern web design. There are numerous ways to implement them in your pages; pure HTML/CSS, proprietary javascript, or using standard frameworks like jQuery. That's the approach we have chosen, since it'll be very difficult to overcome the simplicity of this solution. Rounded corners have become one of the essential design components of modern web design. There are numerous ways to implement them in your pages; pure HTML/CSS, proprietary javascript, or using standard frameworks like jQuery. That's the approach we have chosen, since it'll be very difficult to overcome the simplicity of this solution.

jQuery is one of the most used javascript framework today. It's light, easy to setup, easy to use and integrates flawlessly with all the platforms and the browsers on the market. That's the reason why we have decided to go for that solution to implement rounded corners on our pages.

jQuery can be extended using plug-ins. Plug-ins are, from a programming perspective, little add-ons that can be considered as libraries. The plugin we'll be using for our rounded corners works exactly like that. It provides a set of methods that allow web developers and designers to seamlessly integrate new features in their projects.

Setting up the scene

jQuery is a javascript framework, and comes as a standard script. So you initialize it like you would do with any other script, by loading it from your page's <head> section.

<script type="text/javascript"
    src="path_to_script/jquery.js"></script>

Then, you load the jQuery plug-ins you'd like to use exactly the same way. In this case:

<script type="text/javascript"
    src="path_to_script/jquery.corners.js"></script>

Now, you need to tell jQuery to execute the plug-in. To do so, you will have to use jQuery's specific syntax. We're not going to explore all the details about that here, so we encourage you to pay a visit to the jQuery website and browse the extensive documentation you'll find there.

$(document).ready(function() {
    $('whater-css-selector').corners();
    });

What have you just done, here? You told jQuery to execute a function once your page has been completely loaded, and that function should apply the corners method to all the elements within the page that match the CSS selector you have specified. For example, you could have written:

    $('.rounded').corners();

Which would have applied the rounded corners method to all the elements that feature a class="rounded" in your page. Or, you could have written:

    $('div#content>a.link').corners();

Which would have had the same effect on all the a tags with a class="link" located within the <div> that has a "content" id.

The jQuery Corners plug-in

The plug-in we're using will easily create beautifully rounded corners. It creates perfectly anti-aliased corners, supports transparency for composite background, and uses no images or unnecessary obtrusive markup. Its key features are :

  • Less than 8000 bytes after yui compression.
  • Beautiful and fast anti-aliasing for older or stubborn browsers.
  • Degrades well for browsers with javascript turned off.
  • Native browser corners used when available (mozilla and webkit).
  • Form and anchor buttons are easily styled and rounded.
  • Vast range of supported browsers (Firefox, Chrome, IE6+, Opera, Safari, iPhone, ...)

The method supports various options, that allow you to mix different corners sizes or activate or deactivate anti-aliasing. It rounds buttons and fields corners perfectly. Finally, you can pass the options directly within the class definition right from the HTML code, like this:

<div class="rounded{10px transparent}">

Which will render 10px-radius rounded corners with transparency support for composite backgrounds.

Where do I get it?

» jQuery rounded corners
» jQuery reference

]]> http://www.theartcompany.org/blog/index.php/2009/04/01/82-jquery-perfect-rounded-corners Font conformity: cross-browser, cross-platform? http://feedproxy.google.com/~r/tacblog/~3/O6CN97RYXSo/81-font-conformity-cross-browser-cross-platform 2009-03-26T09:13:16+01:00 en Marc Fonts Tweaking your CSS and your code so your pages render nicely regardless of the user's browser is, we all know that, a very time-consuming hassle. But there's more into it than just cross-browser consistency. Fonts might not display the same way on a mac and on a PC — in fact, that nice font you used for your headings might not even exist on the other platform. Now what? Hopefully, there's Typechart. Tweaking your CSS and your code so your pages render nicely regardless of the user's browser is, we all know that, a very time-consuming hassle. But there's more into it than just cross-browser consistency. Fonts might not display the same way on a mac and on a PC — in fact, that nice font you used for your headings might not even exist on the other platform. Now what? Hopefully, there's Typechart.

Typechart is a very simple website, with one simple purpose: allow you to compare how fonts render across different platforms. To ensure maximum compatibility and consistency, it focuses on the standard faces (Arial, Georgia, Verdana), while giving an insight on platform-specific typefaces (like Cambria on windows or Lucida Grande on mac).

The way the site works is pretty straightforward: select a typeface, an emphasis or a type size, and see the how the fonts render based on your selection. Switch between platforms with the built-in preview system so you can control how the output looks when handled by Cleartype on windows or AppleFont on mac, then simply grab and paste the corresponding CSS.

In addition, Typechart provides a set of useful resources around typography, with links to articles, books, and additional tools.

» Visit Typechart

]]> http://www.theartcompany.org/blog/index.php/2009/03/26/81-font-conformity-cross-browser-cross-platform So long asleep, but not dead. http://feedproxy.google.com/~r/tacblog/~3/rY1ex5A9TsM/80-so-long-asleep-but-not-dead 2009-03-23T08:34:48+01:00 en Marc General It's been 6 months, since our last blog post. 6 months full of projects, of contracts, of customer meetings, of countless late work nights. We showed less signs of life than Han Solo in his carbonite prison. Some even asked us, kindly: “Are you dead”? Well, we're not. We've been busy far... It's been 6 months, since our last blog post. 6 months full of projects, of contracts, of customer meetings, of countless late work nights. We showed less signs of life than Han Solo in his carbonite prison. Some even asked us, kindly: “Are you dead”?

Well, we're not.

We've been busy far beyond our expectations — which is good, we won't complain about that. But we've neglected our audience, and that wasn't good. So in the future, we'll make every effort to try to post at least once a week. Those last 6 months, we've gathered tons of valuable resources, and we think it's just fair that you get your hands on it.

So stay tuned !

]]> http://www.theartcompany.org/blog/index.php/2009/03/23/80-so-long-asleep-but-not-dead