Fireworks is the best tool for web design, period. Photoshop cannot compete with the precision and user experience of it. PS may have more features and functions but it is not optimized for producing content to display on a screen at 72dpi. Not even Illustrator has the pixel accuracy and such a great bitmap/vector interaction.

The only turnaround of it is the amount of bugs it has and the discrimination it suffers from Adobe (since they bought it from Macromedia) as they consider it ‘the ugly brother’ in the Creative Suite and don’t give it proper attention and resources. This is why most users encounter themselves in the dark with frequent bugs awaiting for Adobe updates that take months to appear. Some of them have even rolled back to Macromedia Fireworks 8 to get rid of such stupid errors but that may seem like an extreme solution to some of us.

Through trial and error as well as user research and feedback, here’s a list of the most common errors you may find while working with Fireworks:

Fireworks ‘Not enough memory’ bug

Even though you may have 8GB of RAM and a brand new computer (that’s my case) you can still stumble with this error. This usually happens when working with several pages and a lot of elements in them, specially big images.

Solution: It seems that closing the Optimize panel (press F6 to toggle it on/off) can help fix this issue as reported by some users.

Fireworks mouse pointer becomes a hand

The cursor becomes a hand and you can’t select any other tool from the main toolbar. This issue is quite frustrating and there is no real solution to it. Even restarting the application won’t fix the problem.

Solution: In the post entitled Adobe Fireworks Hand pointer error you can find a quick fix.

Fireworks half pixel

Although Fireworks is a pixel based design software, when resizing shapes like rectangles the software may add anti-aliasing, also known as half-pixels, which adds a semi-transparent border.

Solution: Select the element and increase or decrease manually the X or Y position of it in the Properties toolbar. The element will move but it will remove the half-pixel it had and recover its real size smoothing the sides of it. Then you just need to place it again where you wanted it.

Fireworks ‘Internal Error’ when launching

Some users cannot start Fireworks any more when  upgrading from a previous version of Fireworks or when installing the full software after testing the trial version or a Beta.

Solution: Not quick but effective. Uninstall everything through the script provided by Adobe: Adobe CS4 clean uninstaller and reinstall everything again.

References

• http://forums.adobe.com/thread/227476
• http://ubuntuforums.org/archive/index.php/t-676915.html

Office photo by schnaars (CC BY-SA) modified by Xavi Esteve

Modern browsers are now the vast percentage of website users and it is quite safe to use advanced features from CSS3 to some HTML5 as well as one of the most needed features which is using fonts the user didn’t have in its computer. Google is making a great effort on enabling and easing this feature to all web developers by releasing a huge collection of open source fonts created by great typographers that generously have shared them.
You can either download all of them as a pack or have a look at the font screenshots here, once you download them go to the Font Preview to try some sample text and grab the CSS code which is auto-generated.

In the Google Fonts Pack (February 2011) you will find: Allan, Allerta, Allerta Stencil, Anonymous Pro, Arimo, Arvo, Bentham, Buda, Cabin, Calligraffitti, Cantarell, Cardo, Cherry Cream Soda, Chewy, Coda, Coming Soon, Copse, Corben, Cousine, Covered By Your Grace, Crafty Girls, Crimson Text, Crushed, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, Fontdiner Swanky, GFS Didot, GFS Neohellenic, Geo, Gruppo, Hanuman, Homemade Apple, IM Fell DW Pica, IM Fell DW Pica SC, IM Fell Double Pica, IM Fell Double Pica SC, IM Fell English, IM Fell English SC, IM Fell French Canon, IM Fell French Canon SC, IM Fell Great Primer, IM Fell Great Primer SC, Inconsolata, Irish Growler, Josefin Sans, Josefin Slab, Just Another Hand, Just Me Again Down Here, Kenia, Kranky, Kristi, Lato, Lekton, Lobster, Luckiest Guy, Merriweather, Molengo, Mountains of Christmas, Neucha, Neuton, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Orbitron, PT Sans, PT Sans Caption, PT Sans Narrow, Permanent Marker, Philosopher, Puritan, Raleway, Reenie Beanie, Rock Salt, Schoolbell, Slackey, Sniglet, Sunshiney, Syncopate, Tangerine, Tinos, Ubuntu, UnifrakturCook, UnifrakturMaguntia, Unkempt, Vibur, Vollkorn, Walter Turncoat, Yanone Kaffeesatz

Download the full pack here:
Google Fonts Pack (February 2011) (9.89MB)

The list is constantly updated by the Google Fonts team and they give you the option to donate to the font authors so you can buy them a nice dinner to thank them.

An impressive freelance website for an Art Director with beautiful contrasts

A freelance work for a client who was looking for a stunning website that was simple but strong in which to display her works and enable their visitors to contact her. The website was designed entirely in Adobe Fireworks and developed to a WordPress powered blog with custom PHP. There was no SEM involved although she asked for strong SEO of the website. The name of the client has been changed for privacy.

Here’s a check-list of terms that every Web Designer or Developer should know. It’s not an extensive tutorial with long definitions, just a list to check how much you know. The purpose of this post is basically intended for non-native English speakers that work in English design agencies so some of the words you’ll see here are really basic (although frequently used while at work).

Some of the definitions are made by me keeping them short and strictly to the point, some are from Wikipedia. The Learn more links to the Wikipedia article or sometimes to another website I found had more accurate information than Wikipedia.

(I’m working on it but published it prematurely since a friend needs it urgently, please search the words not still defined in Google. I’m also planning on translating the words into Spanish. Any help/feedback or corrections are truly appreciated.)

Job titles description

1. Graphic Designer: A graphic designer that does designs for things that need to be printed (posters, magazines, vouchers) or other digital pieces. Learn more
2. Web Designer: A graphic designer that specializes in designing websites. Learn more
3. Web Developer: A programmer that codes websites, converting static images to full-featured coded pages with interaction features. Learn more
4. Content Editor: A writer that creates articles, news or posts for a website. Learn more
5. Freelancer: Someone that works on short-term contracts (one week to six months but can be more or less). Usually from home but can work in the client’s office. Learn more
6. Project Manager: Learn more

Project Management vocabulary

1. Branding: The application of marketing techniques to a specific product, product line, or brand. Learn more
2. Specifications (especificaciones): Learn more
3. Deadline (fecha límite): Time when a milestone needs to be finished. Learn more
4. Milestone: The end of a stage that marks the completion of a work package or phase. Learn more
5. Target (objetivo): An objective that needs to be met. Learn more
6. Agile Development: An intense but really effective work methodology. Learn more

Graphic Design vocabulary

1. Mockup: (Esbozo) Learn more
2. Wireframe: Learn more
3. Assets: Files used during the creation of something.
4. Copy: The text that goes in a web page.

Frequently used adjectives in web design

1. Intuitive: Learn more
2. Edgy:
3. Minimal: Simple, with the fewest objects as possible and using white space in a smart way.
4. Sleek:
5. Trendy:
6. ‘Make it pop‘: Just ignore that.

Web Design vocabulary

Web Development vocabulary

1. Update (actualizacion): Part of a software that includes fixes and tweaks.
2. Upgrade (mejora): Bigger than an update, has major changes to the code.
3. Alpha release: Really early version of a product, barely functional and not thoroughly tested.
4. Beta version: The next stage in development of a product.
5. Local Server (): The server in your computer or Intranet with private access.
6. Development Server (): The server used to develop websites.
7. Staging Server (): The server used to test websites, also known as Testing Server or Environment.
8. Production Server (): The server that is published to the Internet and publicly viewable, also known as Live Server.
9. Bug: Error in the code.

Business vocabulary

1. Project Plan: Learn more
2. Salary raise (aumento de sueldo).
3. Promotion (aumento de rango, promoción)
4. Job title: (título de la profesión)
5. 60K pa: 60,000 pounds per annum (year). Learn more
6. Preview: Learn more
7. Purpose: Learn more
8. Outsource: To ask for an external company to take care of a part of a project or work. Learn more
9. Circa (aproximadamente): around, approximately. Learn more
10. Cold call: a business call to someone who doesn’t know you.

Parts of a website

1. Header (cabecera): The top part of a website that repeats along all the pages in the site. Usually composed by a logo and main heading.
2. Menu (menú): Learn more
3. Body (cuerpo, contenido): Learn more
4. Sidebar (barra lateral): Learn more
5. Footer (pie de página): Learn more
6. Quote (cita): Some text that someone wrote, normally stating an opinion on a product or service. Learn more
7. Heading (título): Learn more
8. Post (artículo): Learn more
9. Nips (trocito de texto): Small pieces of text.
10. Banner: A graphic advertisement in a website. Learn more
11. Front page (página principal): Learn more
12. Sitemap (mapa del sitio): A site map is a list of all the pages a web site has, it is accessible to crawlers or users. Learn more
13. ToS: Terms of Service. Learn more
14. Logo (logotipo): Learn more
15. Tagline (Eslogan): A tagline is a variant of a branding slogan. Learn more
16. Strapline (Eslogan): Secondary sentence attached to a brand name. Learn more
17. CTA (botón de acción): Call-to-Action. Se refiere al boton xxx Learn more
18. Theme (): A design for a website. Learn more
19. Template (plantilla): Sometimes used as a synonym for Theme. Sometimes means
20. Testimonial (): Someone’s personal experience with a product or service. Learn more
21. ROI: Return On Investment. Learn more
22. Pro-Rata: Learn more
23. Contract (contrato temporal): Learn more
24. In-house (interno): Something done for the company. Learn more
25. FY10: For year 2010. Usually used to refer for previsions and planning on that year. Learn more
26. Q3 (tercer cuatrimestre): Third Quarter. Three months. Q1 is January to March, Q2 is
27. UI (interfaz de usuario): User Interface. What the user sees and interacts with. The placement of buttons, links, text, forms… Learn more
28. Drop down (menú desplegable): Learn more
29. Radio button: Learn more
30. Checkbox (casilla): Learn more
31. Textarea (caja de texto grande): Learn more
32. RGB (Rojo, Verde y Azul): Red Green Blue. A way of writing colours for screen displays. The amount of colour for each. From 0 to 255 (like 255.0.0 would be pure red, 0.0.0 would be black, 255.255.255 is white). Learn more
33. Hexadecimal: A way of writing colours usually for websites. Learn more
34. CMYK: Cyan, Magenta, Yellow, K. A way of writing colours for printed media. Learn more
35. Web Safe colors: Traditional color palette used tune ago when screens could display limited colors and these looked different in every screen. It is not necessary to stick to web safe colors nowadays. Learn more
36. CAD: Computer Assisted Design. Used by architects and engineers to produce 2D and 3D graphics of models, buildings, etc. Learn more
37. Web 2.0: A new way of Internet were users have much more importance and can not only read content but rate, comment and participate. Learn more
38. Social network: Learn more
39. Professional network: Learn more
40. Bookmarking network: Learn more
41. Front-end: Designs the user interface with its buttons, images, boxes… and animations.
    Languages used: HTML, CSS, JavaScript, jQuery…
42. Back-end: Programs the coding and sets up the database.
    Languages used: PHP, MySQL, ASP, ASP.Net, Python, ColdFusion, ActionScript…
43. WWW: World Wide Web. The Internet. Learn more
44. FTP: File Transfer Protocol. A protocol to upload and download files from a server. Learn more

Office talk

1. ASAP: As soon as possible.
2. ATM: At the moment.
3. IMHO: In my honest opinion.
4. LOL (jajaja): Laughing out loud.
5. TY: Thank you.
6. TA: Thank you.

Techy Vocab

1. HTML: The language in which websites are coded. It is not a programming language but a markup language. Learn more
2. HTML5: The new version of HTML. xxx Learn more
3. Flash: Learn more
4. ActionScript: Learn more
5. FLV: Flash Video. A video format commonly used by web streaming services liek YouTube, Vimeo… Learn more
6. Quicktime: Learn more
7. RealPlayer: Learn more
8. Java: Learn more
9. Silverlight: Like Flash but made by Microsoft instead of Adobe. Learn more
10. CSS: The style sheet of the websites that define colors, background images, font sizes and families, etc. Learn more
11. JavaScript: A website programming language often used to enhance websites with animations, drop-down menus, etc. Learn more
12. jQuery: A JavaScript framework that makes JavaScript much easy and faster to code. Learn more
13. AJAX: A JavaScript technology that sends and receives information in a web site without refreshing the whole page (Facebook uses it a lot). Learn more
14. PHP: A website programming language. Very popular. Learn more
15. Cross-browser: Learn more
16. ASP: Learn more
17. ASP.NET: Learn more
18. Perl: Learn more
19. Production Server: Learn more
20. Development Server: Learn more
21. Apache: A web server software that can be installed in Windows, Linux, OSX and Unix. Learn more
22. IIS: A web server software from Microsoft and for Windows only. Learn more
23. Linux: (correctly written as GNU/Linux) Learn more
24. Unix: Learn more
25. OSX: The newest version of the Apple Mac operative system. Learn more
26. Chrome: An internet browser from Google. It’s fast and simple. Learn more
27. Safari: An internet browser from Apple. It’s simple and the default browser on Macs. Learn more
28. Firefox: An internet browser from Mozilla. It has lots of features and addons that help web developers and designers. It is slow and memory consuming. Learn more
29. IE: Internet Explorer. An internet browser from Microsoft. Version 6 doesn’t follow the web standards and it is a nightmare for web developers. IE7 is better but still not compliant and IE8 is quite compliant. Learn more
30. W3C: World Wide Web Consorcium. A non-profit organization that focuses on standarisation of the WWW. Learn more
31. Ruby: Another programming language. Learn more
32. RoR: Ruby on Rails. Means Ruby coding powered by a Rails server. Learn more
33. SQL: A database language. Learn more
34. MySQL: A variation of SQL optimized for websites running PHP. Learn more
35. Framework: Learn more
36. Creative Commons: Learn more
37. Copyright: Copyright is the set of exclusive rights granted to the author or creator of an original work. Learn more
38. Cookie: Learn more
39. Variable: Learn more
40. Session: Learn more
41. LAN: Learn more
42. WLAN: Learn more
43. WAN: Learn more
44. IP address: Every device that connects to the Internet has one (computers, web servers, mobile phones, printers…) Learn more
45. Hostname: Learn more
46. DNS: Learn more
47. Domain name: Learn more
48. SEO: Search Engine Optimization. Tricks and practises to improve websites so that target specific keywords in a search engine and appear first in the results. Learn more
49. SEM: Search Engine Marketing. Learn more
50. SERP: Search Engine Page Results. Learn more
51. Conversion:When a user ends a process (like visiting an informational website and buying from it). Learn more
52. Affiliate: A company that gives comissions to other companies. Learn more
53. PPC: Pay per click. Learn more
54. Google Adwords: A way to advertise. Learn more
55. Google Adsense: A way to show ads and earn money. The main difference to other advertising systems is that shows relevant ads based on the website content or what the user searched. Learn more
56. Google Analytics: Learn more
57. WordPress: A very popular and easy to use blog system. Learn more
58. CMS: Content Management System. Learn more
59. Blog: Learn more
60. Microblog: Learn more

Popular websites

1. Twitter: A real-time microblogging tool. Learn more
2. LinkedIn: A professional network to publish your work experience, offer job positions, etc.
3. Stumble Upon: Learn more
4. Digg: Visit site
5. Meneame: The spanish version of Digg. Learn more
6. Design Float: A Digg for web developers and designers. Learn more
7. Delicious: A bookmarking network. Learn more
8. Reddit: Learn more
9. Flickr: Learn more
10. DeviantArt: Learn more
11. Behance: Learn more
12. Posterous: A blogging system that automatizes everuthing and everyone can post content very easily and quick. Learn more
13. Tumblr: Like Posterous but being even more simpler (but maybe even more powerful). Learn more
14. Vimeo: Like YouTube but for artists and creatives. Higher quality videos.
15. Engadget:
16. NetTuts:
17. MakeUseOf:
18. Lifehacker:
19. Stack Overflow: Questions and Answers for programmers
20. W3Schools: Online tutorials for web development.

Advanced techy vocab

1. Localhost: The hostname of the current computer, device or server. Learn more
2. 127.0.0.1: The IP address of the current computer, device or server. Learn more
3. DoS: A denial of service attack, the most common and easy attack to web servers. It exhausts the server by sending tons of resource consuming requests. Learn more
4. XSS: Cross Side Scripting. Learn more
5. SQL injection: Learn more
6. Phishing: A fraudulent verbatim copy of a website that pretends to be the real one but gathers personal information such as passwords from users. Learn more
7. RegEx: Regular Expressions. A kind of coding that can extract and interact very accurately with text (detect valid e-mails, extract data from code…). Learn more
8. Microformats: Learn more
9. MVC: Model-View-Controller.
10. OOP: Object Oriented Programming.

Polite sentences

Interviews

• Excuse me, I have an appointment with Mr. Smith.

Top image by Stephen Mitchell

Content

Check if element exists

if ($('#infobox').length) { /*exists, do things here*/ }

Change attribute

$('#name').attr('title', 'Hello!');

Change content of a container

$('#main').html('<p>Lorem ipsum</p>');

Change page title

document.title = 'Hello!';

Add content before/after

$('table>tbody>tr:last').after('<tr><td>This is now the last row.</td></tr>');

Style

Add or remove classes

$('#main').addClass('red');
$('#main').removeClass('blue');

Check if element has class

if ($('#main').hasClass('green')) { }

Ajax

GET with parameters

$.get("page.php", { action: "edit", id: 38 },
  function(data){
   $('#infobox').html(data);
});

Loops

Do something with every matching element

$('table>tbody>tr').each(
  function (intIndex) {
    /* Modify all table rows */
});

Maths

Check if even or odd

if ($id % 2) { /*even*/ }else{ /*odd*/ }

Force string to integer

parseInt(var);

Filter words, numbers or symbols

$(this).attr('id').replace(/[^0-9]+/, '');

Timer

setInterval(timer1s, 1000);
function timer1s() { /*run this every second*/ }

Here are some useful tips I would like to share about my experience in the jobseeking world and what I have learned to create an online reputation as a front-end web developer and designer and to place myself in this huge, ever-changing and thrilling market. I have been working closely with recruiters from around the world for more than 2 years, freelancing for several more and lived some time with an IT recruiter who gave me great advice.

Personal Website

Your website should be simple, fast and intuitive. Page should load in 5-10 seconds as maximum, make no more than 10 requests (at least until the DOM is loaded) and weight less than 500KB. As an example, my main page takes 2,5 seconds to load, makes 10 requests (including Google Analytics and Clickheat JS files) and weights 320KB.

Although these requirements, you should have a strong and unique design so experiment with several designs and the best way to code it.

Domain name

If you are looking for a job as an individual, go for yourrealnameandsurname.com. No discussion on this. Having your name in the URL will increase your professional reputation while making you more visible and easier to find. If you have a common name (search your name in Google) then get your domain and variants ASAP.

People looking at your personal website are usually recruiters, managers or professionals that don’t want to read extensive essays or learn something complicated. They just want to know more about you and they may just need one thing. Some may have read your CV and are interested in viewing your portfolio or download the most recent version of it, some may have just visited a website you have created and want to find a way to contact its creator.

As per the KISS principle and usability standards, users should be available to reach your portfolio, contact information and CV in no more than one click from the start page.

Online portfolio

Should contain between 4 and 12 recent websites/projects/templates each of them containing:

1. a brief description
2. some pictures focusing on parts of the website you want to show
3. a link to the website or to a full screenshot if it is not online

Try to keep it up to date with the best projects you’ve ever participated in and describe the different areas of expertise of each being as varied as possible.

Contact information

Provide at least two different ways to contact you: e-mail, phone and/or online form. Let the user decide which one they prefer.

Curriculum Vitae

Provide a direct link to a Word Document (.doc) file. Most recruiters prefer reading Word documents rather than PDFs. Extra point in providing a PDF version of it, your resume will be more visible to web spiders, PDF libraries and recruiter research tools.

You need to upload your CV to all the job boards you find available or useful. Although updating your CV in all these sites is a tedious task, you should always keep the CV as updated as possible, at least the one hosted in your website.

It is very helpful to add a note at the bottom of your CV stating something like “Please get the latest version of my CV from mywebsite.com/cv.doc“.

Here’s an example of an HTML/CSS CV format ready for you to use.

Brief description of you

Don’t extend it too much, two lines of text are enough. Describe yourself a bit, your hobbies or what are you up to at the moment. Try to be passionate and positive.

Optional features

There is no hurry on these, and they’re not strictly necessary. But they will help spread and create you a strong name around the Internet.

Professional Blog

If you like writing, linking to a professional blog of yours is a good way to let interested people know more about you. It also gives an idea of what you like/dislike, your communication skills and your passion in your job. Keep the blog restricted to work, do not talk about how much you hate chickpeas.

Extra point if your blog follows the same design patterns as your personal website since it creates correlation.

Networking sites

Links to professional networking sites are great ways to increase your professional network. Even if you just visit professional networks once a month or never, it is a great point in having them.

Whenever you receive an e-mail from an agent or relevant employer, check if they have their profile linked in their signature and send them a connection request.

The most important professional networking sites you should (at least) have a profile in, are:

• LinkedIn
• Twitter
• Behance

A photo of you

This is a tricky one and needs to be chosen carefully. A picture of yourself increases confidence in your possible next client or recruiter. It also helps to customize your website and give a more personal feel.

Spend your time in deciding which photo you want to show. Should you be wearing a smart suit? Should you smile? Indoor or outdoor? Black and White or coloured photo? That depends on what impression you want to give. In my case, I choose to show a quite casual picture of myself by following these key points:

• Optimistic and passionate: Big smile
• Friendly and open-minded: looking straight at the camera without any lame pose
• Practical: informal clothing
• Modern and cosmopolitan: Times Square background full of contrast and colours
• Strong personality: Sunglasses

Remember to retouch your picture as much as you want (increase contrast, add some neat filters…). It is also a great way to demonstrate your Photoshop/design skills.

The design

Design is very very very important even if you are a back-end developer. There are basically two options:

1. The first one is to create an effective design without too much fancy details.
2. The second way is to create a trendy design which will be much more eye-catching and demonstrate that you are up-to-date with technology. The disadvantage is that you need to be careful and may need to redesign your website in a few months or a year.

Quick tips and common mistakes

Web design

• Use no more than 3 colours: one for the background, one for the text and one for the headers and links.
  In my site I use white as the background, black as the text and blue for the headers and links. I have a pattern textured background using black and blue variations outside the “canvas” to provide a modern look.
• Don’t mix squared and rounded corners if you are not sure. Same goes for solid and gradient backgrounds.
• Keep element spacing even: set a standard separation of 10px or 20px and apply it whenever possible. Same goes for font sizes and text leading.

The Front-End

• Your website is part of your portfolio, and a great way to show your coding and semantic SEO skills. Do it the best you can and keep it improving when you get the chance or come with new ideas.
• Attention to detail
  Try to keep everything as perfect as possible without cluttering the page with useless crap. Customize your own 404 and JS disabled messages and add some funny details to your page to give it a warm touch. Maybe have your last tweet printed there or a cool jQuery effect. In my case, when you put the mouse over my picture, it says “Hi, it’s me!“. It is completely useless but some people appreciate these little Easter eggs.

Simple usability testing

Once you have finished with the mockups or a quite decent wireframe, get some real people and have them do the test.

Although your target users may probably be agency recruiters and CTOs, you should test the usability of your site with people from different sex, age and profession. The easiest way is to get one of your parents/sons, your brother and another friend.

Some useful questions are:

1. Can you find my e-mail or phone?
2. Can you download my CV?
3. Tell me one of the recent projects I have been working on.
4. Go to my LinkedIn profile (advanced users).

All of these questions should be answered in less than 10 seconds. Expect unfamiliar users to take longer than what you would consider usual. This simple test should take no longer than 10 minutes.

Your Curriculum Vitae

The most important thing you need to know: the traditional resume structure does NOT work for web developers.

Now that you know that, get yourself a whole day, weekend or so and start creating it from scratch.

Structure the CV in order of relevance to the reader:

1. Programming languages, Software and Skills
2. Professional Experience
3. Professional Awards/Goals
4. Education
5. References

Do not add a picture of yourself in the CV.

Do not write your age, it is not relevant at all and some people (non experts) may disregard you just because of being too young or too old.

Keep it improving, correcting and adding things you learn from interviews.

Interviews

Won’t talk much about the typical things you need to do, but think this is necessary to highlight:

• Your first interviews are going to go wrong. Don’t doubt about it. You are used to design, program and document under strict stressful deadlines during non-stop 12 hours in front of a computer, not to explain your career randomly to a stranger that asks questions. With this in mind, go to the interview to practice your convincing skills. Once you get out of there, note down every time you struggled and why. Try to correct it and improve it next time while searching your CV for leaks.
• If you feel comfortable talking about something in special, write your CV in a way that you mention that but not everything of it, leaving the employer the possibility to ask questions on it.
• If you get the same question again and again, add that information to the CV. If that doesn’t work, check if your CV is too long, an understandable reason why people won’t read it completely.
• You do not need to wear a tie and a suit, but dress nice. In your future job you’ll be facing Mr. Keyboard, Ms. Mouse and the Screen twins so there is no need to be immaculately dressed. Although a minimum of decency is required. The most, the better.
• First thing you should do when meeting your interviewer is to reward him with a sincere smile.
• If you don’t know anything at all about something then just be extremely honest and say “No, I do not know anything about it”. Most of the employers expect and want you not to know everything but want you to have the willingness to be flexible and learn. Caution with this, you should just recur to this once in an interview, excess of doubt may get you disqualified.
• Abstract questions suck. There are two types:
  • The typical ones: “What are your strengths and weaknesses?“
  • The I-can-read-your-mind ones: “What would you take to a desert island: a fork, a tire or a guinea pig?” or “How do you put a giraffe in a fridge?“.

  Sadly, you will need to have an answer prepared for the typical ones. For the other ones, just try to be as abstract and unexpectable as possible. Focusing on being practical and not serious or dramatic.

• Sleep well the night before an interview and eat an amazing breakfast the interview’s day.
  Interviews are exhausting and you need the better out of you to multi-task your words, emotions, body language and take mental notes on the interviewer, the interview itself and company/business details. A good rest and meal will improve your mood and positiveness.
• You do not need to bring a printed portfolio if you have it online. Working for an Internet company that doesn’t have a laptop available for at least 10 minutes during your interview is not worth it in my honest opinion.
• Be flexible with the interviewers, but not in excess. Or you will start the never-ending interviewing loop in which they require you to be interviewed by 5 different people on different days.

Additional notes

If you are not familiar with any of the terms used above, check my English Web Design definitions post or Google them right now! The terms I have used above are in no way complicated and every interviewer will expect you to know them. If they ask you a question about the DOM and you don’t know what that means, you are doomed.

Once you get your site up and running, advertise it! Paste your URL in your e-mail signatures, put it as a status message in your favourite chat services and add it to your Facebook, LinkedIn, Delicious, Twitter and other networks.

Post dedicated to Ahmed and Yaser, hope you find it useful :-)

24 columns of 30px width separated by 10px spaces which make 950px width in total.

Paste it into your template with your favourite editor (Photoshop, Fireworks…) and align everything to the grid. I recommend you use Blueprint CSS or a similar 24 column based framework when developing the front-end.

Download Blueprint Bitmap (37KB)

• 24 columns of 30px
• separations of 10px
• 950px total width

For a 3 column layout you would use 8+8+8 columns, for a two column layout 16+6 is good or for four boxes 6+6+6+6 columns.

Since I work in Fireworks for web design and I am a great fan of Blueprint, I will be releasing a collection of Fireworks templates ready to be modified, think as if they were some kind of PNG “framework”.