Imagination is our power

Archive for December, 2010

10 Useful Dreamweaver Tips For Beginners10 Useful Dreamweaver Tips For Beginners

A Dreamweaver user will definitely reckon what a powerhouse it is. Packed with tonnes of features, options and debatably one among the most well known IDE (Integrated Development Environment) in today’s market. It may not meet the criteria that some developers demanded however, Dreamweaver undeniably provides a decent range of development, collaborating and coding tools. These options and tools are hidden under layers of regrettable less intuitive menus, which is why I am providing tutorials in today’s post.

I will show you some of the most powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly. Full list after jump.

1. Dynamic View with “Live View”

We already know that DW offers a static view of our open files, but what about “dynamic views” of an application such as WordPress?

First, we need to tell DW what settings to use to present our“dynamic views” correctly. To do this, select HTTP Request Settings from the View > Live View Options menu, then enter the GET or POST parameters you need to view your application correctly.

live view options 10 Useful Dreamweaver Tips For Beginners

Then by switching to Live View in DW, it replaces the old Design View pane with a live, pixel-perfect WebKit rendering of your page; complete with live Javascript, DOM manipulations, database queries, server-side code, and rendered CSS, rather than the placeholder icons you see in Design View.

2. “Code Navigator” is DW’s Firebug

Taking it a step further is all about the Code Navigator and when in the Live View window, ALT-clicking (Command-Option-clicking for Mac) anywhere in the window, instantly presents the code that rendered that item. Similar to what you might currently see in Firefox/Firebug.

3. Freezing JavaScript

Due to the dynamic nature of Ajax, many times we need to interact with a page where certain items are not rendered or available on first page load. These are items that are injected into the page some time after page load. Here’s an example:

You might want to change the styling of a tool tip that is implemented entirely in JavaScript. Before today, you’d have to methodically search your way through your scripts to find what was being created and where.

Instead, try this:

Render your page in Live View, then hit F6 to Freeze JavaScript at any time, allowing you to target and dissect the code relating to any dynamic item in the page.

freeze javascripts 10 Useful Dreamweaver Tips For Beginners

4. Live View’s Next Best Friend – “Live Code”

When using Live View, you can also turn on Live Code. Live Code will update your code as you hover, click and interact with elements and items in the Live View window!

5. Automatic JavaScript Completion

Dreamweaver comes with an intelligent and complete HTML and CSS code completion, but what about Javascripts? If you code jQuery or Prototype in Dreamweaver, then you should know there are API extensions that provide Javascript code completion. It reduces the typing needed and can come in pretty handy for fast coders.

Click here to read more, or download:

auto code completion 10 Useful Dreamweaver Tips For Beginners

6. Beautify Codes On The Fly

Does your code page look like unorganized, messy lines of code? Use the Apply Source Formatting feature and reformat it exactly to your preferences. To quickly clean them up, click the Format Source Code icon at the bottom of the Coding toolbar (Edit > Toolbars > Coding) and select Code Format Settings to set your preferred formatting.

You can also access the formatting option from Commands > Apply Source Formatting or only apply it to a select block of code by selecting the Apply Source Formatting to Selection option.

source formatting 10 Useful Dreamweaver Tips For Beginners

7. Get widgety

Just click the Extend Dreamweaver icon (it looks like a gear) in your Application Bar and select Browse for Web Widgets. This will take you to the Adobe Exchange where you can find additional widgets from vendors such as Yahoo!, JQuery, and many others.

web widgets 10 Useful Dreamweaver Tips For Beginners

8. Subversion & Dreamweaver

And yes, Dreamweaver does support Subversion (SVN). For developers who uses SVN to maintain revision control of their project, this could be a good news. Dreamweaver developer Andrew Voltmer discuss how you can use Subversions with Dreamweaver.

subversion with dreamweaver 10 Useful Dreamweaver Tips For Beginners

9. No More Redundant Styles

Many people use Dreamweaver as a way to update content visually, like a word processor. Before Dreamweaver CS4, this could result in redundant CSS rules like .class1, .class2, and so on. In Dreamweaver CS4, just switch your Property Inspector to HTML mode (click the HTML icon on the left of the Inspector) and you’ll say goodbye to all that redundant CSS, inserting only appropriate HTML markup.

10. Form Validation made easy

Want to validate your form fields, but worried that you’ll have to rebuild from scratch? No worries. Simply select an existing form element, such as a text field, and apply a Spry Validation widget from the Insert > Spry menu. Then control validation requirements such as minimum or maximum characters directly from the Property inspector.

spry validation 10 Useful Dreamweaver Tips For Beginners

Bonus: 3 more

11. Access Related Files Easily

When you open an HTML or PHP file, you will now see a row of dependent file names, such as CSS, Javascript and even included files for PHP, at the top of the document window. You can easily switch to these files, make changes and save them, all without even opening them up. When you click any file in the Related Files bar you will see its source in Code view and the parent page in Design view. Or use Code Navigator to quickly access CSS source code that affects your current selection.

related files 10 Useful Dreamweaver Tips For Beginners

12. Check browsers compatibility

Open the document you want to check for compatibility; from the same menu bar where Code / Split / Design views are accessed, look to the far right for ‘Check Page‘ button.

check page 10 Useful Dreamweaver Tips For Beginners

Clicking it will expand a drop down menu, select ‘Check Browser Compatibility‘. The Browser Compatibility results window will show at the bottom of the window with any issues that you need to address.

Note: This will NOT check new versions of IE on Mac! To select which browsers to use for testing, select Check Page > Settings from the menu.

13. Preview PHP Pages

Dreamweaver allows you to run and preview PHP codes within the software. Here’s how to get it setup.

php 10 Useful Dreamweaver Tips For Beginners

Getting started

  1. First, select Site -> New Site from the top navigation.
  2. You’ll see both the Basic and Advanced Site Definition option tabs. Let’s proceed by selecting the Advanced Site Definition tab.
  3. Enter a folder name for the site in the appropriate box (for this example we’ll use “myphp” as the folder name).
  4. Create another folder named “images” by entering its name in the ‘Default Images Folder’ field.
  5. Under the Local Info, input the following values in the fields:
    • Site Name: the name of the site. To be used in Dreamweaver only
    • Local root folder: This is the name of the site you will be working in. Be sure to name sites in a way to minimize conflicts, or confusing names.
    • Default Images folder: This is optional, but it’s advised to create it now as most sites will use images to some extent. This is where DW will ‘look’ to insert images in your documents during the coding phase.
    • Links Relative to: This defines how document linking in Dreamweaver will be handled. You can select either Document or Root. The differences between the two are:
      • Document Relative – Will insert a path relative to the file you are working and the item being linked to.
      • Root Relative – Uses / which causes the document/file to be linked in relation to the ROOT folder.
      • Another alternative is to add some configuration to the server configuration files. Being a more advanced task, we’ll just stick to using Document-relative for now.
    • HTTP address: enter the site root folder for your project
    • Case-sensitive links: Dreamweaver will check if any file in the project can have Case-sensitive issue when uploading to the server. Notifications will be shown when you use: Site -> Check Links Sitewide. You can leave it checked if you want. I personally don’t leave it checked as I always name files in lowercase. Uppercase letter is not recommended.
    • Cache: Check Enable cache.
  6. In the Remote Info page, either setup your FTP or other access to a remote server or leave the Access to None.
  7. In the Testing Server page select the option that relates to the file type/system you will be testing.
  8. Version Control will not be used for this example so you may leave it blank unless familiar with it.
  9. Cloaking allows you to place .psd, .fla, and other source files within your sites folder and DW will disregard them when uploading/updating your site.
  10. Design Notes are ideal for a web design team as it retains note on changes made to the files. It’s checked by default and fine for us to use this way.
  11. Leave File View Column, Contribute, and Templates as default.
  12. The Spry page simply points to the Spry assets folder which is automatically included with Dreamweaver. There’s no need to change this. Once every setting is finished, click OK.

Preview PHP in Dreamweaver

Now open a PHP file and make the needed changes to it. To view this file in Dreamweaver simply press F12 and the results will show in your default browser. You can change which browser is used in Edit -> Preferences -> Preview in Browser. This allows a faster edit-to-preview time, eliminates the need to type long URLs into your browser bar or to use another server software to render the PHP files, all of which save time!

14 Most Useful Web Design Cheat Sheets

A well rounded web designer’s day is spent immersed in multiple graphic design programs and writing front end code. All of this moving from one environment to another can make it hard to memorize such things as hot keys and shortcuts for each. This is where cheat sheets come into play. A cheat sheet is simply a printable reference or guide to a particular software package, language, framework, etc.

Here are 14 of my favorite cheat sheets.


Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Photoshop Lasso Tool Cheatsheet

Photoshop Lasso Tool Cheatsheet

Adobe Pen Tool Cheatsheet

Adobe Pen Tool Cheatsheet


CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2)

Mac OS X CSS Cheat Sheet

Mac OS X CSS Cheat Sheet




(X)HTML Elements and Attributes

(X)HTML Elements and Attributes

HTML/XHTML in one page

HTML/XHTML in one page

JavaScript Frameworks

jQuery 1.3 Cheat Sheet

jQuery 1.3 Cheat Sheet

mootools 1.2 cheat sheet

mootools 1.2 cheat sheet

Prototype Cheat Sheet

Prototype Cheat Sheet


Adobe Flash CS4 OS X Keyboard Shortcuts

Adobe Flash CS4 OS X Keyboard Shortcuts

Flash CS3 Cheat Sheet

Flash CS3 Cheat Sheet

15 Useful HTML5 Tutorials and Cheat Sheets

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.


How to Make an HTML5 iPhone App

html5 tutorial

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

html5 tutorial

Design & Code a Cool iPhone App Website in HTML5

html5 tutorial

Coding A HTML 5 Layout From Scratch

html5 tutorial

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

html5 tutorial

Have a Field Day with HTML5 Forms

html5 tutorial

Designing a blog with html5

html5 tutorial

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

html5 tutorial

Structural Tags in HTML5

html5 tutorial

Coding a CSS3 & HTML5 One-Page Website Template

html5 tutorial

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

html5 tutorial

Cheat Sheets

HTML 5 Cheat Sheet

cheat sheet

HTML 5 Visual Cheat Sheet

cheat sheet

HTML5 Canvas Cheat Sheet

cheat sheet

HTML 5 Pocket Book

html5 tutorial

10 dirty little secrets you should know about working in IT

If you are preparing for a career in IT or are new to IT, many of the “dirty little secrets” listed below may surprise you because we don’t usually talk about them out loud. If you are an IT veteran, you’ve probably encountered most of these issues and have a few of your own to add – and please, by all means, take a moment to add them to the discussion. Most of these secrets are aimed at network administrators, IT managers, and desktop support professionals. This list is not aimed at developers and programmers – they have their own set of dirty little secrets – but some of these will apply to them as well.

10.) The pay in IT is good compared to many other professions, but since they pay you well, they often think they own you

Although the pay for IT professionals is not as great as it was before the dot-com flameout and the IT backlash in 2001-2002, IT workers still make very good money compared to many other professions (at least the ones that require only an associate’s or bachelor’s degree). And there is every reason to believe that IT pros will continue to be in demand in the coming decades, as technology continues to play a growing role in business and society. However, because IT professionals can be so expensive, some companies treat IT pros like they own them. If you have to answer a tech call at 9:00 PM because someone is working late, you hear, “That’s just part of the job.” If you need to work six hours on a Saturday to deploy a software update to avoid downtime during business hours, you get, “There’s no comp time for that since you’re on salary. That’s why we pay you the big bucks!”

9.) It will be your fault when users make silly errors

Some users will angrily snap at you when they are frustrated. They will yell, “What’s wrong with this thing?” or “This computer is NOT working!” or (my personal favorite), “What did you do to the computers?” In fact, the problem is that they accidentally deleted the Internet Explorer icon from the desktop, or unplugged the mouse from the back of the computer with their foot, or spilled their coffee on the keyboard.

8.) You will go from goat to hero and back again multiple times within any given day

When you miraculously fix something that had been keeping multiple employees from being able to work for the past 10 minutes — and they don’t realize how simple the fix really was — you will become the hero of the moment and everyone’s favorite employee. But they will conveniently forget about your hero anointment a few hours later when they have trouble printing because of a network slowdown — you will be enemy No. 1 at that moment. But if you show users a handy little Microsoft Outlook trick before the end of the day, you’ll soon return to hero status.

7.) Certifications won’t always help you become a better technologist, but they can help you land a better job or a pay raise

Headhunters and human resources departments love IT certifications. They make it easy to match up job candidates with job openings. They also make it easy for HR to screen candidates. You’ll hear a lot of veteran IT pros whine about techies who were hired based on certifications but who don’t have the experience to effectively do the job. They are often right. That has happened in plenty of places. But the fact is that certifications open up your career options. They show that you are organized and ambitious and have a desire to educate yourself and expand your skills. If you are an experienced IT pro and have certifications to match your experience, you will find yourself to be extremely marketable. Tech certifications are simply a way to prove your baseline knowledge and to market yourself as a professional. However, most of them are not a good indicator of how good you will be at the job.

6.) Your nontechnical co-workers will use you as personal tech support for their home PCs

Your co-workers (in addition to your friends, family, and neighbors) will view you as their personal tech support department for their home PCs and home networks. They will e-mail you, call you, and/or stop by your office to talk about how to deal with the virus that took over their home PC or the wireless router that stopped working after the last power outage and to ask you how to put their photos and videos on the Web so their grandparents in Iowa can view them. Some of them might even ask you if they can bring their home PC to the office for you to fix it. The polite ones will offer to pay you, but some of them will just hope or expect you can help them for free. Helping these folks can be very rewarding, but you have to be careful about where to draw the line and know when to decline.

5.) Vendors and consultants will take all the credit when things work well and will blame you when things go wrong

Working with IT consultants is an important part of the job and can be one of the more challenging things to manage. Consultants bring niche expertise to help you deploy specialized systems, and when everything works right, it’s a great partnership. But you have to be careful. When things go wrong, some consultants will try to push the blame off on you by arguing that their solution works great everywhere else so it must be a problem with the local IT infrastructure. Conversely, when a project is wildly successful, there are consultants who will try to take all of the credit and ignore the substantial work you did to customize and implement the solution for your company.

4.) You’ll spend far more time babysitting old technologies than implementing new ones

One of the most attractive things about working in IT is the idea that we’ll get to play with the latest cutting edge technologies. However, that’s not usually the case in most IT jobs. The truth is that IT professionals typically spend far more time maintaining, babysitting, and nursing established technologies than implementing new ones. Even IT consultants, who work with more of the latest and greatest technologies, still tend to work primarily with established, proven solutions rather than the real cutting edge stuff.

3.) Veteran IT professionals are often the biggest roadblock to implementing new technologies

A lot of companies could implement more cutting edge stuff than they do. There are plenty of times when upgrading or replacing software or infrastructure can potentially save money and/or increase productivity and profitability. However, it’s often the case that one of the largest roadblocks to migrating to new technologies is not budget constraints or management objections; it’s the veteran techies in the IT department. Once they have something up and running, they are reluctant to change it. This can be a good thing because their jobs depend on keeping the infrastructure stable, but they also use that as an excuse to not spend the time to learn new things or stretch themselves in new directions. They get lazy, complacent, and self-satisfied.

2.) Some IT professionals deploy technologies that do more to consolidate their own power than to help the business

Another subtle but blameworthy thing that some IT professionals do is select and implement technologies based on how well those technologies make the business dependent on the IT pros to run them, rather than which ones are truly best for the business itself. For example, IT pros might select a solution that requires specialized skills to maintain instead of a more turnkey solution. Or an IT manager might have more of a Linux/UNIX background and so chooses a Linux-based solution over a Windows solution, even though the Windows solution is a better business decision (or, vice versa, a Windows admin might bypass a Linux-based appliance, for example). There are often excuses and justifications given for this type of behavior, but most of them are disingenuous.

1.) IT pros frequently use jargon to confuse nontechnical business managers and hide the fact that they screwed up

All IT pros — even the very best — screw things up once in a while. This is a profession where a lot is at stake and the systems that are being managed are complex and often difficult to integrate. However, not all IT pros are good at admitting when they make a mistake. Many of them take advantage of the fact that business managers (and even some high-level technical managers) don’t have a good understanding of technology, and so the techies will use jargon to confuse them (and cover up the truth) when explaining why a problem or an outage occurred. For example, to tell a business manager why a financial application went down for three hours, the techie might say, “We had a blue screen of death on the SQL Server that runs that app. Damn Microsoft!” What the techie would fail to mention was that the BSOD was caused by a driver update he applied to the server without first testing it on a staging machine.

Important Tips To Consider Before Designing a Professional Website

Website Design is one of the most creative and competitive fields now. If you also want to be a web designer, then you must be providing your best to the clients. Your designs should not only be fresh and new, but also they must have some qualities like cross browser compatibility, standard resolution and much more. Here we are going to define some tips for you which would help you in making your skills more and more polished. Thus if you also want a lucrative carrier in this field, you won’t be missing them. Let us follow the list which has been divided into two parts….

What should be done?

Consistent Design

Try to maintain same kind of layout over all of your website’s pages. Having a different kind of website layout for every single page does not only hardens your work, but it lays negative emphasis on the visitors as they get confused about the navigation of your site and this can effect a lot in terms of traffic. So, if you don’t want this kind of loss, then better way is to take care about the consistent layout of the website.

How to achieve consistency?

Well, one of the simplest way is that make common files of some main elements of your site such as header, sidebar, footer, etc. And include them individually in each page. This can be done using ‘include’ function of php. But remember, for using this function, all your files must be saved with an extension *.php not *.html.

consistent design Important Tips To Consider Before Designing a Professional Website

Normal Resolution

A website should be having a resolution compatible with all the browsers. Normally websites are created at a 1280*768 resolution as it has now become a web standard now. But even after being created on this resolution, a website should be  checked in all other resolution for any kind of resolution errors or bugs.

How to check your website quickly in  more than one resolution?

You can simply take help from a website named, it is a fantastic online service which help you in checking your website in more than one resolutions rapidly. However if you are working on an offline server while creating a website, then you have to do this work manually.

screenresolution Important Tips To Consider Before Designing a Professional Website

Explanatory Site Map

A site map is a very useful accessory of any website. Any visitor can get a clear idea about what is contained in that particular website and a proper navigation is given to him/her about it. So, if you want to develop a high standard website, then there should be a site map in it.

How to make a good site map?

The simplest way to create a site map is make a basic structure of it first. The structure can further be employed to create simple one-level lists and also display the hierarchical structure of your web site by nesting lists if your site s more complex.

Let us look at an example:

  • Electronics
    • DVD Players
    • V.C.R.s
    • Computers
      • Desktops
      • Laptops
      • Palmtops
    • Portable MP3 players
    • T.V.s
  • Automobiles
    • Cars
    • Buses
    • Motorcycles
    • Scooters
  • Furniture
    • Beds
    • Tables
    • Chairs

Example by: Webdevelopernotes

But it is just the basic structural layout, for more attractive design, you can simply add more power to your site map by using graphics in it. Such as wonderful images made in Photoshop or some other tool etc. That completely depends on you. But the aim is to make a clear and explanatory site map.

site map Important Tips To Consider Before Designing a Professional Website

More use of safe web colors

You must be going with the safe colors and fonts (which can be viewed on any software and even with basic system) so as to cater the needs of all kind of visitors. More you will use safe colors, better would be your site visits as now every one would be able to enjoy the color combinations and all the information provided on your website very clearly. This is why we do recommend to use these kind of colors and fonts.

How to know about safe colors?

There are so many online web safe palettes which will let you know about all the safe colors you can use in your website. Use this one if you are not getting access to any other good one. And you will know, how with even basic colors, a website can be made so beautiful.

07 11 the browser safe colors Important Tips To Consider Before Designing a Professional Website

Centered on the purpose of site

The concept of website should be clear to the visitor. You should take care about this that sometimes the theme and name of website are chosen opposite to that of the concept which misguides the visitor and this should not be done at any cost. Mostly if a commercial website related to any company is to be built, it’s focus is quite clear i.e. to explore the company’s services in front of the people, but in case any blog is to be launched for the sake of income, then mostly people do the same mistake of having a non focused concept which completely destroys the visit count of that particular website or it never built up because of this.

focus on objective Important Tips To Consider Before Designing a Professional Website

Simple Layout

The layout of the website should be kept as simple as it could be. The complex layouts sometimes cause irritation to the visitor and it may happen that it would let him/her to never visit your site back even after your site is having useful content. And it is not necessary that only a complexed and highly detailed layout would make your site better, it can be made much useful by a simple layout too. A Layout as shown here in the image is one of the best layouts for creating commercial and mini websites. Or you can also follow your own creation.

How to think about a good layout?

Naah! Never think about it. Just go through the layouts of too much websites, pick some of your favorites, combine their qualities and make your own. Or simply take reference from this fabulous layout referral.

simple layout Important Tips To Consider Before Designing a Professional Website

Optimize loading time

One of the most important factor which lays much emphasis on the visit count of your website is its loading time. Not only much bandwidth would be wasted but also it would panic visitors much if your website’s theme is too heavy to load. It happens mostly with those websites which has too much of images. Not only in their articles, but also in their designs.

How to optimize the loading time?

There are certain kind of optimizations which you can do.

1.) Optimize your theme: This can be done by using less images in your theme. And remember, never use a complete image in the background. Rather than using a complete image, using repeated chunks is a better option.

2.) Optimizing the images: You can simply use some online or offline tool so as to optimize your images. Follow our wonderful list of 27 stunning image optimization tools for web designers , choose your favorite one and go with it. You can also use some codecs which will make your images to be loaded in a blurring pattern which also helps in optimizing them.

htoysfblt Important Tips To Consider Before Designing a Professional Website

What should not be done?

No hit counters

I wonder why some website and blog owners put these counters in their websites and blogs? I mean, your visitors are simply not interested in how many your website has been taken or how much visitors are online now! This not only lay a bad emphasis on the website’s standard but also sometimes degrades it quality.

What if I want to use them?

OK, if you really want to use them, then do it. But only for yourself. Not for others. Use counters from some standard website like which provides a complete stats of the website. Pick their gadget (counter or somewhat else) and Place it in some corner of your website like bottom right or bottom left. It shouldn’t be a part of website, but just a tool used for analysis.

graphical counters Important Tips To Consider Before Designing a Professional Website

No flash texts

Some people think that using flashing texts would make their website much attractive. But it rather makes it dump and low standard. Using flash for making banners is not a good practice as far not necessarily needed. Moreover, it sometimes irritate visitors and they could redirect to somewhere else from your website which you never be wanting so.

How to use flash texts in website?

If you still want to use flash texts in your website, then use them at the place of buttons. Some lite and good effect texts used on / or at the place of buttons would make it beautiful. However doing this is not easy, you should be having a sound knowledge of embedding flash withing HTML (with functionality) to do so. Thus better is to avoid them.

adobe flash1 Important Tips To Consider Before Designing a Professional Website

No background sounds

Imagine you have opened a website and suddenly a sound structs your ears and all your work concentration gets destructed. Anyone will feel irritated in this kind of situation. Background music not only slows the speed of website loading but also irritate visitors. Thus it shouldn’t be there.

Where I can use background music?

You can make use of background music if you are having a music based website because it is obvious that if a person is going to open a music website then he/she is in mood of listening to the music. But remember, music embedded should be calm and relaxing, not of that rock type.

music notes1 Important Tips To Consider Before Designing a Professional Website

No Unnecessary Pop Ups

Unnecessary pop ups are not a source of fascinating your visitors, rather it irritates them a lot. Thus it is much better to avoid unnecessary pop ups as they are nothing else but a reason for irritating and frustrating visitors. I would never like to visit any website for going whom’s page, I have to pass through two or three pop ups first. Thus, pop ups should be avoided as far as possible.

Where should pop ups be placed?

If pop ups are to be used in your website then use it in Login form, register form, or some introductory form such as where you don’t like to create a whole page just for the sake of an isolated but introductory paragraph, then just add it inside a pop up and give an eye catching link of that on home page, etc. Where ever you use it, use it smartly.

pop up Important Tips To Consider Before Designing a Professional Website

No unnecessary ads

Although ads are the source of income for most of the website owners and especially for those who have launched websites just for the revenue purpose but more ads on a single page would weaken the idea of website and this way you would be having a great loss only in desire to earn a little more.

Who still needs a web designer?

The title is strong and provocative, but in this article we’ll talk about  how one of the web professions mostly misunderstood is  evolving. A premise is required: I love WordPress and Drupal ( I prefer WordPress). The maturity of these CMS opensources is – with the abolition of  IE6 and the  arrival of Iphone – one of the most interesting things in these last years, even if it presents problems at different levels in some of  the professional profiles that I consider “ adjacent” like the web designer and the programmer.

A brief  view of how the web designer is used or the skills required will help us understand how much confusion there is around this figure and how from the time of web 2.0 and of the social media, this profession has changed many of its peculiarities.

The web designer in the work area: Big realities

In big companies, important communication companies and big web agencies, the web designer is used for his primary purpose: to be the link between the creative and the programmer. In effect the web designer isn’t a creative but a technician, a professional capable to create markups usable by  programmers starting from a graphic source.

His “parallel” competences are graphic but they’re also programming: in fact where the flow of work is consolidated he has to optimize the markup considering the dynamic areas managed by CMS on duty to avoid  the programmers’ re-work and check that the original templates respect the creativity approved by the client. He also has to talk with the creative to simplify the graphic in situations in which it is not possible to repeat the wanted effects (remember IE6?).

It seems clear from this approach that the web designer doesn’t deal with the real creativity, but it’s the graphic designer that handles this part of job. The risk of this method is that, if the creative doesn’t have a wide knowledge of internet, he could present designs difficult  to handle with the CSS. Honestly these problems seem to fade away with the progress of browsers and the always more powerful CSS.

The web designer in the work area: Small realities

In small realities and in the freelance area the situation is really different. In the first case the web designer is seen as a creative, therefore as a professional that starts from the brief  and creates the graphic sources. Obviously to this they also ask him  the competence of graphic flash and (often) the action script programming (in the real world these two skills belong to other two professions).

Honestly I think that after all this request may be right, moreover in overseas countries the web designer creates the graphic in almost all the cases. The risk of this approach  (I know it well because it’s also my problem) is to be tempted to “simplify” the creative proposals presented to the client. A web designer well  knows the difficulties behind certain graphic choices and sometimes (even unintentionally) decides not to propose them. That’s why in most cases the really innovative solutions are created with team work.

The web designer in the work area: Freelance

In the freelance area things get more complicated, first of all because in this case the web designer has to deal directly with the client, proposing himself as project manager. Then to be more competitive, under terms of  budget and timeframes, he has to capable of developing independently flash solutions, handle javascript libraries (that often substitute the work that was once done in flash), know how to optimize the pages for search engines . Once the work is done he uses the programmers for the server side part.

Still now looking at the job ads it’s really impressive to see how small realties insert the request of web designer associating to him skills that are really far from his main profile: competence of languages server-side (php, net, java, c++), competence of server configuration or experience of 3D, are only a few of the many cases that I’ve  found myself reading.

The diffusion of  WordPress and Drupal

But now let’s go to the heart of the matter, that is the arrival and the worldwide success  of the  CMS opensource, WordPress and Drupal above all. With examples like the site of the White House these solutions are definitively clear to the large public of developers, sceptical ones included. For the professional web designer this new reality represents an opportunity, but mainly risks.

The opportunities

The first opportunity consists in the ability to create and personalize graphically the themes. Nothing wrong apart the fact that you need to have programming basis and understand very well the anatomy of  itself.            The other opportunity much more attractive – and  risky – is the fact to be able to create in little time dynamic sites and portals without the help of  a programmer. Obviously this is a blessing for a freelancer because he can earn more without the support of third parties, but also because he can control the excellence of his graphic work following personally the delivery of the work.

The risks

So where is the risk in this approach?  Personally I think that every profession must be specific of the field embarked and this is true for every job.
In the web designer’s case the natural professional evolution leads him to acquire seniority and then become team leader or art director. In order to evolve the web designer has to look around and well understand which solutions he can offer to his clients not only under the graphic aspect  but also the infrastructural aspect.

It’s right to understand how the vary CMS solutions work, the potentialities and differences because only in this way a good team leader can advice the client and manage in the best way his  team. What I think is completely wrong is the change of course that brings the web designer to handle not only the creative part (up to here it’s right), but also the programming and the development part.

A freelancer must look ahead and not hold for himself all the budget of a project; he has to find new creative solutions and solutions for the interface according to what concerns his profile. Only in this way he can be competitive with respect to the big web agencies  or be called by them to develop projects for big clients. The facility of implementation of WordPress is undeniable, although the web designer should limit himself only to the development of the themes of this platform, leaving the programming to who has this competence .

Who loses more?

The major risk of the whole matter isn’t for the programmers that see their job orders get reduced but most all for the web designer. In comparison with the time when the expired templates were bought at “Template Monster”, with the coming of WordPress the availability of high impact themes, very painstaking and modern is really wide now.

In this game the programmer is favoured because he can easily “bypass” the figure of the web designer, buying one of these many themes customizing it with his competence of coder.  Therefore to flatten  and converge the competences of these two figures so different is a risk for both, but  (considering the subject of the article) the major risk is for the web designer.

In fact, as said,  it’s easier for a programmer to download a template and create a complicated site than for a web designer that creates a personalized graphic but after finds himself to implement an e-commerce on Drupal.

Moreover there is a new opportunity, yet more risky,  for low budget clients: Facebook. A “fan page” on this social network is starting to be the first choice for many clients, in comparison with the development of a real web site.

What to do?

So the question is: if we converge our competences distorting our profile, if we limit ourselves to work on the FanPages of Facebook, if  we work with systems like SquareSpace or download a WordPress theme, what remains of our background?  Where will this kind of choice lead us to? Will we still be competitive on the market if we aren’t really  innovative in comparison with the mass? My fear is if we continue on this road the “old”  professional figures will disappear and will be replaced by “customizers“, with low budget and creativity.

Finding Your Passion in Web Design

The youth is powering our digital age and they will control the future of our web. The position of freelance website designer seems lucrative and very enticing from the get-go. Set your own hours, work on whatever you want, get paid to work from home and learn as you go. What could be better?

Problems begin to arise when freelancers situate themselves in all markets and spread their techniques too thin. There is a subset of jobs in digital design and development which freelancers should focus into. It can provide huge benefits to master single areas in a market so expansive as the web.


Check out a few of the examples below and analyze your own skills. Try listing your objectives out to see what you think you’d be best at and where you’d need improvement. The drive from within to better yourself comes with the affection of a manageable task. In this case we’re considering the entire Web Design market.

Finding your Passion

Before considering what area of web design to pursue it’s important to spend some time thinking about this choice. Critically evaluate your current conditions and skill set. What task(s) do you enjoy the most in the creative process?

Ultimately there is a split seen generally between digital design and programming. The answer for which side you lean towards is already within you. Consider which activities you would rather be doing and try spending a few hours doing research.

Would you enjoy messing around in Adobe Photoshop or Illustrator creating and editing graphics? Or maybe the task of creating an automated application library sounds more enticing. Look into the backend of both and try to feel that inner passion waiting to come out.

Web & Graphics Design

The market is larger than most of us conceive it to be. As a web designer you are required to complete a litany of additional work other than just “website design”. This includes logo and branding design, icons and graphics, wireframing and possibly Photoshop re-touches.

The path of a digital artist requires a large amount of concentration. It is recommended to attack one piece of software at a time and practice with 2-3 new tutorials every day. Recommended choices include:

  • Adobe Photoshop (standard web design, graphics, photo manipulation)
  • Adobe Illustrator (vector artwork, polishing logos/typography)
  • Adobe Flash (creative animations, slideshows, video and audio players)
  • Adobe Fireworks (icons, smaller graphics, wireframe templates)

This list was compiled under Adobe software, although there are other free alternatives. Adobe commands the digital software market and leads with a huge team of developers and innovators.

If you’d enjoy learning any of these programs but don’t have money for purchasing them you can download free 30-day demos. There are also classes taught among colleges and some private schools which have teachers show you the basics to working with these tools. Video tutorials are another option if they’re easier.

The quickest way to understand where your passion truly lies is to mess around in each one. There are countless tutorials online and most will offer project files as a free download. Pixel2life is a community of digital professionals who catalog and share unique tutorials on all of the software mentioned above, in addition to many other languages.

Paths as a Developer

Learning how to develop web applications tends to strike those interested in sciences and maths. Web development is nothing but converting ideas in plain language into a logical structure. This can be done in any programming language – PHP, Python, Ruby, C++ – and all ideas will scale beautifully among every language.

It will take some practice and requires a bit of headway to get started, but can be very rewarding. As a tip for getting started try writing out a list of flowing actions and steps for how your program will work. Write this so it’s easy to understand and very clear about what you’re trying to build.

From here you can start your favorite IDE and get coding. Breaking down tasks into smaller pieces makes programming simpler. Everything in life can be broken down into smaller steps and this holds especially true for logics-based programming. If this is a difficult task for you to understand or sounds boring, perhaps your path is better left towards design.

Backend v Frontend Coding

The appeal to programmers is how elegant the whole application creation process can be. There are only a limited number of ways to complete a task. Along with this there are an even smaller number of “correct” ways to implement a structure into a system set forth by documented best practices.

Those who enjoy finding the correct answer to problems will love the feeling of solving bug fixes and creating new backend libraries. These languages are used to house the code which runs in the background to display functionality to users.

Though to some backend code will look very convoluted and overly complex. Frontend development focuses on parsing languages. These include HTML, CSS, and JavaScript, along with any other environments which are parsed in the visitors web browser. The learning curve for building HTML/CSS layouts is extremely small. Most can pick up a book or follow a short tutorial series online and be creating websites within 5-7 days.

JavaScript development has also taken off and seen huge success through open source libraries such as jQuery and MooTools. Frontend developers used to cringe at creating large JS functions. The language is bloated and confusing to begin with, along with the choppy implementation of differing browsers.

Things have recently changed and I find JavaScript development to be some of the most exciting code I’ve written. Access to open frameworks allows for complicated Ajax effects to shorten into just a few function blocks. If you’re interested in user interface design and creating animations/page effects spend some time researching jQuery and JavaScript development.

We’ve examined both areas of web design and development, broken down individual tasks and even taken a small step towards defining individual job roles. Times are changing and these languages and software could be useless 5 years down the road. Keep up with changing times, there’s always more to learn.

The important thing to remember is every decision is just part of the process. Nobody became a professional web designer overnight. And nobody I know has managed to study and retain any programming language’s full discography in a night, either. Spend some time each day with projects that catch your interest and you’ll find that spark of inner passion much sooner than later.

List of Cross-Browser CSS Properties

After I created a couple of handy charts that give details on CSS3 property and selector support in the upcoming IE9, I thought to myself: “This is interesting to read, but isn’t very practical.”

I also know that many visits to my site occur via Google searches for stuff like “cross-browser CSS” and similar phrases. So I decided to put together a comprehensive list of CSS properties that are supported in all browsers.

The list is divided into two sections: (1) Properties that are supported by all in-use browsers, with no bugs; and (2) properties that are supported by all in-use browsers, with some bugs in certain browsers.

For the purposes of this article (and every other article I’ve written), when I refer to “all browsers”, I’m talking about IE6+, Firefox 3.0+, Chrome 2+, Safari 3.1+, and Opera 9.2+. Also, this list does not take into consideration CSS selectors, at-rules, and anything else that would fall outside the realm of “CSS properties”.

Cross-Browser CSS Properties (No Bugs!)

This short list of 12 10 CSS properties displays the only CSS properties that you can use in any situation, in any context, using any value*, with no problems in any browser.

  1. color
  2. direction
  3. font-family
  4. font-size
  5. font-style
  6. font-weight
  7. list-style-position
  8. table-layout
  9. text-indent
  10. word-wrap

* Unfortunately, IE6 and IE7 don’t support the value “inherit” for any of these properties except direction, so if you want to be really technical about this, the only fully cross-browser CSS property would be the direction property.

* As pointed out by Ricardo in the comments, the color property can now accept RGBA and HSLA values, which are not supported by all browsers. So if you take that as non-compliance, then that would also disqualify color from this first list.

Cross-Browser CSS Properties (With Bugs)

Below you’ll find a much longer list of CSS properties that are supported by all browsers. In most cases, these properties are pretty safe to use, with a few obscure bugs. In other cases, there are major bugs and omissions of value support (guess which browsers are the biggest culprits?). So although these properties are available for use in every browser, you might not get the same results in all circumstances.

  1. background
  2. background-attachment
  3. background-color
  4. background-image
  5. background-repeat
  6. background-position
  7. border
  8. border-collapse
  9. border-color
  10. border-style
  11. border-width
  12. clear
  13. cursor
  14. display
  15. float
  16. font
  17. font-variant
  18. height
  19. left
  20. right
  21. bottom
  22. top
  23. letter-spacing
  24. line-height
  25. list-style
  26. list-style-image
  27. list-style-type
  28. margin
  29. overflow
  30. padding
  31. page-break-after
  32. page-break-before
  33. position
  34. text-align
  35. text-decoration
  36. text-transform
  37. vertical-align
  38. visibility
  39. white-space
  40. width
  41. word-spacing
  42. z-index


All the info to compile these lists was take from SitePoint’s CSS Reference, so if you have a problem with anything I’ve listed here as “cross-browser” then take it up with them! 🙂

I think I echo the thoughts of all CSS developers when I say: After all these years, why isn’t that first list longer than 12 10 measly properties?

As usual, let me know if anything’s missing.

UPDATE: I inadvertently had background-color in both lists, and had font-variant in the fully cross-browser list. Now it’s only ten fully cross-browser properties. Also, I should really include list-style-position because it is bug-free in all browsers, but I think that’s kind of silly since the other list-oriented properties are buggy, and you would never use it apart from them.

ANOTHER UPDATE: I was wrong, list-style-position can be used on its own to determine the position of the list marker. I had assumed it could only be used if you specify your own image for the list marker. I further realized that font shouldn’t be in the bug-free list since font-variant is in the “buggy” list. So the list is still 10 properties, but somewhat different from the original list.

How To Write SEO Articles Effectively

SEO stands for Search Engine Optimization, which in essence refers to the techniques used to maximize the probability that a website will be found online. An essential element of SEO is article writing. Original, effective and useful content is the lifeline of any website, since this is how they get found online. It is therefore essential to the success of a website that quality content is posted on it. Moreover, it is essential that certain techniques are implemented in order to accelerate the ‘traffic pull’ ability of these articles. This article will provide a walk-through of the fundamental method of writing appropriate and effective SEO articles.


The fundamental element of SEO article writing is keywords. Internet surfers type these words or phrases into search engines and are redirected to corresponding articles containing those relevant words or phrases. This article, for instance is chiefly concerned with SEO writing. It contains keywords and phrases such as “SEO Articles” and “SEO Content”. These are examples of the phrases surfers may type into a search engine to find this article and thus the corresponding website of its location.

To ably take advantage of keywords however, it must be understood that each web surfer searches differently. To find the content in this article for example, a surfer may type keywords which are entirely different from those which are anticipated. This problem is capably solved by the use of keyword tools. There are many such tools available such as the Google Adwords Keyword Tool or Overture. These tools generate alternate words/phrases and rank them by popularity, competition, etc. The Google Adwords Keyword Tool, for example, generates alternatives such as “SEO Keywords”, “Web Content” and “Website Content”. To maximize on this, the article must be kept succinct and centered on relevant alternatives. It should be noted however, that each of these tools uses its own unique terms. As a general rule however, keywords that are popular and attract low competition are the best choices.


Keyword density refers to the number of times a keyword is used in an article compared to the total number of words in the article. It is true that it is important that keywords are adequately repeated. On the other hand however, they should not ‘saturate’ the article. Articles laden purely with keywords and not quality content are written solely for the purpose of driving traffic to a website. This does not represent true SEO writing and should be avoided at all costs. This means that the keyword density should be somewhere around 4%.


It is extremely important that SEO articles are kept simple and follow a particular format that is coherent and easily understood. The normal and recommended format is: Introduction (one paragraph) Body (two to four paragraphs) Conclusion (one paragraph)

These elements should be easily identifiable and coherent. Furthermore, the normal word count for SEO artless is 300-600 words. If the article is shorter, the point may not be effectively conveyed. If it is longer also, there is the risk of boring the reader. If the aforementioned techniques are implemented when writing articles for the web, it is easily assured that the ‘traffic-pull’ ability of any article will drastically increase. As such, the corresponding website will have a much greater chance of being found on the web.