Category: Articles

Categories

An Informative 404 Page
Accessibility / 4 Jun 2008

An Informative 404 Page

Classic 404 error pages are prone to being relatively useless. Whilst a well designed page can provide a means to find what they are looking for, wouldn’t it be great if you could find out more about what went wrong? This tutorial will show you how simple it is to have an explanatory email sent to you whenever a visitor hits a 404 page.

PSD2HTML Review
Reviews / 2 Jun 2008

PSD2HTML Review

PSD2HTML ReviewFor 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):

ServicePrice ($)Time (days)
PSD2HTML153 to 211less than 24h
Slice ‘n Diced279 to 3993-6
The Choppr1493
XHTML iT1191 day or less
XHTML Slicer200 to 3501-3 days
XHTMLGenius2503
XHTMLized249+up to 7 days
We’llcodeit199+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

Introduction to CSS3 – Part 6: Backgrounds
Articles / 27 May 2008

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:

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.

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!

Other posts in the series

Inspirational Workspaces
Articles / 26 May 2008

Inspirational Workspaces

Modern Chair

Believe it our not, your office environment as a designer can have a huge impact on the quality of work produced. Whether it’s in a cluttered office, a contemporary apartment, or even a caravan; the standard of your design creations (even your CSS code!) can really be impacted by the surrounding. This article will take a look at some inspiring workplaces, desks and gadgets to give you a few ideas.

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:

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:

Stylish Desk

Milk Desk

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:

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

Cool Workplace

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Introduction to CSS3 – Part 5: Multiple Columns
Articles / 19 May 2008

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:

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:

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:

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.

Other posts in the series

RSS Feed Icons
Articles / 15 May 2008

RSS Feed Icons

Cool RSS Feed IconsThe RSS feed icon has become somewhat iconic in web design, and is arguably one of the most recognized symbols. This great article has a huge collection of RSS feed icons – from a photorealistic style as shown here, to small buttons to hand-drawn sketches.

Adding an RSS feed icon that stands out and looks different can be a great way to draw the reader’s attention to your subscription options. Have a browse through and see which ones fit the look of your site.

View the RSS Icons

Introduction to CSS3 – Part 4: User Interface
Articles / 13 May 2008

Introduction to CSS3 – Part 4: User Interface

This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

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

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:

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:

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:

They can be created as follows:

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.

Other posts in the series

Design Critique: Blog Platforms
Articles / 10 May 2008

Design Critique: Blog Platforms

Blog Platform Design Comparison

Most designers are familiar with the relative pros and cons of different publishing tools – but what about the websites of the blog platforms themselves? We all know that you shouldn’t judge a book by its cover, but I would argue that there’s no harm in looking…

We’re going to take a look at the homepage for four popular platforms: WordPress, Textpattern, ExpressionEngine and Blogger. Which ones are beautiful enough to compel you to use their platform, and which ones have the design aesthetic of a hello kitty toaster? Hopefully through a critique of these designs you can take home some good pointers for use in your own work.

WordPress

WordPress Blog Design

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:

What doesn’t work:

Textpattern

Textpattern Blog Design

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:

What doesn’t work:

Blogger

Blogger Blog Design

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:

What doesn’t work:

Expression Engine

Expression Engine Blog Design

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:

What doesn’t work:

Lessons to take away

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.

Introduction to CSS3 – Part 3: Text Effects
Articles / 9 May 2008

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.

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:

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:

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:

CSS3 Web Fonts CSS3 Web Fonts

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.

Other posts in the series

Silverback Previews
Articles / 8 May 2008

Silverback Previews

Silverback

Silverback is a new app which lets you run your own usability tests really easily. It looks set to be a great new tool for designers who want to analyze how users interact with their site. After a recent request for beta testers, a few interesting details are emerging:

It’s certainly an application which could bring the idea of usability testing to a large market. There’s no substitute to actually watching someone using your website when testing it. Keep your eyes peeled for a release and give it a try for yourself.

Follow Silverback on Twitter

And the Winner Is…
Competitions / 8 May 2008

And the Winner Is…

Once again, thank you to everyone who entered our competition and filled out the survey. We have randomly selected a winner and the proud recipient of a new CSSEdit 2.6 copy is Domantas Jankauskas. Congratulations!

If you are interested in the outcome of the survey, please feel free to read on. We’ll be discussing some of your responses and how Design Shack has changed as a result.

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:

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!

9rules Submission Open
Articles / 7 May 2008

9rules Submission Open

9 Rules SubmissionFor the next few hours, the blog network 9rules have opened their doors to website submissions. They run a high quality network of sites and provide a central way to access all their content. Members includes sites such as Smashing Magazine, CSS Globe and PSDTuts.

If you think that your site has a great design, great quality content and regular updates then it is definitely worth submitting. There are some great tips to help with deciding whether you will qualify as well.

Submit your site to 9rules

0 0 0 0