wooden cubes with words from the computer, software, internet categorie . This image belongs to the series cube with computer, software, internet words. The series consists of frequently used words in the categorie computer, software, internet

10 JavaScript Effects to Boost Your Website’s Fanciness Factor

There comes a point in time where we want to improve our website’s interface or provide a captivating experience that our users will remember.

We have three main options (from hardest to easiest): write the scripts ourselves, use a JavaScript framework such as jQuery or mootools (which will make coding easier), use a pre-made script that works with existing JavaScript frameworks or that the author has developed from scratch. This article’s for the individuals who chooses to make things a bit easier and those who don’t want to re-invent the wheel.

Here’s a collection of 10 powerful –yet easy-to-implementJavaScript effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Author’s note: Title of this article, by request, was changed to reflect the content featured in this list. I apologize for the confusion this may have caused, and better quality control will be implemented in subsequent articles.

1) GreyBox

GreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

2) instant.js

instant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.

This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

3) mooTable

mooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze.

This library needs the mootools framework, which you can download here. You can also find a forum post on the mootools boards by the author of mooTable, with feedback from other mootools developers.

4) FancyForm

FancyFormreplaces boring form controls such as radio buttons and check boxes, with fancier ones. The basic implementation is a two-step process: (1) include JavaScript files on the web page, and (2) assign your form controls the class="checked" or class="unchecked" for checkboxes and class="selected" and class="unselected" for radio buttons. Very unobtrusive JavaScript.

This script needs mootools as well (and was developed for version 1.1).

5) image menu

image menu, developed by phatfusion, is a spiffy horizontal menu that expands when you hover over menu items (such as images).

You can use this for displaying a montage of images that are each partly hidden, but that the user can reveal fully by hovering over it.

This script needs mootools as well (and was developed for version 1.1)

6) AmberJack: Site Tour Creator

Here’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.

This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the skins gallery so you may see if they have a theme that doesn’t clash with your website.

7) ImageFlow

Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.

When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Update: Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out here (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!

8) ShadowBox.js Media viewer

ShadowBox is “a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript” (wow that’s a mouthful, isn’t it?).

What distinguishes shadowbox from the plethora of other modal boxes out there like Lightbox 2, is that it supports other file types besides images, such as a flash videos, embedded youtube videos, Apple.com Trailers, and web pages (a log-in page for example, that saves the user a trip to another page just to log on). Worthwhile script to test and play around with.

9) TJPzoom 3 – image magnifier

TJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool.

One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.

10) mootools Tips

mootools Tips is part of the mootools framework that allows you to provide a highly configurable way of showing tool tips to the user; when the user hovers over a link or image, additional information about the element appears on the screen.

Some options that you can tweak are the: CSS styles (to make it look different from the default black background and white text), transition speed, style of how the tool tip appears on-screen, and how long you want the tool tip be displayed. This requires the mootools framework.

mistakes feature

Web Site Mistakes: Top Website Mistakes and How To Avoid Them

Top Web Site Mistakes

The Internet has billions of Web pages, and to compete in this market, you must be able to avoid common Web site mistakes. While creating your Web site, there are several things to keep in mind. Above all else, it is important to have a site that caters to your clientele, is easy to operate, and is aesthetically pleasing. Also, you must make sure that your Web site is free of errors, does not require a high degree of user interaction, and does not annoy your visitors. A word of warning: If you make these mistakes, your Web site will not stand up to the competition and may even hurt your company or business.

Cater To Clientele

When you have a Website, it is important to focus on your clients. One of the biggest Website mistakes is organizing your site in such a way that it benefits the company but confuses the client. Do not focus on what your company or employees need from your Website. Instead, pay attention to what your clients want, and attempt to make a Website that caters to your them. Catering to your own employees, yourself, or any party other than your clients is a big mistake.

Easy To Operate

Many times, people who are creating Web sites sacrifice ease-of-use for new technologies. This can lead to a confusing Web site that might look impressive but is difficult to operate. If you have a complicated design or poor navigation, this is a big mistake. It is especially important that your site does not require instructions or tips on how to use it. Any person who visits your Web site should be able to use it intuitively.

Aesthetically Pleasing

Without a doubt, the look of your Website is important. Have a color scheme on your Web site, using quality fonts, graphics, and design elements. Use colors which integrate, rather than harshly contrast. Be sure that your fonts are readable against your background as well as your graphics, fonts, and other information. Keep in mind that you should be testing your fonts and display elements to ensure compatibility. Collectively these elements work to improve your conversion rate, equating to more revenue from online channels.

Also, think about the Web browser that your visitors will be using to view your Web site in, along with the screen resolution. Make sure that your Web site shows up properly and is easy to read. Having a site that is difficult to explore is one of the biggest Website mistakes that you might be making.

10 More Worthwhile Web Developer Websites to Check Out

A recent article of mine entitled “20 Websites That Made Me A Better Web Developer” attained a large amount of popularity and I was pleased to find out that many people found a link or two that they’ve bookmarked.

The list started out as a massive collection of 100 websites (after going through my massive-huge bookmark collection) , but I then decided that, instead of overwhelming readers with 100 links that will be skimmed and forgotten the next day, that I would filter it down to only 20 quality websites that have been truly helpful and rich with information. A few things on the list were there for sentimental reasons, such as Web Monkey and SitePoint, which did help at the beginning, but now I’ve outgrown.

I received plenty of feedback regarding sites that should have been on the list. Here, I’d like to make amends and list down websites that have helped you (and me) further our understanding of web development and design.

1) Smashing Magazine

I started out as a freelancing graphics designer. During my college days, I depended on print (branding, brochures, post cards, posters, etc.) and web design projects to help me attain the necessary things that all college students needed (beer and Xbox 360 games). But as time passed, I realized that my passion and skill set were better suited working in web programming (.NET, Perl, ActionScript, PHP) and CSS/HTML mark-up.

But nowadays, in order to be successful in the field of web-building, you’ve often got to double as a fairly-proficient designer as well. Knowing what designs work and what doesn’t is essential if you’re able to become a valuable asset to your employers or clients.

Several readers mentioned Smashing Magazine, a popular weblog run by Vitaly Friedman and Sven Lennartz.

It’s a website I frequent to stay up to date with the graphics design side of things, as well as to inspire me during the Monday morning slumps. Smashing Magazine is a quick way of obtaining information as they have a way of filtering out the fluff so that you can get to the good stuff faster.

2) Firefox (and some extensions)

Firefox is a key tool for web developers — it’s not really a website — but nonetheless deserves attribution for enabling us to be more effective developers (as described in my earlier work on “9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension“).

Here’s a screenshot of how my home office Firefox set-up looks like (you can click to enlarge the image):

As you can see, my set-up’s fairly minimal. The only development extensions I use (and which you should definitely check out) are:

  • Web Developer extension
  • Colorzilla (check this out if you’re still Print Screen‘ing a web page, pasting it onto Photoshop, and then using the Eyedropper tool to figure out the hexadecimal color values)
  • Firebug, which can’t be seen in the screenshot, but is an excellent tool box that allows the developer capabilities such as easily debugging JavaScript (i.e. no morealert(whatsInThisObject)), finding page errors, and a tree-navigation visual tool for checking out the DOM. Hint: Disable Firebug on AJAX-heavy sites (like Gmail) unless you’re developing it, it slows them down (it seems).

3) Flashkit

Flashkit is the online “convenience store” for beginning to expert Flash Developers. They have 600,000+ members, a true testament towards their ability to provide solutions to those seeking to improve and learn more about developing Flash applications. Don’t be fooled by the “I didn’t get the web 2.0 memo” user interface, it’s the content and the community that matters the most.

The website features a categorized tutorials section (topics range from “Getting Started” to “Math-Physics” and “3D“), and a collection of free sound loops and pre-built flash movies.

Perhaps the most helpful feature of the website though, is their very large community forums (1 of the 40 forum topics entitled “Flash ActionScript” has 144,000+ threads!). Whether you’re just starting out or you’re already a professional-grade Flasher (a playful term I use for flash developers), Flashkit, if you haven’t heard of it, is the spot to check out.

4) kirupa.com

kirupa.com is another favorite resource of mine when it comes to Flash. The site has very well-written tutorials and articles for the beginner to advanced Flash developer (though he writes about other web-building topics such as PHP and ASP.Net).

The site’s run by Kirupa Chinnathambi, a young and accomplished (he was offered a book deal by McGraw-Hill in his teens) author and software developer. His writing is light and easy to read, and he often provides several versions of a particular solution that caters to the reader’s skill level.

5) PHP.net

Recently having to work with XML data on a remote site within a webhost that’s disabled fopen() and runs on PHP4 (and thus doesn’t have SimpleXML), I had to find an alternative way of doing this task. I found my solution in one spot, (cURL and xml_parser) — at PHP.net‘s documentation section.

The example above is just one of the problems I encounter on a daily basis, and PHP.net is the first place I look at when troubleshooting problems or if I want to discover better/easier ways of doing certain things.

This deserves a bookmark for the times when you need a quick reminder of core functions that you’ve forgotten about, or to discover some that you never knew existed. The pages allow developers to comment and provide scripts so that you can further your understanding of the concepts involved.

6) Popular JavaScript frameworks

This is a combined listing. In my previous post, I mentioned mootools as my choice when it comes to JavaScript frameworks, “but that you can’t go wrong with the popular ones”. I failed to mention what the other “popular ones” were. These frameworks/libraries deserve mentions and deserve serious consideration when first deciding which solution is best for you.

  • jQuery – this framework, in my opinion, is the easiest to learn and the most elegant of the bunch. Here’s the documentation page to get you started.
  • script.aculo.us – This is more of an effects library than a fully-featured JavaScript framework, but it’s got some serious stuff going on.
  • YUI – The Yahoo! User Interface Library, if you’re the type of developer that has to have it all (and is willing to pay the price in page load times) — this is probably the one for you. Yahoo’s in-house developers, in my opinion, tend to come up with very bulky solutions even though they have some of the best front-end engineers such as Steve Saunders (who’s article on “Best Practices for Speeding Up Your Web Site” is a very worthwhile and enlightening read).
  • Prototype JS – the big dog, mootools used to require Prototype and script.aculo.us still requires it.

There are others such as dojo and Rico, but those listed above are what I consider to be the most popular and effective.

7) mezzoblue

mezzoblue is a weblog by a highly-talented designer, Dave Shea, who’s also known for his article on A List Apart, regarding the CSS Sprites technique, css Zen Garden, and his book “The Zen of CSS Design: Visual Enlightment for the Web“.

A notable article that deserves a look-see is mezzoblue’s Testing Grounds Revised Image Replacement which showcases and analyzes the most popular CSS Image Replacement techniques.

mezzoblue seems to put an emphasis on quality over quantity, so articles may sometimes be few and far in between, but they’re worth the read when they come out.

8) Dynamic Drive

Dynamic Drive is a source for CSS and JavaScript solutions. They’ve been around for approximately 10 years and have amassed a wonderful collection of scripts that you can apply onto your web projects.

They also have online tools such as a FavIcon generator (though personally I use Photoshop or favicon.ico Generator) and Button Maker.

9) StumbleUpon

As BBC news describes it (and quoted on the front page of StumbleUpon): “StumbleUpon is a brilliant downloadable toolbar that beds into your browser and gives you the chance to surf through thousands of excellent pages that have been stumbled upon by other web-users”.

When configured the right way, Stumble’ing allows you a unique way of getting new and interesting websites about web technology that many of the 4+ million subscribers have submitted, reviewed, and liked. It’s where I encountered Magento, an open source e-commerce suite that will soon be a popular contender in the e-commerce application realm, and interesting web applications such as htm2pdf which you can use to convert html mock-ups to PDF so that you may email your designs in one document.

10) Google code

Not only has Google solved much of my development road-blocks with their search engine (.NET and PHP errors, rendering bugs of particular browsers, existing solutions to a particular feature request, etc.) but it provides you with high-quality resources and API’s saving you the time and effort to develop them yourselves. Google code is a section at Google, geared towards developers and programmers.

Additionally, If you haven’t already, also check out these services and references:

  • Google Charts API – build charts dynamically onto your web page using easy-to-use URL-based requests.
  • Google Maps API – create custom maps.
  • Google Code Search – search public source code.
  • Google Help: Cheatsheat – Improve your search engine savvyness using these search engine commands. Must know stuff for effective troubleshooting of issues.

If you liked this article, be sure to also check these out:

Thank you!

… for your wonderful feedback on my first list.

Many of the entries on this list were inspired by the following people’s comments (thanks for the reminder):

  • Aron Filbert (from Digg) for the Firefox entry and the JavaScript frameworks entry
  • hiro protagonist for Dynamic Drive and PHP.net
  • Lee and DieselDaddy for reminding me about Smashing Magazine
  • Jive for reminding me that I forgot to mention Dave Shea on my A List Apart entry in my previous article, which inspired the mezzoblue entry (although css Zen Garden was mentioned, I just didn’t attribute it to the creator).
  • Fragle1980 for the Flashkit comment.
  • Johnathan and Hal for the Google Code entry

What do you think of these websites? Have you used them or have you got an interesting experience with any of the websites above? Let us know in the comments section!

20 Websites That Made Me A Better Web Developer

As a web developer, if you’re to be successful, you have to have a constant yearning for learning new things. In an industry that evolves rapidly, you’ve got to keep up or you risk being obsolete and outdated. Keeping up with trends, weeding out the fads, and adopting new techniques to your web-building arsenal is an essential part of being a web developer.

I spend (literally) most of the day in front of the computer and even in my spare time, I choose to read, learn, and keep up with web technology news. This leads to a massive collection of bookmarked links, but through the years, there are only a handful of websites that I frequent.

I’d like to share 20 websites that have broadened my knowledge, expanded my skill set, and improved the quality and efficiency of my web development projects. Most of these (hopefully) you’ve already encountered, but if you come out with just one or two links you’ve never heard of or you end up bookmarking a link or two, I would’ve accomplished my goal.

1) Alertbox: Current Issues in Web Usability

Alertbox is Jakob Nielsen’s bi-weekly column that discusses web usability. I’ve been a fan of his for almost as long as I’ve been professionally developing websites. Most of his recommendations makes sense and is backed by real-world studies and carefully-constructed surveys.

His columns cover topics such as the merits of breadcrumb navigation to Top-10 Application-Design Mistakes. A great link to provide people when you’re asked about optimal web page design is the column on Screen Resolution and Page Layout.

2) TheBestDesigns.com

On days when your creative juices don’t seem to be flowing as it should, it often helps to look at other people’s work to help inspire you. TheBestDesigns.com is a gallery site to visit on such days. TBD has a few things that distinguish them from other web design galleries — among them are: choosing quality over quantity, showcasing flash-based as well as CSS-based layouts, and tagging each design with relevant keywords so that users can conveniently find similar designs.

They showcase truly innovative and skillfully-crafted designs and they abstain from showcasing the “yet another recycled web 2.0 look” websites. It might not be updated with hundreds of websites everyday, but having a strict guideline on what gets displayed on TBD ensures that you don’t have to filter out the noise to get to the signal.

3) A List Apart

A List Apart inspired me to become a proponent of web-standards and semantic code. Starting out, most of us probably didn’t care about capitalized, unclosed html tags (… that won’t validate with a strict doctype) or understood the real value of accessibility in web pages.

One of the major influences in my views on web-standards, best practices, accessibility, and usability can be attributed to a significant part… to A List Apart. ALA articles are high-quality and they only come out with two articles a month, but they are worth the wait. Articles are written by some of the leading experts in the industry, and their staff include well-renowned pro’s such as Eric Meyer and Jeffrey Zeldman.

4) Getting Real by 37 Signals

Getting Real” is a book that’s available online, written by 37 Signals. It’s about creating web-based applications in a productive and successful way. The book covers topics ranging from philosophies that help push out quality products to views on hiring the right people to do the job.

Favorite topics covered in the book are: asking users what they don’t want and dealing with problems only when there is one.

5) Digg / Technology

Digg is a site where people submit links and vote which content is worthy to be read by its users and which articles don’t deserve the light of day. A large part of my ability to keep up with emerging technologies, techniques, and new standards is because of frequenting Digg’s Technology section. The community is picky of what is good news and bad news, so it allows you to skip the junk and get to the good stuff right away.

Other social-bookmarking sites that will help you stay sharp and current, and that should be mentioned here are: StumbleUpon , del.iciou.us, reddit, and popurls.

6) Web Design from Scratch

Web Design from Scratch is a website run by Ben Hunt, that’s about (straight from the front page) “A complete guide to designing web sites that work“. It caters primarily to web builders just starting out, but it’s always good to “go back to the basics” and get a refresher on things that you’ve taken for granted.

The section on Copy Writing taught me that web developers shouldn’t be limited to the coding part or the design part of the project; writing effective copy comes naturally with the experience we’ve had with developing websites that succeed and fail.

7) mootools

mootools is a lightweight framework that simplifies the way you write JavaScript and provides you with powerful AJAX classes, effects, and fuctions. It’s helped with the development of complex web pages in a rapid and elegant way.

There are other JavaScript frameworks similar to mootools, and you can’t go wrong with any of the popular ones, but a developer’s got to choose his or her favorite — and for me, mootools is the one I’ve come to love and use.

8) ReadWriteWeb

ReadWriteWeb is a long-standing (five years and counting) weblog about web technology news. It caters to web professionals that have a need for knowing what’s up right now. It was founded by Richard MacManus, who also co-founded the Web 2.0 Workgroup – a network of blogs that cover the Web 2.0 generation.

It’s a website that allows you to keep your knowledge up-to-date, and is a source I consistently cite when talking about current web technologies with colleagues and fellow developers.

9) Zend Developer Zone

This is a website written by some of the PHP core developers and they provide news, articles, tutorials and other stuff related to PHP. If you’re looking for a reliable source of information about PHP, there’s no other place to look than the Zend Developer Zone.

Worth taking a look at is the five-part article series about the xdebug extension (here’s the link to Part One: Introducing xdebug), which is, as author Cal Evans puts it, “a free and open source swiss army knife tool for PHP developers”.

10) css Zen Garden

css Zen Garden is an eye-opener for newer CSS developers. css Zen Garden explores the power of external style sheets by showcasing a variety of designs contributed by developers throughout the industry.

If you haven’t seen the website before, the concept is: using the same html mark-up, CSS developers submit external stylesheets and images to style the web page into beautifully-looking designs.

It’s a great place to inspire you to push your limits and knowledge regarding CSS.

11) CSSplay: Experiments with Cascading Style Sheets

Another wonderful website about CSS. It features demos of CSS-based solutions such as image galleries, drop shadows, image maps, etc.

The website is authored by a married couple, Stuart (Stu) and Fran Nicholls, who have been in the computer industry since the 1980’s. Most of the demos are (or were) cutting edge; the examples are practical and easy to follow and the website’s easy to navigate.

It’s a commendable resource to check out when you want to gather information about CSS-based solutions.

12) W3Schools Online Web Tutorials

This is an amazing center of knowledge for all things web development, covering topics such as JavaScript, HTML, PHP, SQL, and more. At the bottom of their logo, they quote, “The best things in life are free” – this is indeed true in their case.

The website is a great starting point towards learning about web development and design topics and an effective online reference for those who know about the subject but need a quick refresher.

13) Books24x7.com – ITPro Collection

The ITPro Collection at Books24x7.com features digitalized versions of the top IT books. It’s a fee-based website, but if you’re able to afford it (or can convince the boss to get you a subscription), it’s the best way to access quality literature through the convenience of your computer.

It will also allow you to select the books worthy of buying and adding to your collection.

14) Drupal

Drupal restored my faith in open-source applications. Prior to Drupal, I worked on Oscommerce, Zen Cart and Moodle. All projects had bloated PHP and CSS, poor HTML mark-up (default layouts used tables, little care for semantic mark-up, amongst a few things) and were designed with little usability/accessibility in mind.

Drupal’s code — in contrast — was clean, modular (but not excessively so), had a robust API so that you don’t have to tinker with the core files, and most importantly, the community’s willingness to help out, share information, contribute, and commitment to quality is my vision of the “Utopian” open-source community. Since then, projects like WordPress, Magento, and Joomla! re-assures us that effective quality solutions don’t come from shelling out the cash, but rather promoting and contributing as much as you can to these remarkable communities.

15) Webmonkey: The Web Developer’s Resource

Here’s a throw-back to the past! This is here as a reminder to the (slightly) older/more experienced developers that the site is still up and running. It was, during their time, a place to visit and learn about web development, covering topics such as web programming, E-business, and page design. It also has a “Quick Reference” section on the sidebar.

I remember being amazed at how their “folder navigation” on the sidebar worked — ever since then, the functionality can now be achieved quite easily using the DOM and/or a JavaScript framework like mootools.

16) Meyerweb.com: Eric’s Writing

This is a collection of Eric Meyer’s writings, an accomplished author on the topic of CSS. Not only is he a CSS expert, but also an advocate of semantic code. His work was, and is, truly revolutionary. I attribute my appreciation and understanding of “resetting CSS” to him.

Eric Meyer is one of the key influential people that I truly find to be talented and knowledgeable in the field of web building. His current and previous works are worth the time to read.

17) 456 Berea Street

456 Berea Street is the creation of Roger Johansson, a web professional from Sweden. His writing is a primary inspiration for starting up of Six Revisions. Topics include book reviews, written work about CSS and XHTML, and web development news and events.

Some pages worth bookmarking are Efficient CSS with shorthand properties (which can be used as a reference to writing “shorthand” CSS – reducing file size and page length) The CSS and XHTML Lab (which features some demonstrations as well as a list of works translated into other languages) and Accessibility myths and misconceptions (a helpful resource to link to when asked about the value of accessibility in web pages).

18) The Web Standards Project

The Web Standards Project “fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web”.

Whether it’s suggesting correct mark-up or rallying web browser developers to render styles/html a certain way, The Web Standards Project aims to help web developers reduce the amount of time committed to troubleshooting browser-display issues. The website features articles, tutorials, and the Acid3 Browser Test (visual rendering tests of your browser).

19) Fiftyfoureleven.com

A marvelous website for the modern web developer. The website “is intended to be a resource for web developers: people who design, code and program websites and applications for the web“. The website is part of the 9rules network and is written primarily by Mike Papageorge who chooses to blog about topics such as “Marketing on the Internet” and more specific subjects such as “Olympic Logos“.

Aside from the Web Development Resources sidebar, there’s also a list of the author’s most recent Web Development resources that’s worth a bookmark.

20) SitePoint

SitePoint is one of the older websites that has survived the constantly-changing tastes of web developers and designers. A co-founder of the website, Matt Mickiewicz, first had a website called Webmaster-Resources.com Community Forums launched in 1999.

SitePoint had a bit of a lull for a period of time in terms of popularity; the site’s prominence was replaced by newer, more “forward-thinking” web development sites.

The site has found its “second wind” with it’s young and modern web developer audience with an updated design/user interface, frequent updates, and a new and notable” CSS Reference” section.

So there they are, some websites that’s worth checking out and subscribing to if you’re interested in bettering your web development knowledge and skills.Do you have your own favorites? Did you find websites on this list that shouldn’t be here? Share it in the comments section!

talk-with-clients

A Simple Guide on How to Effectively Talk to Clients

Everyone needs a website made, but not everyone can talk “tech” like we can. From the farm owner in Indiana to the brain surgeon in Malaysia, we quickly see that employers can come from all walks of life. Learning how to carry on a compelling conversation about web development is a paramount skill that all web developers should possess if you want to keep the checks coming in. Maintaining your audience’s interest and gaining an accurate picture of what they truly need to get done can prove to be a challenging part of any web development project, but here’s a few tips that might help a bit.

Get an estimate of their computing/technological expertise.

So that you know how in-depth you have to explain certain concepts or ideas, you should first try to determine the individual’s computing/technology knowledge. This can be accomplished indirectly with, what I’d like to call, fishing questions (similar to “fishing for compliments“).

For example, you can ask in passing, “Hey, what operating system do you have on your home computer?” or “What’s your preferred web browser?”. What you’re really trying to learn is: (1) if they know the basic terminologies like operating systems and web browsers, (2) if they have any experience with computers and the internet, (3) their tech savvy-ness, (4) how and why they use IT. A person using Linux probably knows a thing or two about computers and Mac’s are generally appealing to artists, designers, and musicians.

Other fishing questions are:

  • What do you already know about search engine optimization?
  • Do you use Adobe Photoshop (or a similar digital-image editing software)?
  • What are some websites you frequent on your spare time?
  • Do you subscribe to any RSS feeds?

Don’t underestimate a person’s knowledge.

You know that colleague who insists on explaining to you the difference between HTML and (X)HTML when you’ve just finished a strict-doctype XHTML website? Don’t be that guy. People don’t like to be treated like they’re stupid, and not being able to understand a person’s knowledge is a sure-fire way of landing yourself on his or her bad side. If you’re unsure of their grasp on a particular subject, don’t assume they don’t know anything, ask fishing questions and judge by their reactions whether or not you’ve explained enough.

Use actual examples.

When talking about a web project, it helps to have a computer with an internet connection nearby so that you can both communicate look at stuff that’s on the internet. For instance, if you’re trying to determine what look-and-feel a client wants for their website (i.e. “web 2.0”, dark, clean, etc.) you’d get a more precise answer if you were to show examples of websites that may have a similar theme that they described.

Keep an emphasis on the bottom-line.

People may not understand what SEO is, or how it’s accomplished, or why valid mark-up matters when trying to achieve a search engine optimized site, but if you talk in terms of results, they’ll be inclined to keep listening. For example, trying to describe the importance of standards-compliant XHTML, you can say: “standards-compliant XHTML ensures that the website’s mark-up is valid and supported by most modern web browsers which in the end means less maintenance and fewer customer support due to browser-rendering issues“.

Keep it simple.

Sometimes we have a tendency to overwhelm employers with technical jargon and over-explanation because we want to show them our knowledge and expertise. There’s no need to explain how you’re going to mock-up the web design in Photoshop (layer by layer, in excruciating detail). Most probably, they don’t care and you’ll only risk complicating things and adding to the client’s anxieties about a topic they’re not well-versed in.

Encourage questions.

It’s always good to figure out any questions or needs for clarification as early as you can to avoid dissatisfaction at the end. Give off the attitude that you’re always willing to answer questions and that no question is too simple or silly. If you have the luxury to meet with a client in person, you can do this by judging their facial reactions to the things you say. If they seem confused, ask: “should I explain further?”. If you’re meeting remotely (emails or phone calls), regularly say things like: “I’d be more than happy to answer any questions you may have”.

Talk using familiar analogies.

A great way to relate information to employers is by using scenarios and situations that are pertinent with their background. Be creative, make analogies funny, and most of all, use it to relay complex concepts. To illustrate with a satirical example: if you were talking to a basketball fan, you could say “using tables instead of div’s for page layout is as bad of a decision as picking Michael Olowokandi over Michael Jordan on your fantasy basketball roster because…“.

Be yourself.

Don’t pretend like you’ve worked on hundreds of websites and that you’ve been doing this for 15+ years… if you really haven’t. If you look uncomfortable or unsure of yourself, it gives off the impression that your trying too hard to impress or appear knowledgeable in the subject. A lot of web designers and developers nowadays don’t hide the fact that they are small, young, and playful. When working in an industry that’s complex and intimidating to outsiders, it’s a welcoming relief to find people that are normal. It can prove to be a plus when you don’t obfuscate the fact that you’re just starting out in the business. It’s easier to talk to a person who’s honest, sincere, and up-front then someone who appears to be B.S.’ing you all the time.

Do you have your own tips on how to effectively communicate with your clients? Share them by leaving a comment!

CMS Showcase: 31 Remarkable Drupal Powered Websites

For those scratching their heads wondering what Drupal is, it’s an open-source (i.e. free) content management system that’s flexible and feature-packed. Over the last couple of years or so, it’s taken off as the go-to platform to run websites that require a lot of community and content management features. From personal blogs and brochure sites, to fully-featured social networking sites, portals, news sites, and e-commerce websites, Drupal has proven itself as the most robust platform currently available in the content management system market.

This article showcases 31 websites that run on Drupal.

Jones of Washington

Spread Firefox

ubuntu

CMSthemer

Group Hug

terminus1525.ca

43 Folders

V to the 10th

miami.com

Red Room

The Seed Company

List Pilot

Whole Grains Council

LA2Day

myLifetime.com

iChris.ws

FreshBrain

MyFineJob

Faith Connections

Approva

Music Integrated Clothing

Sojourn

Favorite Things

Ferguson Photography

Returning Heroes Home

End Poverty 2015

Green Party of Canada

Writing Matters

Echoing Green

Michael Buble

teamsugar

Other websites that run on Drupal

A quick plug for the awesome Drupal community

I’d like to let everyone know of Drupalcon 2008 which will be in Boston between March 3-6, 2008 at the Boston Convention & Expo Center. Vote for the best design in the Showcase Contest Entries.