Articles Archive

Creating a Slide-in jQuery Contact Form

Creating a Slide-in jQuery Contact Form

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.

Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.

October 10th, 2008 Posted in JavaScript
Ten Years of a List Apart

Ten Years of a List Apart

As far as online web design magazines go, A List Apart has been around for as long as I can remember. Their regular articles never cease to probe into new areas of design, or express existing techniques in a new and forward thinking way.

A new post today is celebrating A List Apart’s 10 year anniversary, looking back at how the project started out and evolved over a decade. It also gives an insight into how article submissions are processed and filtered, along with who edits and designs the site today.

If you’re a regular reader, or interested in contributing to A List Apart in the future, it is an article well worth a read.

October 7th, 2008 Posted in Articles
Free WordPress Theme: Simple Balance 2

Free WordPress Theme: Simple Balance 2

Alex, from Blogsessive, has released a minimalist WordPress theme called Simple Balance 2. Full information about the theme and download information can be found over at the release post.

Simple Balance features a whole host of customizable options, and it’s great to see a free WordPress theme offering what usually would be paid for features:

  • Several colour schemes
  • Different advertising layouts
  • The ability to manage adverts from the backend

Download Simple Balance

October 2nd, 2008 Posted in Articles
Creating a Digg Style Sign Up Form

Creating a Digg Style Sign Up Form

Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

Before we get started, you may like to view a demo of the end result.

How this form works?

When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.

digg-field

Let’s start

We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see the HTML structure and CSS classes.

Note that, by default, both info and validation messages are hidden, which is set in tooltipContainer CSS class.

Join Now! It’s quick and easy.

Minimum 4 characters, maximum 15 characters. This is your handle on Digg so don’t make it too personal.
Rats! Username must be between 4 and 15 characters.
// other rows here
body{ font-family:Arial, Sans-Serif; font-size:83%; } .formContainer { background-color: #F5EFC9; border:none; padding:30px; } .formContainer h3 { margin:0px; padding:0px 0px 10px 0px; font-size:135%; } .rowContainer { width:100%; overflow:hidden; padding-bottom:5px; height:34px; } .rowContainer label { width:140px; float:left; color: #758656; font-weight:bold; } .rowContainer input[type=“text”] { width:200px; } .tooltipContainer { height:16px; font-size:11px; color: #666666; display:none; float:none; background-repeat:no-repeat; background-position:left center; padding:0px 20px; } .info { background-image:url(‘info.gif’); } .error { background-image:url(‘error.gif’); }

Now let’s add some interactivity

So far we have a static HTML structure and hidden messages waiting to be shown. We have to write a few lines of code to make them appear/disappear. Of course, this can be accomplished by pure JavaScript, but let’s involve jQuery. The reason for this is quite simple – less coding.

Like I mentioned at the beginning of this tutorial, an info tooltip should be shown each time an input field gets focus and hidden when it loses it. Turn this into jQuery code and you get this:

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

Simple, isn’t it? Now, let’s see how to handle validation messages. We are going to create fake validation just for the purpose of this tutorial. We’ll use jQuery again.

function validateForm()
{
    $(”.formContainer input[type=text]”).each(function(){
        var text = $(this).attr(“value”);
        if (text == “”)
        {
            $(this).parent().find(”.error”).css(“display”, “block”);
        }
    });
}

In essence, what the code above does is it shows a validation message for each field that the user hasn’t entered text in. Please keep in mind that this is not real validation, it just simulates what would happen if validation failed. You would have to implement your own logic, eg. check for mandatory fields, email address format and so on.

Ok, after pressing the sign-in button, validation messages will be shown. Signup form on Digg.com hides these messages and replaces them with info tooltips when the user starts to type. So we are missing a piece of code that will hide validation messages that were previously shown.

Let’s do it the dirty way. We’ll extend our jQuery code that controls the appearance of tooltips to hide corresponding validation messages each time an input field gets focus.

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.error”).css(“display”, “none”);
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

This way we have recreated the Digg.com signup form. You can check out live demo or download full source code.

Conclusion

You saw how to recreate the Digg.com signup form with simple CSS and just a few lines of jQuery code. However, there are a few pieces of advice I’d like to give you:

  • Do not overwork the form – there is really no need for a tooltip that says “Enter your first and last name in the field that says First and Last name”. Instead, you can provide a message that shows a constraint, for example “Maximum 35 characters”.
  • Use tooltip/validation color other that text color – try hitting the “Continue” button on Digg.com signup form before entering any text. The form becomes very hard to read and it’s difficult to distinguish where one field ends and the next begins.
September 28th, 2008 Posted in Articles, JavaScript
Designing With GuiMags

Designing With GuiMags

GuiMags are a new concept, taking the idea of designing on paper down an innovative route. They comprise a set of magnets, created to stick to a whiteboard, made of material which allows you to write on them with dry-wipe markers.

I have been trying out a sample of these for a few days and am going to share the aspects I feel that work well, and the areas that still need improvement.

Why is this a good idea?

When designing a mockup, I work differently depending on who the site is for. If it is a personal project, working on paper and then Photoshop is perfect. If the design is for a client, commonly there is a need to express ideas in a collaborative environment. This could be done with a projector/laptop, whiteboard or a flip-chart. These all work well, but a common problem is that when using a whiteboard you find yourself drawing and re-drawing common components of a site (form fields, tabs, buttons etc).

GuiMags solves this problem, allowing you to focus on designing the structure without worrying about the small fiddly pieces. Designing forms, in particular, becomes a much more enjoyable process.

Available Magnets

These are the various magnets available, comprising a selection of most common website components:

GuiMags Design Magnets

Limitations

There are two main problems with GuiMags which could stop them being an overnight success. Firstly is the fact that you need a magnetic whiteboard to use them. From my experience, the majority of whiteboards I have used are non-magnetic and wouldn’t work with these gadgets. To be truly practical, they need to work at every client’s office – professionalism takes a hit when you have to start hunting round the whole building for an appropriate whiteboard.

The second issue is the design aesthetic of the magnets. Whilst the chunky look and feel is certainly appropriate, the choice of blue as a background limits the ability to use them in any mockups which illustrate colour. Future possibilities could be to offer a range of colours, or provide a black and white set to ensure they don’t over-power any other colours on the sketch.

Conclusion

Designing mockups and prototyping alongside a group of people has always posed a challenge. GuiMags goes some way to solving the problem, allowing you to create sample designs and forms with greater speed and ease. However, at $100, these magnets don’t come cheap and you may also find yourself requiring a new magnetic whiteboard (anything from $20 to $100 depending upon size). They are a great concept and a forward thinking idea, but some of the initial drawbacks need to be addressed before they are versatile enough to become a dominant tool in my design workflow.

September 1st, 2008 Posted in Articles
Free Gloss CSS Menu

Free Gloss CSS Menu

Gloss CSS Menu FreeOur partner site, 13 Styles have just launched a new addition to their range of free CSS menus. It comes pre-built in red, orange and grey, working in all major browsers. Best of all, it’s completely free for you to download and use!

Download the menu

August 16th, 2008 Posted in Articles, Navigation
Integrating Flickr With WordPress

Integrating Flickr With WordPress

Flickr and WordPress PluginsWordPress 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!

July 22nd, 2008 Posted in Articles, Software
Becks Label Design Winners

Becks Label Design Winners

Becks BeerThe 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.

Becks Beers

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

Becks Artist

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?

July 17th, 2008 Posted in Articles
Interview With John Griffin of Cutcaster

Interview With John Griffin of Cutcaster

Cutcaster InterviewThis 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.

July 15th, 2008 Posted in Articles, Interviews
The Footer Copyright Notice

The Footer Copyright Notice

Copyright Footer NoticeAlmost 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:

Copyright © 2008 Design Shack

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:


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


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

July 8th, 2008 Posted in Articles, HTML
Subscribe
Membership