Whether you are an IT professional or a computer novice, choosing the right backup system to use at work or home is a difficult, and frankly uninspiring use of time, and one which almost always results in making undesirable compromises. There always seem to be far too many options and the good solutions come with a price tag that almost matches the cost of the system they were designed to support. A good backup system should satisfy, at least, the following requirements:

• It should be affordable.
• Operation should be reasonably well automated.
• It should be easy to restore to one of several points in time.
• There should be some redundancy.
• It should be simple to store some backups offsite.
• Media should be encrypted for security.

Read the rest of this entry »

Do you build websites? Do you offer your clients a content management system to provide them a method of updating their website? If so, what CMS do you use?

We all know IE6 is a bag ‘o’ shite poo right? Well unfortunately there are still loads of people who use it. This is not necessarily a problem in itself, after all as long and we do our CSS properly and understand the limitations of the browser, everything should be ok.

One area that does cause loads of headaches though is transparent PNGs and with more and more of our designs using gradient backgrounds and varying levels of transparency in their graphics, it’s inevitbale that you’ll have to use PNGs as opposed to GIFs to achieve the desired look of the site.

There is a really good and simple PNG fix which I’ve been using for a while and all you need to do to implement it is this:

1. Get yourself downloading this JS file – PNG Fix for IE6
2. In your header, insert the following code:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix();
   </script>
   <![endif]-->

3. The function DD_belatedPNG.fix loads the png fix at runtime and all you need to do now is pass it each element that needs the fix applying. This can either be a class or an id for example:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix('img, .png_img');
   </script>
   <![endif]-->

Some Further Notes on this:

1. You cannot use ‘body’ as one of your elements
2. It doesn’t work on <TR> or <TD> elements, but this *shouldn’t* be a problem should it
3. <INPUT type=”image”/> doesn’t work but why use a transparent PNG for a form button anyway?

What’s a CSS framework?

A CSS framework can help you achieve rapid development of websites, web apps and mashups. It eliminates repetitive tasks while prototyping designs by using a pre structured CSS/XHTML grid-based framework.

Main features of good CSS Framework is to:

1) Rapidly speed up our development time
2) Very small file size
3) Good documentation
4) A clean grid structure.

You will need a basic understanding of CSS to enable you to utilise the full potential of your chosen framework.

Frameworks currently available

960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Tutorial: A Detailed Look at the 960 CSS Framework

Demo: Live Demo

Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

Tutorial: A Closer Look At the Blueprint CSS Framework

Demo: Live Demo

The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

Tutorial: jQuery UI CSS framework

Demo: Live Demo

YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

Demo

Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

Demo

Articles explaining CSS Frameworks

What’s not to love about CSS frameworks?
CSS Frameworks + CSS Reset: Design From Scratch
What Are The Benefits of Using a CSS Framework?
Blueprint CSS Framework vs YUI Grids
Battle of the CSS Frameworks
The Lessons of CSS Frameworks
When to use CSS framework?

Archive44.com is a fun little project I decided to do on the spur of the moment. It’s basically an archive of over 900 front pages of newspapers from all over the world on the day Barack Obama, the first black African American, became President of the United States of America. When you put over 900 front pages together you really get a sense of scale and importance this day was.

Adobe revealed their new ‘traditionally themed’ Photoshop interface this week at their annual AdobeExpo. The drastic redesign has come after months of highly publicised campaigning by angry Anti-Adobe protesters who state that their current interface is “harming our planet”, and “is turning our young generation into mindless web2.0 obsessed vombies”.

A spokesman from Adobe said “This new redesign will revolutionise the way we design in the future. The new sophisticated layout and intuitive panels will help modern designers leave the world of Web2.0 behind and thrust the web into a new place, a place where animated GIFs will live happily with PNG’s and Serif fonts.”

Bill Bates, leader of the Anti-Adobe interface movement said… “It’s about time! I’ve always been a fan of Adobe in the past but when their new interface was released in 2002 I knew this would cast dark shadows over the traditional design era. Web 2.0 on the web is a direct result of that interface so we knew it had to go!”

He continued…

“Next is Microsoft 8’s new interface, it just sucks, and if left to spread amongst our unprepared nation we’ll all turn into f***……” *Interview cut short.

Let us know your thoughts, can this new interface really eradicate Web 2.0 from the web? Can this new interface really improve the quality of designs. And most importantly, would you pay £1,250.00 for the luxury?

Click to enlarge

Credit:Advertising Agency: Bates141
Creative Director: Hendra Lesmono
Art Directors: Irawandhani Kamarga, Andreas Junus
Copywriter: Darrick Subrata
Photographer: Anton Ismael
Published: August 2008

Some CSS news from the web design industry. I have cherry-picked these articles and tools, aimed specifically at CSS and web design. Enjoy!

My Top 10 Most Used CSS Class Names

Many developers are puzzled when it comes to assigning class names to elements and often end up using wrong ones. Class names should not describe how the element looks like or where is it placed. A good class name should describe what a certain element represents. Here are my top 10 class names with explanations. Hopefully it will give you a clearer image of what kind of class names you should use. Read more…

9 CSS frameworks for faster templates building

Frameworks are already widely used for Javascript or PHP development, and it is getting popular for CSS templating. It improves your workflow and lets you set up templates quickly with cross-browser compatibility in mind. Here is nine frameworks to make templating faster. Read more…

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork! Read more…

Useful resources to improve the look and features of HTML Forms

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics. Read more…

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process. Read more…

CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an “hot” discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout. Read more…

Creating easy and useful CSS Sprites

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them. Read more…

CSS SuperScrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. Read more…

Rich typography on the web

sIFR (Scalable Inman Flash Replacement) is a mix of Javascript and Flash that enables a web designer to move away from the restrictions of on being able to use web-safe fonts and pick the one’s they really want to use. sIFR isn’t to everyone’s taste however, mainly down to the fact that it is heavy on server load, with the relevant Flash, Javascript and CSS files taking a meaty chunk out of the browsers performance. My current agency have taken the steps to ban sIFR from all future web builds, mainly due to these inefficiencies.

Those shoes are too big for you son!

This news broke my heart, the first signs of rich typography on the web and it’s taken away from me by technical issues. Whilst I argued day and night with the developers, asking them to look harder at a fix or an alternative my words seemed to be falling on deaf ears, so I, a mere designer whose job it is to merely ‘colour in’ and ’stay between the lines’ decided to play sherlock and find an alternative.

Search for the Holy Grail

Well I didn’t find the Holy Grail, but I did find
FLIR (pronounced FLEER, Facelift Image Replacement).

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> ) to elements and everything in between!

It looks exactly what I’m after! It claims to automatically find what needs to be replaced and where (presumably through standard markup tags like a H2), with it’s nifty Javascript. I can’t see any flash at all in it’s downloads section so again I presume it isn’t required.

Explore FLIR for yourself >>>

Yep the good old CSS box model, explained once more. The CSS box model is a fundamental element of modern web design that all web designers need to master. This CSS box model controls and details the behaviour of many HTML elements, such as DIV, P, ul, so understanding this is a firm step forwards to better web design.

3D CSS Box Model

Jon Hicks, who’s a leading figure in web standards and userbility, has created this brilliant 3D CSS Box Model diagram and kindly supplied the original Illustrator file for me to modify and put on the site for you to look at, so a big thanks goes out to him.

Learning CSS from the beginning

CSS is an abbreviation for Cascading Style Sheets. Web designers use a CSS file to control the visual layout of a web page, grouping all styling declarations into one reference document while removing them from the HTML code that lies beneath the website.

If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the place to be. Over the next few weeks I’ll be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format. This week it’s…

CSS help for absolute beginners

Shaping up with CSS

Credit: All copyright and materials Slideshare.net.

Think you’re a CSS Guru?

Well I guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your street.