Articles Archive

PSD2HTML Review

PSD2HTML Review For several years, PSD2HTML have been the primary sponsor of Design Shack. We don’t like to suggest a service to you unless we have tried it ourself to ensure that it’s worth a recommendation. A recent addition to our network of sites, 13 Styles was in need of a redesign and I took the opportunity to use PSD2HTML’s service and document the process.

This article will be more than a straight forward review of PSD2HTML. We’ll be considering the basic idea of these type of services and considering when, and for who, they are appropriate. Honesty will be foremost, and I hope that you will gain a real insight into using a PSD to XHTML tool.

PSD to XHTML Services

PSD2HTML are one of the first companies to provide this service (you can see their original press release), but there are a huge number of competitors in the area today and a Google search for “psd to html” brings back over half a million results. Here is a table summarizing the main players in the industry (a more in depth list can be found at Most Sliced):

Service	Price ($)	Time (days)
PSD2HTML	153 to 211	less than 24h
Slice ‘n Diced	279 to 399	3-6
The Choppr	149	3
XHTML iT	119	1 day or less
XHTML Slicer	200 to 350	1-3 days
XHTMLGenius	250	3
XHTMLized	249+	up to 7 days
We’llcodeit	199+	3

We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.

The Process

The ordering process at the site is very simple. There are several options available, starting with either a basic or professional package. We opted for the professional, as semantic, search engine friendly coding was a must have. Other optional additions are:

Flexible width
Stretching the header and footer
Rollovers and dynamic menus
sIFR flash replacement
Commented CSS and XHTML code
Load speed optimization
Integration with CMS software (e.g. WordPress, MT, Drupal, Blogger, CubeCart)

PSD2HTML's Client Area

After submitting the order, we were contacted at the start of the following working day with a request to clarify some of the features in the submitted PSD file. By the end of that day, some 7 hours later, the markup was provided through their online ticket system. The speed of the turn around was incredibly impressive – it would take even an experienced designer far longer than 6 hours to code a relatively complex site such as the one we submitted. If you need results quickly, this service would seem to be a great resource.

Speed isn’t the only factor, however. We’re going to show you, in full, the code created by PSD2HTML for the new layout.

The Results

This is the original 13 Styles design:

Original 13Styles Layout

And this is a screenshot of the new version which we created in Photoshop:

New 13Styles Layout

You can see the full website through the following link. It is essentially the exact code which we received back from PSD2HTML, and will still require customization before being integrated into the real 13 Styles site.

View the design

Please feel free to take a look and judge the quality for yourself. We found it to be great – well laid out with the correct separation of content and presentation and semantic coding. We aren’t incredibly easy to impress, but this was certainly not a rushed, second rate effort. The process takes web design to a level of ‘mass production’, and high standards can be achieved through having a huge catalog of code examples and snippets to work from.

Do We Recommend Them?

The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:

Are short on time
Are a skilled designer, but not a coder
Require high quality, semantic and valid code
Want to have a personal, well trained contact creating the design

It can be argued that design does not come from the ability to write code, but rather the ability to create an intuitive user experience which is simple to operate and gives the desired message. Using a service such as this ensures that you are free to focus on these aspects without being bogged down in small issues such as cross browser compatibility.

PSD2HTML impressed us in every area when coding the 13 Styles site, and we would not hesitate to recommend using their service. Be careful, though, that you don’t lose the passion for crafting your own HTML and CSS.

PSD2HTML by psd2html.com

David Appleyard June 2nd, 2008 Posted in Reviews

Introduction to CSS3 – Part 6: Backgrounds

For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

View the live examples page

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:

.backgroundsize {
background: url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

CSS3 Background Resizing

Multiple Backgrounds

The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.

The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.

.multiplebackgrounds { 
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

CSS3 Multiple Backgrounds

Background Origin

CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.

In conclusion…

There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.

We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!

Why is Working Environment Important?

When you spend any length of time in one particular place, it is worthwhile making it somewhere you feel comfortable, at ease and productive. A study or office can often feel to be a confined area, prone to becoming strewn with papers and wires. Having a simple, clutter free place to work can help because:

It removes distractions, allowing you to focus on the task at hand
You feel relaxed and comfortable when working
It leads to heightened confidence, knowing that everything is well managed and in it’s place

The Desk

A driving instructor needs a comfortable car, a professional sportsman requires the latest, supportive trainers and a clown would be lost without his face paint. In the same vein, a good quality, well organised desk can help hugely with the workflow of a designer. Here are a few examples of really great workspaces:

Whilst it may not be possible to have a completely “paper-free” desk, restricting yourself to one or two notebooks and some post-its is usually an achievable goal. Many designers swear by Moleskine note books and the classic Fisher Space Pen. Finding tools which you work well with is the first step towards a really productive workflow.

The Room

The larger environment of your room is also worth considering. Whist constrictions are obviously always imposed by size and layout, the following are important aspects to get right:

Plenty of light, with blinds to dull it down on very bright days
A good air flow from large windows that you are able to open
Plants help to oxidize the air and look natural
Plenty of storage compartments to keep clutter down
Photos of family and friends (consider Jewel case frames)
A comfortable and supportive chair

Here are a couple of examples of very different, but very well laid out working environments:

Modern Workplace

Keeping it Clutter-Free

Finally, the dilemma of how to keep the clutter away from the desk top and into well organized piles, drawers and filing cabinets. We’ve put together a five step plan to getting closer towards this goal:

Buy a filing cabinet and drawer combo. All permanent documents you need to keep (e.g. receipts) go in the filing cabinet, all your pens, paper and accessories go in the drawer.
Buy a letter tray to keep documents separate. One tray is for documents yet to be looked at, one is for those to be sent, and another is for all your other miscellaneous bits of paper.
Go wireless where possible. Whether it involves investing in a wireless keyboard and mouse, a wireless router or a networked hard drive. Try to cut down on the wires trailing around your desk.
Scrap your paper organizer. iCal on the Mac is an absolute workhorse for me. I use it to manage all my business tasks and appointments, family birthdays, social events and finances. It syncs with my iPhone so I have all that information with me on-the-go, and it can be downloaded to other computers via .Mac. It is an enormous improvement over a paper calendar or diary.
Be ruthless. For a few weeks, aim to be ridiculously strict about having any clutter lying around on your desk. After you’ve consciously focused on it for a short time it will start to become something you do naturally.

iCal

See the benefits!

Once you have a relaxed working surrounding and are feeling in-control, you’ll start to see yourself working more efficiently, feeling more motivated and being more creative. When you don’t need to worry about when your next electricity bill is due, or where that important client brief is (under a pile of papers on your desk), it frees you to focus on what you love – designing.

Do you have any other examples of great workspaces? Clutter saving tips? Please do let us know in the comments – we’d love to hear them.

David Appleyard May 26th, 2008 Posted in Articles, Inspiration

Introduction to CSS3 – Part 5: Multiple Columns

Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

column-count
column-width
column-gap
column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Multiple columns using CSS3

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

h2 {
column-span: all
}

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

Multiple column span using CSS3

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Resizing

The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the resize:both; line:

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

CSS3 Resizing

Box Sizing

The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

CSS3 Box Sizing

Outline

Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:

Outlines do not take up space
Outlines may be non-rectangular

They can be created as follows:

.ui_outline {
width: 150px; 
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

CSS3 Outline Offset

In conclusion…

These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.

The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text. Remember, to see live examples of these features, take a look at our CSS3 example page.

WordPress

The WordPress homepage has recently gone through a complete re-design for the release of version 2.5 of the software. Whilst the site does have a huge amount of content, the homepage is simple and easy to read.

What works:

The use of orange to highlight download links makes the task that most people visit the site for a simple one
The style of language – “WordPress is both free and priceless at the same time” is a great sentence.
It makes WordPress understandable to someone who has very little knowledge of technical aspects. The words PHP and MySQL are not even mentioned!
Form input fields have been painstakingly designed

What doesn’t work:

The WordPress for Dummies image in the bottom corner clashes with the colour scheme
The fact that the site ironically doesn’t seem to be powered by WordPress

Textpattern

Textpattern is the most basic of designs and does not go a very long way to ‘selling’ itself to potential users. However, with all the focus being placed on textual content it does live up to it’s name. We use Textpattern to publish certain sections of Design Shack and we’re more than happy with it!

What works:

Splitting the layout using only text columns screams professionalism
A subtle use of yellow defines the Textpattern ‘brand’
The requirements and interface features are quickly found

What doesn’t work:

The site is focused towards the technically minded
There is no emphasized area of text which introduces the software
Screenshots are displayed in a fairly flat and uninteresting manner
The download link is tricky to see
The amount of content on the page is excessive, overloading visitors a little too quickly

Blogger

Blogger differs from the other platforms we are analysing as it is a hosted service. Powered by Google, it allows completely non-technically minded people to start publishing a blog with great ease.

What works:

Content is kept simple with a minimum of technical information
The ’3 easy steps’ idea easily guides the user through a straight forward process
Branding is used well, imprinting the Blogger logo on the readers mind

What doesn’t work:

The use of typography is confused, with too many different effects, colours and faces
The site lacks professionalism, clearly focused towards a certain user group
The icons look decidedly dated
Tables are used for layout in certain areas which really should be styled with CSS

Expression Engine

As the only commercially sold platform in this analysis, Expression Engine has a different motive to persuade publishers to use their software. This leads to a design more reminiscent of other commercial software sites.

What works:

A professional, well designed colour scheme
The use of tabbed content on the homepage to show a greater amount of information in a visually appealing way
The website is powered by Expression Engine itself
Unlike Blogger, the icons and graphics used and professional and well crafted

What doesn’t work:

The bold logo for the testimonial section immediately draws the eye – away from the main Expression Engine logo
Due to the heavy graphical nature of the page, loading time is slightly longer than the other designs

Lessons to take away

From WordPress: Place emphasis on the most important reason the user came to the site, in this case, to download the software
From Textpattern: Too much information can overload the reader, and a brand can be created using a single line of colour
From Blogger: Guide the user through a process
From Expression Engine: Using a dynamic area can allow more information to be conveyed without overloading the user at first

We hope you enjoyed this “design analysis” concept and found it to be useful. Please feel free to give your two cents on the above designs in the comments.

David Appleyard May 10th, 2008 Posted in Articles, Inspiration

Introduction to CSS3 – Part 3: Text Effects

The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.

CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Text Shadow

Text shadows sound a little tacky, but it all depends how they are executed. When experimenting for this article I found some combinations to look terrible, and some to give an attractive, subtle effect. Shadows could definitely be put to good use in headings and titles – there are some great examples of their use at Matthias Kretschmann’s blog.

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

CSS3 Text Shadow

Word Wrapping

At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:

.text_wrap {
word-wrap:  break-word;
}

CSS3 Text Wrapping

Web Fonts

Whilst these are not classed as a ‘text effect’, we are going to cover them here briefly. A Web Font is simply a way to use any font in your page, being downloaded automatically by the browser. This will be a revolutionary change to web design, which previously has been limited to 10-15 widely supported fonts. However, this new feature brings bring copyright into debate as only properly licensed fonts should be used.

Currently, the latest version of Safari (3.1) is the only browser supporting Web Fonts. Opera is suggested to be another which will soon be enabling support, and the others will no doubt follow at some point in the future. An example of how this could be achieved would be:

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.net/fonts/font.ttf');
}

A few examples of pages have been mocked up using this technique. The following are examples in the vein of CSS Zen Garden, created by A List Apart. The linked versions will only work on certain browsers:

In conclusion…

Many of the missing features of CSS2 have been rectified in this update. This article doesn’t cover all the additions in terms of text – if you’re interested, you can read more about the text module. All these additions are great when used in a subtle way, enhancing the typographic layout of the page.

The next article in this series will be expanding on some of the user interface enhancements in CSS3. Remember, to see live examples of these features, take a look at our CSS3 example page.

Number of designs per day

How often designs are updated

There was a huge consensus that a small number of quality designs are preferred over quantity. With this in mind, we plan to continue showcasing only a select few CSS designs each day (our entry requirements may become even tighter!) Many of you expressed the fact that you like how designs are organised by colour and layout, and we have started to integrate that information underneath each design on the homepage and gallery as well.

What time to add designs

When designs will be added

As you can see, there is more of a split for this question. As a result, we are changing from offering one gallery update per day, to two – both one in the morning and one in the afternoon / evening (obviously varying depending upon where you live!).

Anything else?

Here are a few comments which we particularly enjoyed from the survey:

Stop posting “10 best xxx”,”20 great xxx” or similar. It’s boring. You’re not Digg. I’m mean. But I mean what I said. We hear you – mainly original content from now on!
The most important thing? Good quality and good taste of tutorial material and showcased designs.
I don’t like that it’s .co.uk! We do own designshack.net but have yet to get around to moving over. It’s trickier than you’d think!
Design Shack is for everybody. From beginners to advanced designers. But always a step ahead in design trends – that’s the coolest thing – the vision :)
I don’t believe you when you say “be mean” , soooo I love Design Shack!

Future surveys

We have a couple more questions which we’d love to ask you, relating to the possibility of a combined links post and the idea of integrating both our RSS feeds into one. But those are for another day!

David Appleyard May 8th, 2008 Posted in Competitions

Membership