Archive for the ‘4.The Web’ Category
Posted on March 12, 2013 - by Khaled
Few days ago, I read and saw the posts on Linkedin Today about “where I work?“. It is a sort of showcase to share with professionals using Linkedin the 50+ Places Where Big Ideas Are Born. In this collection, some of the most important online influencers share the secrets of their working spaces, offices etc… And what was obvious is that “Sometimes the best work happens while walking, broadcasting, flying and even on the beach”.
For me, the conclusions to draw from these posts is that the “Perfect Workspace” has no clear definition. It is a personal quest. For some it has to be a big office in a large room, for others it is a table in a coffee shop, sometimes it is a standing desk or even a stool and a laptop in your garden. The most important thing is to be at your ease and in the mood to produce great work and to come up with bright innovative ideas. This mainly depends on your habits, the nature of your work and the tools you use to be productive and to be inspired.
Our work space choice can tell much about us. This is interesting to consider especially if this work space makes you feel at the top of your productivity. However, we all continue to fine-tune and evolve our settings and tools in order to become even more inspired, creative and productive.
Since few years now, we are witnessing changes and new trends in how we manage businesses nowadays. This is obvious from the posts in the “Where I work” series from Linkedin. The clearest tendencies show that the traditional work spaces and offices are less and less used and preferred. The displayed work spaces evidently mirror important evolution in our way to conceive modern business and offices. Modern concepts are geared towards increasing flexibility and fluidity and witness of a constant effort to achieve better communication and more openness. This is really enhanced and catalyzed by the technological advances in devices and mobile networks, wireless internet speed and the greater accessibility to productive software everywhere (thanks to the cloud and other advances). Portability is no longer a wild dream! Traditional offices are still used but they are evolving too.
We see more and more outdoors desks, “mobile offices” and standing/walking working options.
Some prefer a basic frugal work space; others can’t perform well unless they customize their work space with photos, souvenirs and personal belongings.
My advice is to find out the best work space set up that allows you perform at your best and be productive, creative and inspired. Then you can try to fine-tune it and bring in a considerable deal of innovation, flexibility and portability. Remember, your work space tells a lot about who you really are! I could even say “Show me where you work and I will tell you how you work!”
Posted on May 11, 2012 - by Khaled
UX is not just Usability + accessibility as some think! It is a level up! It may be considered as a compound of HCI, UCD, Usability, Accessibility, UI, IA, Aesthetics, Graphic Design, Web Design, Page behavior and even copywriting. The starting point for UX understanding (and how I knew about it for the first time) would be the diagram of Jessie James Garrett that I stumble upon in the early 2000. But I think it has evolved from that first concept. In my opinion, UX Design is related to all the aspects of the user experience when interacting with the website, the solution, the software, the service, the product etc… And it is dictated by the sought function, the interactive comportment, the final design wanted, the performance optimization and the targeted audience of the solution / Product / Service / Software. It involves all features and characteristics of usability, accessibility and desirability of a solution from the user’s perspective’ / point of view.
Our philosophy has some guiding concepts and principles that are:
The team working on a project has to be formed of individuals of different profiles and that will intervene in their respective layer of UX work. That means that the team working on one project has to agree and to be aware of the decisions of each team member when it comes to their field of expertise. Each member of the team should be able to let other members visualize his work in real time and keep them posted
The team should be able to create different routes and then be able to quickly decide which one is better suited to the project
The team must focus on solving the right problems and answer the right questions starting from the most central problem towards the less important ones.
Identify hypotheses and assumptions
Implement short processes and cycles: Brainstorm > Create > Check/feedback
Research the best source of information and the most reliable and trustworthy content
Involve users in the process of research and results validations.
When it comes to having a successful UX approach, it is vital to carefully consider the expectations and the assumptions of humans that the solution or product target.
For instance, we have developed and launched many e-commerce sites. In many cases we found that the sites’ owners have the assumption that just by having a shopping cart in their solution, customers will line up and buy their items, solutions, services or products. Most of the time they won’t understand the need to implement a whole strategy of UX and find the expenses unjustified! Some of them leave to some other companies and have a plain E-commerce installation and not long after, they will be disappointed! In fact and after audit, we demonstrate that their current “websites” don’t offer any user experience at all (or very little) and hence nobody buys from them. It’s proven through conversions rates that good UX design will always help users with their decisions to buy! “Call to action” incentives are very important here!
Among the assumptions we make I can cite the most important ones:
– Who’s the User? Who’s the client? (characteristics research)
– What’s the use of the considered service/product/ solution?
– Where, how and when is the considered service/product/ solution used?
– What problems does the considered service/product/ solution solve?
– What features of the product/solutions are the most important? Which ones are the less important?
– Considered all of the above, how should the solution / product look, feel, behave, work? (consider style, design, typography, dimensions, shape, colors, behavior…).
This was a fast explanation and some thoughts about UX and our UX process in my agency. Looking forward to hear from you!
Posted on April 2, 2009 - by Khaled
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
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
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!
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.
Posted on February 12, 2009 - by Khaled
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.
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.
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
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?
– Any specific reason for these choices?
– 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.
Posted on February 6, 2009 - by Khaled
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.
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.
Posted on February 4, 2009 - by Khaled
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!
Posted on February 2, 2009 - by Khaled
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?
-. 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.
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.
Posted on January 29, 2009 - by Khaled
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).
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
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.)
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 ?
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:
I may add another nice article: Learn HTML and CSS: An Absolute Beginner’s Guide by Ian Lloyd.
SitePoint HTML & CSS references:
Posted on January 20, 2009 - by Khaled
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.
Posted on January 20, 2009 - by Khaled
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
Now we’re going to add a new adjustment layer to tweak the Hue/saturation of the eyes.
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.
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:
Posted on January 16, 2009 - by Khaled
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.
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).
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.
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
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
– The Type Directors Club
– Typographic Posters
– Best typefaces of 2008
– A guide to Web Typography
– I love Typography
– The Font Feed
– Sexy, Bold And Experimental Typography
– Typography In Motion
– On snot and fonts
– Mark EastMan archive
– 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 7, 2009 - by Khaled
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.
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!
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!
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.
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.
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.
Hosted by famous web designers John Oxton and Jon Hicks. Deals with Web geeky stuff. Started in late 2007. 19 podcast episodes were released.
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.
A video Podcast with tutorials for graphic designers hosted by Adam Hay.
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 December 22, 2008 - by Khaled
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.
Posted on December 18, 2008 - by Khaled
Today is a rainy cold day… The sky is dark and gloomy. As I have a big thin glass window in front of me it seemed to me as if the stormy weather colors were sneaking inside my office, and by the way this is my first winter in this office with this huge window that gave me the impression to be seating on the dark clouds…
This just happened as I was looking for some inspiration to design a new graphic theme for a joomla web site. The general topic of the site is about Nature, wild life and environment… Checking out my Gmail box themed with the “Bus Stop” design that turned into its ‘rainy’ version based on my location gave me a nice idea to design different themes for this web site that will be displayed according to the weather of the visitor’s location… I proposed this to the client via a phone call and he really liked the concept…
Funny enough, when I opened Photoshop to start a design mock up and pick up color palettes; I instinctively started with a rainy theme… It was the easiest palette to create and it probably has the nicest colors… At least that’s what the other Graphic designers of my company thought…
This is the first time I feel such a strong connection between Web Design and the elements surrounding you especially the weather. Of course I, sometimes, seek specific inspiration from different sources according to the theme or the design element I am working on including going out to some specific places or browsing some given web sites or reading/viewing some magazines, books or photo albums but it is usually necessary to take some time and think about ideas and sketch some of them on paper… So the connection is not as obvious as it was today and the creation of the mock up (which turned out to be quite nice and close to a final design) and the choice of the palette were never easier?!! Is it the window? Or is it the fact that I am producing less during the year as I am a bit more focused on tasks like Sales, marketing, Project management and human resources recruitment… I can’t really tell but I believe that today’s rainy weather was really useful to come up with this design and to discover tangibly this existing and interesting relationship between Web design and nature element like the weather… It was like a flawless process this time…
A hot cup of kopi luwak coffee is good idea for now…
Posted on December 17, 2008 - by Khaled
From now on you can follow me on twitter! Yep finally I am joining the vibe!
Posted on December 16, 2008 - by Khaled
Josh Catone, the Lead Blogger at sitepoint.com, posted a poll to see which big web tech companies users trust the most? For the moment, and after few hundreds of votes, Google is the leader collecting more than 40% of the votes in front of Amazon, Apple, Microsoft and Yahoo!
Take a look on the results and cast your vote here:
Posted on December 16, 2008 - by Khaled
Alfresco Software and Joomlatools collaborated to create a new module that will allow the integration of both open source CMS. This module relies on Content Management Interoperability Services technology and the API CMIS REST. This will enable current Joomla installations to access the back-end content repository services of Alfresco ensuring Joomla users to be able to more effectively manage bigger volumes of content on their sites. Whereas Alfresco users can, starting from now, search, publish, edit, or download content directly on Joomla sites.
I’ve testing it for few hours and I was quite pleased by its level of sophistication and usability.
Just take a look: http://www.alfresco.com/products/platform/try/
This is going to be an awesome Open Source tool… believe me.
Posted on October 22, 2008 - by Khaled
Yet another old tutorial from the old Kyscorp tutorials depot.
I read in many forums some threads from people asking how to make icons (windows icons) but i did not appreciated the answers because they wasn’t well explained or totally wrong (changing the extension of a gif file to .ico!!!). So i made this tutorial and tried to explain all the steps needed to get the final result.Yes, I’m not a professionnal but this might help beginners.In this tutorial I’m using photoshop cs (or newer) and microangelo (5.58 or +) (this is what i’m using to make my icons).
Posted on April 15, 2008 - by Khaled
Another old Photoshop tutorial picked up from the kyscorp archives again. This is just to show you how to create some special background effect with Photoshop. Of course once you see how the background was done you can change it and make some tweaks all along the tutorial modifying any step to obtain what you exactly need. It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…