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

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