webonmyway: 2.Web Design

Posts Tagged ‘2.Web Design’

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 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 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

TRUE BEAUTY!, originally uploaded by Pureen.

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 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:

The Definitive Guide to Web Character Encoding

Beyond the Guidelines: Advanced Accessibility Techniques

Beware the Automated Accessibility Tool Trap

Microformats: More Meaning from Your Markup

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 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!