Design Shack Blog

Integrating Flickr with WordPress

2008-07-22T19:56:59Z

WordPress is undoubtedly one of the most popular blogging platforms, so it’s no surprise that there are a huge variety of different plugins to allow you to integrate Flickr with your blog posts. This article does include a sponsored review of iFlickr, but we’ll also be looking at other plugins available to mix these two online platforms together.

iFlickr Review

By way of a basic introduction, iFlickr is a WordPress plugin that allows you to easily find free images on Flickr and insert them into your blog post while automatically putting the attribution link underneath. It can save you quite a bit of time when looking for related images to your blog post, but doesn’t satisfy the requirement you may have for putting your own personal images on your blog (we’ll cover some methods for doing this later on).

Here are some of the various bits we liked and didn’t like so much about iFlickr:

The Good

iFlickr makes it very easy to search for images as you’re writing
It gives you more flexibility and precision than other plugins which attempt to automatically find related images
It’s a very simple way to add some graphical content to a news article or blog post
It’s fairly easy to use CSS to customize the way the image appears
It’s completely free!

The Annoying

iFlickr only works with PHP5. This may be fine, but not all servers come with this by default
You can’t choose to only show your own images
It can be a bit tricky to get working correctly (it took us a while)

If you’re looking to use an appropriate Flickr photo with your blog posts on a regular basis, iFlickr is definitely a good way to go. However, if you’d like to mix things up in a different way, trying one of the following might be a better option:

Other Flickr/WordPress Plugins

WordPress Flickr Manager – This is a very fully fledged offering, which lets you search for both personal and public photos and insert them into your posts. It’s not as simple as iFlickr, but you might appreciate the bigger set of features.

Flickr Photo Album – This plugin allows you to add a set of photos to your site as an album. Rather than picking one or two images, you are able to display a whole collection. Great for showcasing screenshots, or your holiday pictures!

FlickrRSS – This lets you display a selection of your Flickr images as a sidebar widget. There are some useful advanced options for customising the display exactly as you want it.

We’d be really interested to hear about any other plugins which you find useful for integrating Flickr with your blog – drop us a line below!

Becks Label Design Winners [4]

2008-07-17T04:55:26Z

The well known international beer, Becks, have recently run a contest in the UK to find a set of new artistic designs for their beer bottles. We’ve got an exclusive preview of the winning bottle designs, which you can pass your eye over as a designer to let us know what you think.

The designs have been put together by students at the Royal College of Art and Design, in London. Whilst it’s a big step away from what we consider to be ‘contemporary design’ online, it does capture the essence of the UK and Britain to an extent – with an abstract twist.

Personally, I’ve never been a huge fan of very abstract artwork, but I think these could prove to be an interesting talking point – and a great stepping stone for the new artists (such as Tom Price, below):

It showcases the vast differences between product design and website design. However, the idea of using contemporary thinking and new talent to re-design a corporate brand is a great one, and something that could move across equally well to online design.

What are your thoughts?

Interview with John Griffin of Cutcaster

2008-07-15T18:35:47Z

This is a short interview with one of the minds behind the new stock photography startup – Cutcaster. It’s a great insight into some of the thinking behind a site such as this, as both a business concept and a well designed web application.

What exactly does Cutcaster offer, and why are you unique?

Cutcaster offers unique royalty free images, stock photos, stock footage and stock photography for advertising, publishing or web design. We have combined a Flickr-type community with a Getty-type licensing model but turned the old licensing model on its head. In my old job trading stock on Wall st. I saw what electronic markets and cutting out the middleman did to our markets and I applied those efficient market elements to what I saw as an outdated licensing model.

We are the first licensing platform to let people set their prices for a high resolution file, use a patent pending algorithm to help them find the correct market price or let buyers buy ala carte, on demand or bid on content they want so they can name their price or licensing terms directly with a seller. That seller has the option to accept, reject or re-submit a new offer back to that interested buyer. We also offer buyers a way to request custom content from the community of Cutcaster members through our ProjectRequest area. Cutcaster is an open platform and anyone can join, learn and participate in the community and marketplace.

For how long have you offered the service?

The site has been researched and developed over the last 3 years but we launched our Cutcaster beta site in April of this year. We are a very new service but have been growing extremely fast. I left my trading job on Wall st. in January of this year to focus on Cutcaster full-time as the demand and time commitment became too much to try to do with two jobs.

Which two design features of the site are you proudest of, and why?

I am proud of how easy our site is to use but I am very proud of our negotiation platform called My Marketplace, which allows buyers and sellers to seamlessly negotiate on pricing and licensing terms much like a stock exchange. Sellers can now get hard data on how to price their content and where demand lies for their work. Buyers can directly buy or bid for content which allows them to name their price or buy extended rights like exclusivity over a certain time period or geographic region. The platform is simple to understand, easy to use and the negotiations happen very quickly between buyers and sellers.

I also really like the layout of our media details page which clearly lays out the details surrounding any media file uploaded to the site and is set up to allow users to easily interact with the different features of the site like immediately buying, bidding for content, adding content to lightboxes (we call them clipfolders at Cutcaster), reporting copyright infringements, downloading comps to show clients, requesting different file sizes and the ability to virally send your work to multiple networks to get more traffic and sales. Here is an example of one of the media detail pages, http://www.cutcaster.com/viewmedia/view/100027215/Photo.

Could you give an overview of the technology used to power the site?

Cutcaster is written/coded in PHP using a web application framework called CodeIgniter. Other scripting codes used would include Javascript and AJAX. It uses the world’s most popular open source database, MySQL to store data and other information. The site utilizes Amazon’s web services such as Amazon Elastic Compute Cloud (Amazon EC2) for web-scale computing and Amazon Simple Storage Service (Amazon S3) for storage of files.

The Footer Copyright Notice [8]

2008-07-08T09:26:27Z

Almost all websites contain some sort of copyright notice in their footer (e.g. Copyright © 2008 Apple Inc. All rights reserved.). But what’s the best way to do this? We’re going to take you through the requirements for your copyright notice, and a nifty JS (or PHP) trick for ensuring that your copyright year is always up to date.

What’s required?

The humble copyright notice is always useful to show in the footer, as a way of stating your claim over a site. Interestingly, however, it is not required for you to have copyright over the graphics, content and artwork of your site. This comes into place as soon as you’ve created the content and placed it in the public domain. Placing a copyright notice is still advisable to deter potential plagiarists and stake your claim. The generally accepted format is:

There are a couple of points to make:

Make sure that the year is current (see below)
Use the HTML code © to display the copyright symbol, ensuring that your site’s XHTML is valid
Ensure the word ‘copyright’ appears

If you have specific requirements for how people can use certain content of your site, using a Creative Commons License would be advised. This allows you to select how content can be used in a more official and controlled manner.

Future proof

When creating a website, it can be incredibly tempting to simply drop in the basic requirements, and not think too heavily about future proofing your site. One of the most telling signs that a site isn’t regularly updated is an out of date copyright year. This can be very easily made automatic, through the use of a simple piece of PHP or JS code:

<?php echo date("Y"); ?>

Alternatively, if you would prefer to use JavaScript, the following works well:

<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>

Stick with one of these methods, and you’ll never be kicking yourself in February again for not updating the copyright year!

Contest Winners

2008-06-24T16:01:29Z

Thanks to all of you who entered the contest! We have randomly picked out the four lucky winners and contacted them today. They include:

Paul-Emile Raymond of splitdadiz.com
Kalbir Sohi of kalbir.jottit.com
Leon Paternoster of leonpaternoster.com
And another winner we’re yet to hear back from!

Thanks again to UK2 for sponsoring the contest. Updates may be a little slow for the next week or two as we’re on holiday (but don’t worry, you will still be treated to a couple of great new CSS designs every day!). Everything will be back to normal soon with some great new articles scheduled.

Win a Year of Free Hosting [6]

2008-06-18T15:49:32Z

We’re pleased to announce a new competition on Design Shack, in partnership with UK2. Four hosting packages are up for grabs with a total value of over $450. One “business” and three “home” hosting packages are being given away. Each is completely free for one year, comes with one (or more) free domain names and would make a fantastic home for your site.

Please read on to find out more about the prizes along with how to enter. Be sure to use a valid email address so that we can contact you if you are a winner!

Prizes & Conditions

Top Prize: A 1 year business web hosting package. Includes free setup, 3 free domain names, £30 Google AdWords voucher, SSH, 100GB disk space and 1000GB bandwidth.

Runner Up Prizes (3): A 1 year home web hosting package. Includes free setup, 1 free domain name, £20 Google AdWords voucher, 3GB disk space and 100GB bandwidth.

The competition closes on Monday 23rd June and winners will be chosen completely at random. The lucky few will be announced on Design Shack the day after. We’ll be in touch with details on how to claim your prize.

How to enter

Entering the competition is simple, and will help Design Shack evolve over the coming months. All you need to do is fill in the following form telling us:

Two website designs which have recently inspired you
One article or tutorial which you would like to see on Design Shack

We’re looking forward to hearing your ideas and hope to be inspired from you, our readers!

The competition is now closed!

About UK2

UK2 have been a major player in the web hosting industry since 1998, today having sold over a million domain names. They host thousands of websites and dedicated servers for customers in various countries. UK2 are one of the biggest and fastest growing web hosting companies in the UK, offering services including domains, dedicated servers and e-commerce packages. You can read more about UK2 at their website.

Design Critique: Mobile Me [3]

2008-06-11T09:59:03Z

Apple have recently announced a new suite of online applications called MobileMe. The aim of the development is to allow you to keep all your information in sync between several devices (e.g. your iPhone, Mac and Windows PC). In addition, Apple have created a new online site at me.com, which will hold a suite of applications including email, calendar, address book and photos.

We’re going to take a quick look at the design and layout of this new online service, and explain what works well and what we think could have been done better.

Email

This section of the service has done a great job of emulating a desktop application. The existing .Mac webmail application was already excellent, so porting this across has not changed a great deal. Design features which stand out include:

The use of a lighter font to separate the subject and following message content
Adding a new email indicator to the top toolbar, and the page title, to show your unread messages whilst using other applications

It is interesting to point out the lack of branding running through the site – nowhere is the ‘MobileMe’ logo featured, and the user is free to use the service without being confronted with too much Apple-centric branding. This is a distinct step away from Microsoft or Google online applications, which both use branding extensively.

Photos / Gallery

There are a plethora of modern AJAX galleries online, all with their own pros and cons. Apple’s now integrates with the iPhone, iPhoto and your Mac, along with offering different viewing methods.

The addition of reflections to the photos looks typically Apple, but seems to make reading the caption underneath more difficult. It raises the eternal dilemma – at what stage do superfluous effects become more of a hinderance to the user than a positive addition. That said, there are several design elements which are notably good:

The permanent share-able URL in the top right makes showing others your photos very simple
The simple design of the album settings popup
The ability to resize all photos at once (no mean feat to achieve whilst keeping load times down)

Considering the lack of any Flash, the gallery pages do a great job of showing content in a dynamic and appealing way. The technologies used are nothing new, but have been used to very good effect.

Calendar

The previous online calendar on .Mac was relatively poorly designed, with little to no interactivity and various restrictions. The new version offers not only a much more accessible and practical design, but also a variety of new features.

We particularly like the dragging and dropping of calendar appointments which snap to place in the grid structure of the page as they are moved. Features such as this illustrate how JavaScript can really allow online applications to feel as natural and robust as desktop counterparts. Other aspects which stand out are:

Transparency in event backgrounds allow you to still see time intervals
Excellent use of subtle colours in the small calendar in the lower left to make it immediately obvious what day it is, which day you’re looking at and where the month begins and ends
Slightly larger line spacing between events in the month view (making the online calendar actually easier to read and scan than the desktop version)

One inconsistency found here is the difference in design of the ‘settings’ screen when compared to the equivalent in the gallery section. It would have made sense to standardize this across all the various online applications. However, on the whole we think that the design of the online calendar is actually better than the desktop version, and hopefully some of the interface features (increased line spacing, less rounded corners etc) will be brought to the desktop version in a future update.

iDisk

The use of JavaScript and AJAX provides, for the first time, a practical interface for managing files and folders. Flipping through directories is seamless, as is dragging and dropping files as the page does not need to be reloaded for changes to take place.

The pink/purple icon for the iDisk is, to be frank, awful. The contrast between the two colours clashes and could certainly have been designed better. I’m not sure why a departure from previous aluminum drive icons, or the iDisk globe, was needed – either of these would have been more aesthetically pleasing.

However, the layout and view options look good and files/folders are clearly defined. There isn’t a great deal to say in relation to this section – it’s straightforward and does what it says on the tin.

Lessons to take away

Branding isn’t always essential – put the user interface first and offer a simple service
Be careful not to use visual effects when they come at the detriment of user experience and accessibility
Icon design is not easy, but avoiding colours such as bright pink is generally a good idea!
It is certainly possible to create online applications which look, feel and respond in a similar – if not better – way to desktop counterparts
Pay attention to line spacing, as it can make text much easier to read

Do you have any other comments and opinions on this new service? Let us know below!

An Informative 404 Page

2008-06-04T09:41:11Z

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.

Getting Started

The first thing is to implement a custom 404 error page. We’ve covered this before, but it essentially involves adding the following to your root .htaccess file:

ErrorDocument 404 http://www.yoursite.com/404.php

This will instruct all 404 error requests to be sent to the specified page rather than showing a default message.

The PHP Code

The following code needs to be customized and placed anywhere in your 404 php page:

<? 
$myemail = "insert your email address here";
$page = 'http://' . $SERVER_NAME . $REQUEST_URI;
$subject = "404 Page Error";
$message = "
     404 Page Error Report
     Visitor came from: ".$_SERVER['HTTP_REFERER']."
     Page not found: ".$page."
";
mail($myemail,$subject,$message,"From: 404errorpage");
?>

This will send you an email which will include (if possible) both the page which the user has been referred from, and the page or resource which couldn’t be found.

Useful Applications

Implementing this has a whole host of useful outcomes. However, the first thing to note is that (unless you have previously added these files), a rapid number of emails will arrive in relation to:

favicon.ico
robots.txt

It may well be worth adding these files in before implementing the page so that you aren’t inundated with notifications! This technique can be invaluable when designing a new site, to sift out any broken links which may have been overlooked before launch. It is even more useful when modifying an existing site structure, to ensure that current links to your site are not taking new visitors to missing pages. If this is the case, simple redirects can be added using .htaccess:

For a file:

RewriteRule file1.php$ file2.php [L]

For a directory:

RewriteRule ^oldfolder/$  newfolder/ [L]

After a while, you’ll find that the odd 404 error is due to someone mistyping a URL, or having linked to a genuinely non-existent page on your site. It wouldn’t be advisable to keep this code in place permanently, but for a few days or weeks after making significant changes it provides a fantastic fail-safe.

PSD2HTML Review

2008-06-02T08:04:11Z

Why The 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)

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:

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.

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 [2]

2008-05-27T08:58:48Z

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.co.uk/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;
}

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;
}

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!