By default, DAT.GUI panels will be automatically added to the HTML document and fixed to the top of the screen from right to left. You can disable this behavior and append the gui DOM element to a container of your choosing.

Requirements: Javascript enabled
Demo: http://dataarts.github.com/dat.gui/
License: License Free

Sponsors

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. The CSS for that might look something like this:

div { display:block; }
div.hidden { display:none; }

In this case, I’ve used display:none to hide the content visually and from screenreaders, too.

Adding a visual effect

Now, if I want to add a visual effect, I might use JavaScript to alter a style property from value A to value B (eg. style.opacity) The script would run through the animation and apply the hidden class at the end of the animation.

What if we wanted to offset the visual effects over to CSS3 Animations?

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

div { display:block; }
div.hidden { display:none; animation: fade-out .5s 1; }

Nice and easy! Or is it? For those that have actually tried this code might be surprised to discover that this doesn’t work. It’s because once the hidden class is applied to an element, it’s immediately hidden with display: none;.

The next thing you might think to do is apply display:block in the keyframes like so:

@keyframes fade-out {
    0% { display:block; opacity: 1; }
    100% { display:none; opacity: 0; }
}

The problem with this is that non-transitionable properties like display are ignored and have no effect.

A Proposition

I propose that the CSS3 Animation specification be changed to allow for this. Keyframes should act like classes being applied to an element. Therefore, the example above is display:block at 0% and becomes display:none at 100%. As a result, the page works as expected for this scenario.

Transitioning properties

I woke up this morning thinking about this further—and I’ll readily admit that this next idea complicates things a little bit. I additionally propose that an animation-transition-property property be added. This specifies which of the keyframe properties should actually transition.

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; position: absolute; left: -999px; }
}

div.hidden {
    animation: fade-out .5s 1;
    animation-transition-property: opacity;
}

By setting the animation-transition-property, only the opacity will transition. At the end of the transition, the element is then placed offscreen using position and left properties. The default setting for animation-transition-property would be all which would allow keyframes to behave exactly as they do today. There would also be a value of none that would allow for no property to transition. This would allow for stepped animations to be created.

Reversing animations

My last proposal for CSS3 animations is the ability to reverse an animation. Right now, the spec has an alternate property that allows every odd iteration to animate in reverse but that’s not quite what we want. Again, allow me to demonstrate with an example:

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    animation: fade .5s 1;
}

div.hidden {
    animation-direction: reverse;
}

In this example, I have a fade animation applied to the div. By default, it’ll fade to 100%. When the hidden class is applied, the direction of the animation is changed and the fade goes from 100% to 0%. This allows animations to be quickly and easily re-used.

Standards Process

Writing a specification is hard and I don’t envy those that have to work through these things. It’s a balance between making something powerful and making something complicated. I hope that my ideas fall more in the former category than the latter.

Go to Source

Additionally, when you click a particular CSS selector in the editor, the preview pane will highlight the corresponding element in the preview pane so you can see what you’re going to be editing.

Sponsor

I experimented with the example a bit, and it seems to work pretty well. It seems like something that would be particularly nice for beginners or for working out really thorny CSS problems.

WebPutty is free for early adopters. You can find out more here.

Discuss

Go to Source

Additionally, when you click a particular CSS selector in the editor, the preview pane will highlight the corresponding element in the preview pane so you can see what you’re going to be editing.

Sponsor

I experimented with the example a bit, and it seems to work pretty well. It seems like something that would be particularly nice for beginners or for working out really thorny CSS problems.

WebPutty is free for early adopters. You can find out more here.

Discuss

Go to Source

Additionally, when you click a particular CSS selector in the editor, the preview pane will highlight the corresponding element in the preview pane so you can see what you’re going to be editing.

Sponsor

I experimented with the example a bit, and it seems to work pretty well. It seems like something that would be particularly nice for beginners or for working out really thorny CSS problems.

WebPutty is free for early adopters. You can find out more here.

Discuss

Go to Source

What should you keep in mind when thinking of a domain name? How do you find the right domain name quickly and efficiently? This article shares some useful tips about choosing domain names and presents some tools to find the exact domain name for your website.

Keep it short

While you could call your website thegreatestwebdesignblogintheworld it’s a good idea not to do so. Keep your domain name short and simple. Short domain names are easier to remember, faster to type and generally they’re better for your business. There may be some exceptions, however. For example, it’s acceptable to call your website fashionphotographyblog because it’s ordered and fpb might be even harder to remember, but for the most part – just keep it simple.

Keep it equal

Try to use the same domain name like you’ve named your website or business. It’s pretty important since people tend to think of a website after it’s name, not the domain. Naming your domain after your website’s name will give you an advantage and recognition. Don’t choose a domain like clothesandfootwear if your online shop is called shop x. It will be much easier for people to remember and recognize your website/brand if you use it’s name as a domain name.

Keep it unique

Try to be unique and memorable with your domain name. Don’t choose a domain name which might be easy to confuse with others or which might infringe on already existing domains/brands/companies. A unique and memorable domain name will pay you back when you’ll be looking for an audience. Having a unique domain name will also help you to develop your brand and image.

Keep it universal

When choosing a domain name you have to find the right balance between being specific and general. Try not to think about how your website looks right now but how it might look after two years. Think of possible growth, new niches and directions of development. The point is not to let your domain name limit your opportunities. For example, you start a blog about WordPress theme development and choose a domain name like wordpressthemeblog. After a while your blog becomes popular and you decide it would be a great idea to sell some WordPress themes. Your domain name kinda traps you saying that your website is a blog and nothing else. A domain name can keep you stuck in one specific field with limited potential to expand. Don’t bother yourself with this too much, however keep in mind that your website might end up quite different than you initially thought.

Keep it easy to remember

Besides being unique you have to think of a name that is easy to remember, especially if you’re starting an online business. If you have a unique, easy to remember domain it will be easier for people to associate your domain with your brand. It’s not always true that short is easier to remember, yet try to keep your domain logical and memorable. Short, unique and easy to remember are the main things to focus on when thinking of a domain name.

Tools

1. DomainTyper

DomainTyper allows you to search for your domain as fast as you can type. It’s a simple and easy way to check domain name availability. You can also use their domain name generator to create a nice and easy to remember domain. It randomly generates several .com domains.

2. Panabee

Panabee is the simplest way to brainstorm names for websites, mobile apps, and products. Availability is not the only thing you get – translations, phonetic variations, related terms, and more interesting stuff is offered.

3. Moniker

Moniker can help you find the right domain name – even if it’s already registered. With Moniker you can manage a domain or several thousand. Safely, securely and easily. Moniker has been offering domain registration for over a decade and their experience is unmatched.

4. Domainr

Domainr helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. When you type a search term into Domainr, you’ll see all the different possible domain names it creates.

5. Domize

Domize is the place to find your next domain name whether you’re a first-time buyer or a seasoned collector. Domize offers unmatched speed and security to allow you to search quickly and in complete privacy. All queries are encrypted over SSL and never leave Domize’s servers.

6. NameStation

NameStation is a website for finding name ideas and available domains. People can get name suggestions, feedback and ratings from their friends. Businesses can collaborate and hold naming contests to engage customers.

7. NameTumbler

At Name Tumbler you can find great, generic domain names in minutes. All great domain names are not yet taken. Use Name Tumbler to quickly find that perfect domain name.

8. Domainit Suggestion Tool

Domain Name Suggestion tool by Domainit helps you to find domain names that are available.

9. Domain Exposer

Domain Exposer is a tool which helps you find available domain names. There are still chances to come up with a great name. Registering a new domain name is often cheaper than buying one from domain brokers. By combining your keywords with our group of common words it’s easy to get a new domain name. The tool checks the domain name availability for all the suggestions.

10. Pcnames

Based on your query, PC Names instantly checks whether .com, .net, .org, .info, .biz, .us, .mobi and .name domain names are available. The domain search results will appear with 2-second delay for your convenience.

11. Namebio

Namebio is a searchable domain sales index. Here you will find domain sales comps, domain sales history, domain sales comparisons and domain sales comparables, domain auction results, and domain name resources as well as general domain information and tools.

12. DomainTools

DomainTools provides a directory that serves as a comprehensive snapshot of past and present domain name registration and ownership records. We also offer a comprehensive set of research tools that help you discover and monitor everything about a domain name.

13. Olddomains

At Old Domains you can find valuable domain names with history for cheap price. You can browse through thousands of old domains and get your own name idea based on interesting keywords. You can also check previous domain content to see if it was positioned for your own needs.

14. Wordoid

Wordoid is a webapp that strives to help you invent a good name. It makes up new words. Automatically. It knows how to create words in English or Spanish. It even knows how to create words in an imaginary language, constructed by blending two or more real languages together.

15. RhymeZone

With Rhyme Zone type in a word below to find its rhymes, synonyms, definitions, and more.

16. Word Mixer

Word Mixer breaks down words, mixes and matches fragments, and reassembles them to create unique words.

17. WordConstructor

Use this random word generator to generate new words or change existing ones for a domain name, a name for your child, company, pet or band.

18. Random Word Generator

By analyzing the frequency of pairs of letters in 45 402 different words Random Word Generator generates new words which, although they don’t have any meaning, are reasonably syntactically correct.

19. Who.is

Use who.is to quickly locate administrative and technical contact information for the owner of any domain name. Domain name results also include IP and IP location information, web server information, related domain availability, premium domain listings and more.

20. Flippa

Flippa is the number one marketplace for buying and selling websites. Website sellers come to Flippa due to it having the highest sales rate in the industry—largely due to the massive size and quality of the Flippa website buyer audience.

Do you know any more great tools you use to find your new domain name? Share it here!

Go to Source

Advertise here with BSA

A web design is made up of various components, all working together to accomplish a goal – whether it be building a community or selling a product. These parts must compliment each other in a way that creates a good experience for the user. Miss the mark on one element and potential subscribers or sales could be lost, but execute correctly on all parts and chances are you will have created an effective web design. Here’s an infographic that helps break it down for you.

Click to enlarge.

Go to Source

In both cases, elements that can have alt attributes are omitted from the returned string. In my opinion, alt text is the text content of an img, input[type=image] or area element and should be returned by methods like these. I also find it a bit weird that they return the contents of script elements.

Not having any luck finding a method that includes alternative text and omits script elements when getting text content, I wrote my own.

Read full post

Posted in JavaScript.

Go to Source

In both cases, elements that can have alt attributes are omitted from the returned string. In my opinion, alt text is the text content of an img, input[type=image] or area element and should be returned by methods like these. I also find it a bit weird that they return the contents of script elements.

Not having any luck finding a method that includes alternative text and omits script elements when getting text content, I wrote my own.

Read full post

Posted in JavaScript.

Go to Source

That may be ok, though often it would be more appropriate to use <button type="button">Do something</button> or <input type="button" value="Do something" />.

What is not ok is inserting an a element without giving it a non-empty href attribute, i.e. <a href="#">Do something</a>. Without a non-empty href attribute, the “link” will not be focusable and cannot be activated from a keyboard.

Read full post

Posted in Accessibility, JavaScript, Quick Tips.

Go to Source

That may be ok, though often it would be more appropriate to use <button type="button">Do something</button> or <input type="button" value="Do something" />.

What is not ok is inserting an a element without giving it a non-empty href attribute, i.e. <a href="#">Do something</a>. Without a non-empty href attribute, the “link” will not be focusable and cannot be activated from a keyboard.

Read full post

Posted in Accessibility, JavaScript, Quick Tips.

Go to Source

I couldn’t find a function to do that so I wrote my own. It’s pretty simple, but in case anyone else needs this I thought I’d share.

Read full post

Posted in JavaScript.

Go to Source

So we’re about done learning about Handlebars.js, but I’ve got a few examples of tricks I’ve found while using Handlebars that I figured I would share. If you haven’t read them yet, I’d highly recommend reading Part 1 and Part 2 of the series on Handlebars before you dive into this post.

The debug Helper

It can be easy at times to get confused about where you are in the stack in a Handlebars.js template. I usually keep a debug helper around to help me figure that out.

1
2
3
4
5
6
7
8
9
10
11

Handlebars.registerHelper("debug", function(optionalValue) {
  console.log("Current Context");
  console.log("====================");
  console.log(this);
 
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

You could then use that helper in any template like:

1

{{debug}}

or like:

1

{{debug someValue}}

and you’ll see output in the JavaScript console letting you know what’s going on:

1
2
3
4
5
6
7
8
9
10
11
12

Current Context
====================
email: "alan@test.com"
first_name: "Alan"
last_name: "Johnson"
member_since: "Mar 25, 2011"
phone: "1234567890"
stripeClass: "even"
__proto__: Object
Value
====================
Alan

A jQuery Plugin

It tends to be a pretty regular pattern with Handlebars to compile a template, process it with some data, and then fill a DOM element with the results. Here’s a quick jQuery plugin that does all of that for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<html>
  <head>
    <title>What's Up?</title>
  </head>
  <body>
    <div id="content">
      This is where the content goes!
    </div>
    <script id="template" type="text/handlebars">
      Hello, {{name}}!
    </script>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="handlebars-0.9.0.pre.5.js" type="text/javascript"></script>
    <script type="text/javascript">
      (function($) {
        var compiled = {};
        $.fn.handlebars = function(template, data) {
          if (template instanceof jQuery) {
            template = $(template).html();
          }
 
          compiled[template] = Handlebars.compile(template);
          this.html(compiled[template](data));
        };
      })(jQuery);
 
      $('#content').handlebars($('#template'), { name: "Alan" });
    </script>
  </body>
</html>

Updating More Than Just The Template Area

A lot of dynamic applications tend to have a layout that generally stays the same regardless of the template you’re displaying, and then a content area that shows the template that you’re looking at. Maybe there’s a sidebar with some navigation in it that generally stays the same, but each time you update the main content area you also need to update the title on the page. It’s pretty easy to cheat a bit with Handlebars to make that work. Handlebars helpers are allowed to not return anything, in which case they won’t add anything to the template output. You can use a helper that doesn’t return anything to update other parts of the page!

Imagine a site that has a structure something like this:

And maybe the markup looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
  <h1>Title</h1>
  <div id="nav-sidebar">
    <ul>
      <li>Links</li>
      <li>Go</li>
      <li>Here</li>
    </ul>
  </div>
  <div id="content">
  	Content goes here!
  </div>
</body>

Here’s a quick helper that will let you update the h1 for the title each time you apply content to the main content area:

1
2
3
4
5

Handlebars.registerHelper("title", function(fn) {
  $('h1').html(fn(this));
 
  return "";
});

And finally, a template that uses the helper:

1
2
3
4
5

  {{#title}}Details for {{name}}{{/title}}
 
  <div class="user-details">
    ...user details template stuff goes here...
  </div>

When the template above is run, it will call the title helper, but since the title helper just returns an empty string, it won’t add anything to the template output. It will, though, use jQuery to update the h1 element for the page’s title.

Wrapping Up

I think this about wraps up the series on Handlebars.js. It’s been fun to share Handlebars.js with everyone, and to hear about the apps you’re writing with Handlebars.js. Please let me know in the comments if there’s anything else relating to Handlebars.js that you’d be interested in hearing about, or if you have any questions.

Go to Source

Download the audio file.

Mandy Brown, Roger Black, Daniel Mall and I discuss the state of web design and publishing at SXSW Interactive, Sunday March 13, 2011.

Photos courtesy Adactio. Audio element courtesy HTML5. Sorry, no transcript is available at this time.

Go to Source

Why did so few of those hundreds (or thousands) of your followers click your link; after all, it’s a great post?

Your headline let you down!

People will ONLY click your links and read your content, if the headline or title is compelling enough.  If just a small percentage of your followers are clicking on your links, it’s because the headline isn’t selling that link to your followers.  It’s not compelling them enough, to make them want to click through to your site and find out more.  Unless they do that, they will never know how great your posts are, which is why headlines are easily the most important element of your content.

Your headlines or titles are what open the door to your content.  To succeed, your content has to be effective too, but nothing happens until people actually READ what you have written and your headline is what either encourages them to read the first line of your material – Or not.  Get the headline wrong and you make it very hard for your content to get noticed.

6 headline secrets behind yesterday’s post

To show you what I mean, I will use the example of yesterday’s post, which was extremely successful.  It’s title was: Build a great client list with this 1 simple idea.  Here are six of the secrets behind it.

The headline didn’t try and do everything.  There was enough information in that headline to explain what the post was about and get the reader curious.  To discover what the “1 simple idea” is, the reader has to click through.  The more curious you can make someone, the more likely they are to take action; in this case click a link.

The headline was relevant to my readers. It was a marketing related headline and my friends on social networks connect with me because they are interested in marketing.

The headline made a compelling promise.  Every headline makes a promise to the reader.  The promise of that headline, is that if they click that link, I will give them some valuable information, which will help them with a huge problem; attracting better clients.  The post content delivers on the promise, which is essential if you want people to come back!  A great headline, which points to a post that fails to deliver on the headline’s promise, will cause people to feel cheated and stop them trusting your headlines and links in future.

The headline let people know it was easy. Part of the headline’s promise, is that they will learn this valuable information, quickly and easily.  It’s just 1 simple idea.  This requires little time investment from the reader, with the potential to learn some valuable business information.

The headline didn’t keyword stuff. Some people seem to believe that the only way to attract search engine traffic, is to stuff their headlines with keywords.  This is flawed for 2 reasons.

1. You can SEO your posts, by making the version of the title which people see, different from the version which search engines see.  If you use WordPress, there are plugins that allow you to do this.  If, like me, you use the Headway WordPress Theme, (affiliate link) you don’t need to mess around with plugins, it’s there out of the box (along with a ton of other great SEO features!)
2. Your content, including titles, should be written for people, NOT search engines.  If you try and write posts that appeal to search engines rather than people, even if someone does find your site on Google or Bing etc, it will read poorly and therefore fail to convert them into subscribers, clients or customers.

The headline wasn’t clever. Some people write clever headlines, which lack any compelling reason for a busy person to click their link.  They are often abstract or cryptic, rather than interest grabbing and inspiring.

Headlines are important so give them the time they deserve

There are very few things in life, which come with a guarantee, however, I can guarantee that if you make your blog post titles more compelling, you will definitely get more traffic from social networks and feedreaders.

Invest as much time as is required, to get your headlines as attractive as possible and just watch the increase in your blogging results.

Originally published on Jim’s Marketing Blog

Go to Source

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don’t need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.

Requirements: jQuery Framework
Demo: http://webdesignerwall.com/tutorials/animated-scroll-to-top
License: License Free

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

However, jRumble is currently a little buggy in Internet Explorer. A rumbleSpeed of 0 seems to break the rumble. Also, there is currently no rotation on any objects in IE. This plugin is free to use!

Requirements: jQuery Framework
Demo: http://jackrugile.com/jrumble/
License: MIT License

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Read full post

Posted in CSS.

Go to Source

This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Read full post

Posted in CSS.

Go to Source

To find more courses on Dreamweaver, check out our Killersites Video Tutorial Library!
Note that all of our videos are in a higher quality when purchased from our Killer Video Store or by subscription to our Video Tutorial Library!

Thanks,

Jody
killersites.com

Go to Source

A very creative artistic vector set with a lot of extra attention being applied applied to each vector element to make it look really good and stand out. This vector set has a wide range of usage where this stunning vector set can be used. i  hope you enjoy this freebie and put the set to good use.

License Details

The vector set can be used within commercial and non-commercial design projects. The vector set CAN NOT be redistributed on any other website without permission from the Creative Nerds team.

Preview

Go to Source

     $('.entry').waypoint(function() {
          alert('You have scrolled to an entry.');
     });

Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page.

Waypoints is dual licensed under the MIT and GPL licenses. You can fork the project or report any issues in the GitHub repository.

Go to Source

Read more

Learn more about WaitingRoom.Caraso.com in Dataopedia.com

Find out how much WaitingRoom.Caraso.com is worth with Stimator.com

Have a business question? Ask Startups.com

Go to Source

I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat.

Read full post

Posted in Accessibility, CSS.

Go to Source

I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat.

Read full post

Posted in Accessibility, CSS.

Go to Source

Waypoints is dual licensed under the MIT and GPL licenses. It has been tested with jQuery versions 1.4+ in IE6+, FF3+, Safari 4+, and Chrome 6+.

Requirements: jQuery Framework
Demo: http://imakewebthings.github.com/jquery-waypoints/
License: MIT, GPL License

Sponsors

Esyndicat – A Powerful PHP Web Directory Software

Go to Source

While that’s not totally relevant I just wanted to back up my claims with some real achievements, so you know I don’t pull stuff from thin air. Either way, we got the introduction to the article underway – we will try to figure out the good and the bad startup ideas.

What this article will not be is another list of things you need  to have to create your own startup. You probably can get tons of those from uncle Google, so let’s not be repetitive and try to dig deeper. This article is going to be more about the factors you need to take into consideration. Launching a startup is actually not that hard, the tricky part is not letting it die.

So let’s begin with an optimistic question:

Why will you fail?

You really need to be realistic with your own project. Otherwise you may end up wasting not only your time, but the time of others and that hurts your reputation for future cases. Ask yourself what are the weak points of your projects and try to patch them up as good as you can. The issues will vary depending on individual projects, but let’s try to look at some general ones. You might think that you don’t really need to do it and that you will somehow manage everything on your own. That may be true sometimes, but in the majority of cases, if you have not planned out everything beforehand, you might as well not even start.

Same ideas

When we had talks with some investors on one of our startups, they were very keen on asking how our project brings something new to table. The “new” factor is a very important element in today’s market.

Don’t get the wrong idea though. Copies of different, successful sites are a common practice. If yours is one of them, ask yourself  - does it have elements in it, that will make it better than the rest? It’s very important that you have something different, new, or better to offer. Even with a great and innovative idea you will still have problems with generating website traffic, with a bad idea it will be much harder.

Either with a new or existing idea you still face the same follow-up problem:

Do we really need it?

If you copy somebody else’s idea than make sure there is still a need for another website of its kind. Take a look at your future competitors and find out why they are successful and why some of them failed. You will need to learn from both if you want to have a shot. Sometimes patent issues may become a problem as well. Facebook has sued some of its local ripoff like StudiVZ in Germany. Wizards of the Coast have extensive patents on Trading Card Games which resulted in many lawsuits over the years, recently Nintendo has settled on undisclosed terms with Wizards regarding their Pokemon Card Game. Keep that in mind if you’re trying to copy ideas from different sites. If you have a new, brilliant idea you can try to get a patent on it yourself.

So what if your idea is a new one out there? In that case you need to do some research. Pitch your idea to some people and ask them if they would be interested in your service. Try to ask a variety of people, people that are different ages, gender, race etc., you want to get as much info as possible. You’re not only looking for the amount of interest, but also specifying your target audience. Going after the wrong type of folks with your project may very well be the difference between it being successful and dying a quick death.

The “need” of the market leads unavoidably to looking at the market itself.

Know your market

You may choose to have a startup targeted at a local area, to one country, a few countries, or even the whole world. Whichever it is, you need to know not only the audience in it, but gather knowledge about the market itself. For example, if you want to create a portal about racing games, you will want to find out as much about the market for racing games as possible. How much people play racing games, what figures do the units sell in, where are the best buyers etc. but the most important factor you might want to look at is: is the market going up or down and what are the future predictions in that regard. If you manage to step in during the early stages of the market developing then all the treasures later will be yours to take. On the other hand if the market is going down than it’s not really looking for more products, but rather to close down the least efficient ones and if you’re just starting, then you are one of the least efficient ones.

Another important factor we should look at closely is – how many people are there in your target audience. Try to come up with an estimate. It doesn’t have to be very accurate, anything close to 30% correctness is all right really. Then take this number and find what percent of this audience your competitors attract. Low numbers mean there’s still a lot of space for improvement and for you to come in. High percentages mean the contrary, but they also mean, that lot’s of the target audience is already aware that the Internet can expand their experience of their hobbies etc., which is a good thing as well.

Would you be interested?

That’s a question you have to ask yourself and answer it as honestly as you can. Actually not even that, answer it as skeptically as you can. Write down thoughts why you hate your own project, your fears with it etc.
When you have them down, you know what you still need to work on. Nothing can be too perfect and nothing really is. The flaws which you miss now will come out eventually at which point it maybe hard to counter them.

Innovation

Finally we come to what we started with. You just absolutely have to have this checked. If your product will not be superior ‘on paper’ to the ones already out there, then your just wasting your time. While you work on your project, your competition is already working on making theirs better, so by the time you launch, they will be already way ahead.

Your only advantage is that your project is still flexible and you can take care of some core problems. Functioning projects don’t have that flexibility and the bigger they are, the longer and harder it is to make decisions about changing them.

That’s how you get ahead, or at least how you try.

What to take into consideration?

So now that we’ve got your start-up working on paper, let’s figure out if it will work in real life… or at least the virtual one.

The lazy crew factor

If you’re working alone, than you can skip this one all together, as only your motivation to work will impact the project. But chances are, you have a crew to work with you. In any project I’ve led/been a part of there always was a problem with some people being less motivated to work than others. You would imagine that this problem is non-existent if you choose to pay the crew to do their work. It’s not the case though. Even if their wages depend on it, some people will just not work at 100% or anything close to that and some will not work at all.

The problem is quite hard to tackle and will probably be one of your main issues. We can read coaching books, threaten, torture (in some countries at least) and so on, but the problem will remain. What you want to do, is minimize it as much, as possible. Demanding work reports from everyone including yourself at specific intervals of time (maybe once a week for example) seems to work quite well. Remember though to keep the balance between fighting laziness and becoming a despotic tyrant. If you push your crew too much, they will start to push back. You can’t expect too much from folks who don’t enjoy doing what they do. Startups are about vision and passion. Not only yours, but your teams as well.

Necessary skill set

So what do you really need to get the project up and running? There are some essential skills and some optional ones. In a perfect world you want all of them at the highest level possible, but in the real world that’s not likely, unless you have enough money to hire the very best (at which point you probably wouldn’t need to create a startup in the first place).

Designer – somebody has to prepare the mock ups of what the site will look like. Without a Graphic Designer, who knows what they’re doing you probably will not only end up with a site that looks non-professional, but you run the risk of your project being very hard to use. Reading three design books per day is one thing, but you won’t get anywhere without experience. Knowledge is one thing. The ability to adapt to various situations people gain by doing, not seeing.
The first impression of your start-up a person has is usually the design. In that crucial few seconds your visitors will decide if they want to stay for a bit or move on. If your landing page can’t catch their interest, then it doesn’t really matter if you have the most brilliant coders on the clock.

Coder – making it look nice is one thing, making it work is another. There are many programming languages out there and many ways to get you to your goal. You really need to be able to trust your programmer(s). If you have multiple coders on your project, initiate a brainstorm between them so they come up with the best solutions between themselves. You will avoid many complaints of one programmer saying about another “I could have done that better.” They just love to point this out.

Project Manager – someone has to coordinate the work of your team. In most of the cases it will be you. It helps a lot to know a thing or two about the limitations and capabilities of each technology. Without it, you might request things that are actually more harmful than helpful. Don’t be afraid to listen to your “minions”. Their input may not only help you, but will keep them feeling happy and valued.

Public Relations – most people think they can do that by themselves, most of them can’t, or do a poor job. You need a diplomatic skill set and an open mind. When on the phone or other “live” chats, you need to be quick on your feet and come up with the best answers and solutions on the spot. Too many pauses, too much “I have to consult with a colleague about that” and you’re going to lose your client or partner. At some point you will need someone who can speak with other people. There are many valuable assets that can make a big difference, the art of persuasion is high on that list.

Writers – you probably think I mean people who write articles for your website etc. While this is true, there’s more to it than that. If you need people to write articles or not depends really on the project you undertake. But you will need someone to write official documents, letters, summaries etc. It’s beneficial if your PR person can do that, it helps to keep things running more smoothly and coordinated.
If you’re thinking of pitching your idea to investors at some point, creating documents one after another will be demanded of you and you want to have those made correctly if you are to succeed getting some extra money. Not to forget, The European Union loves start-ups and they have special programs to fund those, but more on that later.

Accountant – when the money starts flowing you might want to keep track of it. Make some mistakes and your IRS counterpart will find them. Not only that, a good accountant will help you to actually get more money with the knowledge of various laws and workarounds.

Language

If you’re natively an English speaker, then the problem is non-existent for you. But if you’re starting in a country with a different language, then you have to decide which people are your primary concern.

The home field advantage of your own country is a big help. You know the culture and customs of your own nation, which can be very helpful. It puts you in front of any “outside” projects trying to make it in your region.
But of course, you’re restricting yourself to a smaller audience. English is pretty much the basic language of the Internet now and if you choose to use it, you can get exposed to a much broader audience. But with a bigger field comes more players, so your competition will be much more fierce.

Another downside to choosing English, is that it may prove hard for you to find team members which will be able to contribute any written content to your website. Understanding the language and writing it correctly are two separate things.

Project Profile

This comes back a bit to the Target Audience factor. We’re going to build on it a bit more. Depending on your primary audience you should build and design your start-up accordingly. Like, you won’t put Ponies on a site selling heavy metal accessories (though it’s probably coming…). But that’s just the most simple example, the implications are really very vast.  The idea is that you have to find a way to get to your audience whenever possible. Attention to the smallest details separate the wolves from the sheep.

Recently on one of my projects we implemented ClickTale , a software which tracks what your visitors do on your website and puts it into various graphical statistics and videos. I guess how useful it can be is self-explanatory. Being able to see where your visitors struggle and what parts of the website they tend not to be interested in at all is helpful in improving your business. It takes a lot of time, yes. But the data you get is invaluable.
I encourage you to try different software of the sort as well, by no means have I enough information to claim that ClickTale is the best one out there, but we like it.

Do you need funds?

Depends on who you know. Theoretically, you can get away with creating a start-up without putting any money into it, but you need to convince some people to do it with you for the promise of future gains.

Your chance at doing that depends on what you have achieved so far and who you already know. If you have friends you can ask directly, do so. Nothing really to lose, is there? If you’re short-handed though and don’t want to spend money you might try advertising your idea on various forums or places which allow you to search for specialized people for a project.

I have tried all of the above and all of the above actually work. The problem is (obviously), that you don’t really know anything about the people you get from the Internet. Nothing really stops them from walking away after a month and leaving you on ice. You don’t know how reliable or fast they are. So it’s a bit of a crap shoot.

On the other hand, if you’re willing to put up some money for the work, you have a better chance of more serious people coming forward. Don’t take it for granted though. Trial periods and work history checks are your friends. Contracts are another thing that keeps you safe.

You need a server and a domain. Although nowadays there’s so many hosting companies fighting for clients, that if you look around enough you might get a year or two of both for as little as a few cents. It may not be something you want for the long run, but it’s definitely going to be enough to get you started and see if it goes anywhere.

Can you get funds?

Another thing, which is often missed, is the fact that you can actually try to get money for your start-ups. Ever seen the Dragon’s Den TV Show? There are investors out there willing to give you money for equity in your company. More often than not, you’ll get not only money but you’ll get their help as well, which can be the real difference between success and failure.

The best part is you don’t really need your start-up working! If your idea is really good, you can pitch it as that – an idea, for which you need funds. I know of several projects which got funds without having a working website. Most of them are doing well now, some of them even very well.

Be prepared though. The investors will most probably want you to create a lot of documents and provide a lot of data during your pitch. It is a pain to create tons and tons of pages of documents, but hey, you want the money – earn it. Especially since the money we’re talking about usually starts with tens of thousands of dollars.

Where to look for your Dragons? Depends on where you live. It’s impossible for me to tell you where to go, because it will vary depending on where you live. Your investors will probably want to meet you in person a few times before they make their decision, so you probably want to look for someone fairly close to where you are.

I mentioned before that the European Union has its own programs to help you as well. You need to create a good business plan for them though. There are some people out there that specialize in writing them exactly for that purpose, some of them have a high success rate. You need to provide some financial input yourself though, if you want to ask the EU for money. So it’s your choice really if you want to go that way.

Good luck then

That would be it. Now get out there and show people what you are made off. If you don’t make it, you’ll have gained valuable experience should you ever want to try again.

Go to Source

While that’s not totally relevant I just wanted to back up my claims with some real achievements, so you know I don’t pull stuff from thin air. Either way, we got the introduction to the article underway – we will try to figure out the good and the bad startup ideas.

What this article will not be is another list of things you need  to have to create your own startup. You probably can get tons of those from uncle Google, so let’s not be repetitive and try to dig deeper. This article is going to be more about the factors you need to take into consideration. Launching a startup is actually not that hard, the tricky part is not letting it die.

So let’s begin with an optimistic question:

Why will you fail?

You really need to be realistic with your own project. Otherwise you may end up wasting not only your time, but the time of others and that hurts your reputation for future cases. Ask yourself what are the weak points of your projects and try to patch them up as good as you can. The issues will vary depending on individual projects, but let’s try to look at some general ones. You might think that you don’t really need to do it and that you will somehow manage everything on your own. That may be true sometimes, but in the majority of cases, if you have not planned out everything beforehand, you might as well not even start.

Same ideas

When we had talks with some investors on one of our startups, they were very keen on asking how our project brings something new to table. The “new” factor is a very important element in today’s market.

Don’t get the wrong idea though. Copies of different, successful sites are a common practice. If yours is one of them, ask yourself  - does it have elements in it, that will make it better than the rest? It’s very important that you have something different, new, or better to offer. Even with a great and innovative idea you will still have problems with generating website traffic, with a bad idea it will be much harder.

Either with a new or existing idea you still face the same follow-up problem:

Do we really need it?

If you copy somebody else’s idea than make sure there is still a need for another website of its kind. Take a look at your future competitors and find out why they are successful and why some of them failed. You will need to learn from both if you want to have a shot. Sometimes patent issues may become a problem as well. Facebook has sued some of its local ripoff like StudiVZ in Germany. Wizards of the Coast have extensive patents on Trading Card Games which resulted in many lawsuits over the years, recently Nintendo has settled on undisclosed terms with Wizards regarding their Pokemon Card Game. Keep that in mind if you’re trying to copy ideas from different sites. If you have a new, brilliant idea you can try to get a patent on it yourself.

So what if your idea is a new one out there? In that case you need to do some research. Pitch your idea to some people and ask them if they would be interested in your service. Try to ask a variety of people, people that are different ages, gender, race etc., you want to get as much info as possible. You’re not only looking for the amount of interest, but also specifying your target audience. Going after the wrong type of folks with your project may very well be the difference between it being successful and dying a quick death.

The “need” of the market leads unavoidably to looking at the market itself.

Know your market

You may choose to have a startup targeted at a local area, to one country, a few countries, or even the whole world. Whichever it is, you need to know not only the audience in it, but gather knowledge about the market itself. For example, if you want to create a portal about racing games, you will want to find out as much about the market for racing games as possible. How much people play racing games, what figures do the units sell in, where are the best buyers etc. but the most important factor you might want to look at is: is the market going up or down and what are the future predictions in that regard. If you manage to step in during the early stages of the market developing then all the treasures later will be yours to take. On the other hand if the market is going down than it’s not really looking for more products, but rather to close down the least efficient ones and if you’re just starting, then you are one of the least efficient ones.

Another important factor we should look at closely is – how many people are there in your target audience. Try to come up with an estimate. It doesn’t have to be very accurate, anything close to 30% correctness is all right really. Then take this number and find what percent of this audience your competitors attract. Low numbers mean there’s still a lot of space for improvement and for you to come in. High percentages mean the contrary, but they also mean, that lot’s of the target audience is already aware that the Internet can expand their experience of their hobbies etc., which is a good thing as well.

Would you be interested?

That’s a question you have to ask yourself and answer it as honestly as you can. Actually not even that, answer it as skeptically as you can. Write down thoughts why you hate your own project, your fears with it etc.
When you have them down, you know what you still need to work on. Nothing can be too perfect and nothing really is. The flaws which you miss now will come out eventually at which point it maybe hard to counter them.

Innovation

Finally we come to what we started with. You just absolutely have to have this checked. If your product will not be superior ‘on paper’ to the ones already out there, then your just wasting your time. While you work on your project, your competition is already working on making theirs better, so by the time you launch, they will be already way ahead.

Your only advantage is that your project is still flexible and you can take care of some core problems. Functioning projects don’t have that flexibility and the bigger they are, the longer and harder it is to make decisions about changing them.

That’s how you get ahead, or at least how you try.

What to take into consideration?

So now that we’ve got your start-up working on paper, let’s figure out if it will work in real life… or at least the virtual one.

The lazy crew factor

If you’re working alone, than you can skip this one all together, as only your motivation to work will impact the project. But chances are, you have a crew to work with you. In any project I’ve led/been a part of there always was a problem with some people being less motivated to work than others. You would imagine that this problem is non-existent if you choose to pay the crew to do their work. It’s not the case though. Even if their wages depend on it, some people will just not work at 100% or anything close to that and some will not work at all.

The problem is quite hard to tackle and will probably be one of your main issues. We can read coaching books, threaten, torture (in some countries at least) and so on, but the problem will remain. What you want to do, is minimize it as much, as possible. Demanding work reports from everyone including yourself at specific intervals of time (maybe once a week for example) seems to work quite well. Remember though to keep the balance between fighting laziness and becoming a despotic tyrant. If you push your crew too much, they will start to push back. You can’t expect too much from folks who don’t enjoy doing what they do. Startups are about vision and passion. Not only yours, but your teams as well.

Necessary skill set

So what do you really need to get the project up and running? There are some essential skills and some optional ones. In a perfect world you want all of them at the highest level possible, but in the real world that’s not likely, unless you have enough money to hire the very best (at which point you probably wouldn’t need to create a startup in the first place).

Designer – somebody has to prepare the mock ups of what the site will look like. Without a Graphic Designer, who knows what they’re doing you probably will not only end up with a site that looks non-professional, but you run the risk of your project being very hard to use. Reading three design books per day is one thing, but you won’t get anywhere without experience. Knowledge is one thing. The ability to adapt to various situations people gain by doing, not seeing.
The first impression of your start-up a person has is usually the design. In that crucial few seconds your visitors will decide if they want to stay for a bit or move on. If your landing page can’t catch their interest, then it doesn’t really matter if you have the most brilliant coders on the clock.

Coder – making it look nice is one thing, making it work is another. There are many programming languages out there and many ways to get you to your goal. You really need to be able to trust your programmer(s). If you have multiple coders on your project, initiate a brainstorm between them so they come up with the best solutions between themselves. You will avoid many complaints of one programmer saying about another “I could have done that better.” They just love to point this out.

Project Manager – someone has to coordinate the work of your team. In most of the cases it will be you. It helps a lot to know a thing or two about the limitations and capabilities of each technology. Without it, you might request things that are actually more harmful than helpful. Don’t be afraid to listen to your “minions”. Their input may not only help you, but will keep them feeling happy and valued.

Public Relations – most people think they can do that by themselves, most of them can’t, or do a poor job. You need a diplomatic skill set and an open mind. When on the phone or other “live” chats, you need to be quick on your feet and come up with the best answers and solutions on the spot. Too many pauses, too much “I have to consult with a colleague about that” and you’re going to lose your client or partner. At some point you will need someone who can speak with other people. There are many valuable assets that can make a big difference, the art of persuasion is high on that list.

Writers – you probably think I mean people who write articles for your website etc. While this is true, there’s more to it than that. If you need people to write articles or not depends really on the project you undertake. But you will need someone to write official documents, letters, summaries etc. It’s beneficial if your PR person can do that, it helps to keep things running more smoothly and coordinated.
If you’re thinking of pitching your idea to investors at some point, creating documents one after another will be demanded of you and you want to have those made correctly if you are to succeed getting some extra money. Not to forget, The European Union loves start-ups and they have special programs to fund those, but more on that later.

Accountant – when the money starts flowing you might want to keep track of it. Make some mistakes and your IRS counterpart will find them. Not only that, a good accountant will help you to actually get more money with the knowledge of various laws and workarounds.

Language

If you’re natively an English speaker, then the problem is non-existent for you. But if you’re starting in a country with a different language, then you have to decide which people are your primary concern.

The home field advantage of your own country is a big help. You know the culture and customs of your own nation, which can be very helpful. It puts you in front of any “outside” projects trying to make it in your region.
But of course, you’re restricting yourself to a smaller audience. English is pretty much the basic language of the Internet now and if you choose to use it, you can get exposed to a much broader audience. But with a bigger field comes more players, so your competition will be much more fierce.

Another downside to choosing English, is that it may prove hard for you to find team members which will be able to contribute any written content to your website. Understanding the language and writing it correctly are two separate things.

Project Profile

This comes back a bit to the Target Audience factor. We’re going to build on it a bit more. Depending on your primary audience you should build and design your start-up accordingly. Like, you won’t put Ponies on a site selling heavy metal accessories (though it’s probably coming…). But that’s just the most simple example, the implications are really very vast.  The idea is that you have to find a way to get to your audience whenever possible. Attention to the smallest details separate the wolves from the sheep.

Recently on one of my projects we implemented ClickTale , a software which tracks what your visitors do on your website and puts it into various graphical statistics and videos. I guess how useful it can be is self-explanatory. Being able to see where your visitors struggle and what parts of the website they tend not to be interested in at all is helpful in improving your business. It takes a lot of time, yes. But the data you get is invaluable.
I encourage you to try different software of the sort as well, by no means have I enough information to claim that ClickTale is the best one out there, but we like it.

Do you need funds?

Depends on who you know. Theoretically, you can get away with creating a start-up without putting any money into it, but you need to convince some people to do it with you for the promise of future gains.

Your chance at doing that depends on what you have achieved so far and who you already know. If you have friends you can ask directly, do so. Nothing really to lose, is there? If you’re short-handed though and don’t want to spend money you might try advertising your idea on various forums or places which allow you to search for specialized people for a project.

I have tried all of the above and all of the above actually work. The problem is (obviously), that you don’t really know anything about the people you get from the Internet. Nothing really stops them from walking away after a month and leaving you on ice. You don’t know how reliable or fast they are. So it’s a bit of a crap shoot.

On the other hand, if you’re willing to put up some money for the work, you have a better chance of more serious people coming forward. Don’t take it for granted though. Trial periods and work history checks are your friends. Contracts are another thing that keeps you safe.

You need a server and a domain. Although nowadays there’s so many hosting companies fighting for clients, that if you look around enough you might get a year or two of both for as little as a few cents. It may not be something you want for the long run, but it’s definitely going to be enough to get you started and see if it goes anywhere.

Can you get funds?

Another thing, which is often missed, is the fact that you can actually try to get money for your start-ups. Ever seen the Dragon’s Den TV Show? There are investors out there willing to give you money for equity in your company. More often than not, you’ll get not only money but you’ll get their help as well, which can be the real difference between success and failure.

The best part is you don’t really need your start-up working! If your idea is really good, you can pitch it as that – an idea, for which you need funds. I know of several projects which got funds without having a working website. Most of them are doing well now, some of them even very well.

Be prepared though. The investors will most probably want you to create a lot of documents and provide a lot of data during your pitch. It is a pain to create tons and tons of pages of documents, but hey, you want the money – earn it. Especially since the money we’re talking about usually starts with tens of thousands of dollars.

Where to look for your Dragons? Depends on where you live. It’s impossible for me to tell you where to go, because it will vary depending on where you live. Your investors will probably want to meet you in person a few times before they make their decision, so you probably want to look for someone fairly close to where you are.

I mentioned before that the European Union has its own programs to help you as well. You need to create a good business plan for them though. There are some people out there that specialize in writing them exactly for that purpose, some of them have a high success rate. You need to provide some financial input yourself though, if you want to ask the EU for money. So it’s your choice really if you want to go that way.

Good luck then

That would be it. Now get out there and show people what you are made off. If you don’t make it, you’ll have gained valuable experience should you ever want to try again.

Go to Source

Go to Source

I wrote an article last month called How Lazy Are We At Work?; however, I realized today after I thought about it more that there is a difference between being lazy and being a slacker. Being lazy, according to the Urban Dictionary, is basically “being a bum, and not getting off your ass to do something.”

Being a slacker is different. A slacker is “someone who puts off doing things until the last minute, and when the last minute comes, decides it wasn’t all that important anyway and forgets about it.“  In other words, laziness is more of a lifestyle. Being a slacker specifically refers to the jobs we need to take care of, and our work. So, is it true many of us are slackers? I went on a hunt for an infographic, and I found one, created by Online Schools, which has all the answers.

Online Schools points out a very interesting fact about this. They say that people who use the word “slacker” are more likely to be a slacker than whomever they are talking about. So, to the person who wrote the article in the news this morning that said, “Americans are just a bunch of slackers“… BOO-YA! Are you a slacker? Check out this very official looking slacker infographic and see for yourself.

Click Here For A Larger Version

Go to Source

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

View Demo Clear Floats

Go to Source

For more info on Photoshop, check out the Killer Video Tutorial Library and our Killersites Community Forum!
Note that all of our videos are in a higher quality when purchased from our Killer Video Store or by subscription to our Video Tutorial Library!

Thanks,

Jody
killersites.com

Go to Source

This is why today we are going to demonstrate the process of converting code to a plugin. We are going to take the code from our jQuery & CSS3 Select Replacement tutorial, and turn it into a ready for use jQuery plugin.

The Idea

Writing a jQuery plugin is not at all difficult. You need to extend the $.fn object with your own function. What is more difficult, however, is finding a way to properly structure your code so that your plugin is easy to embed and use, without dependencies.

Here are several problems that we need to solve when converting the tutorial code into a jQuery plugin:

1. We need to give users the ability to control what markup is generated for the dropdown. For example the tutorial code relies heavily on the presence of data- attributes, which contain HTML markup. This is too specific to be included into a plugin, so we need to leave it out of the implementation;
2. Because of the way plugins are called, we need to rewrite the code so it uses the “this” object that is passed to the plugin, instead of hard-coding a selector. This will also make it possible to convert more than one select element at once;
3. We need to extract the JavaScript and CSS code of the plugin into separate files, so it is easy to embed and redistribute.

The Code

As you remember from the tutorial, our jQuery code scans the select’s option elements and builds an unordered list. In the process it also looks for a number of data- attributes in the options that contain an image URL and a description to use in the list.

This is, however, too specific for a plugin. We need to give users the ability to override this functionality. To solve the problem, we can allow users to pass a function as a parameter to the plugin, which will generate the markup instead. If such a parameter is not passed, we will use fall back to a default one, which basically takes the text of the option element and turn it directly into a list item.

Lets put this into code:

(function($){

	$.fn.tzSelect = function(options){
		options = $.extend({
			render : function(option){
				return $('<li>',{
					html : option.text()
				});
			},
			className : ''
		},options);

	// More code will be added here.

	}
})(jQuery);

The render function takes an option element (the kind that is contained in a select), and returns a li element, which is directly included in the drop down list by the plugin. This solves problem #1 outlined above.

jQuery & CSS3 Select Replacement Plugin

Before we move on with solving problem #2, lets see how our plugin is going to be called:

$(document).ready(function(){
	$('select').tzSelect();
});

In the example code above, you can see that we are applying the plugin to every select element on the page. We can access these elements by traversing the “this” object that is passed to the plugin:

return this.each(function(){

			// The "this" points to the current select element:

			var select = $(this);

			var selectBoxContainer = $('<div>',{
				width		: select.outerWidth(),
				className	: 'tzSelect',
				html		: '<div class="selectBox"></div>'
			});

			var dropDown = $('<ul>',{className:'dropDown'});
			var selectBox = selectBoxContainer.find('.selectBox');

			// Looping though the options of the original select element

			if(options.className){
				dropDown.addClass(options.className);
			}

			select.find('option').each(function(i){
				var option = $(this);

				if(i==select.attr('selectedIndex')){
					selectBox.html(option.text());
				}

				// As of jQuery 1.4.3 we can access HTML5
				// data attributes with the data() method.

				if(option.data('skip')){
					return true;
				}

				// Creating a dropdown item according to the
				// data-icon and data-html-text HTML5 attributes:

				var li = options.render(option);

				li.click(function(){

					selectBox.html(option.text());
					dropDown.trigger('hide');

					// When a click occurs, we are also reflecting
					// the change on the original select element:
					select.val(option.val());

					return false;
				});

				dropDown.append(li);
			});

			selectBoxContainer.append(dropDown.hide());
			select.hide().after(selectBoxContainer);

			// Binding custom show and hide events on the dropDown:

			dropDown.bind('show',function(){

				if(dropDown.is(':animated')){
					return false;
				}

				selectBox.addClass('expanded');
				dropDown.slideDown();

			}).bind('hide',function(){

				if(dropDown.is(':animated')){
					return false;
				}

				selectBox.removeClass('expanded');
				dropDown.slideUp();

			}).bind('toggle',function(){
				if(selectBox.hasClass('expanded')){
					dropDown.trigger('hide');
				}
				else dropDown.trigger('show');
			});

			selectBox.click(function(){
				dropDown.trigger('toggle');
				return false;
			});

			// If we click anywhere on the page, while the
			// dropdown is shown, it is going to be hidden:

			$(document).click(function(){
				dropDown.trigger('hide');
			});

		});

The fragment above almost identical with the tutorial code we are converting today. One notable change is that we assign $(this) to the select variable (line 5), which used to be $('select.makeMeFancy') (a hardcoded selector), which significantly limited the scope of the code.

The other change is that instead of directly generating the drop down list, we are calling the render function that was passed as a parameter (line 51).

When we combine the above, we get the complete source code of the plugin:

tzSelect/jquery.tzSelect.js

(function($){

	$.fn.tzSelect = function(options){
		options = $.extend({
			render : function(option){
				return $('<li>',{
					html : option.text()
				});
			},
			className : ''
		},options);

		return this.each(function(){

			// The "this" points to the current select element:

			var select = $(this);

			var selectBoxContainer = $('<div>',{
				width		: select.outerWidth(),
				className	: 'tzSelect',
				html		: '<div class="selectBox"></div>'
			});

			var dropDown = $('<ul>',{className:'dropDown'});
			var selectBox = selectBoxContainer.find('.selectBox');

			// Looping though the options of the original select element

			if(options.className){
				dropDown.addClass(options.className);
			}

			select.find('option').each(function(i){
				var option = $(this);

				if(i==select.attr('selectedIndex')){
					selectBox.html(option.text());
				}

				// As of jQuery 1.4.3 we can access HTML5
				// data attributes with the data() method.

				if(option.data('skip')){
					return true;
				}

				// Creating a dropdown item according to the
				// data-icon and data-html-text HTML5 attributes:

				var li = options.render(option);

				li.click(function(){

					selectBox.html(option.text());
					dropDown.trigger('hide');

					// When a click occurs, we are also reflecting
					// the change on the original select element:
					select.val(option.val());

					return false;
				});

				dropDown.append(li);
			});

			selectBoxContainer.append(dropDown.hide());
			select.hide().after(selectBoxContainer);

			// Binding custom show and hide events on the dropDown:

			dropDown.bind('show',function(){

				if(dropDown.is(':animated')){
					return false;
				}

				selectBox.addClass('expanded');
				dropDown.slideDown();

			}).bind('hide',function(){

				if(dropDown.is(':animated')){
					return false;
				}

				selectBox.removeClass('expanded');
				dropDown.slideUp();

			}).bind('toggle',function(){
				if(selectBox.hasClass('expanded')){
					dropDown.trigger('hide');
				}
				else dropDown.trigger('show');
			});

			selectBox.click(function(){
				dropDown.trigger('toggle');
				return false;
			});

			// If we click anywhere on the page, while the
			// dropdown is shown, it is going to be hidden:

			$(document).click(function(){
				dropDown.trigger('hide');
			});

		});
	}

})(jQuery);

Placing this plugin in a separate file solves problem #3. However, as I mentioned previously, we intentionally left out the code that uses the data- attributes in order to make the plugin more portable. To compensate, we need to pass a custom render function when calling the plugin, as you can see below (this is also the code that is used in the demo).

script.js

$(document).ready(function(){

	$('select.makeMeFancy').tzSelect({
		render : function(option){
			return $('<li>',{
				html:	'<img src="'+option.data('icon')+'" /><span>'+
						option.data('html-text')+'</span>'
			});
		},
		className : 'hasDetails'
	});

	// Calling the default version of the dropdown
	$('select.regularSelect').tzSelect();

});

With this our jQuery plugin is complete!

You can use this plugin by simply dropping the tzSelect folder (available from the download button above) into your project root, and including jquery.tzSelect.css and jquery.tzSelect.js in your HTML documents.

Wrapping Up

Following these simple steps, you can easily turn a mess of jQuery code into a structured and ready for reuse plugin. Sure, it does take a bit of work, but the effort would pay out many times in the long run.

Go to Source

Of course, this also means that other people will be able to rank and rate you, so be ready for an aftershock or two if you decide to use the site.

Read more

Learn more about CubeDuel.com in Dataopedia.com

Find out how much CubeDuel.com is worth with Stimator.com

Have a business question? Ask Startups.com

Go to Source

The problem is that the presence of a in the first rule means that focus outlines on hyperlinks are removed. Thus in commenting out the :focus rule I restored default focus styles to form elements, but not hyperlinks. This wasn’t a problem up until roughly a day before I published, but last-minute tinkering brought it back. I’d say that’ll teach me not to tinker, but I hate to lie.

I’ve come up with the following solutions. Consider them as mutually exclusive.

• Remove a from the first rule. This would exempt it from being reset at all. On the one hand, this means that focus defaults are restored. On the other hand, by exempting an (incredibly pervasive) element from the list, it does violate the spirit of element agnosticism I try to follow. On the gripping hand, that first rule doesn’t do much to reset links as it is: their text-decoration and color properties are not altered. Back in 2007 the color would have been thanks to a color: inherit declaration, but that was dropped at the time and I don’t think it’s likely to return. Even if it does, the question of exempting a would remain and possibly even deepen.

• Remove outline: 0 from the first rule. The only things I can think of that get outlines are focused form elements, which the reset doesn’t touch; and focused hyperlinks, which I’m trying to avoid touching in the first place. That’s not very forward-looking, though. Outlines could start showing up in future browsers or on future elements.

• Define explicit a:focus styles, as the HTML5 Doctor reset does. This overcomes the problem of focus-stripping, but imposes a specific focus appearance. That violates the entire spirit of the reset. Of course, it’s not as though there’s much variance in how browsers present link focusing, and it’s pretty easy to write a rule that would be mistaken for browser defaults by just about anyone.

In the process of writing this out, I think I’ve mostly settled on which choice I prefer, but I’d like to hear what you think. Which option strikes you as best, and why?

Go to Source

If you would like to design a wonderful website, one of the important element you need to pay attention with is the text effect. Somehow, it is not easy to design a special one. Here, this Cyber feeling text effect is nice for some websites in fiction topics.

(View This Tutorial)

Go to Source

In this video quick tip, I’ll teach you how to add a bit of flair to your page, by displaying a set of elements sequentially. While there are numerous ways to accomplish this task, today, we’ll review one technique that uses recursive functions.

// Wrapping, self invoking function prevents globals
(function() {
   // Hide the elements initially
   var lis = $('li').hide();

   // When some anchor tag is clicked. (Being super generic here)
   $('a').click(function() {
      var i = 0;

      // FadeIn each list item over 200 ms, and,
      // when finished, recursively call displayImages.
      // When eq(i) refers to an element that does not exist,
      // jQuery will return an empty object, and not continue
      // to fadeIn.
      (function displayImages() {
         lis.eq(i++).fadeIn(200, displayImages);
      })();
   });
})();

Conclusion

What makes this usage effective is the fact that, when lis.eq(i) refers to an element that doesn’t exist in the wrapped set, an empty jQuery object will be returned. When this happens, the subsequent methods in the chain (fadeIn) will never be called.

Go to Source

Ben’s work always retains an element of humour and playfulness that reflects his fun-loving character.

via handsomefrank

Go to Source

Below is the list I have so far; if you know of any other WebKit-based browsers that run on a desktop OS, please leave a comment and a link. I’m especially looking for Windows browsers. I’d like to hear about Linux browsers, but cannot install them.

• Safari
• Chrome
• Flock
• OmniWeb
• iCab
• Rockmelt (can’t download it, but I’m aware of its existence)
• Arora
• Element
• Midori (Linux)
• Epiphany (Linux)
• Konqueror (Linux)
• Stainless
• Sunrise
• Shiira (doesn’t run on my Mac)

Thanks.

Go to Source

Webmaizer will let you browse through random sites that have actually been rated by others like you, and that you will also be able to rate in turn. The idea is to bring an element of quality into random web browsing.

Read more

Learn more about Webmaizer.com in Dataopedia.com

Find out how much Webmaizer.com is worth with Stimator.com

Have a business question? Ask Startups.com

Go to Source

”All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.”

Also discussed is added pattern matching support and a new pseudo-class that applies on submit controls when a form has an invalid element.

Go to Source

The company provides both a web-based service and a mobile app that (taken as a whole) will let you learn everything there is to know about any place that you are visiting. For example the provided mobile application will overlay a historical photo on top of any place that you are pointing the phone of your camera at.

Read more

Learn more about LookBackMaps.net in Dataopedia.com

Find out how much LookBackMaps.net is worth with Stimator.com

Have a business question? Ask Startups.com

Go to Source

  

When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.

A Brief Primer on the Cascade

Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:

• Find all declarations that apply to the element and property
• Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
  • Declarations from the user agent
  • Declarations from the user
  • Declarations from the author
  • Declarations from the author with !important added
  • Declarations from the user with !important added
• Apply styling based on specificity, with the more specific selector “winning” over more general ones
• Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)

With that basic outline, you can probably already see how !important declarations weigh in, and what role they play in the cascade. Let’s look at !important in more detail.

Syntax and Description

An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#example {
	font-size: 14px !important;
}

#container #example {
	font-size: 10px;
}

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.

Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.

Some things to note about !important declarations:

• When !important was first introduced in CSS1, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS2
• If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
• The !important keyword (or statement) must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon won’t break it)
• If for some particular reason you have to write the same property twice in the same declaration block, then add !important to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesn’t invalidate your CSS)
• In IE6 and IE7, if you use a different word in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it

When Should !important Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

Never

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

To Aid or Test Accessibility

As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.

A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.

In the screen grab below, Smashing Magazine’s home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:

In this case, the text size was adjustable without using !important, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using an !important declaration, the user stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of !important resolves this problem and keeps the adjustability of text size within the user’s power, even if the author has abused !important.

To Temporarily Fix an Urgent Problem

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.

To Override Styles Within Firebug or Another Developer Tool

Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:

The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.

!important could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.

Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:

To Override Inline Styles in User-Generated Content

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

For Print Stylesheets

Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.

For Uniquely-Designed Blog Posts

If you’ve dabbled in uniquely-designed blog posts (many designers take issue with using “art direction” for this technique, and rightly so), as showcased on Heart Directed, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.

The use of !important could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.

Conclusion

!important declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using !important wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.

Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.

Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?

Further Resources

• !important rules in the CSS2.1 spec
• !important Declarations on SitePoint’s CSS Reference
• CSS Specificity And Inheritance on Smashing Magazine
• Everything You Need to Know About !important CSS Declarations
• What are the implications of using “!important” in CSS?

© Louis Lazaris 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: CSS, important

Go to Source

A brilliant new iPad-only web app (not native iOS app) that allows you to sketch things quickly on a chalkboard-like interface. I’m going to dig into the tech and see how this was done, but it’s a fab idea. [Update: Jason Fried said in the comments, that it's built with the HTML 5 canvas element and CSS transitions.]

On a side note, it’s interesting how I’m happy to promote something that’s iPad-only. Not exactly Open Web, huh? I guess the cool factor wins out on this one.

Go to Source

As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways.

Go to Source

  

When the CSS1 specification was drafted in the mid to late 90s, it introduced a rule called the !important declaration that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, the !important declaration has remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Let’s take a look at what exactly this declaration is all about, and when, if ever, you should use it.

[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.]

A Brief Primer on the Cascade

Before we get into the !important declaration and exactly how it works, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:

• Find all declarations that apply to the element and property
• Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
  • Declarations from the user agent
  • Declarations from the user
  • Declarations from the author
  • Declarations from the author with !important added
  • Declarations from the user with !important added
• Apply styling based on specificity, with the more specific selector “winning” over more general ones
• Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)

With that basic outline, you can probably already see how the !important declaration weighs in, and what role it plays in the cascade. Let’s look at it in more detail.

Syntax and Description

The !important declaration provides a way for a stylesheet author to give a particular CSS value more weight than it naturally has. Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#example {
	font-size: 14px !important;
}

#container #example {
	font-size: 10px;
}

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of the !important declaration.

Without the use of !important, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of the !important declaration, the first font-size rule now has more weight.

Some things to note about the !important declaration:

• When !important was first introduced in CSS1, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS2
• If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
• The !important declaration must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon won’t break it)
• If for some particular reason you have to write the same property twice in the same declaration block, then add !important to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesn’t invalidate your CSS)
• In IE6 and IE7, if you use a different keyword in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it

When Should It Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

Never

The !important declaration should not be used unless it is absolutely necessary after all other avenues have been exhausted. If you use it out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

To Aid or Test Accessibility

As mentioned, user stylesheets can include the !important declaration, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.

A special needs user can add the !important declaration to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.

In the screen grab below, Smashing Magazine’s home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:

In this case, the text size was adjustable without using the !important declaration, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using the !important declaration, the user stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of !important resolves this problem and keeps the adjustability of text size within the user’s power, even if the author has abused the !important declaration.

To Temporarily Fix an Urgent Problem

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove the !important declaration — and the client will be none the wiser.

To Override Styles Within Firebug or Another Developer Tool

Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:

The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this would give the entire declaration block more specificity, which might not be desired.

The !important declaration could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.

Here’s the same style rule with the !important declaration added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:

To Override Inline Styles in User-Generated Content

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using the !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

For Print Stylesheets

Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.

For Uniquely-Designed Blog Posts

If you’ve dabbled in uniquely-designed blog posts (many designers take issue with using “art direction” for this technique, and rightly so), as showcased on Heart Directed, you’ll know that such an undertaking requires each separately-designed article to have its own stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.

The !important declaration could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.

Conclusion

The !important declaration is best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid this declaration wherever possible. Even in many of the uses described above, the inclusion of !important is not always necessary.

Nonetheless, !important is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly — so it could come in handy. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.

Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?

Further Resources

• !important rules in the CSS2.1 spec
• !important Declarations on SitePoint’s CSS Reference
• CSS Specificity And Inheritance on Smashing Magazine
• Everything You Need to Know About the !important CSS Declaration
• What are the implications of using “!important” in CSS?

© Louis Lazaris 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: CSS, important

Go to Source

Sometimes clients will suggest things such as forcing all users to register with a six page long form before they can even access the site. They aren’t web professionals, it’s not their fault for not knowing that this isn’t a good idea from a usability perspective.

If you’re going to convince them that this is a bad idea, however, then you’re going to need some rock solid material to back that up. While an element of trust is always important to a working relationship, you have to respect that sometimes clients will just need to see the facts in front of them to fully understand that what you’re saying is correct.

So, what we’ve done for you today is compiled a list of some of the biggest, most compelling usability articles which address common issues. Hopefully this should help you during tough conversations about what does and doesn’t work on a a website.

Bookmark this post, come back to it, use it in meetings and educate your clients on the things which work for other websites, so that they might also work for them.

How Not Forcing Users to Register Increased Sales by $300million

A truly fascinating article covering how one ecommerce site removed forced user-registration during the checkout process, with a result of a $300million increase in revenue. Very impressive.

10 Useful Usability Findings and Guidelines

• Form labels work best above the field
• Users focus on faces
• Quality of design is an indicator of credibility
• Most users do know how to scroll
• Blue is the best color for links
• The ideal search box is 27 characters wide
• White space improves comprehension
• Effective user testing doesn’t have to be extensive
• Informative product pages stand out
• Most users are blind to advertising

Browser Resolution Stats by Google

A big diagram by google showing browsers sizes overlaid on top of a web page and where you should place call to actions to ensure that they are immediately visible without the need to scroll.

The myth of the page fold: evidence from user testing

“People tell us that they don’t mind scrolling and the behaviour we see in user testing backs that up. We see that people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you successful brands that are not worrying about the fold either.”

247 web usability guidelines

A massive post of usability articles covering:

• Home page usability: 20 guidelines to evaluate the usability of home pages.
• Task orientation: 44 guidelines to evaluate how well a web site supports the users tasks.
• Navigation and IA: 29 guidelines to evaluate navigation and information architecture.
• Forms and data entry: 23 guidelines to evaluate forms and data entry.
• Trust and credibility: 13 guidelines to evaluate trust and credibility.
• Writing and content quality: 23 guidelines to evaluate writing and content quality.
• Page layout and visual design: 38 guidelines to evaluate page layout and visual design.
• Search usability: 20 guidelines to evaluate search.
• Help, feedback and error tolerance: 37 guidelines to evaluate help, feedback and errors

An Introduction to Using Patterns in Web Design

A fascinating article covering the use of patterns for usability in web design, or “chunks” as the author calls them!

F-Shaped Pattern For Reading Web Content

Eye-tracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Top Ten Mistakes in Web Design

The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Weblog Usability: The Top Ten Design Mistakes

Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Top-10 Application-Design Mistakes

Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Mega Drop-Down Navigation Menus Work Well

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.

10 Usability Crimes You Really Shouldn’t Commit

A big post by Chris Spooner covering forms, logo links, link states, alt attributes, background images, content, link text and text alignment.

101 Five-Minute Fixes to Incrementally Improve Your Web Site

An absolutely huge post covering quick improvements for usability across so many different levels. This is great one for picking out things that your client’s site might need to have done to it!

Blasting the Myth of the Fold

Another article slamming the idea that nothing below the fold ever gets seen. Users know how to scroll. The fold is relevant for a few things, but it is not the be-all and end-all.

UX Myths

A great site which is regularly updated with a list of (sometimes funny) myths of user experience issues, these include things such as “all pages should be accessible in 3 clicks” and “the home page is your more important one”.

Eyetracking points the way to effective news article design

Real eye tracking tests carried out and showing interesting results with regards to the effectiveness of laying out new articles and blog posts.

Label Placement in Forms

A detailed case study showing that the optimum placement for label forms is to the top-right of the form field.

12 Standard Screen Patterns

A great rouncup of some standard screen layouts which may pursuade clients away from spherical invisible navigation, or similar.

“Mad Libs” Style Form Increases Conversion 25-40%

This interesting article covers how well forms work when arranged as blanks within sentences rather than simple linear pages.

Breadcrumbs In Web Design: Examples And Best Practices

“On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.”

Inline Validation in Web Forms

A study by A List Apart on inline validation in forms with live user videos showing the differences between standard forms vs inline validation.

This post was authored exclusively for WDD by John O’Nolan, a core contributor to the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What about you? Do you have any really great articles like these which you think would be a good addition to the list? Drop us a line in the comments below so that everyone can benefit from them!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Source

Go to Source