Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today.

Although I’m cynical enough to remember that this is just another punch in the fight between Apple and Adobe (Web standards and Flash) I can’t help but feel excited that a company with the kind of influence that apple holds is pushing forward future standards. What’s more, it’s also worth noting that Apple is doing more than just talking – they really are putting their money where their mouth is with Safari scoring 100% on the Acid3 test for quite a while now whilst Microsoft Inertnet Explorer 8 can only claim a pitiful 20%.

With Apple’s support it won’t be long before client’s start approaching web designers with requests for CSS3 transitions, non-flash video and SVG etc. What a place the internet would be then!

Consider the following example as shown on the HTML5 spec:

<fieldset>
 <legend>Mail Account</legend>
 <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
 <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
 <p><label>Password: <input type="password" name="password"></label></p>
 <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
</fieldset>

I tried this attribute out for the first time quite a while back and was more than pleased to see the result in Safari. Unfortunately the problem as always was other browsers. Fortunately there is a jQuery plugin which deals with this problem and also offers some really useful extended functionality. Eventually jQuery won’t be needed at all but in the meantime it means there’s no excuse to leave placeholders out of forms that can benefit.

I’ve heard a few discussions regarding the proper use of the placeholder attribute, especially in regards to its position as a replacement to <label>. I don’t believe there should be any confusion on this matter, especially considering the W3C’s very concise explanation:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. [...] The placeholder attribute should not be used as an alternative to a label.

Also, ff a small hint isn’t enough for your input fields then you should probably consider using a title attribute instead.

Placeholders always make for a great finishing touch to any HTML form so enjoy them!

At Jolora we have also made a decision from day 1 to not work with Flash. What was once a huge crowd pleaser back in the 90s is in our opinion now holding back progression on the internet. Besides, we’re yet to meet a Flash-like project that we couldn’t tackle successfully with open standards such as Javascript. Our focus has always been on open technologies such as Javascript and HTML5 and by the sounds of it, Apple shares this philosophy:

“HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash).”

Although its still a long way off its ‘official’ release, HTML5 is already on the verge of becoming a major part of web development, with its place in some of the web’s most innovative sites and tools (including Google Wave). There are many small steps that forward-thinking design agencies are beginning to make to ease the transition but as ever HTML5 is currently squeezing through the bottleneck that is Microsoft’s Internet Explorer.

The age of the loading and splash pages are over – the future is HTML5, CSS3, degradable javascript and many other open standards such as SVG. Apple should be applauded for leading the way (at least in terms of web technologies) and Adobe (of whom we are in fact big fans) should be shifting its focus from Flash towards utilising open standards to their fullest potential. This is not to say that the web would be entirely better off without competition driven progress – but in this case web developers need to take a universal in favour of open standards.

With the release of the Internet Explorer 9 platform preview Microsoft has taken it’s first small step towards earning back a little respect from web designers. Finally, with better support for CSS3, SVG and HTML5 as well as a dramatically improved javascript engine, perhaps the next arrival of this dreaded lineage of browsers isn’t one to fear.

Possibly the biggest news is the Acid3 test result of 55 out of 100. This result has been heralded as a triumph, but considering Safari 4, released back in June of last year has a score of 100 out of 100 is 55 such a boasting point for a company with the resources Microsoft has at its disposal? Of course there is bound to be some further improvement before the final release of IE9 but is it really good enough to be that far behind?

Personally, I think we’ve come to expect so little from Microsoft on the web front that I think developers are just relieved that there has been at least some progress. It would be unfair to cast the final judgement yet on IE9, but in truth, I think that Microsoft will still have to do better if IE9 is to compete for our affections with the likes of Firefox, Chrome and Safari.

• 1920×1200 pixels
• 1920×1080 pixels
• 1680×1050 pixels
• 1440×900 pixels
• 1280×1024 pixels
• 1280×800 pixels
• 1024×768 pixels

(Read how to change your desktop background on Windows and Mac.)

You may not see the banding if your monitor has low contrast

In this short article I’ll show you my method of removing this graphic designer’s pet peeve. Below is a design for a client, I have magnified the problem area so if you look closely you can see the banding in the image.

In Photoshop I do the following:

1. Duplicate the problem layer by first selecting it from your layers panel and either right clicking and selecting ‘duplicate layer’ or by pressing CMD + J (CTRL + J on PC).
2. With your new layer duplicate, go to Filter > Add Noise and choose an amount of 2%. Also from the Add Noise dialog turn both ‘Gaussian’ and ‘Monochromatic’ on before hitting OK.
3. Position your new layer duplicate directly above the original problem layer in your layers panel.
4. Make sure the new layer duplicate’s blending mode is set to normal. Now lower the opacity to just before the point at which the banding begins to become visible again. For this example the opacity only needed to be at 8%, but the ideal opacity will vary depending on the strength and colour of the banding. By altering the opacity you should achieve the optimum level at which the banding is not apparent and nor is the noise.

Here’s the design after the above method was applied:

Despite its overhaul with the release of Safari 4 back in July, there hasn’t been very much attention surrounding the Safari develop menu. I thought a brief introduction to this powerful feature would give some other developers another reason to switch to Safari (and I mean brief introduction… there is no way I have the time to cover every option provided by this extensive tool!)

To enable the menu check ‘Show Develop menu in menu bar’ in the advanced panel of Safari’s preferences.

From the menu you have immediate access to some simple but very useful features such as adjusting the browser’s user agent or disabling various features enabling easier testing. But probably the most powerful option available from this menu is the Web Inspector.

Web Inspector

The Web Inspector is probably the feature that Firebug users will feel most familiar with. Simply translated Firebug’s ‘HTML’ and ‘CSS’ panels are called ‘Elements’ in Web Inspector; ‘Script’ remains the same; the DOM section is now built into the properties area of Web Inspector’s ‘Elements’; and ‘Net’ is now known as ‘Resources’. Finally, the console always sits at the bottom of the inspector displaying the number of errors and warnings in the bottom right.

Console

The console button makes it very easy to quickly pop open and close the console giving easy access to error and warning details as well as the command line itself. Probably one of my favourite new features is the auto-complete feature when using the command line. As you type the console throws suggestions at you, which you can cycle through with the TAB key before accepting with the right arrow key.

Auto-complete suggestions in web inspector’s console command line

This is a pretty neat time saving trick, however much command line experience you have. On another note for potential Firebug coverts, the command line is compatible with Firebug’s own.

Elements Panel

The Elements panel is probably where I spend most of my time during projects. Much like Firebug’s HTML and CSS panels, Web Inspector makes it ridiculously easy to try out changes to both areas of your code. However, I think most developers would agree that after using Web Inspector for just a bit you’ll find it far more intuitive and refined than Firebug’s editor.

Web Inspector's Elements Panel

The ‘Styles’ sidebar make it very easy to manage even the most complicated of stylesheets and I often use it to help me cut out unnecessary chunks of code. Also the ‘Metrics’ section offers you a handy border box model for your elements which can be edited directly and ‘Properties’ gives you a convenient way to browse and edit DOM attributes/properties.

I also find myself constantly inspecting clicked elements through the use of that little magnifying glass button in the bottom left of the Web Inspector.

Resources Panel

Every good designer knows that however beautiful a design is, it will only go to waste if visitors don’t hang around long enough to actually see it render. The most efficient way to improve website loading time is through reducing http requests and file sizes – both of these are measured through Web Inspector’s ‘Resources Panel’.

Web Inspector's Resources Panel

Apart from displaying results in a beautifully efficient manner, the panel also offers you the option to sort results through a variety of parameters including: response time, start time, end time, duration and latency.

Scripts Panel

I suppose the first thing that should be said about this panel is just how fast it is. It truly is dramatically faster than the tool included with previous versions of Web Inspector. I also find that leaving it enabled all the time doesn’t appear to have much effect at all on my browsing speed (although I’m sure some it does have some effect).

Web Inspector's Scripts Panel

From this panel you can see all the script resources that are included in the current page. You have standard controls for pausing and resuming scripts and whilst paused you can see the current call-stack and in-scope variables in the sidebar.

Profiles Panel

Put simply, the ‘Profiles’ panel allows you to see a break down of where execution time is spent within your page’s javascript.

Web Inspector's Profiles Panel

The user interface is essentially a sortable chart of results helping you to identify which functions have the largest performance impact on your scripts. I haven’t had much chance to look beyond the basics of this panel yet but I’ve found it easy so far to create profiles with the useful record button in the bottom left of the panel. Firebug users will also be happy to find out that the profiler is compatible with Firebug’s console.profile() and console.profileEnd(). Finally it’s also very easy to filter results with the focus (the eye) and the exclude (the x) button at the bottom of the panel.

Databases Panel

I’ve had very little interaction so far with the Databases panel. Essentially this tool gives developers a way to manage session storage and local storage – a feature obviously included for those working with the development of HTML5 applications. Unfortunately I have personally been missing a cookies section on this panel, which seems like a strange feature to leave out, but is hopefully just a temporary oversight.

Conclusion

So I suppose it would be a bit of a cop out to not give an answer now on whether Web Inspector is ready to ease the transition for developers from Firefox to Safari… but the answer truly is dependant on your requirements. I personally find the small niggles (such as lack of syntax highlighting in css) with Web Inspector worth working through because I’m much happier designing for webkit over any other engine. Developers who deal more heavily with scripts, databases and the such might understandably prefer to stick with Firebug for now but I’m confident that in time Web Inspector will make the improvements to cater for everyone.