Author Archive

Posted on April 2, 2009 - by Khaled

FireFox will be bigger in 2009?

According to the 1400+ persons who voted for Firefox in the poll that was held for for the last couple of months, Firefox is going to gain even more market share in 2009. Indeed 54% of the voters are confident that thanks to its current features (long with the ones being developed now) Firefox will be bigger in 2009.

MS Internet Explorer 7 and 8 are in the second place with 22% of the voters picking them up whereas google Chrome has surprisingly amassed the votes of 16% of the voters. This is surprising if we consider that Chrome is still really young and lightweight. Is this due to the announcement of the upcoming extensions (probably in may 2009?) or just because it is a Google product?

Opera only has the support of 6% of the participants. Opera is an excellent Web standards compliant browser that is quick and solid but not really popular! Stay tuned for an upcoming blog post with the top reason that will probably convince you to try Opera.
Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter!

Posted on March 2, 2009 - by Khaled

Launching TwittHero

TwittHero is a new web site that  will be publishing weekly face/offs between rock star twitterers along with news and articles about Twitter. From time to time I will try to have an interview with a rock star twitterer. The first face off will be launched in few minutes. Go ahead and visit TwittHero.

Posted on February 18, 2009 - by Khaled

TOP 10 reasons why my Web Design company grossed 5 million dollars of revenue in its first year

Success... A word that might carry many different meanings! It can range from riding a bike without falling for a young boy, to making billions of dollars and be as famous as Bill Gates. Just remember Brendon Sinclair’s quote: “Success is whatever you want it to be!”.  But here we are talking about a specific field which is the web design and the web development business. In my opinion, being successful as a web design agency is measured by the quality and the prestige of your clients that were attracted by the quality of your services (You have to provide outstanding Web development services and have excellent technical skills along with an excellent capability of selling those skills). The number of clients is important too but if you are working for ten small unknown companies you won’t be as exposed as someone working for just one big well known company. This is going to be translated, of course, into dollars language. I started being involved in Web Design since 1999. I worked as a freelancer, started few LLCs here and there that were more or less successful and earned/lost random amounts of money. The real first success was when I started a Web Agency that was based in Paris, France back in late 2005. Since then I’ve sold the company 16 months after its launch as I had to move out of France and I was offered a nice amount of money to sell it to a communication agency that merged it to be an in-house web department.

A handy guide about creating a successful Web Design Agency!

It all started in a small office with a team of 7 persons including myself, the secretary and the accountant. We offered a restricted range of services that were: Graphic Design, Web Design and Web development. We only worked on projects with: Photoshop, Illustrator, Adobe Premiere, Flash, HTML, CSS, JavaScript, PHP, XML, Python and SQL. Nothing more!
After merely one year, the company grossed more than 5 million dollars. Here are few tips that truly helped me achieve this. I am posting this for educating and informing sakes, so I won’t include any names/brands etc… Of course 5 million dollars are not a huge amount of money for many people but I think it is a really good start for a new web agency.

1.    Planning, researching, setting goals and benchmarking

First of all you must identify the reasons that might help you succeed if you start your own company. Clearly set your goals and define the meaning of success for you: When/Why will you consider that your Web Design company is successful or a failure? How are you going to grow? What staff do you need? How much should you pay them?
Plan for everything, consider wisely your investments and keep them minimal, have your own specific marketing plan, think about how are you going to create a positive aura around your company? Ask professionals and business acquaintances for good free advice and make your research to validate their recommendations. Don’t just get their thoughts for granted. You should also avoid asking close friends and family members as they will tend to be subjective, but if you have a ‘successful’ relative/friend just ask them how did they achieve that? And learn! You must be confident when you take your decisions.
Do some market research; are you choosing the right region or area for your company? Is there enough business for you? What clients can you possibly target to get started? Are there any well established competitors? If yes then you must benchmark against your competitors, get to know their clients, the number and the qualifications of their staffers, their prices, how do they market their business, which ones are the leaders? Try to find out why? etc…. Now that you know a lot about them (While they know nothing about you yet) try to establish the methodology that will help you be competitive and to enable you to surpass them. Focus on their weaknesses and try to match their strong points.
Do all the previous by yourself and take the time to do it correctly this is really important as you’re going to save money (you won’t hire someone to do this for you) and you’re going to learn a lot of useful things that will help you to start, to survive and then to fully thrive.
This first point is the basis of all the upcoming points as you will notice! If you don’t elaborate it the right way then all the next points will not help you a lot as you won’t do them correctly. This phase took me a little bit more than three months (40 hours per week) and all I needed is computer, an internet connection, a phone, a library access and a means of transportation (you don’t even have to own a car, public transportation is just fine!)

2.    Create a remarkable, recognizable brand to build your business around

Unlike what you may think, this is a something tough to achieve. It has to both translate how you perceive yourself and how people must perceive you. Both impressions should be almost identical. Otherwise your branding is not working properly! You should set your goals, decide what will you do and what kind of specialty are you going to offer to which niche and start from there.
After clearly setting your goals, knowing your targeted audience, deciding how you want to be perceived (that’s how you perceive yourself too) convert the whole thing into material. Choose your company name (keep the domain name issue in your mind: preferably .com, easy to remember, easy to spell, avoid dashes, avoid words that may be written with different spellings such as color/colour etc…) Create a logo (if you are not good with logos hire someone), a professional looking one! Take your time, long session of brainstorming and sketching on a paper are inevitable. Choose carefully the colors (Royal and Marine blues are good colors to have in a logo by the way!) A logo should be created in a vector format and remember… A logo should be able to look good on a golf ball!
Once you have a nice, recognizable, unique, remarkable, professional logo you need to create your business card (make it stand out from the crowd, don’t just have a plain white business card with some black or blue text!) and the rest of your stationery (Cover letters, letterheads, envelopes, Fax covers, brochures…) and make them also unique and clearly inspired from your logo.
The next step is your website with your online portfolio and references. Don’t stuff it with tons and tons of data! Make it nice, appealing, unique, usable, accessible, Standards compliant, simple and a tiny bit sophisticated.
You may also create an offline Portfolio presentation to show during meetings with clients and that can include more content and details. Also create a PowerPoint / Keynote template for your presentation.
Make your email account look professional and avoid using nicknames and/or lots of numbers! Such sweetieses87799(at)website.com! john(at)website.com or john.doe(at)website.com or even j(at)website.com are a lot better.
Start using social networks proficiently and create professional Facebook, LinkedIn, Twitter, Stumble Upon etc… accounts. If you are just starting use the same profile image/logo in all of them.  Also create a professional IM accounts (don’t use your own) and customize them adding your company logo and so on…. All these components constitute your personal brand! So they must be unique, professional and share the same design/feeling/spirit.
Try to create an aura around your brand! Start an educational blog, write articles, write columns for a newspaper, attend conferences and speak during them, launch training cycles, meetings, events and educate people, write books, participate in radio programs or in podcasts, Join and help people in some web related communities ( i.e. SitePoint.com)… Make yourself visible!

3.    Brand yourself as a specialist/expert in something and pick a good niche

You should present yourself and your staff as being specialists in some given fields. You are not handy or the ‘jack of all the trades’! You are THE Company that can do this specific kind of work as you are, by default, the expert team that specializes in resolving these particular issues. When I started my “former” company in late 2005, Web standards were not widely used by the Parisian Web companies. Semantics, Accessibility, Usability and full-DIV CSS designs were not popular. That was a good starting point! Let’s just brand the company to be the one that fully respects Web standards and creates semantic, usable and accessible web sites totally relying on CSS tableless designs! But wait! This plan lacks something! Why would a client be interested in such web sites? There was a real need to educate the clients so we created a buzz around web standards by preparing documents, brochures and flyers to some potential clients, we carefully chose (point #1). We targeted fairly important companies that had old, outdated and clunky web sites. We sent them the prepared documents about the benefits of Web standards and we asked if we can visit them in their offices to make a presentation/speech about web standards and to point out problems about old-fashioned sites etc… We were not selling anything we were just educating. ~70% answered our correspondence and most of them were OK to ‘hear’ us. After the presentation, they were able to see the problems with their own sites and more than 50% of them immediately hired us to redesign their sites. That was the real starting point! We also started the same process about PHP Vs ASP (not that ASP is bad, but we used PHP and we had to sell that!). Soon we were regarded as the PHP specialist company of the moment. We were passionate and committed about Web Standards and open source so we were able to convince and to educate our prospects.
Another opening for us was the choice of a specific niche of clients to target. In addition tom y web studies, I have a Biology Ph.D. (was preparing it at the time I started the company) and this helped me a lot. When we contacted (or were contacted by) Biotechnology firms, food industries, research laboratories, pharmacology industries to have a proposal about the development (or re-development) of a web site or a web application I was able to discuss their needs and propose a solution that was by far superior to our competitors as I was able to understand the slightest details about what they were doing and what kind of solution they actually needed! And that was a huge advantage! Rapidly we were recognized as specialists of the Biology/Biotechnology/pharmacology field and we were even contacted by clients from outside France and Europe. I, then, dedicated all my efforts to pitch and make presentation for companies involved with this sector. I hired another person to do the same for the other types of companies and clients. Do the same pick up a fairly big niche about something you quite know! Are a sports fan? Target clubs and teams web sites! Are you into Music? You know what you should target and so on!
If you are specializing in solving some unique issues you will have less competition, you will provide better quality of services and you will be able to charge higher rates. A good example of a unique service is Webnotes.
(more…)

Posted on February 12, 2009 - by Khaled

25 WordPress Plugins you need to have a better blog

WordPress is the leading blogging platform! And it will probably continue to be so. Among the top 100 bloggers, 32% use WP.
After almost 5 years of blogging using WordPress and after trying, testing, tweaking and running literally hundreds of plug-ins and extensions, I found some really noteworthy WP plugins, that are easy to use, to customize and to install yet they are really useful and they can improve drastically your whole blogging experience. The current trends are taken in consideration while choosing this list!

1. Akismet This one just rocks!  Almost perfect when it comes to dealing with comments spam! It checks new comments against the Akismet web service to see if they look like spam or not. You can review the spam it catches under Comments/Spam.

2. All in One SEO Pack All your Search Engine Optimization needs for your blog.

3.  Bird Feeder A tiny little plug-in that automatically Tweets your published posts to twitter.

4. cforms II For now, no forms are better than cforms! Unless you have some bucks to spend! cformsII offers unparalleled flexibility in deploying contact forms across your blog. Features include: comprehensive SPAM protection, Ajax support, Backup & Restore, Multi-Recipients, Role Manager support, Database tracking and many more.

5. FD Feedburner Plugin Easily redirect your feeds to your feedburner account feed. Just install, set and activate!

6. Flickr Photo Gallery This plugin will retrieve your Flickr photos and allow you to easily add your photos to your posts.

7. Google XML Sitemaps Google sitemaps are, as you know for sure, a must have for blogs and web sites in general. This plugin will generate a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO!….

8. Gravatar Gravatar  allows you to add a face to your comments! Make yourself recognizable all around the blogosphere. Add the Gravatar plug-in to your blog to generate a gravatar URL complete with rating, size, default, and border options.

9. IntenseDebate Comments A revolution in the comments world! IntenseDebate Comments enhance and encourage conversation on your blog or website. Full comment and account data sync between IntenseDebate and WordPress ensures that you will always have your comments. Custom integration with your WordPress admin panel makes moderation a piece of cake. Comment threading, reply-by-email, user accounts and reputations, comment voting, along with Twitter and friendfeed integrations enrich your readers’ experience and make more of the internet aware of your blog and comments which drives traffic to you!

10. Lightbox 2 The famous well known and really useful JS effect used to overlay images on the current page.

11. Limit Posts Limits the displayed text length on the index page entries and generates a link to a page to read the full content if its bigger than the selected maximum length.

12. moodlight Moodlight allows your visitors to add their mood on posts via comments.

13. Related Posts Returns a list of the related entries based on keyword matches. If this is your first time using this plugin you will need to run the setup script first in order to create the required full text database index.

14. RSS Footer Allows you to add a line of content to the end of your RSS feed articles.

15. Scissors This plugin adds cropping and resizing functionality to Wordpress’ image upload and management dialogs. Additionally, images that are resized in the post editor are automatically resampled to the requested size using bilinear filtering when a post is saved.

16. Sociable Get yourself some traffic via enabling your visitors to post/Share your blog posts in lots of Social networks. It automatically adds links on your posts, pages and RSS feed to your favorite social bookmarking sites.

17. StatCounter All the stats you might really need!

18. Subscribe To Comments Allows readers to receive notifications of new comments that are posted to an entry. If you don’t the full powered Intense debate or disqus you could at least use this to engage your visitors in endless discussions.

19. Theme Test Drive If you love experimenting with your themes this is an interesting choice! Instead of having a stand-alone installation for testing sakes just use this plugin. Safely test drive any theme while visitors are using the default one. Includes instant theme preview via thumbnail.

20. Twitter Tools I use it in combination with Bird Feeder. A complete integration between your WordPress blog and Twitter. Bring your tweets into your blog and pass your blog posts to Twitter.

21. WordPress Database Backup Don’t ever loose your blog Database ever again. On-demand backup of your WordPress database. Have it saved on your disk or emailed to you.

22. WP-Polls If you only need a good nice light weight poll plugin here you go! Adds an AJAX poll system to your WordPress blog. You can easily include a poll into your WordPress’s blog post/page. WP-Polls is extremely customizable via templates and css styles and there are tons of options for you to choose to ensure that WP-Polls runs the way you wanted. It now supports multiple selection of answers. Use WP-Polls Widget to add the polls to display single or multiple polls from WP-Polls Plugin.

23. WP-Syntax Syntax highlighting using GeSHi supporting a wide range of popular languages.

24. WP Security Scan Perform security scan of WordPress installation.

25. WordPress.com Stats The easiest way to monitor rapidly the traffic of your blog.

I hope you will find these plug-ins useful and handy to increase your blogging productivity and to improve your blog. Please do share with me the plug-ins you are already using on your blog. Don’t forget to share using the buttons below and to subscribe via RSS or E-mail. Or just follow me on Twitter!

Posted on February 8, 2009 - by Khaled

WebNotes: Annotate, Organize, Share

In the previous blog post I mentioned 46 Essential FireFox Extensions Every Web Designer Should Have. Among these WebNotes. I really liked this useful FireFox extension (available for IE and for Safari and Google Chrome in a light version) as it turned to be a  fast and truly easy to use giving a whole new meaning to the online notes. Whether you are using it for academic sakes, for communicating with your clients or “just” to organize yourself, your business and collaborate with your team, WebNotes is really outstanding.

I had the oppurtunity to have an interview with Alex King, the Director of Marketing at WebNotes, and I didn’t want to miss such a chance. So here are few insights about WebNotes.

- I am really glad to have you answering my questions! First of all can you introduce yourself and WebNotes?
We appreciate you writing about us! My name is Alex King and I’m the Director of Marketing here at WebNotes. I’ve been here about 5 months and I am having a great time working with these guys.
WebNotes is essentially a service for anyone who wishes they had an online highlighter or sticky note tool to markup the web. Aside from being able to highlight/sticky note, annotations can be organized into nested folders (by client, or project, etc), and shared with colleagues via permalink or email. Many of our web design users like to use WebNotes to interact with their clients when iterating through various site proposals.

- What about the team can you quickly introduce them?
Right now there are 4 other full time employees and 1 intern. The 4 full timers (Ryan, Bennett, Peter and Matt) are all brilliant engineers from MIT and Roger, our intern, is a serial entrepreneur who is helping us with marketing.

- What sort of technology lies beneath WebNotes?
I’m not sure how deep you want me to go here, but WebNotes’ core annotation tools utilize JavaScript and Flash on the client side, which communicates with an ASP.NET web service to store users’ data in a Microsoft SQL Server database using NHibernate.

- Any specific reason for these choices?
Pairing JavaScript with Flash allows us to do some neat tricks in users’ web browsers that makes WebNotes feel more like an application than a web service. Our backend is less specialized, and currently runs on ASP.NET (though we could see ourselves building WebNotes on other platforms in a second life).

- What inspired you to create such product?
Ryan Damico, our CEO, was doing research for a class at MIT a few years ago and found the available tools for organizing his research woefully inadequate. He soon realized that other people had the same issues and decided to create WebNotes.

- What advantages and features do you think are the most attracting for Graphic/Web Designers and Developers?
As a whole, WebNotes has been designed to be extremely easy to use such that it integrates naturally into a developer/designer workflow. That said, the sharing features are probably the most attractive for designers so that they can keep their team and clients up to date with new revisions of their work. For designers and developers doing research on their own, WebNotes is also a great tool to quickly manage online content and keep track of their thoughts.

- WebNotes is still in public beta, when a final version will be released?
We are looking to release a new and improved version of WebNotes in the next few months.

- What are the main differences between WebNotes toolbar and WebNotes Bookmarklet?
First and foremost, the bookmarklet doesn’t require any sort of installation (it’s just a bookmark that you place in your browser). This allows it to run on a greater variety of browsers such as IE, Safari, Firefox and Chrome. The toolbar works on Firefox and IE and allows the user to access the organizer directly from a side panel. At the end of the day, however, the difference is based on what the user prefers and whether they want the fully featured toolbar or the more lightweight bookmarklet.

- I noticed that your web site and the toolbar itself are nicely designed! Do you think this is a plus?
Yes! I’m sure that you and your readers realize the importance of good UI, and we have spent painstaking hours focusing on this area of our product. In fact, it took us an entire day just to pick out the colors to make available in our highlighter tool!

- In the footer of the WebNotes site one can read: “Go green… make notes online!” is it just a slogan or do you mean what you say?
A substantial number of our customers used to print out websites for the sole purpose of annotating them and distributing them to their team or clients. We firmly believe this wastes paper and printer ink on resources that are easily lost and misplaced. While our number one goal is to improve the productivity of our users, we want to let them know that saving paper is a great ancillary benefit.

- Did this kind of ecological concepts help shaping your initial idea of creating WebNotes?
As per this question, we started off as a productivity tool and quickly realized that there were ecological benefits to be had as well.

- Is there a grand plan for the future of WebNotes?
There are many directions we can take at WebNotes as we move forward, but our goal will always be to offer the highest quality, easiest to use research tool on the Web. Right now we’re focused on building up our core services, listening very carefully to feedback from our users, and scaling up; where we take our service after that will depend on the needs of the market.

- Do you have a business model? how do you make money?
Later this year WebNotes will be releasing a premium version of its service. After that, we plan on continuing to add functionality that will greatly enhance the productivity of our users.

- Anything I didn’t ask about and you want to add?
We’d love to give your readers access to WebNotes. Would you like any Beta invites to distribute?

I hope that thanks to this interview you have a clear idea and a better knowledge of WebNotes. The excellent research, annotation andorganizing tool. For the invitation code (you need one in order to register) just click here. There are 50 invitations available for the moment. But once they are all used we can probably have more offered here.

Don’t forget to share this post using the buttons below and to subscribe via RSS or E-mail to be notified once the invitations are all used. You can also follow me on Twitter

Posted on February 6, 2009 - by Khaled

46 Essential FireFox Extensions Every Web Designer Should Have

FireFox is becoming more and more popular. This is  due in part to its great extensibility and easy customization. Here are 46 essential FireFox addons that I have and I think that they are really useful to help you with your daily activities related to web design, web development, graphic design, blogging and keeping yourself informed , productive and up to date. Feel free to post your own extensions that you use and love and that I missed in this list.

17 Essential Web Development & Web Design Add-ons:

1. Abduction! Enables you to capture screenshots of an entire web page or just of a part of it and saves it as an image.
2. Fire Vox Think of it as an open source screen reader that is designed especially for Firefox! Now you no longer have any excuse for not testing your site with screen readers! Probably the easiest Screen reader I’ve ever used.
3. Codetch by Zachary Carter is Dreamweaver-like text editor for firefox.
4. ColorZilla Advanced Eyedropper, ColorPicker, Page Zoomer that also enables you to work with palettes.
5. CSSViewer Very handy and light. A simple CSS property viewer.
6. Dust-Me Selectors a cool little extension that finds unused CSS selectors. Released by SitePoint.
7. FireFTP a free, secure, cross-platform FTP client for Mozilla Firefox.
8. Firebug Was initially developed by Joe Hewitt! One of my all time favorite FireFox extensions! It enables you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
9. FirePHP An extension for the Firebug add-on. It enables you to log to your Firebug Console using a simple PHP method call.
10. FireScope Another extension for Firebug. It enables Firebug with HTML and CSS refrences. This one too was released by SitePoint.com
11. FireShot An excellent and ery complete solution for Web development, maintaing blogs and much more. It creates screenshots of web pages or parts of web pages, it provides a set of editing and
annotation tools for those screenshots (insert text annotations and graphical annotations). The captures can be: uploaded to FREE public screenshot hosting, saved to disk as PNG, GIF, JPEG or BMP, printed or copied to clipboard, e-mailed or sent to configurable external editors.
12. Font Finder Get all CSS styles of selected text in Firefox  (or thunderbird).
13. MeasureIt Lets you draw out a ruler to get the pixel width or height of any element on a web page.
14. SEO Toolbar Displays ILQ and other important SEO numbers for a given web site.
15. Stylish Customize the look of the application and of websites you’re visiting with Stylish, a user styles manager. Great for testing.
16. Total Validator Web standards rule! A 5-in-1 validator that Performs multiple validations and takes screen shots in one go.
17. Web Developer Adds a menu and a toolbar with various web developer tools. An excellent replacement of Firebug although I believe you can combine the use of both of them for an optimal result.

8  Essential Bookmarking, Socializing, blogging and Micromessaging Add-ons:

18. Netvibes Adds RSS feeds to your netvibes.com account
19. Delicious Bookmarks Delicious Bookmarks is the official Firefox add-on for Delicious, the world’s leading social bookmarking service. t integrates your bookmarks and tags with Firefox and keeps them in sync for easy, convenient access.
20. Digg Toolbar lets you Digg, submit content, and keep track of Digg even when you’re
not on the Digg site itself. With a notification window built into the
toolbar, you’ll never miss a popular story or when friends Digg,
submit, or comment on stories.
21. Foxmarks Bookmark Synchronizer If you use Firefox on more than one computer, you’ll want Foxmarks.
22. StumbleUpon StumbleUpon discovers web sites based on your interests, learns what you like and brings you more.
23. Shareaholic If you use sites like Facebook, MySpace, Digg, Gmail, Twitter you’ll want Shareaholic.
24. TwitterFox TwitterFox is a Firefox extension that notifies you of your friends’ status on Twitter. You can use it to post Twitter updates and it will convert your URLs to tiny ones.
25. ScribeFire Blog Editor ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. Anfd it helped me a lot while creating this post

5 Essential Organizing and Executive Assistance Addons:

26. WebNotes a nice highlighter and sticky tool that’s still in Beta but works fantastically good! With WebNotes stop copying and pasting… Start making your notes online. For more info read this Interview with Alex King, marketing director at WebNotes.
27. ReminderFox ReminderFox displays and manages lists of date-based reminders and ToDo’s.
28. FEBE Firefox Environment Backup Extension allows you to quickly and easily backup your Firefox extensions. In fact, it goes beyond just backing up
29. Sxipper Forget your passwords! Sxipper accurately fills in forms, manages passwords and your OpenIDs. it really helps keep organized and spend a lot less time filling in forms.
30. Glue I hesitated to put glow in this category or in the preceeding one. I believe it fits perfectly in both. Glue is simply Outstanding! Alex iskold and co did amazing work for this one! I started using glue since it was called BlueOrganizer. connects you with friends around things you visit! Glue works automatically as you browse popular sites about books, music, movies, wines, restaurants, gadgets, stocks, actors, tv shows and other everyday things around the web.

3 Essential Shutterbug Addons:

31. Cooliris An outstanding extension! Cooliris transforms your browser into a visually stunning, lightning fast way to search and enjoy online photos, videos and more.
32. Fast Video Download Download video files from popular sites like YouTube, Dailymotion, Break.com and more.
33. Fotofox Drag, drop and arrange pictures adding photo titles, and create albums by multi-selecting photos, and then upload to one of a selection of online photo services – all of this without interrupting your Internet browsing. A greattime saver IMO.

6 Essential FireFox Functionalities, Appearance and Tabs Addons:

34. FaviconizeTab Let’s you just reduce the size of the tab to restrict it to just displaying the favicon! If you open many tabs like I do this will be really helpful.
35. Morning Coffee A very useful extension that keeps track of daily routine websites and opens them in tabs.
36. Personas for Firefox is a extension that adds lightweight theming to your browser. It’s an experiment in personalizing. If you are a graphic designer then this enables you to style the browser without having to code.
37. Session Manager I love this one! Saving sessions and pages is so easy! and restoring a session of 100+ after a FireFox crash shouldn’t be a problem with Session Manager. Same when you restart your computer or FireFox. It saves and restores the state of all windows – either when you want it or automatically.
38. Tab Mix Plus Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. I don’t use its session manager as I prefer using “Session Manager” extension -see above-
39. Undo Closed Tabs Button How many times did you accidently closed a tab you still need? Tired of going to History -> Recently Closed Tabs just to undo a closed tab? Then this extension is for you! This extension allows you to undo closed tabs via a toolbar and/or tab bar button or the right-click context menu.

7 Essential Miscellaneous Addons  :

40. GooglePreview Inserts preview images (thumbnails) and popularity ranks of web sites into the Google and Yahoo search results pages.
41. FlashGot Download all the links, movies and audio clips of a page at the maximum speed with a single click, using the most popular, lightweight and reliable external download managers.
42. Flagfox Displays a country flag depicting the location of the current website’s server and provides quick access to detailed location and webserver information.
43. FoxyTunes Music and Web/Graphic Design/Development are quite tied together in my opinion. FoxyTunes lets you control almost any media player and find lyrics, covers, videos, bios and much more with a click right from your browser.
44. Better Gmail 2 Based on GreaseMonkey, it adds useful extra features to Gmail, like hierarchical labels, macros, file attachment icons, and more.
45. Gmail Manager Allows you to manage multiple Gmail accounts and receive new mail notifications. Displays your account details including unread messages, saved drafts, spam messages, labels with new mail, space used, and new mail snippets.
46. eBay Sidebar for Firefox Keep an eye on your eBay trading wherever you are on the web when you install the eBay Companion for Firefox. It’s a free tool built with eBay users in mind that will help you get more out of your buying and selling.

I hope you enjoyed this post. Don’t forget to share using the buttons below and to subscribe via RSS or E-mail. Or just follow me on Twitter

Posted on February 4, 2009 - by Khaled

Twitter Should be Sorry! Or may be not?

Twitter Effect Vs Mash Effect: Experimenting how Twitter traffic can crash your server!
Twitter and it docile little blue bird is not that inoffensive! If you are not careful it could literally crash your server! How? By sending huge amounts of traffic to you! If you don’t believe me just ask the poor server hosting http://www.litmanlive.co.uk…
It all started when the rock star twitterer and blogger Pete Cashmore linked in one of his tweets to a blog post entitled “How to use Twitter to find your next job“. And a retweeting snow ball started causing the litmanlive server to collapse! Pete called it the “Mash Effect” whereas Pingdom dubbed it the “twitter effect” or more exactly the “dawn of the twitter effect“! And I agree it is the Twitter effect rather than the Mash effect (despite the huge popularity of Mashable)!

“The Twitter Effect” formula!
Believe it or not the “Twitter effect” can be mathematically calculated via a formula:

The Twitter Effect  = (Original tweet * followers) + (retweets * followers of retweeters) + (retweets of retweets * followers of those)! (etc.)

Thoughts and predictions:
I would just add  “potentially active” in front of each repetition of the word “Followers”. The  tweet effect will really vary according to the tweeting time and to the importance and the relevance of the topic during that period of time! Speaking of getting work in recession and firing times like these days is really and highly relevant in my opinion and that might explain why this very special tweet by Cashmore had this effect!
Twitter can be a source of great direct traffic and all of us are interested in building traffic to our web sites and blogs especially a traffic constituted by visitors that already know why are they checking this very specific web page. Twitter has been unceasingly offering an increasing source of traffic. And it is probably going to continue to do so. So prepare to witness the “Tsunami Twitter Effect” that I believe will reach new heights in the next years in comparison with other sources (i.e. Digg, stumble upon or FaceBook) as Twitter is more accessible and a lot easier to use by everyone than the other tools. Twitter is probably less famous than Digg or FaceBook but soon the great buzz/boom about it will happen and everyone and his dog will be using Twitter! Just look how many blog posts, media and news items are focusing on Twitter!
Twitter might even cause a drop in the use of RSS organizers such as Netvibes. It won’t probably replace them completely but it will make you want to visit them less! Netvibes even has a Twitter widget now!
Anyway I think it is important to start monitoring the traffic coming to you from twitter which could be quite challenging. I would suggest reading this article to help understand how you should proceed.

So what do you think? should Twitter be sorry for crushing servers? or may be not? Anyway it is time for you, Twitter, to get a clear business model!

Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter

Posted on February 2, 2009 - by Khaled

Matt Mickiewicz or how to survive crashes and recessions before fully thriving

Matt Mickiewicz is the co-founder (along with Mark Harbottle) of the giant Australian online media company, SitePoint.com. SitePoint is growing quite fast since few years now and doesn’t seem to be affected by the recession. Matt, kindly accepted to accord this interview to talk about the huge success of his company and to reveal key points about how SitePoint has become what it is now. Some really great insights and advice to follow if you want your business to fully thrive! This interview will be really inspiring for most of you! Especially if you learn (and this is not a secret) that Matt started the whole thing in a very young age!

-.Hello Matt, Can you introduce yourself?

I’m Matt Mickiewicz, co-founder of SitePoint and 99designs

-.How did it all start for you? What led the jump from Webmaster-Resources.com to sitepoint.com?

It started as a hobby for me. I started compiling useful links & resources related to web development and online marketing back in 1997 and I put it up as a one-page site on Geocities. It quickly gained traction and popularity.On April 1st, when the price of domain name registration at Network Solutions dropped from $100/2 years to $70/2 years, I decided to purchase the domain name Webmaster-Resources.com.Unfortunately, the choice of domain name came to haunt me, as another website occupied WebmasterResources.com (without the hyphen). When WINDOWS Magazine – with 1 million subscribers – did a write-up about my site, they left out the hyphen, which was a sign that it’s not a name for the long-term. We moved quickly to find a better alternative when Mark joined me in the Fall of 1999.

The name SitePoint was inspired by a billboard for Microsoft’s CarPoint that Mark Harbottle, my business partner, saw while driving in Melbourne. When he hopped online to find out the availability of SitePoint.com, we found ourselves in luck as the domain name had *just* expired. We relaunched as SitePoint in March of 2000 and opened our Melbourne office that summer.

-.Almost ten years after can you give us a brief timeline? And how SitePoint became what it is right now? What worked the best during the start? the forums? the articles?

There’s a great timeline of the company in the right hand sidebar at: http://sitepoint.com/about/
What really worked the best in the very early days was helping as many people as possible. I participated in forums and discussion lists related to online sales, marketing & web development. I critiqued websites for free and offered advice on improvements. I answered every email I got, and tried to help out everyone as much as I could.

-.Surviving and thriving after 10 years including the dot come crash, and without venture capital, is a huge achievement. How did you do it?

In the early days, we never turned down a dollar in revenue. Since we were seen as experts in Web Development, it wasn’t all that shocking when Melbourne companies approached us to do Web Design work for them – and we did.
We’ve also been very moderate in our growth. We only hire people when we have the revenue to support them, and we never took on too many financial obligations before we were ready for them.
In a way, we’ve always been ultra-conservative with expenses & hiring.
For example, we’ve had to move offices 3 times since 2000 as our staff has grown. That’s counter-intuitive for many Silicon Valley based companies which rent 20,000 sq feet on day 1, expecting that they will grow into it eventually.
Likewise, we’ve always been very in touch with what people are doing on our site. When we learned that they were printing our articles through the “print” feature so that they could follow-along with our programming tutorials, we decided to do it for them and as a result published our first every book.
The design contests, which morphed into 99designs, and the buying & selling of Websites forum that turned into a full-featured Marketplace were also all born out of the Community. We didn’t come up with the ideas, just realized their potential and invested manpower and resources into executing upon them.

-.A question I always had in mind: Why did you choose Australia over Canada for the HQ of SitePoint?

Mark was based in Melbourne, Australia as were the first people we hired who came from Sausage Software – makers of the Hotdog HTML editor. As an unexpected bonus, the 2:1 exchange rate between the USD and AUD dollar at the time allowed us to stretch our revenue lot further than we otherwise could have in North America.

-.When you visit the sitepoint forums, where do you go?

I read the SitePoint Feedback & suggestions, Marketplace Feedback and “Forum Help” areas the most.

-.What is your favorite book or kit from the SitePoint collection that you would recommend?

The Web Design Business Kit by Brendon Sinclair is gold.

-. What about 99designs?

99designs was spun off as its own separate company in February of 2008. It now has its own brand name and the focus and resources that it deserves.

I hope you liked this nice interview. I have been lurking on SitePoint since 7 years now and I registered as a member since 2003. Now for almost the last three years I have been a staffer on the SP forums (Currently I’m a Design Team Advisor) and I witnessed this amazing growth and the fast evolution occuring in SitePoint. Not yet a member? Hurry and register in the forums, Read the articles and the blogs, Check out the HTML, CSS and JavaScript refrences buy the books and the Kits! Watch the Video tutorials and Listen to the Podcast! Subscribe to the newsletters! And you will be truly thrilled with the material and the information you will find!
You can always follow Matt on Twitter.

Posted on January 29, 2009 - by Khaled

The Beauty and the Web: Thoughts about the importance of the visual aspect in Graphic and Web Design

This was a part of a longer article but it got righteously chunked from it by the publisher to whom I submitted the paper. I chose to post it here as it contains some points that deserve to be shared, and probably discussed, with you.

Nowadays it is obvious that images are very important for humans. On the net Images and graphical interface and presentation are very important components of most of the websites.

Having a well designed site with attractive images that can express a given message will make a huge difference for your visitors and that will probably lead them to have a better opinion about your site and you. The internet is becoming more and more visual, people are making sales or hiring decisions based on the looks and how much your products (and images) can be incorporated and nice to see in their daily life.

So even if you’re a top notch programmer or developer you will need a nice usable front-end! You can have the best of the applications developed but you won’t go far if it does not look good or if it is not useable! If you can’t do it yourself seek help. Graphic designer, artists, User experience designers (UX), Human-computer interaction (HCI) guys are just there for this.

Of course there are multiple definitions and interpretations about beauty and beauty in Graphic/Web Design. But there are simple rules to always respect. For some Graphic design is a type of art while for others it is just a tool or a medium to embellish web sites, web applications, software or documents and to guide the consumer while using them.

Almost everywhere and at anytime visual images are there trying to drag our attention and to persuade us of something! Or may be to amuse and impress us! And any Graphic or artistic web designer try to communicate a message through their production and through a given style they chose.
Another important point is the choice of the right colors palette for the right production whether it is a Web site, a print document or anything else. Colors are very important as they mean something! Yes colors are significant! Just remember that even the flowers colors mean different feelings and mind-sets. The same rule applies for Web and Graphic design. Choose the right color for the right product! Do your research in this field. Don’t create dark Web sites for young teenage girls! Yet don’t create flashy pink business cards for a CEO of a big company! I know I am pushing it to the limit but this is just to caricaturize the mistakes that can be committed when it comes to choosing the right colors.

Try to always be creative and innovative and to align your elements carefully to render something that is coherent and “beautiful” to see.
Just try to put as much time on your images and graphics as you put on your copy and texts. This will have a concrete effect on the way you are perceived by your visitors and potential clients.

The above posters about graphic design are taken from Veerle’s Graphic design poster competition.
Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter

Posted on January 29, 2009 - by Khaled

Fresh news from SitePoint

SitePoint.com, the Australian online media company, has been very active during the last days. First of all they have released a new Mozilla FireFox extension (Add-on) called FireScope that integrates with Web developer tool “Firebug” to extend it with references for HTML and CSS. I checked it out and I really loved it. I think it is a lot more useful than the other SitePoint FireFox Add-on: Dust-Me selectors (That finds unused CSS selectors).
Something else is new and very useful in SitePoint. I’m talking about the JavaScript reference that completes the SitePoint References collection (with the HTML and CSS references). I was really waiting for this one myself and it turned out to be even better than what I wanted.

Finally SitePoint are looking for 4 Part-time Bloggers that will have to post 5 times per week with a minimum length of 300 words per post (The optimum being 400-600 words). So if you think you can be one of them go ahead and apply!
More hot news soon! Don’t forget to subscribe to be notified via RSS or E-mail. Or just follow me on Twitter

Posted on January 24, 2009 - by Khaled

XHTML Users: Grow up!

During the last years Web standards started to gain an increasing popularity among Web designers. Still Web standards addicts are a ceaselessly growing minority until now. This is probably due to the fact that the majority regards the use of web standards in their projects as a hard process that requires a lot of time and process. Which is not 100% true in my opinion as Web Standards are the only right way to go! Dedication to standards is the key! following the W3C recommendations is a must! This is the first post from the “WEB STANDARDS ARE THE ONLY WAY!” series. And what a better start than having a “pragmatic evangelist for web standards and accessibility” sharing his view about subjects like the future of HTML, the use of XHTML or Should we start using HTML5?

So here’s a short, yet very interesting, interview with Tommy Olsson. But first let’s introduce Tommy to those who don’t know him. Tommy is a Swedish Web standards and accessibility Guru. He’s the Design Team leader at the SitePoint forums (so he’s my boss there!). He has written many articles for SitePoint and especially he co-authored with Paul O’Brien the SitePoint CSS reference. He had also won the “HTML/XHTML Guru” award of the SPF community for several consecutive years. You can check out his blog here.

The Future of HTML and HTML5

1. Almost 20 years after the first relase of HTML how do you see its future?

I’ll confidently state that HTML will have its place in web development for the foreseeable future … provided you don’t ask me how long that is.

There is a need for a semantic markup language to exchange information between people. Although there are fashionable trends with ‘rich content’ (which invariably means ‘flashy’ and ‘pretty’ rather than ‘useful’), all such technologies have drawbacks when it comes to accessibility. HTML as such is inherently accessible.

2.What are your thoughts about HTML5? should we start using the released drafts especially with the available validators? What does it add? is it heading towards more respect of semantics?  What potential does HTML5 has?

HTML5 worries me. A lot. I’ve been using HTML since 1993 (before it even had a version number), so I’ve seen the changes it has gone through. In the mid-’90s there was a loss of focus on semantics, in favour of presentation, but it quickly became apparent that this was the wrong way to go. Content and presentation should be kept separate, which is why CSS was invented.

The ongoing work with HTML5 seems to ignore semantics to a large degree. Yes, it proposes to add a handful of semantic element types, but it also adds purely presentational stuff that – in my opinion – doesn’t belong in a markup language.

Even worse is that it redefines long-established semantics of existing element types. For instance, the P element type no longer denotes a paragraph; it becomes a generic block-level container – nothing more than a synonym for DIV.

The contempt for accessibility is even more worrying. The drafts propose to eliminate several important attributes (or at least make them non-required). The reason appears to be a lack of support in contemporary assistive technology.

My opinion is that HTML5 is to semantics and accessibility what Herod was to the Bethlehem Playground Association!

Should we use it? For experimental purposes, perhaps, but I would strongly recommend against any attempt to use it on a serious, professional web site. Why? Because it’s not a W3C recommendation. It’s just an early draft which is likely to change many times before consensus is reached. (If that ever happens.)

XHTML? Again?

3. What are your thoughts about combining HTML5 and XHTML2?

XHTML2 is not backwards compatible with HTML at all. That’s also true for parts of HTML5, but not to the same degree. (If I’ve understood the drafts correctly.)

XHTML2 did show some interesting proposals for semantics and accessibility, but the fact that it’s an application of XML makes it utterly inappropriate for web pages, at least until the day we have really good authoring tools. Handcoding XML is not a good idea in a production environment, due to its draconian error handling.

XHTML2 and (X)HTML5 aren’t compatible, and their progress appears to diverge. I think it would be difficult to reconcile them into a single markup language.

4. What do you say to people ‘using‘ XHTML ?

Grow up!
Seriously, XHTML is long dead, due to a decade of horrible abuse. Not even the bleached bones remain.

Web Standards & Browsers?

5. Why should Web designers always respect Web standards?

For the same reason that other professionals should respect the standards of their business. It makes life so much easier for everyone – browser vendors, web designers and developers, users, …

Anyone who tried to create web sites during the Browser Wars of the late ’90s will know what I mean .

6. What’s your favourite browser and why?

Opera. It’s the most standards compliant browser, which means it’s easy to see if I got my stuff right. It also comes loaded with tons of useful features (and, admittedly, quite a few I haven’t yet found a use for). It’s more customisable than any other browser and it’s available for lots of different platforms. I use it with GNU/Linux at home and with Windows XP at the office, and it looks and works exactly the same. I even use Opera Mini on my mobile.

I rarely use the mouse when I browse, preferring keyboard navigation. And there’s no browser that beats Opera when it comes to keyboard navigation!

7. Which Web browser do you think is going to gain even more market shere in 2009?

I really wish I could say Opera, but I don’t think it will happen. I’m sure IE8 will take a large piece of the cake when it’s released, regardless of how good (or bad) it turns out. I also think it’s quite possible that Chrome will increase its share – possibly at the expense of Safari and/or Firefox.

8. Anything you want to add?

You really don’t want to ask a chatterbox like me that question! I can talk ’til the cows come home, you know that.
But I’ll settle for, ‘Thanks for letting me use your soapbox for a while.’

I enjoyed having Tommy answering these questions that might briefly summarize the actual situation when it comes to HTML, XHTML and HTML5. I think this short interview will be a good and fast to read reference for many web designers. I hope you enjoyed it too and that it will help you making the right decisions when it comes to web design and web development.  To make this blog post even more interesting I am including Tommy’s HTML Guru list! check it out

So You Want To Be An HTML Guru?

Try this list compiled by Tommy Olsson based on articles published on SitePoint:

1. The Definitive Guide to Web Character Encoding
2. Beyond the Guidelines: Advanced Accessibility Techniques
3. Beware the Automated Accessibility Tool Trap
4. Microformats: More Meaning from Your Markup
5. Bulletproof HTML: 37 Steps to Perfect Markup

I may add another nice article: Learn HTML and CSS: An Absolute Beginner’s Guide by Ian Lloyd.

Stay tuned for the next posts of the “WEB STANDARDS ARE THE ONLY WAY!” series! Don’t forget to subscribe to be notified via RSS or E-mail.

SitePoint HTML & CSS references:

Posted on January 20, 2009 - by Khaled

Easily Create “Obama style” graphics with Photoshop

Easily show your support! This tutorial will show you how to use Photoshop to quickly turn your photograph into a graphic that has the “Obama style”. WIth Obama the internet was used at its fullest so this tutorial seems to be something in tune with his campaign! especially that today is his inauguration day. Start with your photograph, set the mode to CMYK.

Hit ctrl+M to pop up the curves window. Set channel to black, output to 70 and input to 35.

Then go to filter > Blur > Smart Blur. Set Radius to 2, threshold to 50 and quality to high.

Revert back to RGB Mode. Go to Image > adjustments > Gradient Map. Set the first color at location 0% (blue color: #03334c ), the second color at location 25% ( red color: #d91a21), the third point of the gradient at location 60% (color: #70969e) and the last one at location 100% (color #fce3a6). and hit OK. You will obtain this:

Add some ornaments and text to customize it more.

Tweak it a bit more with Mask layers, dodge and burn tools and you’re quickly done.

This was a tutorial written on the fly for the occasion of Obama’s inauguration day! Let’s say we’re full of hope right now for the future.

Posted on January 20, 2009 - by Khaled

I Love Wildlife

I Love Wild life! Yes I do. And when we love something we try as hard as we can to protect it. Wild life is endangered! This no news for you! Many animal and vegetal species are becoming more and more rare! threatened by anthropological activities. Global warming is a sad truth with fatal effects. I thought why not openly and clearly show -as web designers, developers, programmers, graphic designers…- our support and love to Wild life worldwide? why not display a small graphic on our blogs, web sites to attest this love? to say that we care! That we tr to shut down our computers when we don’t need them! And that we don’t print documents unless it is necessary!

I created some graphics that you can freely post on your blogs and web sites to join this campaign and spread the word. You can also create your own graphics and it will be nice to post the links here in the comments! If you are interested in how I created those graphics then they are mostly based on sxc.hu stock photos with some tweaks and adjustments with Photoshop. For the frogs there’s a tutorial here about how I created them.

I would also like to post a link towards an incredible nature and wild life photography site : http://luislouro.com. Luis Louro is such a great photographer! just browse his galleries and slideshows and you will be truly and genuinely fascinated by the beauty of Wild animals and vegetation. As you probably know too I am also a scientist I had the chance to see many animal and vegetal species in the wild in Africa and Europe and I can only say that such encounters are fascinating and life-changing! Especially african fauna is incredible. Diving allows you to see marvellous things. I hope everyone will have the chance to witness this beauty! And most importantly to preserve it for our children and grandchildren!

If you need other graphics sizes just let me know!

Posted on January 20, 2009 - by Khaled

Create a cool frog in just 3 steps with Photoshop

Another quick photoshop tutorial…So do you remember this fella?

If you were a regular reader of this blog when it used to be called “No relation” then you will recognize this frog as it was on the header. You can download the full resolution stock photo from sxc.hu for free. I will quickly show you in 3 steps how to turn this plain ordinary frog into a cool one! Ok first of all let’s change the eyes color to something more attractive and exotic! what about pink?

Step 1 : Eyes color

Start with the selection of the eyes with the elliptical marquee tool.

Now we’re going to add a new adjustment layer to tweak the Hue/saturation of the eyes.

Set the hue/saturation to the following values:

Of course by setting the hue value differently you can have a different eyes color. Just choose what you like!

Step 2 : Body color

Ok don’t deselect just inverse the selection (ctrl+shift+I). Add a new adjustment layer of Brightness and contrast: set brightness to +30 and contrast to +25.

Now as you see the colors are a lot more lively and nicer to see!

Step 3 : Final touches

Ok use the Burn tool (brush 35px, Range: Midtones; Exposure: 30%) and darken the shadow and the lower parts of the frog. You may want to use the dodge tool to add some brightness to the eyes. The final result will look like this:

I hope you enjoyed this quick tutorial. If you need more details about the steps just let me know.

Posted on January 16, 2009 - by Khaled

Easily achieve the trendy LetterPress effect with Photoshop

In late 2008 and early 2009 LetterPress effect is becoming increasingly popular and used in many web sites. So here 2 quick examples on how you can create a realistic letterpress effect with Adobe Photoshop (Version 7 or newer). This will take you just a couple of minutes and you can achieve it even if you are a beginner.

Example 1:

Open Photoshop, create a new document (600 x 400 for instance). I started with a white background and typed the word Letterpress (Font: Century Gothic, 60pt, All caps and set the color for instance to: #00bae8).

Now we are going to add layer effects (double click the text layer) and simply check the inner Shadow box and set it to these values (shadow color: black #000000):

You will obtain this kind of effect:

As you see we’re almost there! You can customize a bit more with overlaying a gradient overlay or you can rasterize the type layer and work on it with burn/dodge tool. You can check out this tutorial to see how to use Dodge/Burn tools. You should be able to end up with a final aspect that looks like this:

I just applied a gradient overlay effect and some burning at the base of the letters.

Example 2:

Ok, let’s see another variation that might work better if you are after a metallic Letterpress effect. Create a new document, fill in the background with a light grey color (#d0d0d0 for instance). Type in LETTERPRESS (Font: Century Gothic, 60pt, All caps, Set tracking to 50 and set the color for instance to: #919191). Now we’re going to add an inner glow effect this time. Set the Inner glow values as following (color: #000000):

The noise percentage can be tweaked and set to what is best for your purpose!

Now apply an outer glow with these settings:

You should obtain something like this:

All you need now is to play with your background to make it look like brushed metal using noise filters and motion blur along with dodge/burn tools. May  be also add a gradient overlay to the text layer and you will have something that looks like this:

If you think I should put more details about the creation of this metallic background or on the last steps of this tutorials let me know!

Posted on January 13, 2009 - by Khaled

50 Typography Resources you must look at!

Typography is much more than just using a given font with a given size, style or weight! It is an important component of Web Design and a powerful communication tool. Here’s a collection of useful links to some interesting, articles, books, slideshows, resources and portfolios about this amazing domain of Typography.

13 Articles You should read:

Reading these articles will help better choose your fonts, their sizes etc., along with learning some very useful tips and tricks and necessary theoretical knowledge.

- 8 Definitive Web Font Stacks : A nice article written by Michael Tuck and published by SitePoint.
- Better web typography: Published by .net magazine and written by Craig Grannell.
- A Not-So-Sweet Tale of Digital Type: Written by Andrew Twigg and published by AIGA.
- Typography Matters: An old, yet quite educating, article by Erin Kissane published by A List Apart.
- Web Typography Cheat Sheet: A typography cheat sheet published by Modern Life and written by Stuart Brown.
- Web Design is 95% Typography: An oliver Reichenstein published on information architects.
- Better Font Management: Written by Joel Sacks and published by Digital Web.
- The Principles of Beautiful Typography : An awesome article by Jason Beaird published on SitePoint
- Typography and Web Advertising: Making Every Opportunity Count: This one is dealing with the special case of typography for Web advertising. Also published by Digital Web and written by Alexander White.
- The Anatomy of Web Fonts: Andy Hume’s article.
- Top Ten Web Typography Sins
- 16 Best-Loved Font Bits In Web Design
- Create a font Part I and Part II : an outstanding article from I love Typography

6 Slides about typography you must see:

Easy to visualize slideshows (thanks to slideshare) that will let you rapidly learn nice facts about typography.

- Beautiful Web Typography: 7 tips on de-sucking the web by Simon Klein.
- Elegant Web Typography: The typography speech of Jeff Croft from Web Directions South (September 2008) in Sydney.
- Better Typography: Nice slides by famous Mark Boulton.
- Typography: Past & Future I
- Typography: Past & Future II
- Typography: The last Secret Weapon.

5 Books about typography you should read:

Probably the best books arounf about typography in my opinion. Read them and you will learn tons!

- The Elements of Typographic Style
- Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students
- Designing Type
- Type: The Secret History of Letters
- The Complete Manual of Typography

26 Inspiration, resources & Portfolios you should look at and bookmark:

Showcases, Artists portfolios, tutorials, Addons, guides, blogs, inspiration galleries, and outstanding typography sites with a lot of noteworthy typography resources.

- Words Are Pictures
- Alison Carmichael
- TypeNuts
- TypoPhile
- The Type Directors Club
- Typographic Posters
- Best typefaces of 2008
- A guide to Web Typography
- I love Typography
- The Font Feed
- TypeOff
- Sexy, Bold And Experimental Typography
- Typography In Motion
- On snot and fonts
- Mark EastMan archive
- FromFiftyFive
- How to recognize a font? A mini guide to successful Font recognition
- Identify that Font
- Font Finder: A firefox/Thunderbird addon that will help you get styles of selected text.
- Free Fonts
- exljbris Font Foundry
- Font Wrek
- FontStruct : Build, share and download fonts.
- Type Foundry
- NovemberBorn sIFR
- Finally you may want to take a look at some nice videos about Typography posted on Vimeo.

I hope these collection of links will help you better understand and better use fonts for a nicer  typography and better web design practices! These links may be useful either you are creating web sites or print work.
If you like the article bookmark it and digg it! Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter!

Posted on January 10, 2009 - by Khaled

Does your kid have champion genes?

Since the day scientists were able to sequence the human genome there were some huge leaps in the human genetics field. Many human characteristics and body functions are now directly linked to their genes. For instance there’s probably an intelligence gene! So what if we apply our current knowledge to more precise goal? i.e. are there any genes that predispose a human to be a sports champion? If yes, why not try and find them and be able to test our children since their youngest age?
Don’t just want to know if your child can be the next Roger Federer? Michael Jordan? Tiger woods? or may be  Tom Brady? What about  Michael Phelps? Heather O’reilly? Nadia Comaneci? What if you could tell if this might happen even before your child learns to walk? Well may be you can!

For less than $200 (even lower some times) companies like Atlas Sports Genetics, CyGene and Australian Genetic technologies  will analyse the DNA of children as young as 1 and the results of the analysis can help predicting wether or not they genetically predisposed to be sporting champions.
All what is needed is a swab taken from inside the child’s cheek to obtain sufficient DNA. After  10-15 days the results are dispatched and may even come with a signed certificate attesting , with details, the potential “Genetic Advantage” of the child. They summarise all you need to know about physiological strengths and probable suitability of the child for certain types of sports.
These tests may have some advantages if used wisely. An implication of higher instances, like sports ministries, seem to be necessary to avoid any excesses. Such studies seem to be pushing the limits of the current scientific knowledge. The day where we will be able to predict the sanitary future and predispositions of humans for certain jobs or activities seems to be around the corner. Such situation may lead to some dramatic events though. Telling a child that he will never be able to be as good as his favorite athlete no matter how hard he tries is a problem! and might have terrible psychological effects on the child!! Should we tell him/her in such cases? should we let them try and waste their try knowing that they will probably fail? On the other hand, does knowing that a kid is predisposed to be a sports champion dive us the right to push him towards  sports and performance pressuring him to give his best even though he does not like sports? This may lead to depression, a general feeling of melancholy and may, in some extreme cases, push the child to commit suicide! We, as intelligent humans, must be very careful on how to deal with such issues! How someone will live his life knowing that he will have some cardiac problems or diabetic disorders? Again should we tell him? And, for instance, will any company hire someone that is predisposed to be ill with some chronic disease? or someone who has “bad” intelligence genes? Should these kinds of tests be prohibited? Discovery is good! But should always be used wisely!

Posted on January 8, 2009 - by Khaled

The Y Chromosome Mystery!!?

Hybridization is a natural process happening with or without human intervention. It is an important evolutionary phenomenon that helps understanding complex mechanisms such as speciation. Hybrid zones between related species are thus regarded as “natural laboratories”. So mating between genetically divergent species or populations is quite common in nature.

Key insights into the process of speciation can be provided by comparing the genes flow rates throughout the whole genome and therefore underlie reproductive isolation. Some recent studies (2008) led by Geraldes et al., reported the geographical distribution of Y chromosome lineages in wild populations of rabbits from Iberia and southern France. This revealed that Y chromosomes showed a high level of differentiation between rabbit subspecies on either side of the existing hybrid zone. This was in clear contradiction with the evident gene flow detected at other loci from other chromosomes. This suggests that the Y chromosome might play a key role in reproductive isolation. This a new case species with mosaic patterns of differentiation across their genomes.

Comparisons of introgression levels between the Y chromosome, the X chromosome, the autosomes, and mitochondrial DNA are essential to the knowledge of speciation genetics. Particularly, the important role of the sex chromosomes in reproductive isolation predicts that genetic markers found on these chromosomes will often show restricted gene flow compared to other loci.

An alternative explanation can also be suggested. Relative levels of differentiation might simply echo the rate of ancestral lineage sorting (due to differences in effective population size) which is expected to be fastest for the Y and the mitochondrial DNA, followed by the X chromosome, and finally the non-sexual chromosomes. Crossing test can be useful to assess the validity of either hypothesis.

Multilocus surveys of population differentiation will be increasingly used in the speciation research nascent field. Soon we will be witnessing entire genomes scanned for introgression in hybridizing species. However this method will still be challenged by the fact that we still ignore what does an outlier locus look like? In fact, this is a common problem with other genomic researches….

Posted on January 7, 2009 - by Khaled

Top 10 Web Design / Web Development Podcasts

 

 

Nowadays, Podcasting is gaining a ceaseless increasing interest. The word podcasting was created by blending the words “iPod” and “broadcast”.  This is due to the fact that the first podcasting scripts were developed for Apple iPod portable media player. However, an iPod is no longer required to listen to podcasts. Most Media Players will do the job! I prefer iTunes though as it allows searching podcasts, subscribing to them (free and paid podcasts do exist) and of course listening to them. iTunes offers really cool features for this.

Podcasts are generally a series of audio or video files which are diffused on the web via syndicated download, through Web feeds. So they are a perfect combination of RSS specification and the MP3 compression algorithm.

Over the few last years I gathered a nice collection of podcasts that I like to watch/listen to. I am going to share with you the top 10 podcasts that I favor when it comes to Web Design and Web Development.

 

1.      BoagWorld.com

Paul Boag’s Podcast (co-hosted with Marcus Lillington) started since August 2005. It has, as of today, 147 episodes. Episode 148 will be released within a week or so. Paul deals with different subjects related to the web design business. He usually invites some big names to the show. The live streaming recording is a nice bonus too!

 

2.      SitePoint.com

A fairly new, yet excellent Podcast, that started last November (2008). The Hosts are Brad Williams, Patrick O’Keefe, Stephan Segraves, and Kevin Yank. The SP Podcast is about The Web industry.  This is an outstanding show with different point of views. 5 episodes till now but the 6th is in its way soon!

 

3.      Photoshop User TV

An excellent Podcast to watch for Photoshoppers! Hosted by the Photoshop guys: Dave Cross, Matt Kloskowski, and Scott Kelby from the National Association of Photoshop Professionals (NAPP). The Photoshop guys share each week some very nice Adobe Photoshop tutorials, along with some very cool tips and tricks that will hugely increase your Photoshop productivity. 167 episodes for now.

 

4.      Web Design TV

This podcast is produced by .net magazine. This podcast deals with different web design aspects and presents several software tutorials and tips (CSS, Graphic design, Flash, Photoshop…).  The podcast started back in March 2008 and 28 episodes were released till now.

 

5.      Adobe Creative Suite Video Podcast

The Adobe Creative Suite Podcast features tips and tutorials mainly about Photoshop, Indesign and other Adobe CS software. It is hosted by Terry White. This is a 2 years old podcast that started in 2006 and still active till now.

 

6.      The Rissington Podcast

Hosted by famous web designers John Oxton and Jon Hicks. Deals with Web geeky stuff. Started in late 2007. 19 podcast episodes were released.

 

7.      php|architect’s PHP Podcast (P3)

A bi-weekly radio-style podcast full of news, events and discussions about PHP. It is probably one of the oldest Podcasts on the net as it started since 2003.

 

8.      Appclinic

A video Podcast with tutorials for graphic designers hosted by Adam Hay.

 

9.      Rookie Designer

An audio podcast about web design as a job/career hosted also by Adam Hay. This podcast wasn’t very active lately but the early episodes are great.

 

10.  Rails Podcast

A nice rails podcast.

 

Now even if some of these are less active these days, listening to older episodes is really a good thing that will help learn tons of things. Most of them are available for subscription via Apple iTunes which the media player I really recommande for podcasts.

Posted on January 7, 2009 - by Khaled

Donuts!

Donuts… Who doesn’t like them? They are delicious, easy to prepare and you may eat them basically anytime of the day! You can eat them while working etc…  There are so many different recipes for doughnuts but one of my favorites is chocolate donuts!

For this recipe  (~30 donuts) you will need:

• 1 fresh egg
• 3 ½ cups of flour
• 1 cup of sugar
• 5-7 teaspoons baking powder
• 1 ½ teaspoon salt
• 1 cup mashed potatoes
• 75-100g of bitter chocolate
• 2/3 cup semi-skimmed milk
• fat for deep frying

Beat egg until they become homogeneous and light and add the sugar and continue beating. Melt the chocolate in a bain-marie (hot water bath) and add it to the sugar eggs mixture. Add the mashed potatoes and the milk.

Add baking powder and salt to the flour and bake till. Wrap the dough in plastic and cool it in the fridge for 2 hours.  Then roll it out on a floured surface.  Cut with floured doughnut cutter. Fry, turning each donut once, in deep fat at about 350° until the donuts become golden colored. Transfer to paper towels to drain.

You may want to dip it in melted chocolate or even some honey.

That’s it! I hope you will enjoy it!

Posted on January 6, 2009 - by Khaled

WebScienceMan is here!

 

After a few years of running this blog under the name of No Relation, I decided a while ago to Change the name along with a full redesign (which did not happen since almost two years). So now this blog is running under the name of “WebScienceMan”. This change was discretely announced before! Read the about page to have a better idea about the motives.

REVAMPING PROCESS
During this revamping process the CMS was upgraded to WordPress 2.7 (this was very smooth and I really love the new features of this version). I also created a new graphic design that dubbed “The Rainbow Cliff theme”. I’ve laid this graphic over the structure provided by Paper C theme (which was a gift from a friend of mine) after retouching some HTML, CSS, PHP and JS.  New Plug-ins were installed among which I will mention:

•           Bird Feeder
•          cforms
•          FD Feedburner Plugin
•          Gravatar
•          Limit Posts
•          WP-Polls

So you may have understood that from now on there will be polls and surveys carried on so don’t dither to come back, check and vote.

ADVERTISING
From now on you can purchase an advertising spot on WebScienceMan to advertise your products, your services, your site or whatever. Find out the details here.

Posted on December 31, 2008 - by Khaled

Happy new year 2009!

Happy end for 2008! I hope that 2009 will be excellent for all of you and better than 2008. I want also to remind you that changes will occur here soon. So see you next year (that’s merely in few hours from now!) I’d better go now to prepare myself for the dinner out in this new Italian restaurant…

Posted on December 27, 2008 - by Khaled

Revamping, refurbishing and renaming

I decided to revamp and rename my blog. It’s time to do so and to focus a little bit more on it. I will probably be able to have more time to blog more effectively! I will keep writing and posting about the same things I used to. But starting from the beginning of 2009 this blog won’t no longer be called “No relation”! and the CMS will be updated to WordPress 2.7. I will have a new theme too and some more cool stuff!

May be the above graphic will give you some clue about the future directions of this blog! So stay tuned!
And if you have any comments or inputs don’t dither to share them with me! 

Posted on December 26, 2008 - by Khaled

Café du Jour: Café Glacé

As I am a huge fan of coffee and of food in general I decided to start blogging about some recipes that can really be called as geeky recipes. Everyone knows that most of the Graphic / Web designers/ developers are fond of caffeine that keeps them awake during the cold long nights while they are brainstorming, cogitating, designing, drawing, coding, programming, photoshoping, or just stuck out in front of a blank screen searching for inspiration!
I’ll try to share with you my love for the tasty coffee recipes that I come up with or the ones I’ve learned to prepare!
The recipe I am going to blog about today is one among many frozen coffee recipes. I like frozen coffee or café glace even in the winter, that cold sensation travelling down my mouth and esophagus energize me with a boost of stamina! Let alone the taste, the smoothness and… Of course, the caffeine! I like to call this one Vanilla café frappé..
So you are going to need:
- 1 liter of hot strong black nicely roasted coffee
- 4-6 table spoons of Sugar
- 1/8 liter light milk cream (10%)
- 1/4 liter of vanilla cream
- 6-8 ice cubes

Preparation:

Pour the hot coffee in a bowl add the sugar, stir it up and let it cool down. Then transfer it to the blender, add the milk and vanilla creams and mix it till it is homogeneous. Add the ice cubes and mix again with short pulses at first. Once the Ice cubes are crushed we’re done!
Pour in a pitcher and put it in the fridge for an hour or so and don’t forget to stir it up from time to time.
After an hour it is ready! Pour some in your favorite mug/ glass add 3 or 4 ice cubes and drink!
This will be enough for a full day (3 to 4 glasses)…
I hope you will enjoy it !

Posted on December 22, 2008 - by Khaled

Internet Explorer 6: less painful?

Yes, Web designers hate Internet Explorer 6. This old browser was released back in 2001 but still quite frequently used by many people despite that it is really insecure, buggy, slow and far from being standards compliant. There was even an “Internet Explorer 6 Uninstall Day” held, thanks to a facebook group, on the 27th of August, 2008 which corresponds to the 7th birthday of IE6.

But that initiative was not very successful.

But lately things are changing. MSIE6 is still painful, but thanks to the efforts of Dean Edwards the situation is now really better!

Dean created a new Scripts library, IE7, available on Google code that will make Internet Explorer behave like a standards-compliant browser as It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Still the transparent PNG image can’t be tiled nor can it be positioned using respectively background-repeat and background-position.

Thanks Dean!!