Reasons of popularity

Retro designing transcends time, styles, tastes and ages. Web designing templates having retro style are well accepted by customers from different countries. Retro designing usually focuses on certain eras or pop cultures but enjoys a loyal group of followers across several countries. Color schemes and graphics are neither too dull nor too colorful. 

Interweaving of modern graphics with old designs helps in creating a vintage appeal. People have a tendency to associate “value” with old things. Retro designing aims to reap this normal tendency. While value element helps in drawing visitors, modern designing elements keep them hooked. As such, retro designing offers the site owners best of both worlds – vintage looks with modern designing.

Retro designing has brought a touch of romanticism in web designing. Most web surfers are guilty of romanticizing old things. Most of us have a feeling “how green was my valley”. They feel life was much simpler, less stressful and relaxed when they were in schools and colleges. This is probably where a retro design takes us. It takes us to those sweet and memorable days when life was more relaxed.

Elements of retro designing

Retro web designing has several approaches to theme and certain elements are often repeated. Handwritten scripts are very popular. Some designers use old cars, retro product models, old fashioned photographs, early electronic devices and other such old images for creating retro look.  Some web pages reflect the celebration of sixties to space travel while others prefer to highlight post-war optimism and ad campaigns of ‘50s. Some web designers use the military themes like old war planes and badges and some like to use images of pin-up girls of that era. There are several crucial elements that contribute in making a design retro. Let us explore some of them.

1. Using shapes and illustrations

Simple shapes works wonder in creating a retro look. Circles of different sizes are commonly used for this purpose. Going through designs of different famous eras revels how simple shapes were used by designers to create maximum impact. In addition to simple shapes, some of them also opted for a floral background. Bright colors were used in such cases for drawing attention. These techniques are widely adapted by many designers for creating separate space of different content within same area.

2. Color schemes

Limited use of colors is the prominent trait of retro designs. Full color printing was very expensive in the past. This prompted many designers to limit the use of colors in their designs. Two toned coloring was predominantly used by retro designers. Sometimes designers selected a focal color and blended it with few selected colors to create a unique theme. 

3. Typography

Typography has always played a vital role in designing a retro site. Designers of the retro eras used simple techniques like repositioning of fonts, duplicating and pixel strokes for adding unique flavor to a design.

4. Borders

Use of borders is a fascinating part of retro designing. Borders can be used for framing a picture, highlighting content or creating focus areas. They can have ornamental designs or matching solid colors.

5. Textures and noises

Subtle use of texture and noise in the background helps in creating a visually appealing retro design. While some offer a canvas type background having worn out look, others love to use poster artwork with subtle colors. From blending of brush works to stained structures vintage designs are a treat to watch. Drop shadows and pattern overlays are used for creating retro look of a web page. Retro textures are usually simple to create with help of Photoshop.

6. Badges and logos

Badges and logos play a crucial role in creating a retro feel. Badges are usually round shaped with a fluttering slim banner over them. Subtle and contrasting colors are used on retro logos and badges. Most of them can be created with Photoshop.

Finally…

Using retro elements in web designing is an attempt to bring back the memories of past. When a designer purposely develops an old design and blends it with new services and technology we get true retro effect. Retro designs are void of older designing techniques, making them technologically compatible with modern site designing. There are several retro elements that may not fit with our modern web designing approach. Extensive use of Flash, horizontal rule lines, large rainbow fonts, hit counters are avoided by modern designers. Background images and music along with scrolling tickers used in earlier days of web designing may create problems in modern web designing. These elements should be avoided while designing and developing a retro website.

Related posts:

1. Third Dimension/Depth in Web design
2. Trend Review: Coffee Stains in Web Design
3. Merry X’mas: Free Twitter Theme

1. Plan Your Route

Planning is one of the most important steps in any web design process. You should be planning out your content and your navigation before you pick up a pixel. Plan how you want your visitors to get from A to B on your website. Make sure they can get there as quickly as possible. Your most important content should be easy to access and at the top level.

2. Be Consistent

Your navigation needs to be consistent throughout your site. This means keeping your main navigation areas in the same place and ensuring that you use the same colors for links across the site. Your main menu should appear in the same place on every page, although you should feel free to have page specific sub-menus for drilling down into different content.

Using a different color(with a lesser saturation) for visited links and adding an icon to external links would make the site more accessible though.

3. Keep Clicks to a Minimum

Your visitor should be able to locate what they want as quickly as possible. This means that you should keep clicks down to a minimum. If a visitor has to spend more than minute searching for content then your navigation isn’t working. You can help to improve this by having a sitemap, pull down menus, anchor text and tables of contents.

4. Make it Easy to Get Home

These days the web design standard is for the logo to be located above “the fold” – i.e. is visible to the landing visitor before they scroll down the screen. This is usually linked to the home page. People browsing the web have come to expect this so you should make your logo clickable. In some cases it may also be appropriate to have a home button on your navigation bar. Should your visitors get lost (which they shouldn’t if you are following these steps) they should always be able to get back to your home page.

5. Be Searchable

Search functionality is such an important aspect of web navigation. A visitor should be able to search your site. This is particularly important if you have a large amount of content and pages. It will help your visitor to pinpoint what they want without having to manually search through your whole site to find it. Google makes it easy to add custom search functionality to your website with Google Custom Search Engine.

Adding the search functionality on 404 pages will be useful for the visitors to browse through other sections of your website.

6. Make the Wording Accurate

It has become trendy, in certain circles, to have navigation buttons that are pretty vague. You may think that this makes you look cool, that you’re breaking the mold, but really it can be annoying and frustrating for your visitors. If you have used wording in your navigation that you think makes you sound cool/clever/cutting-edge, change it. You should not assume that anyone else will have a clue what you are talking about. Not everyone else thinks like you, right? Keep your navigation language specific, direct and to the point.

7. Pagination

Some websites just have the next/previous button which doesn’t give any clue on the number of pages. Pagination simply means dividing the content into discrete pages. Can you imagine a book without pages?

This is useful especially for blogs, e-commerce websites, where the content blocks/product listings are huge in number.

8. Read More links

Visitors hate to read huge blocks of text content. They always prefer to read the excerpt and choose the one they like to read further. It would be a good idea to show excerpts (wherever applicable) with a “read more” button linking to the in-depth article.

9. Include a Site Map

A site map should be a key part of your navigation toolbox. This isn’t so important for small sites, although it can come in useful and is great for SEO, but if you have a huge site with lots of pages and information it is a necessity. When I visit a big institution’s website the first place I go to find what I need is the sitemap. You should make it easy for your visitor to find the link to your sitemap. This is often at the bottom of the page, but if it’s important to your navigation you could include a link in the main navigation bar. Some sites, like Apple, for example, include the whole of their sitemap in their footer.

10. Breadcrumbs

Breadcrumbs are those little links at the top of a page, usually below the navigation bar, that show where you have been and where you are now. They make it easier for a visitor to figure out where they are at that moment, and how they got there. They take the form of Home > Sub-Page > Sub-Page.

11. Keep to the Essentials

Too many links on your navigation can end up causing it to be cluttered and confused. You should keep the top level of navigation for your most important content – i.e. the content that you want your visitors to get to first. Anything else can be dropped down a level or two. This helps to keep your navigation clear and focused. Sub-pages can be contained in dropdown menus and flyouts.
In some cases, it would be more meaningful to add icons.

12. Test

At the end of any web design process, you get to the next most important stage – testing. You need to test your navigation to make sure that it is actually a useful navigational tool. Don’t just test it yourself. Ask your friends and family, people unfamiliar with the site to test it for you. That pair of fresh eyes will help to pick up on any problems and inconsistencies. You should also test your navigation to make sure that it works cross-browser. You might find that your navigation bar appears differently in Firefox and Chrome, or that IE doesn’t like those rounded corners you’ve so lovingly added.
Follow these steps and you should be on your way to 100% navigation success!

Related posts:

1. A simple CSS based usability tip for search buttons
2. How to improve the page rank of your twitter profile page
3. IE CSS hack without using any hacks!

Ben the bodyguard This is almost like watching a short film

Nike better world You’d be already familiar with this.

TEDx Portland A unique use of the parallax effect.

ResolutionIM Don’t take your eyes off the rocket as you scroll.

David Beckham

Manufacturedessai

APO

Tutorial to create a vertical parallax using CSS and jQuery

And finally, an awesome detailed tutorial explaining how to create a vertical parallax using jQuery and CSS.

Related posts:

1. Everything you need to know about Parallax
2. Parachutes/Hot Air Balloons – An Emerging Trend in Webdesign
3. Trend Review: Web2.0 Rockets and Gliders in Webdesign!

Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.

Why do users click again?

Because they are users! They aren’t developers who understand what happens in the back end.

Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.

How do I do it with just CSS?

Its pretty simple. Click and hold the search button below and see.

I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…

The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.

Now, how do I avoid multiple clicks?

Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.


input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for safari */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursor:pointer; /* Hand cursor for the normal state */
border:none;
padding:0;
}

input.submit:active{
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
}


If you really want to disable the button, check out this JQuery solution. And, don’t forget to put in your thoughts and ideas.

Related posts:

1. IE not interpreting text-indent on submit buttons ?
2. 10 CSS properties that ‘were’ impossible to implement in IE6
3. IE CSS hack without using any hacks!

Recently, while working on some client projects, I noticed a few requirements(I know there are many) that were common. I strongly feel, this will be useful for your next web project.

1. Empty form field value on focus/click

The requirement/issue:

This is a very common requirement. You would have noticed form fields that have a value by default which disappears when you click/focus on them. When you click outside, the value appears again.

Solution:
The jQuery emptyonclick Plugin works like a charm. All you need to do is download this plugin to your project directory and include the following code within the head tags.

Now add the class “emptyonclick” to all form fields that you would like to empty onclick.

You can find more about the usage here

2. Truncate lengthy text with either a “more” button or 3 dots at the end

The requirement/issue:

I am sure that most of you would already have faced this issue, especially with lengthy breadcrumbs. You don’t have to run behind and bother a programmer anymore for a solution.

Solution:

Truncate is an awesome jQuery plugin that helps you achieve this in seconds. Download the plugin and include the following code within the head tags

Replace the .classname with the class name of your HTML element that contains the text. Also, the number 60 in the code above is the maximum number of characters you would like to allow before truncating. Replace that with your value.

Adding a “more” link at the end of the text is another cool usage. You can find more about the usage here.

3. Adding classes to the first and last list items

The requirement/issue:

I don’t think there will be a HTML/CSS developer who haven’t abused wordpress for not adding first and last classes for their lists

Just imagine a menu that needs a different background for the first and last list item. You’ll find this handy when creating themes for a CMS like wordpress where you have no control over the HTML code.

Solution:

After spending a few minutes on google, I found this snippet

This can also be achieved using the :first-child and :last-child CSS pseudo-classes.

Related posts:

1. 10 CSS properties that ‘were’ impossible to implement in IE6
2. IE CSS hack without using any hacks!
3. IE not interpreting text-indent on submit buttons ?

Requirements
1. Firefox Sorry IE users!
2. InFormEnter AddOn for firefox
3. Details about your logo/website (will explain this below)
4. Image of your logo in various dimensions (will explain this as well)

I assume that you’ve already read my post – 22 Sites & Galleries to submit your logos. In this post I’ll walk you through my logo design submission process, which can be made use for CSS gallery submissions as well.

Step 1: Bookmarking the gallery forms

The first step is to bookmark all the submission forms of famous galleries. I know it’s not that easy, but trust me it will make things easy. Open a blank firefox window and then open all the logo gallery submission forms mentioned here in separate tabs. Once you’ve opened all, go to Bookmarks Menu > Bookmark All Tabs (or Shift + Cmd/Ctrl + D)

This would open a pop-up, wherein you can add a name for the bookmark folder. Choose ‘Bookmarks Toolbar’ from the dropdown and click the “Add Bookmarks button”.

Awesome! You’ve created a ‘Bookmark folder’ for your logo submission which you can now access from your Bookmarks toolbar.

Whenever you come across a new submission form you can add them to this folder.

Step 2: Prepare a list of all possible form fields

The next task is to make a list of all possible submission form fields. I’ve created one for logo design submission. If you’re the creator of the logo, the first 8 items remain same for all your logo submissions. We’ll see how to make use of this list in the next step.
————————————-
First Name
Last Name
Full Name
Email Id
Twitter Id
Designer Website Title
Designer Website URL
Designer Bio

Title/Name of the logo
Logo Punchline/tagline
Logo URL (if your logo is already online)
Description of logo
————————————-

Step 3: Using InFormEnter to fill the forms

I hope you’ve already installed this addon. If not do it right now, it’s really worth! Now you should see a blue arrow icon on the bottom right of your Firefox status bar. Click the icon and select “InFormEnter Options”.

So you have the pop-up ready to enter the list of form fields mentioned above. See the image below to know how I created the list for the “Beetle Nut” logo

Step 4: Prepare your images for submission

This is critical since the image dimensions accepted by each gallery varies. Here goes a list of sizes accepted by most logo galleries.
————————————-
284×130
300×180
320×260
325×260
394×197
400×400
500×247
500×300
550×338
620×340
640×360
880×440
————————————-
I usually create a folder for each logo, re-size the logos and name them based on these dimensions. But make sure the file size is low. See the images below.

This makes the form submission process easy!

Step 5: Start Submitting… Enjoy!

Once InFormEnter is activated you would notice a blue icon near each form field. Now all you need to do is click the icon and select the entry! As simple as that!

Do you already follow a better procedure? If so please share it here.

Related posts:

1. 22 Sites & Galleries to submit your logos
2. Twibies.com – The ultimate twitter resource for designers
3. Dark Elegance: A Free Drupal Theme

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Dezignus – Move your mouse over the header region (towards any direction).

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

Create a Parallax Website Header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

Another demo using Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

Using Javascript – A Vertical Parallax

A vertical parallax based on javascript.

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

Examples of and How to Create the CSS Parallax Effect

This is a really interesting one! A parallax illusion with CSS

Parallax using Flash

A step by step tutorial by webdesignerwall.

Creating parallax with flash cs4

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

So, that’s all about Parallax. I hope this post was informative

Related posts:

1. Min-width issue in IE6
2. ProductiveDreams Reloaded
3. Trend Review: Coffee Stains in Web Design

This post is about 10 commonly used css properties that were impossible to implement in IE6. While redesigning ProductiveDreams, I came across a few css compatibility issues with IE6 and had to spend hours searching the solution for each issue.

So I just thought of putting them together to save your time. These css hacks (I would rather call them ‘solutions’ since, not all of them are purely css based) solves the major compatibility issues in IE6.

1. Rounded or Curved Corners

As you would know, all modern browsers support border radius. Curved corner is something that was merely impossible to achieve in IE6. Recently I came across an htc file (especially for IE) developed by Remiz from HTMLRemix.com, which solves this issue.

The first thing to do while using htc is to add the correct MIME type for htc behavior on your server. This is REALLY important before you proceed. The following are steps:

1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server

For more details on how to add MIME type visit Microsoft Support

All you need to do is download the htc from HTMLremix or Alternate Link and include the following code in your CSS.


.div_class_name{
behavior:url(border-radius.htc);
}


Jquery Alternative: jQuery Corner a jQuery plugin that creates crossbrowser compatible rounded corners!

2. The popular PNG transparency issue

Every designer would have faced this issue, obviously! Though there are a number of javascript based solutions, I couldn’t find anything that supports background position. As far as I know all JS based solutions end up with the same result. This is something that worked flawlessly for me. All other solutions are based on this filter.

Preview


.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}


HTC Alternative:If the solution above doesn’t work for you, you may try this htc alternate.

Known Issues:
1. Doesn’t support CSS Sprites: If you are using sprites, then just forget this hack. Background positions doesn’t work with PNG hacks .

If you need background-position support for PNG, then go for DD_belated

The best solution is to use a .gif or png-8. Check out the best way to do this without using hacks!

3. Opacity

This is pretty much straight forward and easy to achieve compared to the other hacks.

Preview


.opacity_div {
filter: alpha(opacity = 50);
}


4. Fixed position

All browsers support the css property ‘position:fixed’, but not IE6. I had to find a solution for this since the social icons in this blog are having a fixed position.

Preview


* html .fixed_div{
position: absolute; /* position fixed for IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}


Just change the top(104) and left(15) values, to position the element.

This method works very well, but you would notice a jerk while scrolling the page. So here goes a fix for that.


* html {
background-image: url(image.jpg);
}


All you need is a 1px x 1px image. This might sound weird but it works!

5. Min-width & Max-width

This is simple as well and was already posted on ProductiveDreams

Preview

Min-width:

.div_class_name{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}

Max-width:

.div_class_name{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}


Jquery Alternative: This is an alternative solution for the hack above. JQminmax is a cool plugin which allows you to set minimum and maximum values for both width and height.

6. Hover for non anchor elements

Unfortunately, IE6 supports :hover, only for anchor tags. That means css based dropdowns would not work in IE6. CSShover.htc is the best solution for this. You may download the htc file from xs4all.nl

Preview


body {
behavior: url("csshover3.htc");
}


As I mentioned previously, don't forget to add the correct MIME type for htc behavior on your server. This is the key.

7. Min-height & Max-height

Preview

Minimum height:

This is not really a hack since it uses valid css.


.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

Maximum height:

.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}


8. Bicubic scaling for images

One line code that solves the image scaling issue in IE6 and 7. Hats off to Chris Coyier for coming up with this solution.


img {
-ms-interpolation-mode: bicubic;
}


9. Negative text indent for input buttons

Negative text indent is normally used to hide the text value inside buttons, which lets you use custom background images for them. For some reason, IE doesn't support negative text indent for input buttons. For more details about this issue check out this post

Preview


input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}


10. Text shadow

The shadow filter is one of the useful filters for IE.

Preview


.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}


Related posts:

1. IE CSS hack without using any hacks!
2. Min-width issue in IE6
3. IE not interpreting text-indent on submit buttons ?

Step-1: Let’s review the HTML part first.



The following are the images that I’ve used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
width:134px;
height:134px;
}
Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I’ve specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?

Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome…. isn’t it? In all other browsers except IE you will see the colorful png image.

Consolidating the entire thing

So. the final css would look like:
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
background-image:url(images/pd.gif);
width:134px;
height:134px;
margin:0px auto;
}

For your ease, I have attached the sample files as a zip. Feel free to download it and do let me know your feedbacks.

Related posts:

1. Min-width issue in IE6

The problem was to make it compatible on all major browsers, including IE6 !!!!!. I wonder why people still use IE.

As usual, I started searching for the solution on the right top of my Firefox window (yes, google!) and found a few websites which had discussions on the same topic. Most of them had lengthy posts and not the real solution. After going through a couple of sites, I concluded with the following solution. I hope this would help those who come across the same problem.
.div_class_name{
width: expression(document.body.clientWidth < 1002? "1000px" : "auto");
}
Just add the above line in your CSS. Replace 1000px with the min-width value and replace 1002 with a value slightly greater than the min-width. To define the max-width, just replace the "<" with ">".

Known Issues:

• Only works with JavaScript enabled browsers
• Not W3C valid

That's all! I don't want this post to be lengthy like the others I went through

No related posts.