In most browsers, you can change the opacity value of an element with a simple style rule in your style sheet like this:

.myclass {
      opacity: .5;}

Here, we are using a value of .5. The values for opacity are from 0 to 1 where 0 is completely transparent. Somewhere in between is what we are aiming for but the opacity level will depend on other colours in the element that you apply the opacity to. One thing to note is that if you apply the opacity value to a specific element, all elements within will inherit the same opacity value. In some circumstances, this can make text difficult to read but there’s usually a compromise that can be reached.

Note: Using the opacity property is one approach for achieving transparency in your web designs but the use of alpha transparent PNG images and RGBa transparency are alternative methods. See also Is CSS3 RGBa ready to rock?

For Internet Explorer, we need to use a couple of proprietary filters to achieve the opacity effect. So, our style sheet rule becomes:

.myclass{
opacity: .5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
}

The rather complicated looking filters are for IE8 (second) and IE7 (third line). See the IE Blog for more explanation. There’s a slightly shorter version of the IE7 filter available (for example, see opacity described here) but I’ve used the longer version.

Following on from a previous article about placing text over an image, I have created another example using opacity which shows the effect of an opacity value of .5 and a black background on the text paragraph.

Related: There’s a neat effect on the Shapeshed website where the footer area opacity is toggled on and off using JavaScript when you hover over the bottom of the page.

I think opacity provides a transparency effect that can look very good. Why not try a few opacity rules in your next style sheet?

As part of this project, we wanted to highlight several examples of different styles of kitchens, bedrooms and home studies that Chappelsons can provide. Rather than a list of images in a gallery, which can take up a lot of page space, we chose to use a JavaScript content slider called Easy Slider [which I blogged about here]. This is an attractive but compact way of displaying page content. This type of script using jQuery as its foundation has the added advantage that the slider content is still visible in the page for search engines to index. I think it works quite well.

Info: With JavaScript turned off, the images and slide content are still visible but just not displayed as a slideshow.

I went through a period last year when I was snowed under with work. That should be a good thing but if you are running your own web business, working from home, or freelancing from an office, getting everything done when you are in this situation can be quite stressful. I was the only person doing the work, answering telephone calls and emails, chasing up clients for payment, trying to keep in touch with the latest CSS methods, and an assortment of other daily administration tasks that I needed to do. Sometimes it felt like I was on a merry-go-round and could not get off.

Since then, I have tried to improve the way I do things so here are a few tips that I have found useful. They have helped me and I hope you find them useful as well.

1. Turn down new work

This may seem odd advice but if you are working long days and some weekends and your schedule is booked up for weeks ahead, there is no point taking on new work. Far better to tackle the work you already have and clear some of the backlog first. Along the same lines, if you have been accepting work that is perhaps not the best match with your skills, stop taking on this type of work. Concentrate on the best work for you!

How much work is enough? Set yourself a ‘booked ahead’ time in your schedule that you feel happy with, perhaps a couple of weeks ahead, and stick with it. Don’t take on work that goes beyond this. The time you set here is up to you. It might be several months if you are happy with this. For me, if I have several projects lined up for a few weeks ahead, that puts me in a good state of mind. More than enough to be getting on with but not so much that there is ‘too much to do’.

2. Divert your diversions

You may have many things to do during the day but reading and replying to emails and keeping up with Twitter are regular items in my daily routine. How best to manage these so that main priority work is not compromised? With email, I no longer have my email client open all the time. Instead, I check emails every couple of hours. It’s very rare that an email needs to be answered immediately and most clients realise that you need time to reply with a considered response, rather than the first thing that comes to mind.

Twitter can be another addictive diversion from your main work

Twitter can be another addictive diversion from your main work. Many web designers and developers keep in touch with what’s happening and make useful web contacts using Twitter. Me too! So it’s not something that I want to stop doing. On the other hand, having TweetDeck in front of me when I’m trying to solve a tricky CSS problem or come up with a web design that meets the client’s objectives is not always optimum. That tweet notification window just keeps popping up! For me, I find that I am more productive if I relegate my Twitter client to my laptop which sits to one side of my main desktop screen. This way, I know that top priority work is straight ahead but I can still keep a watchful eye on the Twittersphere to one side.

3. Organise your daily schedule differently

Over recent months, I have tried to I work on each task for longer, partly so that I can get some of these finished in one hit, rather than flit about between them. I try to work on each task for a minimum of 30 minutes. This helps me focus and concentrate. Spending an entire 30 minutes is not possible if the job is a small one but I try and tackle these smaller tasks at the start of the day so that I can get a few quick ‘wins’ out of the way. It might be purely psychological but it helps me if I have already finished several items by mid-morning.

4. Do your own thing!

I was so busy on one particular client job once that I forgot to maintain one of my personal website as much as I could have. However, when I went back to the personal website I found that it was quite a ‘release’ from the all-encompassing client job. As a result, I felt much better when the client job came to the fore again.

It’s important that you keep up with the latest methods

As a web professional, I think it’s important that you keep up with the latest methods and learn about new things on a regular basis. I don’t know about you but that’s how I got into this in the first place! Therefore, I try and do some personal learning every week. It’s not wrong to do this. You can often translate what you learn into a client job at some point. For example, I often read new tutorials and one of these was about Easy Slider, which is a JavaScript content slider script. A month later, I needed something similar for a new client project….guess what I used?!

In conclusion

Above all else, improving your own productivity will be about achieving the right balance of activities for you. The tips that I found useful will not suit everybody to the same degree but I encourage you to think about how you might improve your own productivity. I know that when I did this, I was able to improve mine.

These posts provide great insight into the thinking behind the redesign and it’s not often that you get this. I’ll definitely be following along over the next few days/weeks!

Twitter: Follow Andy Clarke and Relly Annett-Baker on Twitter to get their latest updates on the process (and their other tweets).

Info: JavaScript adds an extra level of interaction or behaviour to your website and it might be tempting to use scripts like these excessively. However, you should also consider what happens if your web visitors have JavaScript turned off. Is the content still visible? Does the website still provide a useful experience without these effects? See Unobtrusive JavaScript for more information on best practice.

Firstly, Tipsy is the tooltip script used by Facebook and Twitter to enhance the normal title attribute on links. However, just because these big guys are using it does not mean that you should use it without due consideration. If it fits what you are doing, go ahead and use it. It’s a neat tooltip script and rounded corners (using the border-radius property) and a subtle fade effect are also possible with Tipsy.

Secondly, one way of showcasing your content in a restricted space is to use a slider effect where the user clicks through several ‘slides’ of your valuable content. This effect has been used a lot recently but it’s great for showing website portfolios or images. I think it’s also great for showing text and image content. A slider effect can be great for website visitors and for search engines if you are using text in this way. The slider effect that I have been using is Easy Slider. This script has gone through several iterations now and it has a wealth of flexible configuration options. Just about everything has been thought of. Great work!

In both cases, these scripts provide added enhancements for your website visitors. I’ll let you know when the website examples I am working on go live.

Technorati : jquery, javascript

1. Microsoft Security Essentials

Yes, a new product from Microsoft in my list. Whatever next!? However, Microsoft Security Essentials seems to be a neat anti-virus programme that has a simple interface, is not bloated with countless features that I never use, does not hog lots of resource, but is more configurable than some other AV programmes that shall remain nameless. I have used a few AV programmes and this seems to be much better than many others in my experience because it is very unobtrusive and easy to use. And it’s free as well.

2. Notepad++

I mostly use Dreamweaver for web page and style sheet editing but sometimes I just want to do a quick code edit. In these cases, I have recently started using Notepad++. I have really only scratched the surface of what it can do but I particularly like the brace and indent highlighting. This really helps my PHP coding I find!

Reviews: Notepad++ gets a good review on CNET. Smashing Magazine reviews 35 Source Code Editors.

3. TweetDeck

Yes, anyone with a Twitter account will have probably used several Twitter clients. Me too. I really like DestroyTwitter and I reviewed it briefly. However, it does not support multiple accounts or real-time monitoring of keyword searches and that’s the main reason I have moved to TweetDeck. When I first used TweetDeck several months ago I found it too much for my requirements at that time and I did not like some aspects of the interface. I tried it again recently and it’s much more to my liking. I am not sure if that’s because the programme has been improved or if my usage has changed. Probably both. In any case, I really like using it and the multi-column views have definitely made my Twitter usage more efficient.

I am sure that you have your own favorite software but these three have really won me over at the moment.

Technorati : css, web standards

<blockquote>
  <p>Don't Make me Think!</p>
  <p><cite>Steve Krug</cite></p>
</blockquote>

The cite element is not the same as the cite attribute [which you might also decide to use].

With these tags in place, there are many ways of styling the blockquote content. I tend to stick with background colours and images but that’s just what I think works well for my clients. There are other possibilities for styling quotes and/or customer comments. Don’t let me stop you!

Info: The above quote is taken From Steve Krug’s web usability book of the same name.

Info: There are several mobile device website strategies that you may consider [including the option of doing nothing]. Cameron Moll’s Mobile Web Book is a good place to start if you want to know more.

Here are my tips:

• View your website on your mobile or cellular phone to see what it looks like. Use the default phone browser and another browser like Opera Mini. Use a friend’s phone as well. This will give you some idea about any problems that may be present.
• Make the code as semantic as you can. Use headings (H1, H2, H3 etc) and lists where appropriate. If the phone’s browser does not like your style sheet, at the very least it will recognise well-structured HTML.
• Get the source code order correct and put the main content first. In my case, the right column was first in the source code which meant that some mobile users with a smaller screen and default browser saw less important content first before the actual articles. I changed things around in my page template and style sheet to overcome this.
• Create an alternative style sheet for mobile devices. Use the media attribute with value = handheld when you link the style sheet. Put some simple styles in this that override your main style sheet. As a start, I decided to remove floats for the main <div>s and change their widths to % values rather than pixel-based values. The idea here is that the content will be linearized and more easily readable on smaller screens.
• View your website on your mobile or cellular phone to see what it looks like…..

These are just the first steps that I have taken. I will probably be adding more to my handheld style sheet in the coming months. I will also be revising some other websites accordingly and learning more about other mobile device website methods and strategies.