2010-09-04 | AMB首頁

Archive

‘noupe’ 分類過的Archive

30 Useful Adobe AIR Applications

2010年5月6日
回應關閉
Advertisement in 30 Useful Adobe AIR Applications
 in 30 Useful Adobe AIR Applications  in 30 Useful Adobe AIR Applications  in 30 Useful Adobe AIR Applications

Adobe AIR (Adobe Integrated Runtime) is a free runtime environment that can be used by the developers to develop highly interactive internet and media applications for multiple platforms. It enables web developers to utilize their current development skills and deliver rich applications and content to user’s desktop. It combines the web development technologies like Ajax, HTML, Flash and Flex so that developers with existing knowledge of these technologies need not learn a new framework and they can utilize Adobe AIR integrated platform to deploy extremely sophisticated internet applications.

Today, we present 30 Useful Adobe AIR applications to give you an overview as to what you can achieve with AIR.

Adobe-air in 30 Useful Adobe AIR Applications

Rich Media

Flickroom
Flickroom is an Adobe AIR application that provides Flickr users an enhanced browsing experience of photos.

Flickroom in 30 Useful Adobe AIR Applications

Flickr Flipper
Flickr Flipper allows you to search for Flickr photos in general or by specific users. It allows one by one picture navigation and also allows you to download the photo on your computer.

Flickrflipper in 30 Useful Adobe AIR Applications

Blokt
Blokt is a game built with Adobe AIR with the concept of removing the red block out of the maze of other blocks by sliding them out of the way.

Blokt in 30 Useful Adobe AIR Applications

Business Applications

eBay Desktop
eBay Desktop is an AIR application that provides a way to shop at world’s largest marketplace on your desktop. Salient features of eBay Desktop include 1 click search filters, alerts, history, and feeds.

Ebay2 in 30 Useful Adobe AIR Applications

The NASDAQ Stock Market
NASDAQ Market Replay is an extremely powerful replay and analysis application that allows users to view the consolidated order book and trade data for NASDAQ, NYSE and other regional securities instantly.

Nasdaq in 30 Useful Adobe AIR Applications

Task Management

Doit.im
Doit.im lets you focus on items on hand instead of worrying about pending ideas in your mind. It manages your tasks and organizes the process of your work so that you feel easy when faced with bulk complicated projects. This way you can just focus on what you are working at the moment instead of thinking about previous or future work.

Doit in 30 Useful Adobe AIR Applications

AgileAgenda
Agile Agenda is a project management software that allows project managers to enter data about thier activities. The software dynamically adjusts varying conditions during the project lifecycle. Agile Agenda supports the sharing of data through XML, PDF, and a web interface.

Agileagenda in 30 Useful Adobe AIR Applications

MiniTask
MiniTask is a free easy-to-use task management application that helps you manage your daily tasks easily. It supports features like alarm timers, drag ‘n’ drop reorder, task sheet printing and customization of styles.

Minitask in 30 Useful Adobe AIR Applications

Klok
Klok is a time management application that allows you to accurately track how much time you have spent on past projects and estimate better timeline for future projects. It makes easier to manage time for meetings, documentation, follow ups, sales calls etc.

Klok in 30 Useful Adobe AIR Applications

Social Media

skimmer
Skimmer is an Adobe AIR desktop application designed to streamline, beautify, and enhance the experience of participating in your most frequently used social networking activities. It improves upon your everyday interaction with multiple social networks by providing a rich experience that is particularly suited to multimedia related content.

Skimmer in 30 Useful Adobe AIR Applications

twhirl
twhirl is a desktop client for the popular microblogging platform
Twitter that builds on the very cool Adobe AIR runtime.

Twhirl in 30 Useful Adobe AIR Applications

Spaz
Spaz is a free, open-source, award-winning twitter client developed with Adobe AIR offering features such as access to direct messages and replies, CSS themes, and event sounds.
Spaz was the winner of Best HTML Community App in the AIR Developer Derby.

Spaz1 in 30 Useful Adobe AIR Applications

Posty
Posty, an award winning application, will automatically deliver your messages to the services you select among Twitter, Jaiku, Tumblr, Friendfeed and Identi.ca.

Posty in 30 Useful Adobe AIR Applications

facedesk
facedesk is a desktop application that will handle all your facebook related stuff, so you don’t need to open the browser for facebook related activities.

Facedesk in 30 Useful Adobe AIR Applications

Facebook for Adobe AIR
Facebook Desktop for AIR is a new desktop application developed with Adobe AIR using facebook API. It goes through all the authorizations and deliver the news feed on your desktop. You can publish your content straight from your desktop to your wall.

Facebookforair in 30 Useful Adobe AIR Applications

AirTalkr
AirTalkr is a multi-protocol Instant Messenger that connects to MSN, Yahoo!, GTalk, AOL and ICQ. It also connects to other Web 2.0 services like Flickr and YouTube. While chatting with your friends, you can browse flickr photos and youtube videos. You can also view each of your buddies AirCard, a profiling system in AirTalkr that gathers your buddies profile from the web.

Airtalkr in 30 Useful Adobe AIR Applications

Feeds

diggREADER
diggREADER allows you to chose from one of the main 4 Digg RSS feeds to read the latest headlines refreshed every 2 minutes on your desktop.

Diggreader in 30 Useful Adobe AIR Applications

ShareFire
ShareFire is a news aggregator that allows you to share stories via AIM, Twitter, Facebook, MySpace, email and more. It allows you to read all the stuff at one place and share from there.

Sharefire in 30 Useful Adobe AIR Applications

Designing

WebKut
WebKut is an AIR application that takes screenshots of full or part of the web pages. It provides you 3 capture options: the entire page, the current view, or only a selection.

Webkut in 30 Useful Adobe AIR Applications

WebSnapshot
With WebSnapShot, you can take the snapshot by entering URL of just dragging the website into the application. You can create Thumbnail, Browser size and Full page screenshots.

Websnapshot in 30 Useful Adobe AIR Applications

Icon Generator
Icon Generator is an Adobe AIR application that allows you to create CS3 or Web 2.0 style icons in three easy steps. You can create icons in multiple sizes.

Icongenerator in 30 Useful Adobe AIR Applications

Livebrush
Livebrush is an Adobe AIR drawing application that employs an easy-to-use brush tool. Packed with several other designing controls, Livebrush offers a fun and unique way to create graphics.

Livebrush in 30 Useful Adobe AIR Applications

Development

Lupo Manager
Lupo Manager extracts strings from your source code, manages resource bundles and implement i18n logic in your Adobe Flex® / Adobe AIR applications in a very productive manner.

Lupo in 30 Useful Adobe AIR Applications

Lita
Lita is a free SQLite database administration tool for Windows, MacOSX and Linux.

Lita in 30 Useful Adobe AIR Applications

Google

GMDesk
GMDesk is an application that lets you run Gmail, Google Calendar, Google Docs and Google Maps as a stand-alone application to do all your mail handling, calendar event reading etc. with no need to open it up in a web browser, or have it clutter your workspace.

GMDesk offers an easy menu as well as keyboard shortcuts to switch between different Google services, and you can specify what default service you want the application to start with. It also supports Google Apps access as well.

Gmdesk in 30 Useful Adobe AIR Applications

Polaris
Polaris is a desktop widget for Google Analytics. It provides an easy way to view your data instantly with 8 standard reports.

Polaris in 30 Useful Adobe AIR Applications

Miscellaneous

Moderator
Moderator is a WordPress Plugin and associated desktop application, built using Adobe AIR, that allows you to view and moderate comments from your desktop. Features include are viewing unmoderated comments, dock and system tray notifications of the number of unmoderated comments, accept, delete, and spam comments from within the desktop client, close application window, or minimize it to the system tray while running.

Moderator in 30 Useful Adobe AIR Applications

Xdrive Desktop Live
Xdrive® Desktop Lite is a desktop client for Xdrive that enables users to drag and drop files and folders directly to their Xdrive account from their local computers. Users can also browse, search and publish files to Xdrive using this desktop client.

Xdrive in 30 Useful Adobe AIR Applications

Doc?
Doc? allows you to view, search and bookmark all your favorite ASDocs. It can also handle some legacy books like the ones you find in Flash CS3 and older. Online books can be downloaded and viewed directly in Doc?.

Doc in 30 Useful Adobe AIR Applications

Popling
The Popling desktop application gives you an extra POP of motivation by showing you a new flash card every few minutes. You can set the frequency of the pop so you won’t get disturbed when you don’t want to be. The idea is simple you can learn while you work with short quick questions. With correct answer you move on to the next question, and with wrong you can either try again or skip to the next one.

Popling in 30 Useful Adobe AIR Applications

Further Resources

Following articles are suggested for further reading:

About the author

Muhammad Usama Alam is a software engineer and web developer with over 8 years of experience in designing and developing business solutions for enterprise. You can follow him on Twitter.

noupe

Calculating The Genuine Value of Your Design

2010年5月5日
回應關閉
Advertisement in Calculating The Genuine Value of Your Design
 in Calculating The Genuine Value of Your Design  in Calculating The Genuine Value of Your Design  in Calculating The Genuine Value of Your Design

By Alexis Brille

Designers who are just starting out seem to have trouble calculating just how much their designs are actually worth, let alone choosing whether to charge per hour or per project.

Worse, one of the most challenging situations an amateur has to encounter is the fact that clients will always give an effort to decrease costs due to your insufficiency in the business, even though the designs you have created are astounding. However, not only beginners face this problem — even many experienced designers out there probably underestimate their current prices, which happens often in third-world countries.

It is indeed difficult to determine your pricing standing at entry-level. Therefore, in this article we will list out the advantages and disadvantages of various ways of pricing to help you choose which one suits you best.

Furthermore, one may think he/she is able to start gathering work only when they have clients, that is not true. We will also elaborate on how you can start building up a showcase without having actual clients.

Without further ado, let us give suggestions how to evaluate the value of your design with minimal experience and portfolio, regardless of where you live. We have all been there, we were all beginners once so we want to remind you that just because you are new, there is no reason for you to be regarded as a bargain cart.

Let us start off by elaborating on how to charge by the hour.

1. Establishing The Hourly Rate.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage1EstablishingTheHourlyRate in Calculating The Genuine Value of Your Design

In this section, we will establish the minimum rate you will obtain for your work, regardless of how much the design itself may worth. The best way to do this is to look at the common annual salaries of those who hold the same job position as you, surrounding your area. You will later use this annual salary to do a bit of math, whether it be dividing the annual salary of a job position, similar to yours, by their working hours or calculating the fees of designers with equivalent experience.

Later in Section 5, we will discuss how prices may increase due to how your actual work looks.

The sites below will help you find the average annual salaries of web designers (and in other fields) working anywhere in the world:

  • PayScale A site for salary benchmarking.
  • Coroflot An analysis of Coroflot’s 2009 Designer Salary Survey Results.
  • CareerOverview Salaries and wages for the top career fields in the United States.
  • CBSalary Find jobs that fit in your salary range.
  • Salary.com A salary wizard that allows to take living costs into account.

Caution: Selecting the appropriate annual salary

  1. When you have under just a couple of months experience, select the annual salary of a junior or fresh graduate position. Avoid being unwise and giving yourself the liberty of choosing just any number. This way you can prove your customers that you are honest and you do offer prices the common market is also offering without regarding the design itself.

    At this moment, you may be saying, “My designs are well above standard. They do not deserve to be bought at the average price.” Then, do not let them be bought below that price.

    Section 5 discusses how the true value of your design can be added to the minimum and average price established beforehand.

  2. Most (freelance) designers, nowadays, receive their orders online. If you are based in Indonesia, though, your clients may be from the UK, consider choosing an annual salary of a designer in the UK. If you release prices below International standards due to where you live, towards International clients, you need to start realizing that you are cheating the worst client, yourself.

    For example, you are designing a website for a supplier in the UK, the majority of the their customers may also be from the same country. While the supplier’s revenue may come in British Pound Sterling, yours come in Indonesian Rupiah.

    It would be fair and more beneficial to charge in UK’s currency instead since you are designing for an audience in the UK (note we have mentioned if the client’s customers come mostly from the same country).

    Furthermore, the client might already be used to the price given to you if they know how much UK local designers charge.

    In this case, following annual salaries of those in the same area may not be the best path. Nevertheless, to be fair, this is why many corporations and huge firms are outsourcing.

  3. You are a designer in a country that don’t have many citizens holding the same job title as you, therefore, it is puzzling to choose which annual salary to use as base. It is recommended that one chooses a job title that already exists in his/her area. However, if there is none, the strategy fails as there are no common annual salaries to compare against.

    Try looking at other countries in the continent or which country the client comes from so that if the client is from a much more developed country, you could take the advantage of having a higher salary (designers in Europe obtain more pay than those in Malaysia).

  4. Lastly, comparing salaries of those, not with the same job title, rather, with experience gives another problem: that 10-year veteran website designer may still suffer from DIV-ititis and is in table-hell. Likewise, a designer with 3 months of experience is sometimes, able to produce better results than a 1-year rookie.

Setting up: the hourly rate

After choosing the right annual salary, divide it with your own working hours. If you were to give yourself the weekend off then you are always free to do so. Let us demonstrate this strategy by analyzing the table below, taking the junior web designer title in Australia as example.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage2SettingUpTheHourlyRate in Calculating The Genuine Value of Your Design

Given in the table above, the hourly rate of a new web designer in Australia is $28 per hour regardless of his/her ability to create either a mediocre or beautiful design.

Confirming: the hourly rate

Are your talents and skills worth more than this rate? Do you think you deserve more? See Section 5 for further discussion.

Disadvantages of charging by the hour

In this section, we will expand on the pitfalls to dodge from using an hourly rate seen from both the designer’s point of view and the client’s point of view.

  1. Attention, beginners, take note that you may run into unanticipated bugs when designing, in return, delaying the delivery to the client. If you keep counting the hours to fix that bug, clients may storm in your email inbox complaining why their projects cost more than what you promised them.

    This is how clients may look at this situation, “Not only you gave in my order late, you are charging me more than what we agreed on.” Clients could care less if you run into trouble. “You are an expert, you should not encounter any mishaps.”

    The more ethical way to solve this, is to be responsible for your actions, stick to your word and turn in the project with the original estimated price. This will convey a more positive vibe to the client and ensure them you are truthful.

  2. As for fixing pesky bugs, refer to the resources below:

  3. Keeping track of hours is also a hassle. Time-tracking apps are a dime a dozen nowadays. However, they may turn out to be more of entertainment apps rather than productivity apps. We may only turn them on when testing them not when we are executing actual work, you may forget to turn them off when having to run an emergency errand or you may forget to even turn on the app at all after finishing one page.

    Encountering the incidents above may ruin this whole concept. One way to correct the payment is to estimate how many hours you have put in from when the current task was started until when realizing the timer was off. Be as precise as possible.

    Here are the easiest (free) time-tracking apps to use:

    • Focus Booster App A digital Pomodoro timer to help you implement the Pomodoro Technique.
    • 88 Miles If you have ever spent the better part of your Friday afternoon trying to work out what you have been doing all week, you will love 88 Miles.
    • myHours A time management, timesheet, time tracking solution.
    • SantexQ SantexQ is like combining the 37signals assorted project management tools [time tracking and billing] and rolling them into one tidy suite.
    • Tempo Report on projects, people, dates and tags with detailed charts to visualize time and uncover trends. Accessible via Bookmarklet, Widget, Twitter, iPhone, SMS, Email & Mobile browser.

    Although, there are ‘self-timing’ time-tracking apps which may help out better. You should be warned that some may find it a bit hard to manipulate and understand the data published by the app. Here are such (free) tools:

    • Slife It automatically observes how much time you interact with applications, documents and web sites.
    • RescueTime A web-based time management and analytics tool with automated time tracking.
    • Lapsus A time tracking without timers. Still in its private alpha phase.

    Do not fall into the trap of believing a certain time-tracking app is the best. Give them test drives and choose the simplest for you to use.

  4. Another disadvantage is possibly being underpaid. For instance, you promise your client the project will be crossed off in 6 hours, though, in reality, you finish it off in 4 hours or even less. Who loses here? The designer. The client pays by the hour, therefore, he/she pays less.

  5. From the client’s point of view, it is worrisome to solely depend on how long it takes for a person to get the job done. Even if you have given an estimate, clients will be sitting at the edge of their seats waiting for you and the final price. If you charge per project, they may be able to sit back and relax since they know exactly how much they are paying for the whole project even before it has started.

    See “Advantages of charging by the project”.

  6. Designers are able to kill two birds with one stone by charging hourly rates, the stone being feature creep, the two birds being the designer and client.

    Feature creep is a dangerous issue concerning the adding of unnecessary features to a product.

    Designers can become overly detailed and perfectionists, thus, this may add a few extra hours to designing. If your client says he/she is satisfied with design, seal it off. Any other revisions to be made are risks.

    Even though, the client may like the revision, he/she will most probably, still hold a grudge against you for charging more due to the surplus hours you have put in. The obverse situation, where the client detests the newly revised design may lead to a worse situation, an argument between the two mentioned parties.

    As the one servicing, you should still be paid for the extra hours. However, isn’t it resentful to have to pay for something you did not request?

Advantages of charging by the hour

On the other hand, there are some benefits in using this rate.

  1. Opposing the first disadvantage listed above, if you do turn in the project with charging the estimated original price, not counting the surplus time it took you to fix a bug, there is a high change the client will return to you in the future.

  2. If one is able to finish the project quickly while keeping quality, you are able to receive the pay quickly and acquire time for new projects. Also, clients who are in a sprint race will be sure to call you.

    Such circumstance is charging $65/hour for a 3 hour work. Clients may first be shocked with this figure, however, they are paying for only 3 hours of work. Everyone loves to be impressed at a job done rapidly, something that is not often experienced when charging at the end of projects since designers are less likely to finish within hours when charging by the project.

  3. If a client wants extra features, they may be too intimated to even request it. This is because they know how much more it will cost them, Hourly Rate × Approximate Time Taken. Clients are less likely to mush you.

    Does this mean clients will constantly nag designers for extra ‘free’ features when charged by the project? No, you may set up an additional fee for these when you are charging per project. See section “Advantages of charging by the project”.

  4. A more intuitive benefit of charging by the hour is you learn how to become more punctual and systematic. You learn how long it precisely takes you to Get Things Done™. Lastly, you learn how to stop procrastinating. Therefore, if you plan on fixing a few loose screws in your life and you are a designer, this might help you do so.

  5. This is recommended for small fixes, updates and/or changes to designs or codings.

  6. Should a confused and vague client come to you, do charge by the hour. This is extremely dangerous. If a client is not definite with what he/she wants, you will most likely wind up sitting at the table tediously stuck in an endless brainstorming session.

So, should I charge by the hour?

Ensure you know exactly how to execute the tasks in the project and the solutions to the potential problems that might take place during the project.

For newcomers, it might take a while to adapt to starting and stopping timers, not to mention to even learn how to use them.

As a summary of these points, consider charging by the hour only:

  1. If you have adapted to the time-tracking application of your choice to make sure you can use them properly.

  2. If the project scope is crystal clear and the client knows exactly what he/she wants.

  3. If potential problems have been assessed well.

  4. If you have all the resources and solutions to possible issues in the project.

  5. If you do not procrastinate.

  6. If you are honest with your billing.

2. Establishing The Project Rate.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage3EstablishingTheProjectRate in Calculating The Genuine Value of Your Design

Just as in Section 1, here, we will establish the minimum rate for projects, only taking common salaries and experience into account and not the design itself. Refer to Section 5 to see how the design may change your pricing for the better.

This system is mostly used by design agencies or studios. It offers a more professional vibe and it allows clients to foresee how much each feature costs, rather than, how much time the designer takes.

A common pricing system that, mostly, design agencies and freelancers implement is to list out base packages for projects. If clients would like additional services to be installed on those base packages, they must pay additional fees.

Setting up: the initial package

For starters, let us prepare the most basic design package to offer. In the website interface design field, usually, this includes:

  • 1 Photoshop Template.
  • 1 Static HTML/CSS Template.

Setting up: the initial package rate

As ironic as it is, the most natural way to determine a package price is by first finding out the hourly rate you are going along with. Therefore, you may want to read Section 1 before continuing on.

After you have found out your hourly charge, estimate how long it will take you to finish one single version of a design i.e., one poster, one template, one web page, one logo, etc. As shown in the table below, this is how to use these two numbers to determine how much one single version of your Photoshop Template costs.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage4SettingUpTheInitialProjectRate in Calculating The Genuine Value of Your Design

Now, you have a rough estimate to give clients when they ask you how much you charge per page.

Side Note: When creating portfolio sites, only the home page would consume the longest time. Most of the subsequent pages follow the theme, header and footer of the home page.

Companies may only request one page, a template for the rest of the pages, thus, it is important to have a prepared estimate of how much one page costs.

Confirming: what to include in packages

If you would like to include more than one template in a package, there is always the ubiquitous “Silver”, “Gold”, “Platinum” system of packages.

For instance, the “Silver” package may only provide 1 Photoshop Template and 1 HTML/CSS Template. The “Gold” package may provide 3 Photoshop Templates and 3 HTML/CSS Templates.

Should you contemplate in doing so, start by counting the amount of time it takes to finish any succeeding pages excluding the time it took to create the elements already prepared e.g., header, footer, sidebars, etc.

In other words, do not count the time it takes to create elements you have already made in existing pages.

Caution: number of revisions

Every designer should clearly state the number of revisions allowed to be made to the Photoshop Template after the first design for the client. It is the one that could be revised the most.

Most choose a number between 3 – 5 since you are a designer and you should be able to produce a design that would be best for the client in strive of achieving the minimum amount of revisions.

Should there be more than 5 revisions made, put additional charge, depending on how long the change would take. Refer to your hourly charge.

If a client requests a modification to be made after the template has been converted to HTML/CSS, additional fees are advised.

Try not to act like a slot machine, especially, when it is the first time the client has approached you and it is a minor change e.g., a change of icon. However, if it is AJAX-ifying a static e-commerce shopping cart, which does not take a mere 2 hours to finish, charge extra on the tariff.

Though, if you are new, consider allowing more revisions if you are not confident yet.

Caution: charge for more features

Related to the latter point, often times, clients may try to persuade you into implementing new features for free. If it is adding a search function, even if you are using Google Custom Search, put a price tag on it.

Caution: knowing your debts

The previous two points noted no one should be underpaid or not being paid at all for their services. Nevertheless, if the client is an old friend who has helped you in the past, it is obvious to lighten up your pricing which will help you return the favor to the friend.

Disadvantages of charging by the project

  1. Clients can go into a feature spree and abuse the flat rate system. It is why these individuals are switching to hourly rates. We have discussed how we could solve that above, by putting additional fees for extra features.

  2. Offering this type of tariff does not work well with small updates on existing sites, especially if it was developed by another party. It would certainly take a while for you to find where every file is, how each has been coded and implemented.

    If the client insists on paying you in bulk instead of by the hour, a good defense is to explain how every designer has their own individual style of filing. In order to change or upload a new image, you would have to explore first the files and find at which line of the file, the code was typed in. Unless the file was created by you, it would not take as long since you should remember your own coding.

    Therefore, there is a high chance where you could be earning more by the hour if you were to update a site not originally created by you.

  3. Clients who come to you even with a well defined project plan, might swerve and completely change the project scope. In return, instead receiving a clear pay for the project, the client forces you to collaborate on the new scope for hours, by still paying a flat rate. It is recommended every designer requests a signature from the client to avoid such incident.

    Refer to Section 3. Sign The Contracts

Advantages of charging by the project

  1. This method of billing is possibly, the most flexible for a designer. You are still tied to a due date, however, it is not as tight as that of an hourly rate. You could estimate the project to be done in 3 days but you could decide just how many hours you would like put in it without counting them per se.

  2. The designer still receives a clear pay with no chance of being underpaid since invoicing at the end of a project depends on a pre-determined and reasoned cost, even if the project was finalized before the due date.

    That is something which is nearly impossible to attain with an hourly rate, this is mentioned previously in Section “1. Establishing an Hourly Rate – Disadvantages of charging by the hour.”

  3. The client would have a much stronger perspective of what he/she is actually paying for. With an hourly rate, designers could still provide an estimate payment, however, clients could still be sitting at the edge of their seats since the price they will pay is not fixed.

  4. Project rates work great for designers who often suffer from finishing the project way before the estimated due date because there is no chance of being underpaid.

So, should I charge by the project?

Most designers choose this method of billing since it is the most flexible. Just as any cases in life, there are bullets to dodge. Consider charging per project only:

  1. If the client arrives with a crystal clear scope and a theme in mind so that you won’t spend absurd hours counseling. This would lead to a huge financial loss on your part. If you foresee this coming, give the client a counseling fee.
  2. If you are sure the project rate covers all costs i.e., the estimated time taken for the project is precise.

3. Sign The Contract.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage5SignTheContract in Calculating The Genuine Value of Your Design

Preparing contracts for projects is often overlooked by designers, let alone having a proper documentation ready. You need to realize that a contract is your safety net.

Clients may sometimes abuse you, they may force you to add more functions for free, constantly request updates and maintenance to the site when you concur to only create the design, the list rolls on.

As you can predict, unless there is a mutual signed agreement between the two parties, there is no way to protect yourself against such cases. Which is why you should always have a contract ready for the client to sign.

You should detail out the chapters you need to defend yourself with. Clearly state what you will be responsible for and what you will not be responsible for. Be as detailed as possible.

Here is a template you could use to write contracts for design work:

4. Before The Real Deal(s).

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage6BeforeTheRealDeals in Calculating The Genuine Value of Your Design

The question now is how do you bait the first few clients? Here is the situation, you want clients coming in your door but you have nothing to show them yet. There are several ways to practice and gather up a portfolio before having any actual clients, let us provide examples.

Redesign an existing site

Plenty of corporate websites today are lagging behind the presentation of what a beautiful website is. Rejuvenating them with a new, unofficial, look will offer prospects something they will gladly feast their eyes on.

On the positive, if the corporation happens to see your redesign, you could be called to turn your template into their official template.

On the negative, you could be a victim of design theft so be sure to copyright your design.

Create generic templates

Creating templates for Content Management Systems (CMS) such as Wordpress, Joomla and Drupal help you adapt to the real workflow of designing.

You could also monetize off these by selling them on sites such as:

  • ThemeForest 1,976 Site Templates and Themes from $3.
  • ThemeNation Free Premium WordPress Themes and Resources.
  • Joomla Themes Sells both free and premium themes. Also, submit them your theme and they will review it for you.

Selling designs clients rejected on these sites is also a great strategy to recycle your creations.

Write tutorials

As you sharpen your Fireworks and Photoshop skills and create those generic templates, it would be a grand idea to write tutorials how to develop them. The amount of exposure and publicity one could acquire from such tutorials and articles is very much remarkable. Consider writing for these sites to acquire recognition:

Design for those closest to you

Introduce your family to the web. If your father is a businessman, has his own company but is rather an old fashioned company, build them a new corporate site. If your mother is an artist, promote her work by designing her a portfolio site.

Mistakes make perfect

It is important that you prepare solutions for mistakes in real projects, therefore, practicing the previous points will help do so. Make sure to have at least 3 mockups that will give your audience the style and vibe you may present in real projects.

Therefore, ensure these mockups look good, it is how you can impress your clients before even reaching for contact.

5. Establishing The Optimum Rate.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage7EstablishingTheOptimumRate in Calculating The Genuine Value of Your Design

In the two previous sections of the article, we have established the minimum rate of pricing, that is, we looked at what other designers in the same market were gaining by comparing experience.

However, does experience actually matter in the design world? In Section 1. Establishing The Hourly Rate. Caution: Selecting the appropriate annual salary. Point 4, we wrote:

“[...] that 10-year veteran website designer may still suffer from DIV-ititis and is in table-hell. Likewise, a designer with 3 months of experience is sometimes, able to produce better results than a 1-year rookie.”

This goes to remind you that the design field is a creative field. Learning how to mark up a HTML page properly may take a while, however, the design field depends on ones who are naturally talented and passionate about what they do.

Coding is systematic, there is an absolute solution to every problem, contrasting to how designing works, there are none. Creativity knows no limits and it does not require a person years to obtain creativity, one is born with it.

We would like to again, emphasize, that while Section 1 and Section 2 discuss how to establish minimum rates, the following self-checks will help establish optimum rates.

Please, use them as partial guidelines to how you can explain to clients that your design is of premium and the details you have considered while designing them. In return, clients who think your prices were too much at first, may accept and be willing to pay them.

The images that are labeled “Good” show better representations of the images that are labeled as “Bad”. Give similar comparisons to your clients to show the quality of your work and why your rates have been optimized as such. Keep this in mind and you are good to go.

Self-check: Design

Designers, as well as clients, should know the current trends today, what is new and what is not. The examples below show designs that are in, that are a bit too in and that are not.

Self-check: Design – Dropshadow

Some think that just by adding a dash of Photoshop dropshadow to an image on a website makes it look visually appealing enough. However, below, we see examples how dropshadows fail and how they can be improved.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage8DropShadowGoodBad in Calculating The Genuine Value of Your Design

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage9DropShadowGoodBad2 in Calculating The Genuine Value of Your Design

Self-check: Design – Color Scheme

Color schemes are another attribute that separates high-class designers from low-class designers. Make sure the colors on a website match what the content is about. If the website is for children, maintain a cheerful color scheme, if the website is about home decoration, keep a homely color scheme consisting of very subtle colors.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage10ColorSchemeGoodBad in Calculating The Genuine Value of Your Design

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage11ColorSchemeGoodBad2 in Calculating The Genuine Value of Your Design

Self-check: Design – Gradients

Gradients are presented best when they are subtle. Refer to the examples below.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage12GradientsGoodBad in Calculating The Genuine Value of Your Design

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage13GradientsGoodBad2 in Calculating The Genuine Value of Your Design

Self-check: Design – Stock Photos

Handshakes and female operators both show unoriginality in a design. An alternative solution to filling an empty image space is to use illustrations instead, they add a more lively and fun vibe to the whole look of the website.

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage14StockPhotosGoodBad in Calculating The Genuine Value of Your Design

CalculatingTheGenuineValueOfYourDesignByAlexisBrilleImage15StockPhotosGoodBad2 in Calculating The Genuine Value of Your Design

Self-check: Coding

If you consider yourself a website designer and coder, you should know the proper mark-up and the current coding standards. The points below show web coding standards that are often misunderstood and improperly used. Here, we list out references and tips how to use them correctly on websites.

Self-check: Coding – Doctype

It is important to include a DOCTYPE in your HTML code since browsers could render pages incorrectly without the proper one.

Self-check: Coding – Meta Tag

Meta tags are crucial to increasing the popularity of websites. Including a good balance of these meta tags will help the site gain exposure on search engines.

Self-check: Coding – Table and DIV Tags

As a professional web designer, you must know the difference between table and DIV tags. These are often used for laying out the elements including images on a website, however, it is argued that

tags were meant only for representing data, rather than images.

The articles below further mention their differences.

There is a plethora of other articles further discussing more design and coding tips in details:

About the author

Alexis Brille is a Project Manager and User Interface/Experience Designer from Atlanta with 8 years of experience in Art and Design. She also holds a Bachelor of Computer Science from the University of Wollongong, Australia. Find her on http://alexisbrille.magntize.com

noupe

40 Beautiful And Amazing Aquatic Life Photos

2010年5月4日
回應關閉
Advertisement in 40 Beautiful And Amazing Aquatic Life Photos
 in 40 Beautiful And Amazing Aquatic Life Photos  in 40 Beautiful And Amazing Aquatic Life Photos  in 40 Beautiful And Amazing Aquatic Life Photos

By Obaid ul Rehman

About 70% of earth surface is covered by water. Aquatic life is quite adventurous and is vastly diverse. Life under water is full of many beautiful creatures which are rarely seen and many people can’t even name them.

People love to see aquatic life and the unique creatures found in the oceans, for this we have compiled this post that is purely based on aquatic theme. Let us take a close look at these wonderful masterpieces of photography. We hope that you’ll like it and do not forgot to share your comments.

Clownfish

10-water in 40 Beautiful And Amazing Aquatic Life Photos

Surrounded

1-water in 40 Beautiful And Amazing Aquatic Life Photos

Bend

2-water in 40 Beautiful And Amazing Aquatic Life Photos

Sonata

3-water in 40 Beautiful And Amazing Aquatic Life Photos

Seahorse

4-water in 40 Beautiful And Amazing Aquatic Life Photos

Catch me if you can

5-water in 40 Beautiful And Amazing Aquatic Life Photos

Angry

6-water in 40 Beautiful And Amazing Aquatic Life Photos

Deep Red Sea

7-water in 40 Beautiful And Amazing Aquatic Life Photos

Coral tree

8-water in 40 Beautiful And Amazing Aquatic Life Photos

Dreaming Jellyfish

9-water in 40 Beautiful And Amazing Aquatic Life Photos

Tentacles

12-water in 40 Beautiful And Amazing Aquatic Life Photos

Turtle 32

45-water in 40 Beautiful And Amazing Aquatic Life Photos

Dolphins

13-water in 40 Beautiful And Amazing Aquatic Life Photos

Barbed Skate

14-water in 40 Beautiful And Amazing Aquatic Life Photos

The Cardinal & the Clowns

15-water in 40 Beautiful And Amazing Aquatic Life Photos

Kiss of the Mandarin

16-water in 40 Beautiful And Amazing Aquatic Life Photos

Underwater bridge

17-water in 40 Beautiful And Amazing Aquatic Life Photos

Underwater Forest

18-water in 40 Beautiful And Amazing Aquatic Life Photos

Underwater garden

46-water in 40 Beautiful And Amazing Aquatic Life Photos

Aquatic Life 04

19-water in 40 Beautiful And Amazing Aquatic Life Photos

Cuddly Cuttlefish

20-water in 40 Beautiful And Amazing Aquatic Life Photos

Sea slug 7

21-water in 40 Beautiful And Amazing Aquatic Life Photos

Roots

22-water in 40 Beautiful And Amazing Aquatic Life Photos

Singapore 1

23-water in 40 Beautiful And Amazing Aquatic Life Photos

Porcelain crab

24-water in 40 Beautiful And Amazing Aquatic Life Photos

Squirt…

25-water in 40 Beautiful And Amazing Aquatic Life Photos

Clown triggerfish

26-water in 40 Beautiful And Amazing Aquatic Life Photos

Underwater

27-water in 40 Beautiful And Amazing Aquatic Life Photos

Anenome like a rubber ball

28-water in 40 Beautiful And Amazing Aquatic Life Photos

The Jetty

43-water in 40 Beautiful And Amazing Aquatic Life Photos

Meeting Of The Jelly Fish

31-water in 40 Beautiful And Amazing Aquatic Life Photos

Eel

33-water in 40 Beautiful And Amazing Aquatic Life Photos

Amphiprion ocellaris

34-water in 40 Beautiful And Amazing Aquatic Life Photos

Silhouette of caretta

35-water in 40 Beautiful And Amazing Aquatic Life Photos

Nautilus

36-water in 40 Beautiful And Amazing Aquatic Life Photos

Anthozoa

39-water in 40 Beautiful And Amazing Aquatic Life Photos

Sea Dragon

40-water in 40 Beautiful And Amazing Aquatic Life Photos

In the Space

41-water in 40 Beautiful And Amazing Aquatic Life Photos

Hammer!

42-water in 40 Beautiful And Amazing Aquatic Life Photos

Lunch hmmm

44-water in 40 Beautiful And Amazing Aquatic Life Photos

noupe

Gorgeous Geometric Designs

2010年5月3日
回應關閉
Advertisement in Gorgeous Geometric Designs
 in Gorgeous Geometric Designs  in Gorgeous Geometric Designs  in Gorgeous Geometric Designs

By Tim Mercer

Geometric art has been around since antiquity. From the ancient Greek to the native Americans, peoples all over the world throughout time have produced geometric works of art. Geometric designs tend to have a more rigid quality to them than organic based designs. Whether it’s minimalist and simple or very complex, many geometric designs are made up of rather simple shapes. Today we present 40 Gorgeous Geometric Designs to inspire you. Be sure to check out the artist’s other works by clicking on the images.

Beautiful Geometric Designs

Andy Gilmore
This Mini Cooper looks awesome with a geometric design on it, turning an ordinary car into a work of art.

04-2minich05 in Gorgeous Geometric Designs

This symmetrical design is a great juxtapose between cool and warm colors as well as rigid and organic lines .

170 05-18-09b in Gorgeous Geometric Designs

Niark1
This artist make use of simple geometric shapes to create some cool characters. While there are some organic elements, this piece is dominated by rigid shapes.

789721240843430 in Gorgeous Geometric Designs

Many native American designs incorporated the zig zag lightning bolts and other geometric elements represented in this piece.

789721240843395 in Gorgeous Geometric Designs

Nacho-Gil
This zebra made of triangles demonstrates how geometric designs can even convey the most organic of forms.

001 in Gorgeous Geometric Designs

Another example of organic forms being created from geometric shapes is this mountain lion made of triangles. These pieces remind us that math and geometry are in everything we see.

002 in Gorgeous Geometric Designs

Graphic Nothing
This geometric pattern plays tricks on your eyes. As intriguing as it is, you can’t stair at it too long before your eye start to strain.

3789130164 830854cc45 in Gorgeous Geometric Designs

This design uses only triangles to create an interesting pattern. The colors used here are reminiscent of old school 3D.

Graphic-nothing in Gorgeous Geometric Designs

Chobopop
Chobopop’s geometric animal series features different animals made up of simple shapes. Mostly comprised of triangles, this image of a bear is stylistic, expressive and colorful.

3550509815 E2db855286 in Gorgeous Geometric Designs

Again, Chobopop make good use of the simple triangle. This time around he imagines a mounted deer head in great style.

3586067051 97fd59a330 in Gorgeous Geometric Designs

Elijah
This piece looks like a sheet made of little glass tiles. You can almost see it move.

3124543336 58e55079a4 in Gorgeous Geometric Designs

Phil Chang
The more you look the more you see in this space scene.  It combines geometric design elements with those of a more organic feel like the astronaut.

544561207048001 in Gorgeous Geometric Designs

Charley Harper
Charley Harper is well known for his beautiful geometric designs and this one is particularly interesting with its pinstripe look and great sense of balance.

1448115001 Bcce16670a O in Gorgeous Geometric Designs

This beautifully simple design is of a turtle peeking out through his shell. This one has great complimentary colors and clean lines.

Harper2large1 in Gorgeous Geometric Designs

Gretchen Nash
The intricate patterns and geometric shapes that make up the owl in this piece are really superb. The use of negative space and the contrastingly simple branch make it even more delightful.

Gretchenetc in Gorgeous Geometric Designs

Iunewind
This 3D design is absolutely fantastic with its interesting shapes, great patterns and cheerful colors.

Ljnnkjnknknknknknkn in Gorgeous Geometric Designs

This awesome illustration by Iunewind resembles a cityscape. The beautiful colors, patterns and shading all make this one a real jewel.

Rrrrr in Gorgeous Geometric Designs

MWM Graphics
Not only are the shoe designs really cool but the abstract backgrounds give the pieces a youthful and enthusiastic feel.

502421221970153 in Gorgeous Geometric Designs

These snowboard look awesome with these geometric designs on them. The shapes and colors use in each design represent the different seasons perfectly.

502421221970025 in Gorgeous Geometric Designs

Cesar Gomez
This piece by Cesar Gomez has a pleasing contrast between light and dark, cool and warm.

1303131268083270 in Gorgeous Geometric Designs

The eye naturally moves upward in this design as if ascending into the heavens.

1303131268084118 in Gorgeous Geometric Designs

Jeff Jagunich
The soft feel of the watercolor bleeding into the canvas stands in stark contrast to the geometric shapes and lines in this watercolor painting.

11982812512375621 in Gorgeous Geometric Designs

This watercolor creation has a feeling of expanding chaos.

1198281251237750 in Gorgeous Geometric Designs

Tomas Brechler
This gorgeous poster design for the Omega Code looks like some sort of nebula that creates triangles instead of stars.

511581237691611 in Gorgeous Geometric Designs

6ra99a
This piece has a great sense of movement and speed.

1252191038476 F in Gorgeous Geometric Designs

Ciokkolata
This spiral design really draws you in. Fantastic colors and great movement make this one a stand-out.4203789145 41a4ca1ed4 in Gorgeous Geometric Designs

Created with simple circles, this design really draws the eye toward its center. The color pallet is quite pleasing as well.

3072119520 D1af0b41de in Gorgeous Geometric Designs

Elodole
Made by cutting and folding paper, this piece reminds me of an MC Escher drawing.

4071095205 35545edc8d B in Gorgeous Geometric Designs

This creation has an architectural feel to it. Notice that both of these complex looking pieces were made with only three folds in the paper.

4057249955 73d01cae7d in Gorgeous Geometric Designs

Dave Bollinger
This geometric design has a great sense of depth, inviting the eye to explore its depths.

2385573036 6975a48c6a in Gorgeous Geometric Designs

Superb shading makes this design really pop. The absence of color really puts the emphasis on the 3 dimensional form.

3041525353 B53e887282 in Gorgeous Geometric Designs

Seize Happywallmaker
Painted using acrylics, this design is the definition of simplicity. The use of negative space as well as a great color pallet make this one quite compelling.

3334508221 64dce9eba0 in Gorgeous Geometric Designs

This design, though abstract in nature seems to be looking at you as you look at it. Great colors, simplicity and symmetry come together beautifully in this work of art.

4067480621 7c97cb2f02 B in Gorgeous Geometric Designs

Ghee Beom Kim
This piece from Mr. Kim is an optical illusion. Not only does it look great with its wonderful colors but it appears to be moving.

Kim1 in Gorgeous Geometric Designs

This geometric design has a yin-yang quality to it. The simple pattern has an interesting affect on the eye.

StarryNight in Gorgeous Geometric Designs

Richard Thompson III
The following faces were created by combining photographs and geometric illustrations. The outward projecting lines in this one convey a sense of enthusiasm.

806941260051170 in Gorgeous Geometric Designs

The facial expression combined with the radiating pattern in this work give it a feeling of peace and happiness.

806941260051447 in Gorgeous Geometric Designs

Marc Mckie
The following works of art from Marc have stunning colors and gorgeous designs. This one uses shading and highlight to give it a 3D look.

3751491193 26b3d860d7 in Gorgeous Geometric Designs

This design, with its vanishing point perspective and many layers has a sense of super fast movement towards the center.

3769856917 E46e8465f01 in Gorgeous Geometric Designs

With its wonderful colors and fun shapes this piece reminds me of a circus tent. Yet another awesome creation from Marc.

3751491589 C5aee3fca8 in Gorgeous Geometric Designs

Further resources

noupe

The Importance of Cross Browser Compatibility: Tips and Resources

2010年4月30日
回應關閉
Advertisement in The Importance of Cross Browser Compatibility: Tips and Resources
 in The Importance of Cross Browser Compatibility: Tips and Resources  in The Importance of Cross Browser Compatibility: Tips and Resources  in The Importance of Cross Browser Compatibility: Tips and Resources

By Sean Geng

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.

How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

So what are the options? The data about current browser share varies depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.

When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.

How does your site perform?

So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser Lab
Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.

Browserlab in The Importance of Cross Browser Compatibility: Tips and Resources

Browsershots
Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.

Browsershots in The Importance of Cross Browser Compatibility: Tips and Resources

Browser Sandbox
Runs an application to view your site in a variety of browsers.

Browsersandbox in The Importance of Cross Browser Compatibility: Tips and Resources

Browsrcamp
Allows you to test the compatibility of your design with Mac OS X browsers.

Browsrcamp in The Importance of Cross Browser Compatibility: Tips and Resources

IE Tester
A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.

Ietester in The Importance of Cross Browser Compatibility: Tips and Resources

Browser Proofing Your Site

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.

Validate

First off, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3’s XHTML Validator and CSS Validator.

CSS Reset

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym { border:0;}

Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.

Include a stylesheet if the browser is IE

<!--[if IE]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Target Specfic Versions of IE

<!--[if IE6]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

(Of course, you can replace IE6 with any version of IE)

PHP Browser Detect

If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.

Phpbrowserdetect in The Importance of Cross Browser Compatibility: Tips and Resources

jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery. The script adds a class to the body, which you can then style in CSS.

Mobile Devices

Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.

What does my site look like in a mobile device?

How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:

Test iPhone
Simulator for quickly testing your iPhone web applications

Testiphone in The Importance of Cross Browser Compatibility: Tips and Resources

iPhoney
iPhoney is a free application you can download in order to simulate a iPhone browsing experience. Includes support for rotating, zooming, and even turning off plugins like Flash.

Iphoney in The Importance of Cross Browser Compatibility: Tips and Resources

MobiReady
Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.

Mobiready in The Importance of Cross Browser Compatibility: Tips and Resources

Mobile Device Emulator
A great way to test your site across a multitude of mobile devices.

Dotmobi in The Importance of Cross Browser Compatibility: Tips and Resources

 

Ways to make your site mobile friendly

So how do you go about making your site mobile friendly? Well, if you are interested in pursuing a mobile version of your site, here are a few ways of doing so.

Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Some of the easiest ways of doing this include Studio Hyperset’s Mobile Redirect Script, or using Mobiforge’s Lightweight Device Detection in PHP.

Mobify
Mobify allows you to design a mobile version of your site based on your current design. It also allows for traffic stats and advertising options.

Mobify in The Importance of Cross Browser Compatibility: Tips and Resources

Mofuse
Mofuse lets you create a mobile version of your blog for free. It’s pretty easy, and only takes a bit of time.

Mofuse in The Importance of Cross Browser Compatibility: Tips and Resources

Further Resources

Still hungry for cross browser compatibility resources and solutions?

About the author

Sean Geng is a freelance web designer based in Pittsburgh, PA. He is the site curator over at Designmess, a online community for designers and developers. You can follow him on Twitter, or contact him via his website.

noupe