Template name: Youmovies
Copyright Business:YouJoomla
Version of the application: Joomla 1.5.x
Live Demo:http://joomla1.5.youjoomla.info/youmovies/

Are you ready for some action?! Youjoomla proudly presents Youmovies.Your one and only Joomla Movies portal Template loaded with video features, new extensions, 10 color combination’s, 5 menu types, Joomla Template Demo installation, and all standard Youjoomla template features.With this template we would also like to introduce YJMS 2.0 enhanced version of YJ Movie Studio , YJNS5 News Slider and Multimedia Box 2.0 .

You Movies features:

* 100% Tableless Design
* XHTML Valid
* CSS Valid
* 508 Valid
* 10 fully collapsible module positions
* PSD files included
* Joomla 1.5 template
* CSS dropdown menu
* SMooth dropdown menu
* Dropline menu enhanced!
* SMooth Dropline menu (using mootools) enhanced!
* Split menu
* 10 color combination’s
* Server side Compression
* Yj Multitab module update(run multiple copy’s on same page)
* Yj News Slider 5
* YjMS 2.0 enhanced version of YJ Movie Studio
* Multimediabox 2.0 with new features.
* Demo Starter Joomla 1.5.10
* Extended Typography styles
* IE6 png fix
* Adjustable width 1024px 800px
* Font resizing
* SEO features build in

Download:
Please 登陆Login or 注册Register to read the rest of this content.

Related posts:

1. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...
2. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...

Related posts brought to you by Yet Another Related Posts Plugin.

We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As a result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.

Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Update: the second part of our review is now published as well.

Web Design Trends For 2009

Let’s first take a closer look at the main trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

1. Embossing Letterpress

   

2. Rich user interfaces

   

3. PNG transparency

   

4. Big typography

   

5. Font replacement (sIFR, etc.)

   

6. Modal boxes

   

7. Media blocks

   

8. The magazine look

   

9. Carousels (slideshows)

   

10. Introduction blocks

    

Now let’s go into detail and take a closer look at each of the trends presented above.

1. Letterpress

One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.

2. Rich User Interfaces

Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

In particular, we’ve seen much more white space over the last year, much more padding and much more space for various design elements. We also observed that many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look (as on Newspond.com and Quicksnapper.com), confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

3. PNG transparency

PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance. In most cases, semi-transparent backgrounds stand out in the overall background of a page and are intended to highlight an important design element, such as a headline or announcement. Sometimes PNG transparency is used for the background of modal boxes as well.

Last year, we described a variety of ways in which can get creative with transparency in Web design, and many designers seemed to experiment with these techniques in their work. Interestingly enough, transparency is often used either in the header or footer of designs, but some designs go beyond that.

4. HUGE Typography

We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites.

The font size of these design elements often goes beyond 36 pixels, and in many cases quite expensive typefaces are used to reach an audience. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font. The consequence: websites are more beautiful and more consistent and look solid and trustworthy.

5. Font Replacement

As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR).

What is interesting is that these fonts are often seamlessly integrated in the design of websites; they are almost never used for their own sake or simply to “upgrade” the typography of a website. Designers are trying to blend beautiful typography and arresting visual design to improve the appearance of websites and improve the user experience.

6. Modal Boxes (Lightboxes)

Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

7. Media Blocks

With more broadband Internet access, users can now afford to browse more than they did a couple of years ago, and designers can use this opportunity to present content in a more attractive and memorable way. Hence, it’s no wonder that many product websites use media blocks (for videos and screencasts) for this very purpose. The main advantage of such elements is that they can communicate content quickly and effectively and make it easier for users to consume information.

Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too.

But please make sure that videos are an alternative presentation of (and not the main or only!) content on your website. Not every user has broadband access to the Web, not every user is willing to watch a video (e.g. because he or she may have a radio or music playing in the background), and not every user has Flash and JavaScript installed on his or her machine.

8. The Magazine Look

An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.

9. Carousels (Slideshows)

Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.

Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.

10. Introduction Blocks

The upper-left area of a website is the most important block on the page, because it grabs the most attention from visitors. Therefore, it makes perfect sense to place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.

In fact, this is exactly what many designers are doing. Whether for a Web application, corporate design, online service or portfolio, designers are pushing their slogans and brief introductions to the top of the page and are using strong, vivid typography to make a good first impression. Some introductions are short, others are quite lengthy; in either case, they usually take a lot of space; the full width of the layout and between 250 and 400 pixels in height are common dimensions for these introduction blocks. Notice, though, that introduction blocks almost never appear in blogs and rarely in online shops.

Stay tuned!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Related posts:

1. Design To Sell: 8 Useful Tips To Help Your Website Convert Design To Sell: 8 Useful Tips To Help Your Website...
2. 40 Creative Design Layouts: Getting Out Of The Box 40 Creative Design Layouts: Getting Out Of The Box...
3. Slideshows In Web Design: When And How To Use Them Slideshows In Web Design: When And How To Use Them...

Related posts brought to you by Yet Another Related Posts Plugin.

A couple of months ago we released the beautiful Flavours Icon set that was designed by Oliver Twardowski, a graphic designer from Bonn, Germany, the set aimed to help designers in their Web and user interface designs, containing 177 icons in a resolution of 48×48 pixels. In this post we release the updated version of the icon set, now with 452 icons, freely available to use in private or commercial projects.

The files are transparent PNGs, and the source file (.psd) is available for download as well (see the links below). As always, the set is completely free and may be used for any private or commercial project without any restrictions whatsoever.

Download the set for free (450+ icons)!

• large preview (.jpg, 1.8 Mb)
• large preview 2 (.jpg, 0.4 Mb)
• download the full icon set – 450+ icons! (.zip, .png-files, 1.7 Mb)
• download the .psd-sources (.zip, 6 Mb)

We express sincere gratitude to Oliver for his truly amazing work. Please let us know in the comments if this release meets your expectations. And if not, please let us know what we could improve in the upcoming releases!

Motivation behind the design

As usual, here are some insights from the designer himself:

After releasing my first pixel-based iconset ‘flavour’ right here at Smashing magazine, the feedback of the readers was incredible! I received tons of emails, awesome critics and plenty of suggestions for the sequel. Back then I wrote that I wanted to create and publish a second version. So I took a little time out of icon design to get my mind clear and then started to work on the <<extended>>-package. With the ideas in my head and the great suggestions I got from you, designing Flavour <<extended>> was a blast and so much fun for me. Finally I came up with 270 new icons – many more than I would have expected initially. And I hope you like them all and use them in your web-projects.

As last time, all icons are 100% free to use for both private and commercial projects and all the .psd-sources are available to download as well. Please feel free to learn from them and make them fit your personal needs if they don’t do yet.

Have fun with the package and please feel free to support me with more feedback in the comments, via email at icons [at] addictedtocoffee.de or on Twitter! Together we can even create a third part if you like one to be released!

Best wishes from Bonn, Germany,

Oliver

What icons do you miss in this set?

Please let us know and we’ll design them for you and release in the final version of the package!

Related posts:

1. 5 Useful Coding Solutions For Designers and Developers 5 Useful Coding Solutions For Designers and Developers...

Related posts brought to you by Yet Another Related Posts Plugin.

The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn’t seem to flow correctly, and nothing connects the way it should.

In this article, we’ll discuss 8 useful layout solutions and techniques that will help you create a clean and organized content layout. The 8 techniques include sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.

You may also be interested in the following related posts:

1. Sliders and Carousels

Sliders, also known as carousels, are an organized, interactive and quite smooth way to present information. Sliders are a popular technique because they’re very usable, and you can put a good amount of content into a fixed, compact area – without a slider this content has to be placed somewhere on the page and in many cases you may have no space for it and you may deliberately want to show some information only “on demand”. This helps the user to focus her attention on one content block at a time which is helpful and convenient. And this is exactly where sliders may come in handy.

Examples of Sliders

Thumbnails and icons in the navigation area
When designing a content slider or an image slideshow, it’s best to provide users with icons or thumbnails in the navigation area to offer a simple and intuitive navigation. Thumbnails and icons give the user some orientation, explaining where they currently are in the slideshow and what navigation options are available (e.g. a slideshow can have a horizontal or vertical navigation). Besides, the user can quickly select a particular page on the slider.

In the slider used on the Coda site you can see that there are tabs provided at the top of the slider. They create a sort of “slider/tab”-element mixed together. This is an excellent idea, because by just looking at the thumbnails, the user can easily find a page in the element. Also, the icons add a very strong, memorable and clear visual support. Apart from icons and labels you can also use image thumbnails or even numbers for the same purpose.

Slider is used for navigation in product items
Opposite to the example above, sliders can be used not only to display large chunks of information, but also to help users navigate through dozens or hundreds of available product items in a convenient way. For instance, SourceBits (see the image below) uses multiple sliders (a horizontal and a vertical one) that provide users with an appealing navigation through CD covers.

The slider has large circular buttons on each end to indicate how the navigation works. There are smooth transitions, so the slider looks quite attractive and is comfortable to use. Also, you’ll notice that the illustrations are nicely spaced out, so it is easier to click on individual icons and it is also well-organized. Each item also has a nice lightning hover-effect.

Vertical content sliders with large horizontal “clickbars”
Let’s take a look at the slider used on QuickSnapper. It is a very functional vertical slider that works perfectly in the layout. The slider holds a large amount of snapshot items. It is very well organized, and it is easy to find the items within the element. The best part of this slider are the buttons on the bottom and on top of it. They are extended to the entire width of the slider. The large buttons make it much easier to use the slider.

For instance, if you’ve picked one of the presented items and then decided to check further items, you can simply click on the large bar on the top or at the bottom to navigate. That’s convenient and user-friendly. Also, if you go to the site and try it out, you will notice that the buttons also have very nice :active- and :focus-effects, which looks nice and improves usability.

Slider Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

• Slick Accessible Slideshow using jQuery
• Coda-Slider 1.1.1
• jquery.scrollable 1.0.2
• Create an Amazon Books Widget with jQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• iCarousel

2. Tabbed Navigation Elements

Basically, tabbed navigation is a technique that is very similar to sliders. You can keep a large amount of data in a compact area that is much smaller than what you would normally need. Tabbed navigation is a common practice, and there a few different ways to carry it out. We’ll focus on the use of tabbed navigation elements within a page, instead of focusing on the use of tabs for main content navigation. A tabbed element obviously separates different content blocks, yet combines them into one area that only takes up a small amount of space.

Examples of Tab Elements

Distinctive backgrounds, large clickable areas, clear separation
The first example comes from the “Performance” section of the Mac Pro website, and is a perfect example of a well-constructed tab element. The labels on these tabs are readable, have a large clickable area, and have a good visual separation, so they look exactly as most users expect them to look like. Also, you can see that the currently opened tab has a background matching the background of the main contant area. The inactive tabs have a slightly darker background, and a drop shadow from the content block to add depth and dimension. That’s a very simple effect, yet a very effective one.

Clean tabs with separation of buttons
Here’s another good use of tabs to present the information in a compact manner. The way Atebits’s layout was constructed, there was not a huge amount of space for multiple sections of content. Therefore, they placed the three sections into tabs, so the layout remains very clean and organized. Again, the open tab takes on the background color of the main content area, while the inactive tabs have a darker grey background. Also, you will notice a nice separation between the tabs to further define each individual button. A slight bevel is used to cleanly separate the buttons.

Clean separation of the entire tab set
Fontcase has another nicely designed tab set with a strong modern look and feel. Although this design doesn’t have a separation between the unopen tabs, the open one has a clear border. Also, you can see that there is a border above and below the set of tabs. These tabs make use icons and white space to support the text, making the tabs easier to use.

Tab Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

• Create a Slick Tabbed Content Area using CSS & jQuery
• JavaScript tabifier
• Yetii – A JavaScript Tab Interface
• Tabbed Page Interface
• Updated JQuery Nested Tab Set
• Scriptaculous Tabs
• Accordian Tabs

3. Modal Windows

Modal windows, or floating windows, are an excellent way to present additional information that has no space in the page layout. In modal windows, you can present larger images, extra content, alerts/tips that the user will easily notice, videos, and more. When you put information in a modal window, you need to make it clear for your users how to close the window.

It is also important that a link, a thumbnail, an icon, or any other graphic element that triggers the modal window to open is strongly (and clearly) related to the content of the modal window. A similar icon, header or visual can help users to establish a connection between the original link and the opened window.

Examples of Modal Windows

Modal windows for logins and signups
The most common element where modal windows are used (apart from “traditional” media-files such as images, audio, video, screencasts etc.) are login- and signup-windows. When you use a floating window for a login/signup, you are saving a good amount of space on each page. Also, the user doesn’t have to load an entirely new page just to login. They can login on any page on the entire website without their current session being interrupted – of course, if the designer of the site made sure that the login- or signup-process can happen behind the scenes with Ajax.

Grooveshark uses a nice signup-window on each page throughout its web-site. Notice that the login-button in the signup-window does not open a new page, but replaces the sign-up form below with the login-form input fields (using the accordion-effect, see below). That’s very convenient and user-friendly.

Fade out the page or/and use a drop shadow
If you are going to be using a modal window, it is very important to fade out the page behind the window in some way. This could mean using a semi-transparent backdrop, a drop shadow, or both. By doing this, you are making two important design decisions. First, you are bringing the users focus toward the floating window and away from the page behind the window.

Also, you are adding more depth and separation between the window and page, to give the appearance the window is actually physically floating. In the screenshot below (KissMetrics) , you can see a login form contained within a floating window, and the page behind is faded out. By the way, notice, how well the cancel/sign in-buttons are visually designed, too. Beautiful design.

On RealMacSoftware a dropshadow is used behind the window instead of the entire page being faded out. This technique still works nicely by creating depth and separation.

Modal Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

• Fancy Lightbox
• Lightbx 2
• Facebook Image/Content Viewer
• Woork Mootools Lightbox
• nyroModal JQuery Plugin
• JQuery Alert Dialog
• LightWindow
• ThickBox 3.1

4. Rollover Elements

A rollover element is another design element that is nowadays gaining on popularity, particularly in corporate web-sites, portfolios and product sites. The main idea behind the rollover element it that when users hover the mouse over some site element such as a button, the content in some other layout area is displayed automatically. Take a look at the examples below to get a better understanding of what exactly is meant.

Examples of Rollovers

Rollover tabs
Below you’ll find a screenshot of the Miro’s homepage where a large and very well-designed rollover element is used. This element is similar to a slider, yet it doesn’t use a button to slide through pages – the sliding takes place automatically.

Subtle rollover hover elements
TaoEffect is a brilliant example of a rollover element that present additional information in a very beautifully styled and clean layout (this effects was used on the Coda-site first, but we chose to use this example instead). The information is presented in a very user-friendly way; all you have to do is hover over the button.

If you visit the site, you can see that this rollover has some nice and soft animated transitions. The opening transition is a vertical wipe with a fade. Finally, you can see that the background is semi-transparent. There is also a highlighted border that adds a clear separation from the other content.

A content map with rollover elements
OneHub uses a rollover element for another effect. Similar to a map, the site page is split into a number of chunk with hints; when a visitors hovers over a hint, additional information is displayed automatically. This effect can be particularly useful for sites that are supposed to showcase product’s features or provide users with explanations or an introduction.

Rollover element integrated in a slideshow
Another interesting design approach is presented by SquaredEye – the carousel menu uses rollover effect on the trigger elements to let the users preview previous and next navigation item. In some situations this approach can be useful.

Tooltip/Hover Element Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

• Prototip 2
• Coda Popup Bubbles
• Build a Better Tooltip with jQuery Awesomeness
• jQuery plugin: Tooltip
• Create a Simple, Powerful Product Highlighter with MooTools
• Easiest Tooltip and Image Preview Using jQuery

5. Progressive Layouts

A “progressive layout” is one way to describe a series of content chunks that are supposed to be displayed on a site in a specific order. This is a quite uncommon way to organize information, but it still can be seen on many sites. A progressive layout helps users to move through a long series of information easily.

Examples of Progressive Layouts

An entire site consists of progressive pages
The entire portfolio Sursly.com (shown below) is based on a progressive layout. You can see the “Go” button in the upper right corner of the page. Each page is accessed from the page before it. This progressive system of pages is a substitute for a navigation bar or menu. Of course, the main disadvantage of such layout is the simple fact that it is quite hard to navigate and rather serves the purpose of interactivity.

Although single pages in such layouts can be bookmarked (using the #-anchor), they make it impossible for random visitors to get a broader overview of available navigation options immediately. Besides, such layouts usually have only one “direction” of navigation – forward. It’s not good from the usability point of view.

Progressive Vertical Page
Danny Blackman (the example below) shows a portfolio that is constructed solely on a progressive layout of content. There are separate elements, all displayed vertically on a single page. An auto-scroll feature is provided to bring the users from element to element throughout the page. Again, no menu or main navigation is used, just buttons bringing the user from one element to the next, or back.

ScrollTo Script

• ScrollTo – This is a JQuery plugin that can be used for vertical progressive layouts, like the one shown above.

6. Grids

No article about layouts would be complete without a mention of grids. Grids are often considered to be the fundamental part of any balanced, ordered and concise web layouts. Many designers consider them to offer the most effective way to communicate a large amount of information to the users. Grids can be used solely to display information, without the use of any other techniques. A good grid system will join all of the content of a page into one flowing layout, but still allow for readability and scannability of individual sections.

In the website below, you can see a very strict grid layout in use. There is only a page of content on the entire site, so this page has a good amount of information. However, the information is organized into a clean grid with two columns, creating a strict, strong and solid layout with the fair amount of spacing; the content is readable and scannable.

Using different backgrounds to separate sections of a grid
When making a grid, you may have a large amount of information in a very compact area. You need to make it clean and organized, but don’t have enough room for a good amount of (positive and negative) white space. Therefore, you can use different backgrounds for each sections of a grid. Instead of spacing between grid sections, you just need a small amount of padding, and it will still look nice. On Valleycreek.org (see the image below) you can see this very tactic being used to create a very well-constructed content layout. You can see that a very thin line is used to divide sections, but aside from that the color contrast provides a separation that is distinct enough.

Grid Generators, Templates, and Tools

• Grid System Generator
• Variable Grid Systems Generator
• 960 Grid System
• Grid Designer
• Grid Calculator
• 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)

7. Accordions

Accordion menus are based on the same concept as sliders and tabs: it takes a large amount of information and encapsulates it in a smaller area. Accordions are blocks organized in a vertical or horizontal manner such that once a tab is clicked, a content-block slides upon the other one – similar to an accordion, hence the name.

Examples of Accordions

Functionality and large clickable areas
Alex Cohaniuc uses a very well-designed and accordion menu. Keeping portfolio items in the accordion is reasonable because it keeps (unnecessary) details about each project hidden and displays them on demand. This accordion is well designed for several reasons. First, you will notice that the headers of each canvas a very large, making them easily clickable. Also, you can see that each header uses a triangle to symbolize whether the accordion tab is opened or not. Finally, in this design, the header of the current tab has a distinctive background color.

Horizontal content slider
Jason Reed uses the accordion to keep the content of the entire website on one single page. Instead of having the appearance of a totally out of place element, this accordion takes on the same styling and color as everything else on the page. In addition, this accordion is horizontal (although the navigation options have a vertical orientation). Also, take a look at the tabs. First, you will spot a significant amount of space between each of the tabs. These tabs, or headers, don’t have a separation like you saw it in the last screenshot, so a good amount of space was used to separate here instead. Also, large and readable labels are included in this accordion. These little details are important, because the user needs to know exactly what to expect in each tab.

Accordions containing images and information
Marius Roosendaal uses another excellent vertical accordion to “hold” portfolio images. Each content block is an image showcasing a work, same as before. However, this one includes textual labels for each image. You can see that a small button is used to show/hide these descriptions. You can also find a link to a larger, more in-depth view of the portfolio item. You can’t present huge amounts of information in an accordion this small, so it is always good practice to include a link to more information if possible.

Accordion Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

• Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
• Apple.com Downoads Page Slide out and drawer effect
• UI/API/1.7.1/Accordion JQuery Plugin
• JQuery UI Accordion
• Simple JQuery Accordion menu
• JQuery Accordion Madness
• jQuery Examples – Horizontal Accordion

8. Mega-Drop-Down-Menus

Navigation doesn’t have to be a simple set of links; recently it is “reinvented” to present not only available navigation options, but also the hierarchy and structure of the site’s content. The so-called “Mega” drop-down menus are commonly seen in e-commerce or product layouts as a way to show detailed information about products. Menus such as these are a new trend, and are quickly catching on because they can instantly provide users with the information that they are looking for – without a single click, quite similar to the concept of a rollover element.

Examples of Mega-Drop-Down-Menus

A classic example for a mega drop-down menu is the Guide Index on Ruby On Rails Guide. The menu serves as a well-organized and nicely presented secondary navigation menu. Notice that on contrary to the menus presented above, this menu uses a “switcher” icon on the right hand side to trigger the drop-down menu at the bottom. Also notice a nice soft shadow that gives the menu depths and helps it stand out.

Multi-level menus with information
Porsche (shown below) is a perfect example of the technique explained above. Porsche’s homepage contains a multi-level menu that allows users to navigate to all of the cars manufactured by Porsche without a single click. On the third level, a window with information about the selected car can be found. The window contains an image, many links, and quick information about the car. Of course, the large content block is a large clickable area, hence all details and features can immediately be clicked. For a better understanding of the technique, click on the image below and visit the full page.

Search results displayed in a drop-down-list
A recent trend that is related to this technique is the tactic of including search results in a “drop-down” menu. This technique is used in the Media Temple Knowledge Base. Instead of using an entirely new page to show users the search results, designers chose to display results in a drop-down list, which updates while you type. However, take note of the fact that a link is provided to full search results on a page, which is not to be forgotten in such situations.

Providing extra information in drop-downs
Once again, on Gateway.com you can see a mega menu being used to show information about products, along with links. The products in this drop-down are very well-organized and the images are included to add visual support. This menu provides a bit of information too, such as the price listed for each computer. This helps the user pick products before viewing the page, because many potential customers are likely to be interested primarily in price – at least in the initial stage of the purchasing process. Mega menus such as this ultimately make navigation easier and offer a better way to present information that users are looking for.

Menu Scripts

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 – JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery

Related posts:

1. 5 Useful Coding Solutions For Designers and Developers 5 Useful Coding Solutions For Designers and Developers...
2. Showcase Of Well-Designed Tabbed Navigation Showcase Of Well-Designed Tabbed Navigation...
3. 40 Creative Design Layouts: Getting Out Of The Box 40 Creative Design Layouts: Getting Out Of The Box...

Related posts brought to you by Yet Another Related Posts Plugin.

In January last year (2008), we put together a list of 100 Excellent Free Wordpress Themes, over a year has passed and Wordpress development has progressed very fast and gained even more in popularity. We felt it was the right time to put together an updated post and offer our readers the best free themes that Wordpress can offer.

High quality free Wordpress Themes have become harder and harder to find in the past year, with the influx of premium themes, more and more designers and developers are selling themes (and rightly so, they do amazing work). But, that aside, the quality is certainly there, and we are sure you will be impressed with this Wordpress theme compilation for 2009.

Blog & Portfolio Themes

One Room [Demo]

Elegant Grunge [Demo]

Fusion [Demo]

Matalag [Demo]

Typebased [Demo]

Irresistible [Demo]

BlogTheme [Demo]

Colourise [Demo]

Cellar Heat [Demo]

Pixeled [Demo]

Outdoorsy [Demo]

Vector Flower [Demo]

Magaling [Demo]

WildDreams [Demo]

WPESP [Demo]

Portfolio Press [Demo]

Black Pearl [Demo]

Masinop [Demo]

WP CODA [Demo]

Google Chrome [Demo]

miniBlog [Demo]

Absynthe [Demo]

BlueDiamond [Demo]

BlackPower [Demo]

Old School [Demo]

Nami

Freemium [Demo]

Fholio [Demo]

Versatility Lite [Demo]

Curious [Demo]

Sketchy [Demo]

Sanddollar [Demo]

Typogriph [Demo]

Coffee Desk [Demo]

Andrea 0.3 [Demo]

Magazine & Corporate Themes

Skyye News [Demo]

Meta-Morphosis [Demo]

TheLatest [Demo]

Scarlett [Demo]

TurnOut Mag [Demo]

MegaNews [Demo]

SchemerMag [Demo]

TransGravita [Demo]

Chara [Demo]

Marcelle [Demo]

Red Accent [Demo]

Parchment [Demo]

ThemePod [Demo]

The Pinnacle [Demo]

MMOZINE [Demo]

Gamezine [Demo]

Milano [Demo]

Zinmag Tribune [Demo]

IsoTherm News [Demo]

CorporateMag [Demo]

CryBook [Demo]

Photoblog & Gallery Themes

PhotoMadness [Demo]

Snapshot [Demo]

AutoFocus [Demo]

Futurosity Aperio Prototype [Demo]

Linquist [Demo]

Fotofolio [Demo]

Viewport [Demo]

Folio Elements [Demo]

iQ2 [Demo]

F8 Lite [Demo]

The Unstandard WP 2.7 [Demo]

Minimal & Clean Themes

MagZine [Demo]

Equilibrium [Demo]

Fontella [Demo]

Minimo [Demo]

Oulipo [Demo]

Manifest [Demo]

Modern Clix [Demo]

Sharpfolio [Demo]

Sator-ii [Demo]

Undedicated [Demo]

Clean Home [Demo]

Sans-serif Racer [Demo]

Lead

Grid Focus 2.7 [Demo]

Cardeo [Demo]

Gigantic [Demo]

Smashing Magazine Themes

Imprezz [Demo]

Compositio [Demo]

Vintage and Blues [Demo]

ASCII One [Demo]

Black Magic [Demo]

Color Paper [Demo]

Cellar Heat [Demo]

Simply Ornate [Demo]

Agregado [Demo]

Notepad Chaos [Demo]

Wordpress Fun [Demo]

Magazeen [Demo]

Gallery [Demo]

Infinity [Demo]

Something different…

Changing Room [Demo]

UnderCon [Demo]

Crafty Cart [Demo]

WP-Dashboard Like [Demo]

City Dreams

HELLBISCUIT [Demo]

Related posts:

1. Flash Wordpress Theme 1st of its kind Flash Wordpress Theme 1st of its kind...
2. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials The Power of WordPress and jQuery: 25+ Useful Plugins &...
3. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...

Related posts brought to you by Yet Another Related Posts Plugin.

Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from everyday life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they serve the function that faceless, shiny, glassy 3D-buttons completely fail to deliver: individuality and personality. “Personal” designs appear more familiar and more friendly. Used properly, such elements can give a human touch to design and communicate the content in a truly distinctive manner.

However, apart from visual design elements, one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To give you some ideas of how exactly it can be done, we have been collecting examples of creative design layouts. Design was more important to us than a concrete implementation of some creative idea. We also weren’t interested in whether the code validates or not. Below are some examples we have found so far.

In the showcase below we present 40 creative out-of-the-box layouts that break the boring 2- and 3-columned, boxed layouts. We have collected pure CSS -designs, CSS+JavaScript -layouts as well as Flash -designs. Most designs presented below risk their site structure and content presentation with unusual approaches. That’s what makes them different. Hopefully you will find some creative ideas that you can develop further in your future projects.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

20 × Getting Creative With CSS

Pavel Buben
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.

AIGA Los Angeles
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.

SpaceCollective
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.

Jason Santa Maria
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.

Checkout: Point of Sale for Mac (POS)
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.

NOFRKS.design
NOFRKS uses JavaScript to slide between various parts of the site. What we found more interesting was the way the content is presented. Most elements are placed within a context, giving the content a secondary meaning.

SMS Parking
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.

Tri-Win
Sometimes a background image is enough to make the layout stand out. Although one can recognize a conventional layout structure here, the design looks distinctive and memorable. The background image of the site perfectly fits the company, which offers mailing services.

Matriz Communicacao
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.

Mihmorandum
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.

3rdM
3rdM uses icons to indicate various navigation options. This is not a type of layout you will find in many other web designs. And that’s what makes the layout creative.

Nile Inside
Many portfolios use vertical layout to showcase their works. Nile.ru displays its works in a chronological order as if it was a horizontal blog.

Rockatee
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.

The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.

Get London Reading
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.

BL:ND ( blind )
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.

The portfolio of Hannibal
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.

URLshrinker
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.

15 × Getting Creative With CSS+JavaScript

ShopComposition
ShopComposition offers a sliding navigation at the top of the site. Users can choose the content they would like to read and select the width of the content blocks. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

forgetfoo
Forgetfoo uses an almost minimalistic, simple layout with a sidebar and a content area. Designers removed all necessary and unnecessary details focusing only on last blog entries. The design doesn’t contain any category navigation options. That’s unusual, but may be a little bit too much of the minimalism. Navigation through blog posts is realized with Javascript.

Include
On Include one content block and the corresponding navigation block seem to “hang in the air”. Essentially the page has two columns; however. the layout seems to be quite original — maybe because of the cows placed on the background for some reason. The navigation on the right-hand side is realized with Javascript.

Kobe
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

tap tap tap
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.

youlove.us
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.

youlove.us” width=”500″ />

Method: A Brand Experience Agency
This design agency uses a flexible JavaScript-based layout which updates its size depending on the browser window size. The content is “packed” in boxes is usual for such a grid-based design; however, the alignment of the boxes makes the design literally stand out.

Viget Labs
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.

Lucuma
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.

Axel Peemoeller Design
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.

IDEO
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.

Bohdan Levishchenko
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.

MelissaHie.com
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.

www.MelissaHie.com” width=”500″ />

Hotel Oxford – Timisoara
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.

thruSITES / Portfolio
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.

Erwin Bauer KEG
The portfolio site of Erwin Bauer takes a different approach to using a pannable user interface, but implementing in JavaScript rather than in Flash. The site allows users to click and drag to pan the canvas, or to use links positioned around the content to move around. The design is clean, and mimics a design document with regisration and crop marks, and visual cues about the directions the canvas will pan to when you navigate. [via]

5 × Getting Creative With Flash

The Secret Location
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via]

Kamil Gottwald
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.

Grooveshark Lite
Grooveshark seems to imitate an iPod-interface and does it indeed very well. Although it may be not very creative, such layouts are hard to find on the Web.

Jeremy Levine Design
Flash offers many creative possibilities for an interactive navigation design. Jeremy Levine uses dynamic paper strips which seem to hang in the air.

SeymourPowell
SeymourPowell has come up with an interesting idea to provide its visitors with some intuition of how good its work is. Click on the pile to find out.

Muku Studios
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.

Related posts:

1. Web Form Design: Modern Solutions and Creative Ideas Web Form Design: Modern Solutions and Creative Ideas...
2. Web Design Trends For 2009 Web Design Trends For 2009...
3. 8 Layout Solutions To Improve Your Designs 8 Layout Solutions To Improve Your Designs...

Related posts brought to you by Yet Another Related Posts Plugin.

Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.

As you know, we, at Smashing Magazine, are quite curious folks. We are truly interested in unusual design approaches and creative solutions. Therefore we are regularly looking for them and once we found them, we analyze them, try to understand them and try to figure out both advantages and disadvantages of the technique we have found. And in this post we want to share some of them with you.

We would like to start with 5 advanced elegant coding solutions and ask you if you are interested in this series and would like to have more similar articles. Please let us know what you think in the comments to this post. Now let’s dive in. You should probably have some CSS-knowledge already before starting reading this article.

1. Sliding vertical navigation + overlay

Over the last years we have discovered a strong trend toward sliding horizontal menus (also known as Coda Slider effect). In particular, they are often used in corporate designs where a product and its features are supposed to have the dominant position in the design layout. Kobe uses a similar yet different approach.

The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

All content blocks are not loaded on demand via Ajax, but loaded up front when the page is loaded. All content blocks are loaded in the very beginning. Although the page seems to be animated, Flash is used sparsely — essentially, the design is a pure CSS+JavaScript-based solution. The main problem of the design is, however, that it’s just impossible to navigate the site if JavaScript is disabled. In fact, navigation options are not visible at all. As professional, you should always keep gradual degradation in mind.

How is it done? For the main horizontal navigation at the top of the site, kobe use CSS sprites. All navigation options are packed in one single image; the displayed chunk of the sprite is selected via background-position-attribute as usual. The sprite itself is a transparent .gif (here is the file). The position of animated sparks is defined using JavaScript — depending on the currently selected navigation option and using absolute positioning.

The main content area consists of the background image and an overlay-layer which displays related information and (sometimes) further navigation options. All overlay-layers (for all navigation options) are loaded together with the main page and are not displayed unless an appropriate navigation option is selected. The sliding is created with the SlidePanel-component of the jQuery library.

The overlay image is semi-transparent and is positioned absolutely within the main content block upon the background image (using the z-index-attribute). The background image for each navigation section is defined via CSS for each overlay-layer.

A very similar overlay-approach is used to present the description of a project in Ivan Aleksić’s portfolio (see above). Initially the visitors see only thumbnails of the projects done so far. When one of the thumbnails is hovered, further information is displayed in an overlay beyond the thumbnail. This overlay always uses the space that was previously occupied by the hovered thumbnail and the one below it. The tiny arrow at the right of the site always allows users to jump to the top of the page.

2. Neighbours navigation

EllisLab uses an interesting design approach to present the members of its team. Instead of listing each of them one after another, with small thumbnail and brief description, they use simple yet intuitive primary and secondary navigation menus placed next to each other. And to make sure that visitors are convinced that the team takes its work very seriously, quite esoteric cartoons are additionally placed next to the menus.

Both primary and secondary navigation menus use arrows and slight color indications to highlight where users are at the moment. Notice that the menus are not just placed next to each other, but divided via a sharp vertical line. Besides, the secondary menu is placed few pixels below the upper border of the left one, and thus indicates the hierarchy in the navigation.

The whole content area is divided into two main parts — the primary navigation at the left, and the content block at the right. The latter contains the secondary navigation and a sub-area for description on the right hand-side (see screenshot below). The background-images for the content block are defined via CSS and are applied via IDs. A semi-transparent background image is used for the description block on the right-hand side of the content block. The rest is pure CSS and (X)HTML. Simple yet elegant solution.

3. Panel block

Over last months it seems to have become a common practice to focus the design of a site on its main objective and display the unnecessary details on demand. For instance, Wishingline presents contact information and links to social networking profiles in a semi-transparent panel. This panel is opened when the user clicks on some specific link and is not displayed until then.

Notice that different services are highlighted differently — designers use both link colors and icons to precisely communicate links to external services. Usually it’s not the best decision to use multiple link colors for similar tasks, but in this case it works fairly well.

All “social” data is hidden in the panel — probably to not overcrowd the design with vivid symbols and icons which simply do not fit to the initial design. This design approach has advantage of offering clean layout and disadvantage of hiding secondary navigation options. The trade-off is, as always, designer’s decision, but in this case both options would probably work equally well.

How does it work? The panel itself has a semi-transparent background and is given a fixed position in the layout using absolute positioning and the z-index-attribute. Hence, it doesn’t change when the font-size is changed or the browser window is resized. That’s not necessarily a good thing, however, one can live with that.

To create a panel designers use two containers put next to each other and positioned absoultely. The first one has a transparent pointer as the background image and is placed next to “click to view”-link. The second container with a border-background-image is placed next to the first one, creating the illustion of a “bubble”-pannel. The single elements (links to social networking profiles) in the second div-container are marked up using a definition list <dl>.

Notice that designers also use a traditional UI element at the bottom of the panel to indicate that the panel can be closed. It would actually make more sense to place this button at the right-hand side at the top of the panel since this is the place where most users would expect the button to appear.

Antonio Lupetti uses a similar approach to display all options for RSS-feed-subscription. It would actually make sense to remove dots for the “Feed RSS”-link using outline: 0;-assignment (notice that one should be careful when using the outline property, since it is really useful to navigate through the page using keyboard).

4. Tags Chart List

There is a variety of ways to design tag clouds. Styled according to its weight, tags in tag clouds reveal the importance of a topic or site quality via an assigned visual weight (often color and font size). However, there is one important thing which “normal” tag clouds fail to do: they convey the big picture, but can’t reveal meaningful data, information in terms of how popular these tags are.

Jeff Croft uses a different approach for tags — tag chart list reveals not only most popular tags, but also how popular these tags are.

Apart from the actual tags “most popular tags”-section shows how often the tag was used and also displays a vertical bar which indicates its popularity compared to other tags. Notice that Jeff Croft uses three levels of visual communication (position of the tag in the list, vertical bar and the number on the right-hand side) — visual redundancy is often not superflous (as usually assumed) and useful to help readers understand the context in which data is presented.

Once some tag is hovered, the corresponding block-level-element is highlighted using a lighter background color. Notice that both bar and the figure are highlighted as well. How is it achieved? Jeff Croft uses an unordered list; each list item contains three block-level-elements: a link to the tag, a span-element (span.count) displaying the figure on the right-hand side and a span-element (span.index) displaying the bar (span-elements are inline-level-elements, of course, but they are declared to block-level-elements in Jeff Croft’s stylesheet).

Tag links are aligned to the left using relative positioning, the figures on the right hand-side are pushed to the right using absolute positioning within relative positioning (standard approach also known as Making the Absolute, Relative). The bar is initially assigned the width of 100% for every tag. When the page is being loaded the width of the element is changed (probably via PHP Python on the fly) using style="width: xx%"-assignment. Styling is defined in CSS, of course. The position of the bar is, again, defined using absolute positioning within the absolutely positioned list item-element. The hover-state is defined using li:hover .index, li:hover .count and li:hover-definitions.

It’s worth mentioning that Jeff Croff uses an accessible design approach: if no visual elements can be displayed, the index-element displays the percentage value of the popularity of the tag; otherwise this text is removed using the text-indent-attribute with CSS.

Notice that this solution is also flexible. For instance, if the sidebar will be expanded for some reason, the tags chart list will be expanded automatically since percentage values are used. That’s efficient.

5. Clever archive navigation

Designing archive navigation isn’t an easy task, particularly because designers don’t want to slam visitors with too much information and users often just want to quickly get the information they are looking for in the first place. Chris Shiflett uses an interesting approach to present a user-friendly, simple and compact archive navigation.

Jon Gibbins, Jon Tan and Chris Shiflett combined both levels of navigation — year and month navigation — within a compact two-lines-block. The current selection is clearly visually highlighted using colors and arrows. Available navigation options are clear as well. Once a visitor has decided to browse through the navigation section she has to select the year and the month; however, this can be done quickly since the the month selection is updated automatically when a new year is chosen.

The markup and JavaScript are quite straight-forward: the designer uses unordered lists and definitions lists to markup the year as well a special class to indicate currently chosen year and month. When some year is clicked, a new layer under the year navigation is displayed — there visitors can also define the month they are interested in. There seems to be a bug since in the very beginning when the page is being loaded, all navigation options for all years are displayed.

It’s a simple yet useful idea to present the archive navigation on each archive page, so the user can easily navigate through all posts without going to the archive-page and then to the post again. Please also notice the month navigation at the bottom of every archive page. Maybe it would actually make more sense to present the full archive navigation at the bottom of the page as well.

Related posts:

1. 80+ AJAX-Solutions For Professional Coding 80+ AJAX-Solutions For Professional Coding...
2. 8 Layout Solutions To Improve Your Designs 8 Layout Solutions To Improve Your Designs...
3. Web Form Design: Modern Solutions and Creative Ideas Web Form Design: Modern Solutions and Creative Ideas...

Related posts brought to you by Yet Another Related Posts Plugin.

Joomla is one of the most powerful, robust and feature-rich content management systems out there. Besides being open-source, Joomla is capable of some really stunning designs through the use of modules and built-in display customizations. Below, we present a list of 20 35 of the coolest, slickest, most eye-catching Joomla template designs.

Commercial Templates

Mynxx | Demo | Support
This theme incorporates the popular Joomla ecommerce / shopping component, Virtuemart. This integration is applied in a variety of platforms, such as modules, a custom virtuemart theme and template coding. The custom Virtuemart theme allows us to override the core output, which results in a more seamless integrated with the Virtuemart shopping component.

Akiraka | Demo | Website
One of RocketTheme’s finest templates. The fully transparent design gives you complete control over the color of the website.

Lightfast | Demo | Website
The definition of a light and fast template. Joomla is powerful, but it is also big. Because of all the possible features to take advantage of, templates are often bloated with tons of code. Lightfast is Joomlashack’s response to this problem. The entire file is only 13k and is SEO optimized right out of the box. Template costs $39.95.

Simple Praise | Demo | Website
A very smooth rotating content module and lots of module positions makes this a very versatile Joomla template. Club membership costs $75 for 1 year.

JoomlaPraise.com” width=”500″ height=”225″ />

Social Praise | Demo | Website
SocialPraise is built for community collaboration. It is templates like this that really show what Joomla! can do as a content management system. SocialPraise integrates completely with the most popular Joomla community building components like Community Builder and Fireboard forum. Club membership costs $75 for 1 year.

JoomlaPraise.com” width=”500″ height=”225″ />

NewsPro | Demo | Website
A sliding content module crams headlines into this easy to navigate template. The small body text and expansive menu suggests this template would work well as a magazine layout. Club membership costs $99 for 1 year.

Joomlaxtc.com” width=”500″ height=”225″ />

Periphelion | Demo | Website
One of the best grunge-themed templates for Joomla. Multiple color styles make this template incredibly versatile.

City Portal | Demo | Website
A clean, smooth template, perfect for a magazine or portal.

News Link | Demo | Website
As the name states, a great news template with built-in news rotator with tons of features.

Gridiron| Demo | Website
A simple but elegant alternative to the clutter of a typical Joomla template.

Vertigo | Demo | Website
A template with “Paralax Motion” built in. Check out the demo, because this template is about as cool as it gets.

Small Robot| Demo | Website
Another simple design for websites with less informaiton to display on the front page.

CelebsPlazza | Demo | Website
An eye-catching design with four styles built right in.

The News | Demo | Website
Another slick news template with a smooth image slideshow.

Jet30 | Demo | Website
A Web 2.0-style template for a blog or information portal.

Free Templates

Brown Kick | Download | Demo | Website
A cool coffee-themed template with unobtrusive navigation and nice blog styling.

Optimus | Download | Demo | Website
A straightforward Joomla template that could work for almost any kind of website.

Novus | Download | Demo | Website
An incredibly versatile template, ready for complete customization.

Simplify | Download | Demo | Website
Three color combinations and a block design make this template great for a professional presentation.

Contaminated | Download | Demo | Website
Another cool grunge theme with nice touches, like full typography options.

RokWebify | Download | Demo | Website
A Web 2.0 template with many color options and a simple interface.

EMagazine | Download | Demo | Website
As the name suggests, a good magazine template without being too heavy on bandwidth-eating images.

Portfolio | Download | Demo | Website
One of the best portfolio options for Joomla, perfect for artists and Web designers.

PortfolioDesign.org” width=”480″ height=”279″ />

Jakarta Times | Download | Demo | Website
A super-simple news and blog template that loads fast but can hold tons of information.

VJ-08 | Download | Demo | Website
This simplest of simplistic designs provides one big header image to get your message across fast.

Veero.net” width=”479″ height=”279″ />

Nova | Download (free registeration required) | Demo | Website
This “pure CSS” template is great for a blog because of the front and center main body content. Three module positions are available for pushing RSS, a quick blurb or a login module.

Joomlashack.com” width=”500″ height=”225″ />

Jamba | Download (free registeration required) | Demo | Website
Ten module positions and five preset color settings make this a truly versatile template. A newsflash module position lets you highlight important information.

Joomlashack.com” width=”500″ height=”225″ />

Back to Nature | Download | Demo | Website
This 3-column template is an out-of-the-box option for blogging or an online community.

Themza.com” width=”500″ height=”225″ />

Praise Corp | Download | Demo | Website
An incorporated login form and search field compliment the boxy style of this template.

JoomlaPraise.com” width=”500″ height=”225″ />

Contest Entry | Download (free registration required) | Demo | Website
This template was JoomlaPraise’s entry into the Joomla 1.5 template contest. With no shortage of module positions this template was good enough to be considered for part of the Joomla core.

JoomlaPraise.com” width=”500″ height=”225″ />

Enchanted | Download (free registration required) | Demo | Website
Several module styles let you customize this template to fit your needs. Incorporation with the fireboard forum is a bonus feature of this template as well.

Pure-Joomla.com” width=”500″ height=”225″ />

Pluralism | Download | Demo | Website
This simple template is one of the rare Joomla templates with a right sidebar. A big header draws attention to the content quickly.

JoomlaBamboo.com” width=”500″ height=”225″ />

Epic | Download | Demo | Website
This template can be customized in many ways. The free version comes with one color option but also a smooth image slideshow with a transparent caption feature. PRO Version available for $25.

JoomlaShine.com” width=”500″ height=”225″ />

Webmedie | Download | Demo | Website
This rounded template has glossy module styling and an oversized header.

ContentPortal | Download (free registration required) | Demo | Website
An incorporated search field fits nicely in this template. A large module position on top is perfect for a large banner or newsflash.

Estimetemplates.com” width=”500″ height=”225″ />

Related posts:

1. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...
2. Youmovies – Joomla Movies Portal theme Youmovies - Joomla Movies Portal themeYoumovies - Joomla Movies Portal...
3. 25+ Magento Templates For Your E-Commerce Business 25+ Magento Templates For Your E-Commerce Business...

Related posts brought to you by Yet Another Related Posts Plugin.

Magento is a popular open source e-commerce software platform that has a modular architecture and is extremely flexible. It comes with a number of online shop maintenance capabilities. It is also simple to configure and easy to customize. And despite the fact that it was launched just last year, it has been gaining more and more popularity among Web designers and e-business owners.

Magento has a ton of credentials in its pocket from some very big e-solution players. Magento Enterprise Edition, a commercial version aimed at larger companies, was launched just a month ago. The CMS includes such advanced features as marketing, promotional and SEO tools; analytics and reporting; mobile commerce; catalog-management tools. And Magento users have the freedom to customize their store with new themes, templates and plug-ins.

Below you’ll find a showcase of excellent Magento templates for your e-commerce business. Hopefully, these templates and resources will serve you either as an inspiration for your themes, or as the foundation for your customized themes.

Free Magento Templates

Modern Theme | Live Demo | Download
This is an alternative to the default theme created by the Magento core team. It brings a more corporate look and feel, with a clean and simple design.

Magento Classic Theme | Live Demo | Download
Templates-Master’s first free professional Magento theme, the Classic Theme is available in 10 colors, all available for free download. This is CSS3-powered theme, easy to customize and coming with free updates.

Telescope Theme | Live Demo | Download
Created by MagThemes, this theme is very popular in the Magento community. It is freely available for download and has already been downloaded over 6,000 times.

Pet Store Theme | Full Preview | Download
This is the first free Magento theme from Template Monster. Very simple and light design, and easy to customize according to your needs.

Computer Store Theme | Live Demo | Download
When you download this ready-made Web page design, you can practice editing it to gain experience working with this type of theme.

Blue Skin | Live Demo | Download
Another alternative to the Magento default interface, this one with a very minimal design that focuses on the shopping cart.

Electronics Store Theme | Full Preview | Download
This theme has a rugged, mechanical appearance. The strong color and font would show off electronic devices well. To download this theme, just go to the store checkout and pay nothing; you’ll receive the theme by email within 24 hours.

Linen Theme | Live Demo | Download
Another free theme from MagThemes. Linen Theme is very flexible. It has a stretch design (can stretch to fit 90% of your browser window) and a clean and simple layout that draws your customer’s attention to the products.

Eco Fashion | Full Preview | Download
The Eco Fashion e-commerce template is very easy to customize. With minor changes to the CSS and images, you can transform this into your own personal theme. It comes loaded with some key SEO tools, such as lightweight CSS menus and main page content that appears before the column, footer and header blocks.

Girly Store Theme | Live Demo | Download
A free pink theme for stores targeted at girls. Includes theme files, the PSD source file for the logo and fonts. It has the same power as the default Magento template; only some minor changes were made to the CSS, images and theme code, but not the core files. So, you can update to new releases of Magento with no problem.

Refresh | Full Preview | Download
Refresh is a free W3C-compliant, CSS-based template based on the original HTML/CSS template by StyleShout.com. This work is distributed under the Creative Commons Attribution 2.5 License, which means you are free to use and modify it for any purpose.

iPhone Optimized Theme | Full Preview | Download
One more alternative skin to the default Magento interface. The very clean layout was created mainly with the iPhone in mind. It includes automatic detection and delivery of packages and themes (templates, skins, CSS, layout) based on the user-agent (client) that can be configured to global, website and store views. This video shows a preview of how Magento looks on the iPhone.

Commercial Magento Templates

HelloPerfect | Live Demo | $99.00
A professional Magento template with a rocking background style. It has a clean and easy-to-navigate Web 2.0-style interface, made with a variety of different types of stores in mind.

JM Purity | Live Demo | Membership starts at $59.00
This template is simple but very clean and professional; users can customize the color a lot in just a few simple steps. JoomlArt has integrated its standard user tool into JM Purity, which enables buyers to control font size and color (default, red and blue) for optimal viewing.

Women’s Store | Live Demo | $185.00
This theme is intended mainly for a women’s accessories store. It’s a Template Monster template, so it obviously comes in multiple sources like PSD, XML, CSS and PHTML. Anyone who appreciates elegant, modern and unusual e-commerce websites will understand that this is more than just another HTML-based template.

HelloUniversal | Live Demo | $99.00
This template is perfect for any type of business and is available in your choice of three fabulous eye-catching colors (red, green, blue). A great start for your new online shop! Comes with the source PSD file.

Lingerie Store | Live Demo | $195.00
Another Template Monster template, this one targeted at female customers. The front page includes a big Flash slideshow gallery to introduce the store and products.

HelloPod | Live Demo | $99.00
This wonderful new theme comes in three colors (orange, blue and green), suitable for any type of online store. With a wonderfully sophisticated design, the theme looks stunning, and the exclusive widget helps it stand out too! It can be edited easily using the PSD files included in the package, and it is very SEO-friendly. Compatible with all major browsers.

Fitness Store | Live Demo | $180.00
This theme is a fantastic addition to the Template Monster Club. It is another very neat and clean old-school design with some compelling features. It has the same flexibility and powerful features that other Template Monster templates are known for, including an adaptable design and layout, a black-and-white color scheme and SEO optimization.

HelloTimes | Live Demo | $99.00
This classy theme from HelloTheme comes in two color schemes (blue and orange or blue and green). It is CSS3-powered and suitable for any type of store. The front page design is very clean and simple and includes a JavaScript content/image slider widget.

JM Mesolite | Live Demo | Membership starts at $59.00
This theme is an exact port of JoomlArt’s famous Joomla-based “Mesolite” template, with the same great features. But you’ll see in this new theme JoomlArt’s first extensions for Magento, namely a category list, product list, product slider and slideshow, all of which optimize the presentation of products to potential customers. The product slider and product list allow you to localize your store by displaying a specific groupings of products (such as ones based on best buys, top-rated, most reviewed, etc.).

Flower Store | Live Demo | $188.00
This incredible Magento template features a clean and beautiful new look and feel, designed to allow for quick and easy customization. Suitable for any kind of store, and comes with a dark background and eye-catching header design.

HelloModern | Live Demo | $99.00
This professional template has a clean and easy-to-navigate interface and is made with a variety of different types of stores in mind. It includes a clean and professional Web 2.0-style design, with very fast-loading HTML code. Compatible with all major browsers, and comes with fonts, PSD files and instructions.

Art & Photo Store | Live Demo | $195.00
This template features a clean and simple design and plenty of Template Monster’s horsepower under the hood, with a front-page Flash gallery, perfect for displaying products. It’s optimized with the latest Web technologies to increase your website’s efficiency.

Megastore | Live Demo | $149.00
A very professional-looking Magento theme for all kinds of stores, but mainly larger stores with many categories and products. Many optional widgets and product-image magnifiers are available. Supports four-column category pages.

Grunge Theme | Live Demo | $149.00
Grunge Theme is perfect for skateboarding, BMX biking, snowboarding and other extreme sports stores. It comes with a new “high-slide” gallery for product images, transparent pages, cross-browser compatibility and a new color scheme.

HelloMinty | Live Demo | $99.00
Another HelloThemes template, featuring a clean and lightweight design based on modern standards and using the full power of Magento, including a JavaScript content/image slider widget, which is simply great for displaying featured products. This theme comes in three colors (pink, blue and green). Suitable for any type of store.

Times Universal Theme | Live Demo | $154.00
The home page layout of the Times Universal Theme has three columns and JavaScript product and image sliders that are easy to use and SEO-friendly. It can be used for any kind of store that needs a classic look. Product tabs and a lightbox image module come already installed.

Related posts:

1. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...
2. 35 Beautiful Commercial And Free Joomla Templates 35 Beautiful Commercial And Free Joomla Templates...

Related posts brought to you by Yet Another Related Posts Plugin.

Flash eCommerce v2

* Admininstrator panel with :
* administrator login
* New product category
* Remove product category
* New product
* Remove product
* New admin
* Remove admin
* View/delete pending orders.
* More efficient actionscript.
* Notification when add to cart a product.
* Logo container on stage.
* Added scrollbar functionality in product details.
* Stores all order to an xml for easier process of pending orders.
Contains HELP FILE

XML-SWF-FLA

Please 登陆Login or 注册Register to read the rest of this content.

No related posts.