Retropress works with the latest version of wordpress – 3.3.1 (which was released today).

Features of Retropress

1. Works with wordpress 3.3.1
2. Modern, customizable design
3. Support for Custom Menu
4. Twitter bar showing your latest tweet (with show/hide)
5. Supports post thumbnails
6. Ability to add Portfolio items (Custom post type)
7. Widget ready sidebar and footer
8. Two built-in widgets (Recent Posts/Projects with thumbnails and Social Networks)
9. Dynamically generated sub-menus for sub-pages
10. Recent Projects in the home page
11. Custom text for the 404 page
12. Custom contact page with ability to email, addresses, phone number etc
13. Dynamically updated copyright year
14. Home page slider using CarouselFredSel
15. Coded in HTML5 and CSS3
16. Optimized CSS and images
17. Google webfonts
18. Crossbrowser Compatible (Firefox, Safari, Chrome, Opera and degrades gracefully on IE7+)
19. Easy to set up with the Theme Options page
20. Animate Search button
21. Built-in pagination

Related posts:

1. ImpreZZ – Free WordPress theme
2. WildDreams – Another free wordpress theme!
3. BlakMagik, a free wordpress theme!

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. Business Cards & Holders From MOO – 3 Winners

If you have not come across MOO before, they love to print – whether it’s unique business cards, creative MiniCards, Postcards, Greeting cards, StickerBooks and more!

You can see a cool video of the Showcase business card holder below –

MOO’s unique printing technology ‘printfinity’ allows you to place a different image on every business card in a pack! This is an excellent way to show off a portfolio, designs or business

More About MOO

MOO was born from a love of beautiful, high-quality print and design. They make printing beautiful and unique business cards, PostCards and MiniCards easy!

You can upload your own images or artwork to create truly unique cards. If you don’t have any designs of your own you can choose from a range of templates and designs for your cards and personalise them with your own details.

Prizes (FREE Worldwide shipping)

1st place – 200 Business Cards & The Showcase Holder
2nd place – 100 Business Cards & The Showcase Holder
3rd place – 50 Business Cards & The Showcase Holder

2. Fotolia Promo Code – 3 Winners

Fotolia is a popular stock photography site with a library of over 13 million images, illustrations, vectors and videos.

More About Fotolia

Fotolia offers the largest image bank of free and most affordable royalty free photos and illustrations perfect for any medium, web or print. Fotolia is convinced that the principle reason for illegal pirated use of protected images is mainly due to the high price barrier created by other agencies and hence provides them legally lowering the price barrier so that everyone may enjoy/afford these beautiful images.

Prizes

All 3 promo code winners will be able to download 3 images per day for 14 days. Definitely useful for designers and bloggers.

How to Enter

For a chance to win one of the 3 sets of business cards & holders and 3 Fotolia promo codes – all you have to do is:

Share this post on twitter or facebook or googleplus and put the status url along with your comment below that tells us why YOU need them in particular. Yes, we are looking for interesting and inspiring answers to why you need the business cards and the Fotolio promo codes.

Winners will be chosen from the comments below and will be updated on 20th July 2011! Please enter a valid email address so we are able to contact you.

Related posts:

1. 11 Galleries to submit your business cards
2. Free Twitter Bird Icon Set
3. Trend Review: Paper Planes

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!

The set contains 40+ icons which includes 10 social network icons. Each icon comes in 32×32 size in PNG format. The vector PSD version has also been included in the zip file, which means you can scale up the icons to any size!

The set is licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License (Free for personal and commercial use)

Related posts:

1. 20 Semi-transparent Icons & 48 derivatives
2. 20 Semi-transparent Glossy Icons
3. It’s Twitter Time! Free vector icon set

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!

This icon set has 20 high quality semi-transparent glossy icons and 48 derivative icons. These icons can be even used as graphical elements on websites since the 512×512 version is included. Perfect for web designers and graphic designers.

Each icon comes in 6 different sizes (32×32, 48×48, 64×64, 128×128, 256×256 and 512×512) in PNG format and the pack is licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License which means they are free for personal and commercial use.

Related posts:

1. 20 Semi-transparent Glossy Icons
2. Free PSD Avatar Icon Set
3. Page Peel Social Icons – Version 2

PS: The ranking details are provided just to give you an idea on how popular each website is. The information may vary day to day.

Creattica (** Registration Required)
Alexa Rank: 10802
Page Rank: 7
Famous in Countries: USA and India

Thedesigninspiration
Alexa Rank: 12877
Page Rank: 5
Famous in Countries: China, USA, India, Russia and Germany

Cardobserver
Alexa Rank: 76347
Page Rank: 5
Famous in Countries: USA and Canada

Ucreative (** Registration Required)
Alexa Rank: 182634
Page Rank: 5
Famous in Countries: India, USA and Serbia

Cardonizer
Page Rank: 4

PixelCards
Page Rank: 3

Cardspress
Page Rank: 2

Cardnerd
Page Rank: 2

Wslogos
Page Rank: 1

Cardview
Page Rank: 0

Cardgala
Page Rank: 0

Cardflare
Page Rank: 0

Related posts:

1. 22 Sites & Galleries to submit your logos
2. How to improve the page rank of your twitter profile page
3. Making gallery submissions easy for designers

Available Sizes: 32×32, 48×48, 64×64, 128×128, 256×256 and 512×512.


And here goes a preview of all the icons.

This icon set is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License

And btw, version 2 is on the way…

Related posts:

1. Page Peel – A Free Social Media Iconset
2. Page Peel Social Icons – Version 2
3. Welcome 2010 – A Free Wallpaper For Your Desktop & Iphone

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!