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.
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.
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|
|XHTML iT||119||1 day or less|
|XHTML Slicer||200 to 350||1-3 days|
|XHTMLized||249+||up to 7 days|
We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.
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:
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.
This is the original 13 Styles design:
And this is a screenshot of the new version which we created in Photoshop:
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.
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.
The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:
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.
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:
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:
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 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
content. This allows for greater flexibility in terms of placing a background image.
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!
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.
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:
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 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:
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:
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.
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:
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:
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 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.
The 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.
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:
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
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:
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:
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.
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.
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 doesn’t work:
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 doesn’t work:
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 doesn’t work:
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 doesn’t work:
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.
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:
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.
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:
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:
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.
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.
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.
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.
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!).
Here are a few comments which we particularly enjoyed from the survey:
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!
For 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.