Factors to Consider When Pricing Design Services
0When pricing your design services it can be difficult to determine what is an appropriate and fair price. The resulting price should be influenced by a number of different factors. Unfortunately, many times it is just guess work from the designer.
Here are 12 factors that should influence how much you charge for your services:
1. The Time It Will Take
An obvious factor is the amount of time that a specific project will require from you. Some designers have an hourly rate that they attempt to get with each of their projects. Whether you have an set hourly rate or not, you need to consider how much time you expect a project to take and how much you would like to earn for that amount of time.
2. Your Availability
Are you currently overloaded with work? If so, why not price a project a bit higher than you normally More >
Sitemap Styler Style your Sitemaps with CSS and Javascript
0What is it?
Sitemap Syler is a little CSS/JavaScript piece of code that can be easily applied to your sitemap list. It then takes care of it’s presentation. All you have to do is include couple lines of code. It doesn’t require any JavaScript knowledge but some CSS knowledge would come in handy if you want to modify the appearance of your sitemap.I must point out that Sitemap Styler doesn’t generate sitemaps, it merely styles them.
How does it work?
In order to have SEO friendly sitemap, entire site structure should be rendered in html code. So, no fetching subcategories with AJAX or anything like that. The best way to render links and display hierarchy is using nested lists. Sitemap Styler uses unordered lists. The root list has an id = “sitemap”. Simple JavaScript function goes through list’s item nodes and check for child elements. If item contains nested More >
List Expander
0Following my latest article I decided to take some of the visitor’s comments in consideration and improve the script. It also has a new name: List Expander.
The basic concept remains the same as with Sitemap Styler, but the usage is a bit wider. We can use this script for any type of content that needs to be organized in some sort of hierarchy.
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects. Parent items, the ones we should click to expand child objects, don’t need to be wrapped inside an anchor element. Script checks for child objects and adds appropriate clickable elements. Furthermore the script adds two buttons above the list, one for expanding and one for collapsing all the elements.
Markup
Markup is quite More >
Style Your Website’s Search Field with JS/CSS
0Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before Again, all you need is two lines of code, links to JavaScript and CSS files and that would be it.
Take a look at the Demo | Download SearchField
Features
SearchField features 3 states for search input field based on user’s actions. We have inactive state, on click state (on focus to be exact) and inactive with user inputted text. You’ve seen these features on many sites but the difference here is that all you need to do is provide id to your search field, script takes it More >
How to use headings in HTML
0Many of web standards rookies feel that passing validation is good enough to call their work web standards compliant. Those who are more involved in web standards know that there’s more than that. Use of headings is a good example. While validator will not show any warnings or errors for headings, you can’t say that your page is valid if your heading structure fails.
Meaning of headings
Some say that the largest role of headings are their SEO meaning. I am not going into that. They maybe right, but I say (since I am not a SEO expert but a web standards enthusiast) that their importance lies in semantics.What are headings anyway? Headings are elements that describe the content that follows and also define a document’s structure. Similar to large headings and subheadings in printed newspapers, html headings should briefly describe what the page or sections are More >
Style Your Image Links
0Mouse over behaviors have a certain significance when we’re talking about usability. Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. But what can you do with image mouseovers? Add a different border? This script will certainly help you to do a bit more than that…
Take a look at the Demo | Download Image Link
What is it?
Image Link is a script that enables you to apply additional styling to your image links. It has two states: default and mouseover states, so you can use it i.e.on your gallery thumbnails to display a little zoom icon when thumbnail is rolled over or to place a “click here” message at the bottom of your image…
Why is this script different (better)
Css Text Gradient
0Css Globe is happy to present a simple trick that helps you improve your site’s appearance. With this trick you can use cool gradients on system fonts with nothing but pure css.We use an empty span element, nested inside a heading tag. Span has transparent png set as a backgrund image and it is placed above the heading text with absolute position.
Take a look at the demo page and share your thoughts
Using lineheight with menus
0Line-height is a property can help us solve menu problems really elegantly. While often we have to battle with paddings, box model, cross browser compliance, using line-height in combination with some other properties can reduce the need for additional markup and additional css definitions. Of course there are cases where this usage that I am about to demonstrate can’t be applied, but having this trick under your sleeve can be a good thing when you encounter a perfect situation.
Overview
Let’s repeat what line-height is. Line-height property sets the distance between the lines and of course aligns text in the vertical middle of that line.
It can take values “normal”, “inherit”, length, numeric and percentage value.
p{ line-height:normal;}// numeric// sets a line height of a number multiplied by current font sizep{ line-height:1;}// length// set fixed line heightp{ line-height:10px;}// percentage// sets a line height in percentages of current