Painless CSS Prefixes

Adding CSS prefixes for various browsers takes time; and many designers have to write the appropriate prefix for each, mostly for new CSS3 features. Not exactly a productive use of time. Sure, eventually you’ll have memorized them all, but it still usually means writing eight or ten lines of CSS code instead of two or three.

But if you’re using a Python framework, you can just use CSSPrefixer instead. Write your CSS code as you normally would, and let CSSPrefixer insert all of the necessary prefixes for various browsers. And then use the time you save for something that’s actually productive. (cc)


Read more by:


The Current State of HTML5 Forms

HTML5 has many new features intended to make the process of creating websites easier and to improve people’s experience in using those websites. Among the features are many enhancements to Web forms. Because HTML5 is fairly new and not all of its features have been worked out yet, not every browser supports HTML5 features the same way.

On Wufoo’s HTML5 Forms website, you can explore all of the new features to learn which browsers support which features and to what extent. The list of browsers includes various versions of Firefox, Safari, Chrome, Opera and Internet Explorer. Unfortunately, IE9 is far from wide HTML5 support in terms of HTML5 Forms. (tb)

Read more by:

Why We Should Start Using CSS3 and HTML5 Today

Original Post by:

For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset.

Continue reading

Speeding Up Your Website’s Database

Original post by:

Website speed has always been a big issue, and it has become even more important since April 2010, when Google decided to use it in search rankings. However, the focus of the discussion is generally on minimizing file sizes, improving server settings and optimizing CSS and Javascript.

The discussion glosses over another important factor: the speed with which your pages are actually put together on your server. Most big modern websites store their information in a database and use a language such as PHP or ASP to extract it, turn it into HTML and send it to the Web browser.

So, even if you get your home page down to 1.5 seconds (Google’s threshold for being considered a “fast” website), you can still frustrate customers if your search page takes too much time to respond, or if the product pages load quickly but the “Customer reviews” delay for several seconds. Continue reading

Advanced and Comprehensive HTML5 Resources

Original post by:

HTML5 is one of the most talked about topics right now among the design community. HTML5 supports many new features such as : cleaner markup, new semantic elements such as <header>, <nav>, new form objects, canvas element for drawing and much more. These features will make websites more interactive for the user and easier for the web designer to create. Rather than doing a round up post of HTML5 tutorial, we have gathered some very useful articles and resources about the HTML5 features and how it will benefit us.

Continue reading

7 Tips To Start a Web Design Career

Web design is a pretty popular activity that more people with creative skills take on nowadays. Once you have the imagination and the potential, you should definitely go for it, giving that you acquire certain skills and experience in the time being. It is not that easy to succeed to get a career in this subject, so you either have to be really confident in yourself and go till the end, or give it up and find something more suitable for you. This happens because there are tons of good designers, that will be your competitors some times in the future and you have to fight to get your own place.

The hardest thing is to start a career and we all know it. There will be downfalls and successful moments so you have to be prepared for anything. But once you have your foot in the business, then you can be sure of a good income and lots of pleasant moments.

We will share with you 7  tips that might help you get around and decide whether you are ready for this career or not. Remember that there are a lot of other things to consider before starting a career in web design and this is just a short overview. Continue reading

15 Outstanding Tools to Collect, Organize and Share Your Web Experience

If you’re a blogger, journalist or simply desire more knowledge, you’ve most definitely faced information organization problems. Sometimes being able to access and find information quickly is crucial. Nowadays the web is enormous and it’s a big advantage to have a place where you can store all your bookmarks, pictures and links, access them anytime, anywhere and be able share them quickly. If you’re as lazy as I am you’ve probably got something like a ‘Do it later’ folder in your bookmarks. And then you’re just shoving links there until that list is the length of your screen. Sometimes you’ve got a great idea and you write it down on a notepad for example. Most likely you’d forget about it and never open it again. I’m kind of a pedant and I like when everything is organized neatly and quickly available. It’s especially true with my web experience.

I remember those times when I had to dig through my browser’s history to find an image I wanted to show my friend. Then I started to wonder – is there a tool with which I could save all my bookmarks, organize pictures, write my notes and access it all immediately from multiple devices? After some time and research I came across Zootool. Ever since then I’ve been a die-hard Zootool fan. I use Zootol mainly for collecting images, however when writing this article I found some other outstanding tools with which you can quickly save, and organize, your notes and thoughts. In this article I’ve collected 15 of  the very best tools on the web to collect, capture, organize and brainstorm your bookmarks, images, notes and thoughts.

Read more by:

Dear Web Design Community, Where Have You Gone?

As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it’s remarkable to observe how quickly we’ve developed and honed our craft over all these years.

However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren’t related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.

Read more by: Smashingmagazine

10 Essential Guides, Resources and Tools for Getting Started with HTML5

HTML5 is an effective language for web developers and designers to use to structure and present content on the web. It’s increasingly used more and more, whether to make websites more functional and user-friendly, deliver video faster, or build desktop-level web apps.

No doubt you want to jump in and join the fun. But where to start, you might ask? Or you could be looking for some resources and tools while developing and designing with HTML5, perhaps? Well, today’s your lucky day. Here are 10 essential HTML5 getting started guides, resources and tools:

Read More About This Article by: S

Emotional Design with A.C.T. – Part 1

As UX professionals, we strive to design engaging experiences. These experiences help to forge relationships between the products we create and the people who use them. Whether you’re designing a website or a physical product, the formation of a relationship depends on how useful, usable and pleasurable the experience is. Ultimately, we form relationships with products and services for the same reasons we form relationships with people:

  • Pleasurable products are attractive and make us feel good. Attractive people can have the same effect.
  • Usable products are easy to interact with and easy to understand. Good conversationalists are the same.
  • Useful products fulfill our needs in a way that leaves us emotionally satisfied in the long term. Long-term relationships can fulfill our physical, psychological, emotional and spiritual needs.


In a previous article on Boxes and Arrows (Design for Emotion and Flow), I talked about the importance of balancing users’ emotional states to command attention and create flow: the mental/emotional experience where all the user’s attention is totally focused on an activity. The total engagement of the flow experience is highly immersive and encourages user loyalty. The experience of flow during interaction can be seen as one of the foundations for the formation of an ongoing relationship.

In Part 1 of this two-part article, I’ll be discussing how emotions command attention. Then, we’ll dive deeper to explore how design elicits and communicates emotion and personality to users. Emotions result in the experience of pleasure or pain that commands attention. The different dimensions of emotion affect different aspects of behavior as well as communicating personality over time. In Part 2, I’ll introduce a framework for describing the formation of relationships between people and the products they use.

Defining “Affective Design”

Some time ago, a friend offered me a ride home after work. I got into her SUV and sat down, ready for the short ride. After a few minutes, an annoying beeping sound started. “Oh,” she said, “You’ll need to fasten your seatbelt to make that irritating noise stop.” Grudgingly, I did up my seatbelt and the noise ceased, but the beeping had accomplished its purpose; I fastened my seatbelt.

This is an example of affective design: design that’s intentionally created to capture the user’s attention, triggering an emotional response that will increase the likelihood of performing a certain behavior. The emotional response can be conscious or unconscious. For example, a brightly colored button will attract users’ attention unconsciously by affecting the degree of arousal (i.e. physical stimulation). And the behavior could be any action, from clicking a button or signing up for a newsletter, to making a purchase online.

To make the unpleasant sound in my friend’s SUV stop, I had to perform a particular behavior. In this case, the stimulus was the unpleasant beeping sound, which triggered my annoyance and led me to fasten my seatbelt. With your latest web app, the stimulus is likely visual, rather than auditory, but the energy that it commands is the same. One thing these stimuli have in common is that they demand and command your attention.


Attention has been described as psychic energy.1 Like energy in the traditional sense, no work can be done without it, and through work that energy is consumed. Csikszentmihalyi (1990) named the mental/emotional state where all our attention is totally focused on an activity “Flow”. Flow is a highly engaging experience, and strong emotional engagement demands and narrows the user’s attention. In order for users to accomplish their tasks and attain Flow, we need to capture and hold their attention by managing the design of their emotional experiences.

The products we design need to attract users based on how they look and sound, persuading them (via their feelings) to approach or avoid. They also need to converse with the people using them. The way these products interact should persuade users to take particular actions in predetermined sequences, while also affording users a feeling of control. If we’ve done our jobs correctly, the result is that users will commit and transact with our system; they click the button, subscribe to the newsletter, make the purchase or book the flight.

These events mark the formation of a relationship between the user and the product or application. Each experience with a company’s products or services shapes the user’s relationship with the company’s brand. In order to build positive brand relationships, companies need to effectively manage the user’s emotional experiences during every encounter with their products or service channels. As we’ll see, the consistent expression of a particular emotion is perceived as a personality trait, and our personality traits determine the relationships we form.

Read more

Original Source by: Boxesandarrows