light weight images for the web

When posting images to your website, it is important to ensure that they are optimised for the web.

Yahoo has launched a very useful service: http://www.smushit.com

Which shrinks images nicely (even those which are optimised through photyoshop web optimiser!)

Worth bookmarking.

W3C validation

It is interesting to hear about W3C from Matt Cutts, a chap working at Google and answering questions about search engines optimisation.

Most of the websites, including Google, don't respect W3C standards. And there is no "direct" relation between W3C compliance and search optimisation or browsers compatibility.

I am sure that Google can aford the best front-end designers in the world... and I always find it amusing to see in front-end designers or in quotes**: produce 100% W3C compliant XHTML code.

This is a great objective to strive for 100% W3C compliant code, but can hardly be a requirement for complex dynamic sites.

** I must admit that I put this in proposals myself, when I know that:
1) it is achievable (semi-static sites)
2) it will re-assure the client who has been told that validation is mandatory for quality websites..

I just hope that the distribution of this video will help destroying this myth.

HTML td cells not respecting the attribute width

#results {
width: 24em;
table-layout: fixed;
}

table-layout: fixed will resolve the problem.

Sounds straighforward, but have been struggling with this for years until I found this article about 5 rarely used CSS properties on SitePoint.

floating window working with resize event

I spent a little while trying to figure out today how to get a little window sticking in the right hand-side corner of my browser, while resizing the screen.

Many examples are available out there, but found difficult to pick up a simple way to achieve this.

the best way I have found was this (suing JQUery code for DOM selection):


<script>
function findwidth(){
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
return winW;
}

function positionmydiv(){
var myposition = findwidth()-$("div.mydiv").width();
$("div.mydiv").css({position: "absolute", left:myposition});
}

$(document).ready(function() {
$(window).resize(function() {
positionmydiv();
});
});

positionmydiv();
</script>


You then can use

</div class="mydiv" id="mydiv">My text here..... </div>

Anywhere in your code, the div will float nicely and adjust with resize.

creating a palette for your website

I find it one of the most tricky part of the actual design process: defining your palette (or sets of palettes) for a web project.

A lot of theory is available about how to build your own palette, but unless you have done some serious studies in graphic design, pretty hard to get a good hand on the process.



Whoever you are using for the design of your sites (in house or external agency), try to ask how they came up with the palette next time you get some mock-ups... usually the answers are pretty vague.

I have tested many tools over the years trying to "automate" the process and always came across the same issue: too many choice! These palette tools give you 1000s of combinations to choose from, and you end up picking one at random (you have also websites offering selections of palettes posted by users, such as http://sa.pantone.co.uk/pages/MYP_myPantone).

Until I found this tool - the kind of tool which make you think "why did nobody else think about it before!".
http://www.degraeve.com/color-palette/

Upload a picture conveying the "look and feel" you have got in mind, and the tool will extract the palette for you.

The process of defining a palette for your clients becomes then so much simpler:
1) Ask them to provide with a few photos they would like to use on the site
2) Extract the palette for each of them
3) Ask them to select between the different palettes suggested

CSS trick: center horizontal menu

First time a came across this issue today, and then realised how common the issue was amongst front-end designers.

Issue: web designers tend to rely on cut and paste code when designing menus, without understanding fully what the actual CSS does.

If you google for "CSS horizontal menus", you'll find loads of valid examples.

e.g.: http://www.sovavsiti.cz/css/horizontal_menu.html

the trick is to use li {display: inline} in order to get the listed items aligned horizontally (li is by default defined as "block"). But if you then need to apply specific styles such as background, or padding (which you will probably need to make the menu look pretty), you are then stuck - display: inline prevents you from applying these types of style.

The recommendation from sovavsiti is to apply a float: left, instead of display: inline, which achieves the same effect (align menu items horizontally) while keeping the block property for display, which allows more styling options.

But this is where things start going wrong
The float: left property prevents you from using the align: center property, and you end up banging your head on the wall trying to work out how to modify the actuall css in order to center your menu => wrong approach.

The right approach (well, in my opinion any way) is to get back to the basics.
1) You cannot use float: left because it prevents you from centering your menu
2) You cannot use display: inline alone without loosing the ability to style your menu items with background images/colour, padding, etc ..

Solution: once you have described the issue properly, the solution is then straightforward: use span within the li to be able to apply the missing styling properties. Easy, isn't it?

An example is available at: strctlycss


Conclusion: it is often a matter of finding what the actual problem is. Once you understand exactly what your CSS does, and its limitations, the solution is then straightforward to find.

Accounting for small web design companies

I recently decided to pay a bit more attention to our account, and start learning about how to use accounts for management.

And it is amazing the impact of understanding your accounts can have on your business, regardless your turnover.

And the benefit of using a web design business is that it is quite straightforward to keep your accounts in order, without the need for sophisticated accounting software - 3 spreadsheets are enough.

1) Bank statements:
Download your bank statements on a monthly basis, and keep them on one sheet. And flag each transaction with a category:
1.1 for debit transactions
bank charges, transport, entertainment, telephone/internet bills, office supplies, call handling/virtual secretary, hosting, domain names, events fees, online tools cost, cash, VAT (if you are registered) , suppliers cost (try to specify which type of service they provide, such as offshore development, accounting, translation, etc .. )
1.2 for credit transactions
invoice (try to write down the reference if possible), cash back

You may need some additional categories for odd transactions, but categories above should cover pretty most of your transactions.

Important Note: Try to keep business account separate from your personal account. If you buy a tube ticket, and need to record this as a business expense, use your business card, not personal account. You then have just to worry about the statement you download from your online business bank account.

2) P&L
This is how you find out if you are doing things right, or if production is costing you too much , if you are spending too much in advertising etc ...

2.1: Revenue
The revenue is the sum of all the credit transactions - cash back

2.2 Gross profit
revenue - sum of all cost related to sales (suppliers cost, call handling/virtual secretary) - deprecation expenses **

use a 25% ratio. If you have bought a computer worth £1000 this year, it is costing you £250 in deprecation expenses this year, and will cost you £250 each year for 4 years. Don't ask me why it is considered as a cost related to sales...still cannot figure that out.

2.3 Net profit
Gross profit - sum of costs + cash - cashback

----------------------------------------------------
If you keep this in order, it will save you loooooads of time in the long run. these are useful data, but you need a balance sheet to start running proper analysis about your business... which I will write about in the next post.

Safari 3 - CSS hack

A quick tip about how to set up a CSS rule for Safari (all versions) only.

Problem: The way Safari renders some fonts is different from IE or Firefox (exemple: courier).

For courier, the bold version renders well in Safari, but not in IE or Firefox. And I had to ensure that the font would be normal in IE or firefox, and bold in Safari.

The "#" hack doesn't work with Safari 3 beta, but is the one which is the most popular. The following post offers alternative hacks which work with all versions of Safari:
http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/

Note: the javascript one is probably the best bet
Safari is the only browser that supports the window property devicePixelRatio. So, similar to that old fashioned document.all, you can browser sniff this way:

<script type="text/javascript">
isSafari3 = false;
if(window.devicePixelRatio) isSafari3 = true;
</script>

Other solutions rely on the fact that some CSS properties are only supported by Safari at the moment (but may very well be supported in the future).

-------------------------------------------------------
Conclusion: only use safe web fonts. Once you start looking into using non standard stuff, you get into a lot of hassle....

Tidy up your CSS. Keep specificity in mind

I had to clean up a large CSS file recently (actually made out of 5 different style sheets), for a large website. The CSS had become totally unmaintainable, and tackling the CSS from scratch was necessary.

This is a bit of a daunting task, and turned out very challenging. I ended up writing a guideline for this type of job, ensuring that I had a process available next time I have to do this again, or ask someone else to do it.

One of the most painful task was to solve conflicts. And I recently found a article summarising the issue very well:
http://www.htmldog.com/guides/cssadvanced/specificity/

- p has a specificity of 1 (1 HTML selector)
- div p has a specificity of 2 (2 HTML selectors; 1+1)
- .tree has a specificity of 10 (1 class selector)
- div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
- #baobab has a specificity of 100 (1 id selector)
- body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

If you keep these rules in mind when you create your CSS file, you'll be able to structure it well, limiting the risk of conflicts.

If you have to assess an existing CSS document, pay attention to all nested document, and restructure first the CSS document in order to reflect this.


Other related articles & tools :: CSS specificity
- http://www.stuffandnonsense.co.uk/
- http://www.w3.org/TR/CSS21/cascade.html: which also describes inheritance, etc ..
- http://www.rebelinblue.com/specificity.php: nice little tool indicating specifity calculation for each item of your CSS

cost effective web design process

Clients and sales propects often ask me: how can you be so cheap compared to your competitors?

Let's give some pointers: the key is to identify each step of the process and address is with a different resource.

The usual process we follow for building websites at Jazar are:
1) Information architecture: how is the information going to be organised, navigation, sitemap, etc ..
2) front-end design: look and feel, html/css templates, javascript
3) backend integration: intergation to the content management system, adding specific modules (polls, shopping cart, etc .. )
4) Testing
5) release
6) finalise the build and release process for maintenance purpose

It can be a complex workflow for large websites, but depending on your expectations, a simple site should never cost more than £1000 to build (no custom development, simple information architecture, no software release process, no expensive maintenance):

step 1: Infornmation architecture
You should already know which products and/or services you want to present on your site. Just look at the way your competitors organise the information:
1) Check our their sitemap
2) Duplicate it, replace their products/services with yours
3) Try to find something which you can improve, and modify your sitemap accordingly (nothing wrong with taking copying, as long as you add 5% of your own creativity - no need to reinvent the wheel)
4) Submit the brief
-------------------------
FREE

step 2: "front-end design"
You can pretty much divide this step into 3 sub categories: graphic design, html/css integration, javascript add-ons.

If you don't have staff or freelancers available, you can always use online resources:
1) graphic design: www.sitepoint.com (budget: £250)
2) html/css integration: http://www.psd2html.com (budget: £200)
3) Javascript add-ons: don't need for a simple website.
-------------------------
Total: £450

Step 3: CMS integration
We typically charge £450 for CMS integration. This gives you then the ability to manage the content of your site later, without depending on us to do the work for you. We are not taking any risk here, just setting up the tool for you. No subjective output, no particular testing required, we outsource most of it, so Jazar is still making decent margins...

You end up with a site worth £900 - and you have paid £900 for it. Don't laugh - I have seen quotes ranging from £2000 up to £25000 for the same brief! The Internet is very new market, and it is challenging to really know what you buy - and it is quite challenging to know how much your website is really worth.

So, thanks to my little article, you start getting an idea about how to assess what you should pay for your website. Is it helpful? Of course it is. But the real question should be: what do you want to do with your website, and how much should you be ready to pay in order to reach your objectives?

With a £500 car, you will probably be able to go and do your shopping for a while, drive around to go and see your friends around, or even drive away for the week-end. But you'll never be able to qualify for a formula 1 race.

That's pretty much the same idea with websites - don't expect to generate many sales leads with a £900 website - you'll probably need to invest a bit more in information architecture, custom development and marketing.

Running out of time now to go through this, but will probably carry on offline (on our corporate site), since this post could turn very quickly into a sales pitch...

new blogger

Upgraded to the new version of blogger. The new version was around for a while, but no migration service was available. Here we google, they have now released the migration wizard, so ready to test their new version!

Google article on sitepoint, providing some insight about us, web develpers. The results of "the State of Web Development 2006" provides with interesting results such as which programming languages are commonly used, use of CSS, technologies used for web projects, etc ... a free preview of the document is available here.

The most interesting bits I found were the anylisis, crossing data in order to extend the profile. Example:

That's not a particularly radical idea, but the survey data actually lets us identify some of these clusters of related practices. As we explored the data, we found that the clearest clusters represented stereotypes of different types of web developers, so we gave them names:

• The "Guru" is strongly motivated toward technical excellence, actively tracks new technological trends, and is interested in learning how to use them to improve the quality and functionality of web sites.
• The "Entrepreneur" is strongly motivated toward building and retaining an audience, and is less interested in using technologies just because they're new.
• The "Designer" is strongly motivated toward the timely delivery of visually appealing web sites that meet the business requirements of clients.
• The "Corporate" is strongly motivated toward reliable, stable performance; the "Corporate works in a larger organization, and faces the unique mixture of constraints and opportunities that the corporate environment offers.

We can't make absolute predictions about what these different groups think, but we can identify clear trends. Our "Entrepreneur," for example, is most likely to say that he or she:

• runs an ecommerce business
• wants to learn about email marketing and search engine optimization
• develops with Dreamweaver
• is planning to get into blogging and podcasting

And the same person is least likely to say that he or she:

• works for a design firm or manages a company web site
• practices versioning, MVC, or OOP
• develops with a text editor, Visual Studio, or Zend
• uses AJAX, wikis, or Microformats

• 
  

What strikes me is that you probably need these 4 different profiles in your company. If you haven't got 4 staff already, well, you need to combine a bit of each. When we started Jazar, we were only 2, but had certainly to ensure that:
- we knew about online marketing, and websites monetisation: I took on the role of entrepreneur
- built a strong, reliable, and performant code: Olivier took on this role
- track new technological trends and decide on which ones should be implemented: I took on the role
- pay attention to design, and offer appealing visual solution: Olivier took on this role

In conclusion, the survey provides with an excellent insight on the state of webdesign today, and what skills are needed and what technologies/tools are available in order to set a succesful web design business.