For the people I interviewed, Web design is life. The art directors and freelancers highlighted here work in all sorts of environments, and they answer questions related to our field. You’ll have the opportunity to see Polish Web design from a number of perspectives — and to form your own opinion while browsing selected productions.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

The State Of Things

Question: Can you name some of the milestones in Polish Web design? What are the biggest and most important productions in recent years?

Jacek Opaluch of K2 Internet: If milestones are things that have changed the perception of Web design, we have to mention Internet locations, events and designs. In my opinion, the locations would inlude mocnweb.pl, a forum that no longer functions and is probably only remembered by people over 30. It was a place where people could share their initial experiences and which, if I remember correctly, had the first carefully selected catalogue of Polish Web designers’ websites.

Then there was the everlasting webesteem.pl, steadily breaking records as the website with “the layout that never changed.” There were always several people around — some significant, like Bartek Gołębiowski, Jędrek Kostecki, Bartek Rozbicki, Wojtek Krosnowski, Wojtek Piotrowski, Piotr Łupiński and Łukasz Twardowski — whose attitude toward the Internet undoubtedly had great influence on thinking and design. There were many more people whose names I don’t remember, unfortunately, for which I apologize.

Chopin2010.pl

Certain designs are stuck in my mind. These were well known, not just in Poland, and sometimes they were great examples to follow. Some have been replaced by newer versions, so giving the URLs here might be pointless, but they definitely include: Max Weber’s pdk.pl, a Flash portal with much character (probably the first in Poland); Nokia (created by K2 Internet); plama.art.pl and its subsequent versions; feta.pl; Sullivan’s Productions; click5.pl; Ars Thanea; cookie.pl; and recently, StudioKxx and huncwot.com. These are all first-class websites. Unfortunately it’s impossible for me to name every excellent website.

In my opinion there were two other crucial events that gave shape to things: agencies went public (a sort of goodbye to the formative years of Web design) and eBay debuted in Poland. These events showed the quality of our service and proved that the Polish internaut had been highly underestimated abroad.

Question: Are there any significant differences between Web designing in Poland and in the rest of Europe when it comes to artistic development?

Jacek Opaluch: There are differences in budget, in the attitudes of clients and in understanding the Internet’s potential. Statistically, I don’t see any difference in the quality of the things we do: we win awards, we are jurors and we build among the best of the websites that present outstanding design — just like the rest of the world.

Zakochaj się w kolorze.

Kamil Kaniuk of Merix Studio: Polish programmers and coders are generally well regarded, which results from our observations and experience — often in cooperation with foreign firms. Numerous highly skilled Web developers are in Poland whose code is of world-class quality. Here at Merix Studio, we are searching for such people. The skills of our coders have been appreciated by the British company Independent News and Media, which prepared a series of test tasks for us before they decided to commission us to work on their leading brands (The Independent and Herald, for example).

We are less inspired by Flash achievements and augmented reality (so popular right now) than are other interactive agencies in Poland. We are more interested in the productions of smaller flexible firms such as 37signals, nclud, Reactive and Clearleft. We invest in flexible and cost-optimal open-source software (Drupal, WordPress, Magento), because it can easily substitute for expensive commercial solutions.

Open-source software is regarded slightly differently in Poland than it is in Western countries; the opinion that any self-respecting interactive agency should have its own original content management system (CMS) still prevails here, but this is not so. Just look at the US government: Whitehouse.gov is based on Drupal.

In the current period of economic slowdown, Western companies are looking for ways to reduce costs while maintaining good quality. Many companies outsource to such countries as Poland, and these companies often have funds at their disposal that allow them to be more open to creative ideas. This is encouraging for Polish Web designers.

Warszawska Jesień 2008

Question: When was the starting point of innovative Web design in Poland? When did new media settle in Poland for good?

Łukasz Twardowski of Cookie.pl: The first thing I remember from the Internet was an interactive advertising campaign for Frugo juice. The campaign was created by an agency, and it was the first Polish viral ad. It probably significantly increased interest in the Internet as a medium for advertising, and it collided with the so-called “Internet bubble,” which burst before any innovative design came into being.

Still, this was the time when most designers I admire became active. Some independent websites on Web design were created, like Mocny Web or Webesteem. They attracted people who already thought of themselves as designers for new media. Looking back, I see that what pushed us forward was energy and optimism rather than skills and knowledge.

I think we became aware of both (i.e. skills and the role of Web design) about three or four years ago, but the awareness wasn’t strong yet. The major problem with Web design in Poland is that the best interactive agencies give priority to advertising, and design is a secondary issue. Small clients such as photographers and architects, who might desire and deserve the best designs, often don’t have enough money to employ professionals. It’s great to see, though, that cultural institutions have more money to spend on the Internet, and they spend it wisely.

Question: Is it possible to identify specific patterns in Polish Web design? Is every significant website really different from all the rest?

Łukasz Twardowski: I wish Polish Web design had German discipline, Scandinavian simplicity and our knightly imagination. Polish designs are often much more daring than those of our neighbours. Still, if we want to develop our philosophy of design and be visible to the world, then we have to make more effort.

The economy in Poland has been improving, and the only thing we need now is more energy and optimism. Mocny Web died naturally, and Webesteem is on its last legs. What we lack is a central forum where young designers (in a sense, all of us are “young”) can see the spectacular Web designs and discuss them.

Flirt Camp

Kamil Kaniuk: We think that in Poland there are still no styles in Web design that would distinguish our country from others — that is, that any styles are unequalled. Although one could fairly easily enumerate some common features of designs created elsewhere (the meticulous detail and profound illustrations of Russia, for example, or the graphic-rich interfaces of the United States), no specific style dominates in Poland. However, the “transfer of ideas” (say from West to East) is much faster now than it was a few years ago.

Too often a design is a compromise between the vision of the designer and the requirements of the customer. Such designs tend to undergo amendments by the customer, which can change their original form. In our opinion, the openness of customers to modern solutions (e.g. non-standard interfaces based on JavaScript, like Xpiritmental) is less common in Poland than elsewhere. Foreign customers seem to be more open to our ideas and give us greater freedom, and they are ready to make use of technologies like JavaScript and AJAX.

That opens the gate to creativity and gives the freedom to implement interesting solutions. In many Polish agencies — including those that work with big brands and budgets — some cheap and mediocre designs are created out of necessity.

Kula.gov.pl

Question: What is it like to work as a freelancer in Poland? Is it drudgery or a stress-free job? Is it about keeping loyal clients or constantly searching for new ones?

Jan Stańko: We shouldn’t generalize; every freelancer is different. Starting off is definitely difficult. Without a strong position in the market, you have to look for clients on your own, and you have to convince people that you are trustworthy and deserve opportunities. There are plenty of freelancers, but unfortunately the majority of them are young and immature and have no idea about the business. They finish school and immediately call themselves professionals. It can end badly: very often the honest designers who treat the profession seriously and think of it as their future have to suffer the consequences.

In time, the serious freelancer gets clients and agencies start knocking on their door. Then you can choose the tasks you like the most, and that brings more money. Work gets difficult when you want to earn more money; it can mean sleepless nights, gallons of coffee and in my case, unfortunately, plenty of cigarettes.

There are moments of anxiety as well, usually brought on by people who pretend to know everything about the Internet but actually know very little. I guess the best solution is to cooperate with agencies on a regular basis. Agencies can take the burden of work overload and stress off your back. Also, their complex services give you the opportunity to meet more interesting clients. As for the future, time will tell. I’m not even halfway through my career. Trophies are still a long way ahead!

Bubole

Rafał Nastały: Earning one’s living as a freelancer in Poland without a recognized name can be incredibly tough. Independent clients often don’t want to sign contracts or pre-pay. They also think that preparing a layout is a piece of cake, so when they hear the price, they often back out. It’s very frustrating. It’s much more pleasant to cooperate with several agencies that can give you a fairly constant number of orders.

Piotr Biernawski: I have five or six regular clients. Sometimes a client withdraws, and it’s usually because of money. It’s never a disagreement about the terms of the contract but about actually sticking to these terms (payment can be long delayed, etc.). But when some go, others come. I’ve been working with longstanding clients for five years now.

Drudgery or a piece of cake? Definitely not a piece of cake. If it wasn’t for my strong connection to the mountains, which I love and where I do my hobbies, I would probably move to a bigger city and look for a full-time job. I also have a wife and child who are not very keen to move. However, I don’t think freelancing is drudgery; I can’t afford the latest model of BMW, but I work only about two hours a day. Even though you need to be psychologically strong to work like this, the lifestyle is great.

Łukasz Bronisz: I think it depends on the individual. Everyone arranges their time and work environment differently. Some people prefer working at night and waking up at dusk in order to meet a deadline. Most of us, however, try to work during regular hours. It allows you to be in touch with agencies, allows you to make light changes and corrections and lets you have a private life too.

I imagine that freelancing in Poland is similar to freelancing in other countries. It can be hard sometimes because of tight schedules or having a number of projects going at the same time. On the other hand, you always have the opportunity to relax or even take a break for a couple of days. No one arranges your time or dictates your schedule.

Also, though, no one checks on you. If you choose to freelance, for which your income depends on how much you work, it’s reasonable to cooperate with several agencies. Doing this usually gives you enough orders that you don’t have to worry about the next month and can concentrate on your work. Of course, it’s always good to look for new projects so that you develop and diversify your designs.

Łukasz Bronisz

Konrad Wysokiński: It’s still quite difficult to get by as a freelancer in Poland, although there are probably some people who don’t have to worry about work or can be picky about contracts. I often get the impression that people still don’t know what good design is or know that it costs money. For many people, the Internet is still a must: “People are talking about it, so let’s make a website — but make it as cheap as possible.” Some company owners have this attitude. As a result they ask someone, anyone, who knows a little bit about Photoshop (a brother-in-law’s daughter) to create the cheapest website possible. Thankfully, this has been changing steadily, like our society in general, and I hope that our sensitivity to the profession of Web design will increase with time.

Mateusz Jakobsze: The Web design market in Poland has been gradually expanding. A lot of people freelance to get rid of the constraints of working for agencies. They want creative freedom and to earn more money. Undoubtedly, an advantage to freelancing in Poland is the opportunity to work for clients abroad who pay in Euro or American dollars. The ability to choose which clients and agencies to cooperate with is a big advantage as well. I always try to look abroad for new clients and to network. I have some regular clients as well as a couple of interactive agencies that I often collaborate with. We socialize not only at work but also at parties and unofficial get-togethers. It’s good to maintain informal relationships with your clients.

Mateusz Jakobsze

Question: How does the Web design and development market look in Poland? Is it possible to earn one’s living from freelancing alone?

Jan Stańko: It is possible, definitely. Many people are self-subsisting freelancers, including me. There are quite a lot of agencies and enough clients, and whether we get by depends on our hard work, consistency and responsibility. When it comes to cooperation with agencies, it usually goes smoothly; it’s the clients who are the weak link. But even that has been changing. The Internet is still a brand new thing for many people. Non-professionals find it difficult to catch up with the news that keeps popping up in the field, and sometimes this can result in misunderstanding.

Rafał Nastały: Freelancing is not for everyone. You need to be self-disciplined and consistent to work as a freelancer. When you collaborate with agencies that know how to communicate with clients and that pay generously, you can have a relatively high standard of living.

One negative aspect is the lack of credibility at the bank (getting a big loan is difficult), so if you’re not a high-profile Web designer, the best option is to have a full-time job and take additional work from other sources now and then. This creates financial stability. A bonus like that — a well-paid creative task — is actually very nice. There are of course some freelancers for whom one layout is worth more than the monthly earning of others.

Warszawska Jesień 2009

Piotr Biernawski: It is certainly possible to earn a living from freelancing. I know some people who earn more than ten thousand a month. I’m not talking about famous names here, but about people from small towns, “unheard of” names in our line of business. Considering the time I devote to work, I am not an example of this, but I can afford everyday living: mortgage, alcohol and cigarettes!

Łukasz Bronisz: I think that the Polish market is pretty good. It’s a young market. Actually the whole business is young. Polish clients have become more aware of the Internet in recent years. Plenty of talented people are in the trade in Poland. If you know how to organize your time effectively, talk to people and sometimes work more than the standard eight hours, then freelancing is enough to earn a living. The important thing is to be consistent and up to date.

Konrad Wysokiński: I’ll quote part of a conversation I had with a colleague, a designer. I asked him once, “Can you earn a living from freelancing?” He said, “It depends on your standard of living.” You can get by, of course, but you probably won’t make a fortune. I often get the impression that in Poland this type of work is considered a craft and is not treated with respect like other “professional” work. We are very far from the image of the Web designer you see in Hollywood movies, who has a five million dollar house with a swimming pool, has his own agent and who is the top Web designer for the most famous brands.

Konrad Wysokiński

Mateusz Jakobsze: It’s not much different from what you see in other countries. We have many arenas where graphic designers can display their work, like themed blogs and Internet forums. The majority of creative agencies and independent clients look for employees that way.

Freelance Web designing has been developing in Poland: about a quarter of agencies outsource on a regular basis, and more than a third use freelancers for selected projects. So, there are opportunities to work on different brands for different companies, which is good for both present and future freelancers.

Special workplaces and offices have gradually emerged where there is no boss and all the workers are freelancers. We have such a place in Poznań. It’s a great idea to have freelancers from different professions gathered in one place. I hope for more initiatives like that.

Question: What inspires you? Do you approach every design differently and enthusiastically, or is it sometimes like mass production?

Jan Stańko: Mass production kills creativity, so I avoid it as much as I can. I prefer to do less work better. Then you can show a portfolio that you are really proud of. It’s the only way I work.

Honestly, my inspiration comes from the work of other designers, both from Poland and abroad. Behance.net is a really amazing source, vast and rich. I don’t have a specific example, but this ocean of artistic ideas fuels creativity and prepares you to bring your own ideas to life. Then it just flows.

Rafał Nastały: When I have the freedom of choice and some time on my hands, I try to make something original that appeals to both me and the client. But it sometimes happens that there are several tasks and the deadline is “yesterday.” In this situation, I bear down and work like a robot while trying to maintain a high quality of work. I get inspiration from the Internet. I regularly visit websites devoted strictly to Web design like FWA, DesignFollow and obviously Smashing Magazine. I also visit DesignYouTrust, FormFiftyFive and FFFFound. You can find plenty of great art and designs from many fields.

Piotr Biernawski: Sometimes a free mind, a break from work and lack of inspiration are the best sources of inspiration! I work most effectively after a two-week break in which I do absolutely nothing — but such breaks happen only once in a while. This is why a freelancer needs to be psychologically strong, otherwise getting depressed is easy.

As for inspiration, I have bookmarked several links. They are mostly Polish productions, and I visit them now and then. Given how much I work, this may sound strange, but one’s attitude to design makes a difference. Unfortunately for me, the majority of my recent projects were due “yesterday.” A client pays for fast work, and standards have to be met. There isn’t always a sense of achievement when you work quickly, but as long as the client is satisfied, I’m happy as well. Some interesting projects require more involvement. Usually these are not assigned by agencies but by independent clients who come directly to me. Maybe this tells us something?

Reserved.pl

Łukasz Bronisz: I treat every design individually and use new ideas and techniques. When I start a project, I try to get a sense of what the client likes, but I also aim to be satisfied with my own work. It’s nice when everything goes smoothly and both the client and agency like your idea. Working with individuals can be tough; sometimes they just don’t appreciate your effort, which can compromise the result. This is typical both in Poland and abroad — at least, that has been my experience.

Konrad Wysokiński: I get inspiration from all around. I sometimes do corporate identity design, which can inspire me. Naturally, I watch the best people at work and keep up with the trends. I’m a fan of grunge design, but very rarely can I use it. Every project is a new challenge for me, so I give my heart and soul to each and every design. I’m never convinced by lines like, “Do it quicker and simpler for a lower price.” I believe it’s impossible to make something look professional without taking a professional approach.

Strzyg

Mateusz Jakobsze: Like every creative job, graphic design requires participation. To keep up to date with all the news in both Web and graphic design, I regularly visit the important portals and blogs devoted to this line of work, be they Polish or international. The crucial ones include Behance, Smashing Magazine, DeviantArt, the FWA and New Web Pic. Additionally, I find reading and browsing books on advertising, typography, designing for the Web (including for portfolios, Flash websites and e-commerce shops) and graphic design useful. It can also be a good way to relax and get away from the digital world to some degree.

The last (but most important) sources of inspiration for me are sleep and having a life outside of work (away from my computer). Socializing with friends and going to parties, cinema, opera and other cultural events renew my energy for creative work.

When it comes to designs, I treat every project differently, but I always try to have a plan, an idea of how to do the project, from beginning to end. I make some sketches, and when know exactly what I want, I get down to work. Every design is a new challenge. I set higher standards for myself every day, and I strive to be the best at what I do.

Showcase Of Beautiful Web Design From Poland

Lech.pl

Teatr Wybrzeże

Sony Walkman

Modna Nokia

McDonald’s Happy Meal

Bigstar

Allegro za kulisami

Thetoke

Mały Głód

Eureko

Grey Wolf

Carlsberg Liverpool

Skoda Yeti

Fiat 500 Diesel

Happiness Factory

Best Photo

Rokkaboy

Festiwal Feta

Żubr

Okocim

Zając Mroku

Amica Scandium

Kakao Puchatek

Kalinowe Pola

ProfiPartners

KFC Longer Mix

Justyna Kowalczyk

Biblioteka Narodowa

Nowy Teatr

Mediations Biennale

Masterm

Common Wealth

Pawel Lenar

Fotokody

Greenline

Gellwe

Horalky

Fajne Chłopaki

Showcase Of Interactive And Creative Agencies In Poland

Click5

Cookie

OS3

Ars Thanea

Artegence

Adv

Huncwot

Opcom

Blueberry

180 Heartbeats

Change Connections

Hipopotam Studio

Golden Submarine

So Interactive

Honki

Pro-Creation

Hypermedia

Art Flash

Chigo Design

Eura 7

Infinity Group

Insignia

Netizens

Studio Synergia

Xoe Studio

Media Ambassador

Hotmind

Przemek Matylla

Yep, that’s me! I’m a web-developer, interface specialist at Allegro, one of the largest online marketplaces in Central and Eastern Europe. I am in love with CSS, JS and AS3, ad basically everything front-end related. You can visit my personal blog or follow me on Twitter.

Related posts:

1. Web Design Trends For 2009
2. 27 Places to Find Web Design Jobs
3. More Web Design Trends For 2009(layout)

4、图片标签中alt属性的使用
搜索引擎目前对于图片和flash中的内容还无法读取，因此在网站制作过程中不要大量使用图片和flash来填充整个页面。如果需要使用，也要对其进行一 定的设置，从而便于搜索引擎的理解。对于图片来说，最为重要的就是alt属性的设置。例： alt中的文字就是对图片内容的解释，以方便搜索引擎对图片进行理解。Alt一定不要滥用，如果在每个alt中都堆砌大量的关键词，会被搜索引擎认为是作 弊的，最终网站将会受到搜索引擎的惩罚。
三、网站制作中的SEO原则
1、网站的目录结构要清晰
整个网站的架构和目录设计要清晰，复杂的目录有可能会使搜索引擎迷失方向，从而错过一些网站信息。网站的目录层级不要太深，岳浩建议网站上的所有页面最多 不要超过5次点击就能达到。越重要的网页放在越顶层的目录里，这样既可以提高收录速录，也会提高相应页面的权重。
2、网站的内部链接要形成网状结构
一个好的内部链接网络能够提升网站的权重，也能够提高搜索引擎对网站的收录量和收录速度。如何才是一个好的内部链接结构呢?
第一，每个页面都应该出现指向主页或重要页面的链接。
很多网站顶部的logo往往会做成指向主页的超链接。对于重要页面，可以通过导航的形式或关键词链接的形式进行指向。面包屑导航是一个非常好的手段，因为 它既能使网页所处的层级一目了然，优化了用户体验，还能使相关的目录页面和主页得到链接。
第二，在文章内容页，可以增加一些相关链接。
比如有一篇文章，是关于CK香水的介绍。那么在文章的最后可以加上同一个网站中关于雅诗兰黛、Dior等品牌香水文章的链接。这样既丰富了用户的阅读体 验，也增加了搜索引擎对于网站”内容相关性”这一重要方面的认可。
3、网页的命名要有一定的意义
建议使用与网页内容或网页关键词相关的英文或拼音作为网页的名称。这样有助于网站的关键词排名。
4、给网站做一个网站地图(Sitemap)
网站地图实际上就是一个页面，上面汇总了网站中各个频道页面和重要页面的链接。对于结构比较复杂、页面比较多的网站，这一点尤为重点。通过这样一个网站地 图，能够保证搜索引擎到达所有重要页面并进行内容的抓取。有些搜索引擎需要网站提交xml格式的网站地图，那么网站制作人员可以用一些专业的xml生成工 具制作相应的文件并提交至搜索引擎。
5、重要网页避免使用大篇幅的flash和图片
目前搜索引擎对于flash和图片还无法读取，所以应当根据实际情况适当使用，而不要用大篇幅的图片或flash来代替文字信息。对于一些图片链接，最好 附上相应的文字说明或文字链接。
6、JS代码和CSS代码放在单独的文件中
JS代码和CSS代码搜索引擎本身是不去读取的，如果放在HTML文档中，就会使原来的文档结构变得复杂化，也大大增加了文件的体积，这些对于搜索引擎来 说都是不友好的。所以建议将所有的JS代码和和CSS代码都写在单独的外部文件中。
我相信只要网站制作人员以上述原则作为指导思想来制作网站，那么将会为后期的SEO优化打下坚实的基础，毕竟SEO的工作是一个贯穿网站建设始终的工作。 良好的网站架构加上优质的内容，再加上丰富的外链，就是一个完美的SEO工程。
作者信息：岳浩

No related posts.

And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine’s readers. Whether you like lists or not: this one will probably help you find those little nuggets out there that will help you avoid headaches and stress. Below we present useful time-savers for web designers.

You may want to subcribe to Smashing Magazine’s E-Mail Newsletter (32,600 subscribers) to keep updated about new useful tools, techniques and resources. The newsletter is sent out once every two weeks.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Time-Savers For Web Designers

LaunchList
This tool helps you review important items before the big launch. By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. Alternatives: Ultimate Website Launch Checklist and Paul Boag’s The Ultimate Website Prelaunch Checklist.

Pencil Project: Sketching and Prototyping with Firefox
Pencil is an open source GUI prototyping tool. It contains built-in stencils for diagrams and prototyping, on-screen text editing with rich text support as well as standard drawing operations. Works in Firefox 3.5+.

Zootool
Zootool is a bookmarking website and tool for collecting images, documents, links and videos from anywhere on the Web. A bookmarklet allows you to collect items quickly and easily. You can then tag and organize your saved items in Zootool’s back end. You can also integrate Zootool with Tumblr, Twitter, Delicious and FriendFeed to share what you find. Screenshot via MacStories.

Bounce
A fun and easy way to share ideas on a website. The tool allows you to make notes, write feedback in an overlay of every site and then share your notes with friends.

Ninite Batch Installer
Ninite lets you pick your favorite software from among an extensive list (Web browsers, messaging, media, images, documents, security, runtimes, file sharing, utilities, compression, developer tools and more), creates a batch installer for them and then installs them for you automatically. Alternative: Allmyapps allows you to bundle your favourite applications, install them in a single click and reinstall them whenever you need to.

Support Details
When in doubt, send your customers to this tool. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved.

MugTug’s Darkroom
When you need to modify a picture but don’t have your favorite software on hand, you can use the all-in-one image processor MugTug’s Darkroom which was created for photographers. You are able to adjust levels, white balance, exposure, contrast and saturation and apply a few photographic effects. In addition, Darkroom allows to upload pictures from Picasa and Flickr. Alternatives: Pixlr and Sumo Paint.

Visual Website Optimizer
Visual Website Optimizer is undoubtedly the best A/B, split and multivariate testing software ever created by mankind.

Keyonary
This site a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 250 Photoshop shortcuts have been added. Simply type the name of application in the search box, and it spits out a long shortcut list.

gridr buildrrr
This generators allows you to choose the grid for your layout, preview it online and generate the CSS code right away.

Instant Blueprint – Create a web project framework in seconds.
Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!

Hummingbird
Hummingbird lets you see how visitors are interacting with your website in real time. Hummingbird is built on top of Node.js, a new javascript web toolkit that can handle large amounts of traffic and many concurrent users.

jsFiddle
Online Editor for the Web, with support of JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. The tool lets you save and run your applications within the web browser.

String: create a multi-language website or app
Essentially, String is a version control for localization. This tool allows you to manage your language files – from PHP to PO to Rails to iPhone apps. You can invite users to translate your content, and keep track of changes. You can add new sections and languages as you go and then download your updated language files and place them in your app.

Titanpad
This tool allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color. Editing is done in true real time. Nice solution for everybody who works collaboratively on text documents, whether in the same office or on the other side of the world.

Pixelnovel Timeline: Version Control for Adobe Photoshop
This tool basically integrates a Subversion client in Adobe Photoshop with an Adobe Photoshop plug-in. You can preview versions right in Photoshop and manage version control directly from Photoshop. Not free.

0to255
A simple tool that helps web designers find variations of any color. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.

Load Impact: Website load/stress test
The tool lets you find out the performance limits of your website before you learn the hard way. It is an online service that simulates users accessing your site and creates test report graphs to find out how many users your site could handle.

Ideone: Online IDE & Debugging Tool
This tool is an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages, among them C++, Java, JavaScript, Perl, PHP, Python and Ruby. Nice alternatives online: PHP Anywhere (online PHP editor) and CodeRun (allows you to develop, test and debug ASP.NET, PHP and Ajax applications online).

Online Dummy Image Generator
This online tool generates dummy images for you site: you can specify size, background and foreground colors, image format and add custom text. You can also use shortcuts for several standard dimensions including ad sizes (mediumrectangle, skyscarper, leaderboard etc.), screen resolution sizes and video standards (ntsc, pal, hd720, hd1080).

HiFi RegExp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.

Tableizer
Clients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain. This tool generates HTML tables out of spreadsheet data. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and you have a properly formatted HTML table for your data.

FollowUpThen: Easy Email Reminder
If you don’t mind sending your e-mails to a third-party, try this tool for easy email reminders. On your next email just include time-interval@followupthen.com and the tool will follow up after the time interval you specify. No account is required.

Divine: Conversion tool from PSD to HTML
Divine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. Absolutely free.

Kaleido
This tool allows you to create meaningful visuals for code and can be used to plan, organize and navigate code in a more intuitive way.

Sketchpad
This application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.

Unicode code converter
Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.

Grid System Generator
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

ud.com namecheck
The tool checks availability of social usernames, domain names and trademarks.

Typograph — Scale & Rhythm
A useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.

ColorBrewer Intro – Selecting Good Color Schemes for Maps
ColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics.

CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier removes malicious code (better known as XSS) and make sure your documents are standards compliant.

Rendera
Rendera helps you learn HTML5 and CSS. Type in your HTML code and see it rendered in real-time. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports. The tool supports HAML and SASS, too.

RegExr
An intuitive tool for learning, writing, and testing Regular Expressions.

try ruby! (in your browser)
This tool allows you to try out Ruby code in the prompt command line online. It supports Ruby’s built-in methods, and contains a step-by-step tutorial for Ruby newbies.

Google Command Line
GoogleCL is a command-line utility that provides access to various Google services. It streamlines tasks such as posting to a Blogger blog, adding events to Calendar, or editing documents on Google Docs.

Tiny Fluid Grid
Simple tool that generates code for fluid grid-based layouts.

Fonolo.com
This online tool lets you skip the phone menus for hundreds of companies and makes it less frustrating to call large companies. For business owners, Fonolo allows your customers to actually see your phone menu options, before they call you.

Producteev: Creating To-Do Lists with Emails
Forward your important emails to task@producteev.com and the tool will create to-do lists on the fly and send you alerts when needed. It can be integrated in E-mails, IM, Web, iPhone, Gmail, Google Calendar etc.

AddUse – User research made easy
AddUse is a web based tool that helps you create, manage and present your user research in a simple, easy to use and cost efficient way. It’s a tool to use at any given moment in your development process. It presents the results from your user tests, surveys and questionnaires in a graphical way, efficiently helping engineering, marketing and management groups make the right decisions.

bookwhen
Online registration for events, workshops, classes and courses. The free version allows for 150 events with 300 bookings per month.

Further useful tools

see[Mike]code: tool for remote coding interview
This simple tool lets you conduct a short coding interview remotely: it creates a disposable page for the job candidate and allows you to discover people who struggle to code on big or small problems.

jsdo.it
This tool allows you to write code your browser, fork and modify any code, fix bugs and add features and also ask the community about your problems.

JavaScript Error Tracking
The service tracks JavaScript errors that occur on your site and provides you with a stack trace to help you debug. Similar errors are grouped together.

Old Version
Old Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.

Onbile
Onbile is a free platform for creating and managing your Mobile Website version for iPhone, Android and Blackberry users

Free Bookkeeping, Accounting, & Tax Services; Self Employment & Freelance Success
Easily import from online accounts to put your bookkeeping on autopilot and prepare taxes. Get up-to-date reports that give you visibility into your P&L, income, and expenses.

iSendr
iSendr lets you send files to your friends directly, without uploading to a server.

seekWP
WordPress documentation search engine.

speedtracer
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

the Awesome Highlighter
This tool lets you highlight text on web pages and then gives you a small link to the highlighted page.

OpenWith.org
This page provides detailed information about most file extension and links to free programs that can open and create each type of file.

Last Click

Kuku Klok
Online alarm clock and wake-up call for those of us who often work too much and fall asleep in front of the screen. Open the website, select the desired alarm time and set your favorite wake-up call. Keep the browser tab open. Happily, this online alarm clock works even if your Internet connection goes down. The available sounds are “Classic Clock,” “Electronic,” “Slayer Guitar,” “Military Trumpet” and “Cockerel.”

What the Hex?
Among the variety of methods of representing color values, some are easier to identify than others. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then this is a simple game for you. All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers.

Related posts:

1. 50 Extremely Useful And Powerful CSS Tools
2. 5个你应该知道的针对IE的 CSS HACK
3. 15 Essential Checks Before Launching Your Website

Why? Why? Why? There’re still internet users using ie browser and even worst they still using ie6 browser to surf. Are they holding the spirit of old school or something?

When you buy a pc or laptop that have windows operating system, it’s bundled with ie browser. If you have windows xp, I’m sure you will get ie6 browser. In the office, for sure you get ie6 for old pc. Either you’re too lazy to install new browser or your company block any installation to the pc.

Whatever the reason is, here I list some of the css hack for ie that I know.

<!–[if lte IE 6]> <![endif]–>

Most of people must have used this code. First you create a css file that looked best in Mozilla then create a substitute css file that make it look almost the same for ie.

Way to use it:

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href=" styleie6.css " media="screen" /><
<![endif]-->

Same goes to ie7 and ie8 just change the number 6.

The inline css hack for ie

Not the inline css in your website code but in the css file itself.

Way to use it: In style.css file

#header {
margin-left: 10px; /* common css code */
_margin-left: 20px /* this is ie hack */
}

Why I put _margin-left? The reason is only ie browser will read that such code and other browsers will just ignore it.

iepngfix.htc

This is the most popular hack for ie to display png image with transparent background.

Way to use it:

<!--[if lte IE 6]>
<style>
#header, #navigation, and other id or class that have .png background-image { behavior: url("link to your/iepngfix.htc") }
</style>
<![endif]-->

It did the job but you can’t use it for id or class with position relative or absolute because it will display an error message that element can’t be click. Another problem is when you use it on image that use <img src=”image.jpg />, on ie browser it will display a transparent box around it and have red x like the error when the picture is not displayed.

DD_belatedPNG?

This is also a .png transparent image hack for ie browser.

Way to use it:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(’#container, #banner, #logo‘);
// List the div id or class that contain .png image file in the bracket.
</script>
<![endif]–>

You can check out my previous post here for more detailed way to use it. Plus you can also download my free template. Wink! Wink!

Warning message (not recommended)

This should be your last way for css hack technique. Don’t simply use it, use it when you really have no choice or some of your visitor might get offended.

Way to use it:


$(function(){
if($.browser.msie && $.browser.version<7)
$('#top').before(
'<div>'+
'It has been detected that you are using Internet Explorer 6 or lower.
Unfortunately this is an unsupported '+
'browser and you won\'t be able to view this website properly.
We recommend upgrading to a newer version of '+
'Internet Explorer or FireFox.'+
'</div>'
)
});

When user browse your website using ie6, it will display something look like this on the top of the browser.

Related posts:

1. Lightbox + PhotoNav = LightNav
2. 15 Essential Checks Before Launching Your Website
3. jQuery.popeye – an inline lightbox alternative

• Part 1 – 介绍
• Part 2 – .htaccess命令
• Part 3 – 密码保护

Part 1 – 介绍

介绍

从本指南中，你将可以学习到有关.htaccess文件及其功能的知识，并用以优化你的网站。尽管.htaccess只是一个文件，但它可以更改服 务器的设置，允许你做许多不同的事情，最流行的功能是您可以创建自定义的“404 error”页面。.htaccess并不难于使用，归根结底，它只是在一个text文档中添加几条简单的指令而已。

我的主机支持它吗？

这可能很难用简单的答案来回答。许多主机支持.htaccess，但实际上并不会特别声明，许多其他类型的主机有能力但并不允许他们的用户使 用.htaccess。一般来说，如果你的主机使用Unix或Linux系统，或任何版本的Apache网络服务器，从理论上都是支持.htaccess 的，尽管你的主机服务商可能不允许你使用它。

判断你的主机是否允许.htaccess，一个标志很好的是它是否支持文件夹密码保护。为达到此功能，主机服务商需要使用.htaccess（当 然，少数情况下他们虽提供密码保护功能，但却并不允许你使用.htaccess）。如果你不确定自己的主机是否支持.htaccess，最好的办法是上传 你自己的.htaccess文件看看是否有用，或者直接发送邮件向你的主机服务商咨询。

我该怎么做？

你可能疑惑.htaccess到底能做些什么，或者你可能曾知道它的一些功能但并不真正了解你实际到底可以用它来做多少事情。

.htaccess可以做大量的事情，包括：文件夹密码保护、用户自动重定向、自定义错误页面、改变你的文件扩展名、封禁特定IP地址的用户、只允 许特定IP地址的用户、禁止目录列表，以及使用其他文件作为index文件。

创建一个.htaccess文档

创建.htaccess文件也许会给你带来一些困难。写文件很容易，你只需要在文字编缉器（例如：写字板）里写下适当的代码。真正困难的可能是文件 的保存，因为.htaccess是一个古怪的文件名（它事实上没有文件名，只有一个由8个字母组成的扩展名），而在一些系统（如Windows 3.1）中无法接受这样的文件名。在大多数的操作系统中，你需要做的是将文档保存成名为：

“.htaccess”

（包括引号）。如果这也不行，你需要将其先命名为其它名字（例如htaccess.txt），再将其上传到服务器上，之后直接使用FTP软件来重命 名。

警告

在使用.htaccess之前，我必须给你一些警告。虽然在服务器上使用.htaccess绝对不太可能给你带来任何麻烦（如果有些东西错了，它只 是没效用罢了），但如果你使用Microsoft FrontPage Extensions，就必须特别小心。因为FrontPage Extensions本身使用了.htaccess，因此你不能编辑它并加入你自己的信息。如果确实有这方面的需要（并不推荐，但是可能），你应该先从服 务器上下载.htaccess文档（如果存在），之后在前面加上你的代码。

自定义错误页

我要介绍的.htaccess的第一个应用是自定义错误页面，这将使你可以拥有自己的、个性化的错误页面（例如找不到文件时），而不是你的服务商提 供的错 误页或没有任何页面。这会让你的网站在出错的时候看上去更专业。你还可以利用脚本程序在发生错误的时候通知你（例如我使用Free Webmaster Help的PHP脚本程序，当找不到页面的时候自动Email给我）。

你所知道的任何页面错误代码（像404找不到页面），都可以通过在.htaccess文件里加入下面的文字将其变成自定义页面：

ErrorDocument errornumber /file.html

举例来说，如果我的根目录下有一个notfound.html文件，我想使用它作为404 error的页面：

ErrorDocument 404 /notfound.html

如果文件不在网站的根目录下，你只需要把路径设置为：

ErrorDocument 500 /errorpages/500.html

以下是一些最常用的错误：

401 – Authorization Required 需要验证
400 – Bad request 错误请求
403 – Forbidden 禁止
500 – Internal Server Error 内部服务器错误
404 – Wrong page 找不到页面

接下来，你要做的只是创建一个错误发生时显示的文件，然后把它们和.htaccess一起上传。

Part 2 – .htaccess命令

介绍

在上一部分，我已经简单介绍了.htaccess以及它的一些有用功能，在这一部分，我将向你演示如何使用.htaccess文档去实现这些功能。

停示显示目录列表

有些时候，由于某种原因，你的目录里没有index文件，这意味着当有人在浏览器地址栏键入了该目录的路径，该目录下所有的文件都会显示出来，这会 给你的网站留下安全隐患。

为避免这种情况（而不必创建一堆的新index文件），你可以在你的.htaccess文档中键入以下命令，用以阻止目录列表的显示：

Options -Indexes

阻止/允许特定的IP地址

某些情况下，你可能只想允许某些特定IP的用户可以访问你的网站（例如：只允许使用特定ISP的用户进入某个目录），或者想封禁某些特定的IP地址 （例如：将低级用户隔离于你的信息版面外）。当然，这只在你知道你想拦截的IP地址时才有用，然而现在网上的大多数用户都使用动态IP地址，所以这并不是 限制使用的常用方法。

你可以使用以下命令封禁一个IP地址：

deny from 000.000.000.000

这里的000.000.000.000是被封禁的IP地址，如果你只指明了其中的几个，则可以封禁整个网段的地址。如你输入210.10.56.， 则将封禁210.10.56.0～210.10.56.255的所有IP地址。

你可以使用以下命令允许一个IP地址访问网站：

allow from 000.000.000.000

被允许的IP地址则为000.000.000.000，你可以象封禁IP地址一样允许整个网段。

如果你想阻止所有人访问该目录，则可以使用：

deny from all

不过这并不影响脚本程序使用这个目录下的文档。

替换index文件

也许你不想一直使用index.htm或index.html作为目录的索引文件。举例来说，如果你的站点使用PHP文件，你可能会想使用 index.php来作为该目录的索引文档。当然也不必局限于“index”文档，如果你愿意，使用.htaccess你甚至能够设置 foofoo.balh来作为你的索引文档！

这些互为替换的索引文件可以排成一个列表，服务器会从左至右进行寻找，检查哪个文档在真实的目录中存在。如果一个也找不到，它将会把目录列表显示出 来（除非你已经关闭了显示目录文件列表）。

DirectoryIndex index.php index.php3 messagebrd.pl index.html index.htm

重定向

.htaccess最有用的功能之一就是将请求重定向到同站内或站外的不同文档。这在你改变了一个文件名称，但仍然想让用户用旧地址访问到它时，变 的极为有用。另一个应用（我发现的很有用的）是重定向到一个长URL，例如在我的时事通讯中，我可以使用一个很简短的URL来指向我的会员链接。以下是一 个重定向文件的例子：

Redirect /location/from/root/file.ext http://www.othersite.com/new/file/location.xyz

上述例子中，访问在root目录下的名为oldfile.html可以键入：

/oldfile.html

访问一个旧次级目录中的文件可以键入：

/old/oldfile.html

你也可以使用.htaccess重定向整个网站的目录。假如你的网站上有一个名为olddirectory的目录，并且你已经在一个新网站 http://www.newsite.com/newdirectory/上建立了与上相同的文档，你可以将旧目录下所有的文件做一次重定向而不必一一 声明：

Redirect /olddirectory http://www.newsite.com/newdirectory

这样，任何指向到站点中/olddirectory目录的请求都将被重新指向新的站点，包括附加的额外URL信息。例如有人键入：

http://www.youroldsite.com/olddirecotry/oldfiles/images/image.gif

请求将被重定向到：

http://www.newsite.com/newdirectory/oldfiles/images/image.gif

如果正确使用，此功能将极其强大。

Part 3 – 密码保护

Introduction 介绍

尽管有各种各样的.htaccess用法，但至今最流行的也可能是最有用的做法是将其用于网站目录可靠的密码保护。尽管JavaScript等也能 做到，但只有.htaccess具有完美的安全性（即访问者必须知晓密码才可以访问目录，并且绝无“后门”可走）。

密码保护的.htaccess文件

利用.htaccess将一个目录加上密码保护分两个步骤。第一步是在你的.htaccess文档里加上适当的几行代码，再将.htaccess文 档放进你要保护的目录下：

AuthName “Section Name”
AuthType Basic
AuthUserFile /full/path/to/.htpasswd
Require valid-user

你可能需要根据你的网站情况修改一下上述内容中的一些部分，如用被保护部分的名字”Members Area”，替换掉“Section Name”。

/full/parth/to/.htpasswd则应该替换为指向.htpasswd文件（后面详述该文档）的完整服务器路径。如果你不知道你网 站空间的完整路径，请询问一下你的系统管理员。

密码保护的.htpasswd文件

目录的密码保护比.htaccess的其他功能要麻烦些，因为你必须同时创建一个包含用户名和密码的文档，用于访问你的网站，相关信息（默认）位于 一个名为.htpasswd的文档里。像.htaccess一样，.htpasswd也是一个没有文件名且具有8位扩展名的文档，可以放置在你网站里的任 何地方（此时密码应加密），但建议你将其保存在网站Web根目录外，这样通过网络就无法访问到它了。

输入用户名和密码

创建好.htpasswd文档后（可以通过文字编辑器创建），下一步是输入用于访问网站的用户名和密码，应为：

username:password

“password”的位置应该是加密过的密码。你可以通过几种方法来得到加密过的密码：一是使用一个网上提供的permade脚本或自己写一个； 另一个很不错的username/password加密服务是通过KxS网站，这里允许你输入用户名及密码，然后生成正确格式的密码。

对于多用户，你只需要在.htpasswd文档中新增同样格式的一行即可。另外还有一些免费的脚本程序可以方便地管理.htpasswd文档，可以 自动新增/移除用户等。

访问网站

当你试图访问被.htaccess密码保护的目录时，你的浏览器会弹出标准的username/password对话窗口。如果你不喜欢这种方式， 有些脚本程序可以允许你在页面内嵌入username/password输入框来进行认证，你也可以在浏览器的URL框内以以下方式输入用户名和密码（未加密 的）：

http://username:password@www.website.com/directory/

小结

.htaccess是一个站点管理员可以应用的强大工具，有更多的变化以适应不同的用途，可以节约时间及提高网站的安全性。

相关阅读：

• KxS Password Encrypter
• Apache .htaccess Documentation
• More .htaccess Sites
• Related Reading

.htaccess的特别说明

• 启用.htaccess，需要修改httpd.conf，启用AllowOverride，并可以用AllowOverride限制特定命令的使用
• 如果需要使用.htaccess以外的其他文件名，可以用AccessFileName指令来改变。例如，需要使用.config ，则可以在服务器配置文件中按以下方法配置：
  

  AccessFileName .config

• 一般情况下，不应该使用.htaccess文件，除非你对主配置文件没有访问权限。有一种很常见的误解，认为用户认证只能通过.htaccess 文件实现，其实并不是这样，把用户 认证写在主配置文件中是完全可行的，而且是一种很好的方法。.htaccess文件应该被用在内容提供者需要针对特定目录改变服务器的配置而又没有 root权限的情况下。如果服务器管理员不愿意频繁修改配置，则可以允许用户通过.htaccess文件自己修改配置，尤其是ISP在同一个机器上运行了 多个用户站点，而又希望用户可以自己改变配置的情况下。虽然如此，一般都应该尽可能地避免使用.htaccess文件。任何希望放在.htaccess文 件中的配置，都可以放在主配置文件的<Directory>段中，而且更高效。避免使用.htaccess文件有两个主要原因，即性能和安 全。

No related posts.