WebDesign Collection

52 Excellent Single Page Sites Inspiring For Designers

admin — Wed, 02 Jun 2010 05:49:44 +0000

This isn’t just an exercise in minimalism, it’s a showcase of effective use of space. These sites only need is one page to spread their message. sometimes a single page site delivers more info ever need than a multi page site.

Portfolio sites are perfect examples for single page sites, it allows visitors to see you content easily, for non portfolio sites still it will make sense depends on the needs. It is almost like the single page frees the designer to create something more unique then a traditional multi page site. Perhaps it is because you only have to make it work on one page

Below the fold content, and the scrolling involved with it isn’t a hassle on the sites below. Here listed 55 Impressive one page sites to get inspired from.

7. Fabiano Meneghetti

8. Designed by Dave

9. Jason Reed Web Design

10. Yura Sklyar

11. Basil Galoo

12. Ayush Sara

13. Deaxon

14. Alexandru Cohaniuc

15. Edit Studios

16. Alessandro Cavakllo

17. James Lai Creative

18. Red+White Sale

19. Tomas Pojeta

20. New Media Production

21. Brian Murchison

22. Stanislav Krofta

23. Tvrdek

24. Feelwire

25. luke stevens

26. Cpeople

27. Gotta Get To FOWA

28. Pikaboo

29. Rzmota

30. tomatic

31. Lonely Tweet

32. Maurivan Luiz

33. Just Dot

34. NerdoPlex

35. Sroown

36. Stage 5 Studio

37. Veeboo Labs

38. Alex Buga

39. Colourpixel

40. Edit Studios

41. The Great Bearded Reef

42. Jiri Tvrdek

43. Legwork Studio

44. Magouya

45. Nofrks Design Studios

46. Omnitech Incorporated

47. Jakub Antalik

48. Tomáš Pojeta

49. Tyler Finck

50. Visual Elixer

51. volll

52. We Bleed Design

Very Simple & Tiny Lightboxing: Lightbox_me

admin — Wed, 02 Jun 2010 04:36:10 +0000

Lightbox_me is a jQuery lightbox plugin that doesn’t come with many features but simply enables you to lightbox any element. And, it is only 1kb compressed.

It can position the modal box smartly in every situation whether the windows is resized or the window is smaller than the modal.

The plugin has various options like defining:

the effect used while appearing
the speed of the overlaying process
lightbox being closed with the escape button and/or when clicked on the overlay
CSS class names and styles

To sum up, Lightbox_me is very functional for anyone who doesn’t need features like image/video gallery support but only a simple and good-looking lightbox.

10+ Free HTML5-CSS3 Website Templates

admin — Wed, 02 Jun 2010 04:31:06 +0000

We are pretty bored with the current limits of the HTML-CSS and it is clear that the HTML5-CSS3 is the cure to let the creativity flow.

And, browser compatibility is no more a big issue as there are various resources like Modernizr, ExplorerCanvas or IE7.js that empower incompatible browsers.

If you didn’t already, it is a good idea to warm your hands on HTML5 and CSS3 as they offer so much.

Here are 10+ free HTML5-CSS3 website templates to help you get inspired and started:

HTML5 Starter Pack

HTML5 Starter Kit is an impressive template that doesn’t force you to build a specific type of website but shape it how you want.

This free HTML5 template is cross-browser (including IE6), tablet/netbook ready, can instantly use Cufón and includes some structural/re-usable classes.

And, it includes the layout as a .PSD file.

Gotta’ love HTML5 & CSS3

An image gallery layout with HTML5-CSS3 which includes:

animated transitions, like a hover animated description for the images, using only CSS
a tabbed interface for different galleries using CSS3’s :target element

A Free HTML5 and CSS3 Theme

The template has a working sub-page and a contact form which has a server-side validation and send-mail code (PHP).

It uses 960.gs and has a custom font named Chunkfive that makes use of @font-face.

Coding A HTML 5 Layout From Scratch

The template is a showcase for most of the new elements header, footer, section and so.

hCard microfortmat is used as well to define the creator of the template.

In means of CSS3, there is the popular text-shadow and others like last-child or selection.

52framework

52framework is a complete tool to help you start building with HTML5 and CSS3 with the use of new tags, input fields, rounded-corner, text-shadows, etc.

It includes a grid system and CSS reset (that is modified for HTML5).

iPhone App. Website With HTML5

A very detailed tutorial on creating an iPhone application website using CSS3 and HTML5.

The template uses new tags like section, aside, header and footer.

Create An Elegant Website With HTML 5 And CSS3

This is a tutorial on creating a slick webpage with HTML5-CSS3 and shares the result as a free download.

Many new elements are used and Modernizr is integrated for IE compatibility.

Free HTML5 Template

A HTML layout that comes in 2-column and 3-column versions.

It also includes the .PSD file of the layout.

HTML5 & CSS3 One-Page Template

A one-page-template that uses jQuery for sliding the content for displaying the specified links.

There is also an optional HTML version provided.

OWMX 1 HTML5-CSS3 Template

A 2-column blog layout that uses many new HTML5 tags and CSS3 techniques.

It also uses the hCalendar microformat.

FlipThru HTML5 and CSS3 Template

The template is a pretty simple one using the HTML5-CSS3 features.

However, it has a pretty-slick accordion that only makes use of CSS3.

HTML5-CSS3 Starting Template

This starter template offers a complete structure for a HTML5 website that will be built with PHP.

It includes CSS styles for the layout, typography, print and reset.

There are already PHP includes for functions, header, footer, etc.

Bizarre Websites On Which You Can Kill Time With Style

admin — Tue, 01 Jun 2010 08:13:28 +0000

Modern Web-building technologies allow designers to realize their most daring and creative ideas. Enhanced interactivity and a remarkable visual appearance can be achieved by means of such tools as Flash, JavaScript and Papervision3D, to name just a few. These strengths usually impress and entertain visitors and thus are often used for conceptual artistic presentations and promotional campaigns.

In this post, you’ll find a collection of amusing websites that, by combining unconventional (and sometimes bizarre) ideas and clever JavaScript and Flash effects, will entice you to play on them for an embarrassing long time.

Bizarre and Beautiful Websites

Record Tripping
Record Tripping is a nifty experimental game by Bell Brothers. You are invited to solve a series of puzzles by scratching a record with your mouse’s scroll wheel. Clever game play and a lovely interface make this online Flash game as fun as it is weird.

Sound of Hamburg
Here is one of the most creative and unconventional Flash websites we’ve seen lately. Sound of Hamburg lets you compose music on and with the city of Hamburg. The combination of brilliant idea and unique interaction makes for an absorbing Web experience.

Echogenesis
Echogenesis is another interactive brainchild of Bell Brothers. This exciting Flash website lets you explore five natural environments and experience a variety of sound and visual effects through your interaction.

Verbatim Championship
Verbatim Championship is a hilarious Flash-based website where you can build your own “Media Monster” using Verbatim recording devices and use it to fight other monsters.

Incredibox
This fun and well-developed Flash application lets you conduct a beatbox or a capella band. The website is available in both English and French.

De Montagetafel
This website was definitely among the best for Flash Web design for 2009. You are invited to try your montage skills and create your own documentary on an edgy topic.

Optus Whale Song
An amazingly creative experience is offered by the Australian telecommunication company Optus on its official website. You can compose a song for a whale and make an orchestra perform it. This is a must-see Flash website.

Flurrious
If you like to create things, this website will keep you busy for hours (especially in winter). Using a versatile Flash editor, you can compile your very own snowflake and watch it dance in an artistic snowfall.

Blues Maker
Blues Maker is a fun online Flash application that allows you to create a fine blues song. The list of options is rather limited; still the process of song-making is quite enjoyable. The design of the website is really cool, too.

Bubole
Bubole will definitely make you smile. It is an amusing monster builder and game. You create a weirdo and make it fight with monsters created by other players. The funny sound effects and typography are nice touches.

Ball Pool (not Flash)
Ball Pool is a beautiful jQuery website with a simple yet absorbing concept behind it. Just click and shake your browser to generate more colorful balls. A simple and fun app to cheer you up in the middle of a working day.

Bank of Imagination
How often do you start sentences with “What if…”? If you have a rich imagination, consider investing in the Bank of Imagination. This Flash-based interactive website allows you to note and save your “What if” thoughts. You can also observe other global flights of fancy by browsing other user messages.

Google Gravity
This website probably won’t be of much interest to the average Web user, but SEO specialists will love it: who else could stare at Google’s downfall for ages?

Flame
Flame is a brilliant JavaScript painting tool that proves that anyone can be an artist. The program was created by Peter Blaskovic as part of his experimental project “I am Artist.” Using a number of nifty drawing tools and, of course, your imagination, you can create some cool psychedelic drawings and then export them in a resolution of 1680 x 1050 pixels. All you need to use this tool is Java (probably already installed on your computer).

Ball Droppings
Ball Droppings is a cool JavaScript experiment that lets you create music in a quite unusual and tricky way: just draw lines with your mouse to bounce the balls that fall from the hole.

Beans
This is the pearl in our collection of bizarre JavaScript and Flash websites. Who would have thought that crushing little screaming beans could be so much fun?

Labuat
Labuat is the most beautiful and enjoyable time-killer in our selection. It’s a song illustrated by an interactive brush that reacts to music, and the lyrics won’t leave you cold.

Why Do You Stay Up So Late?
Why Do You Stay Up So Late? is a compelling lyrical poem accompanied by a beautiful Flash animation. Such a creative combo gives the website a special feel.

The Infinite Oz
The Infinite Oz is an interactive Flash animation that features a collaboration between nine acclaimed international artists. Exploring fantastic sci-fi worlds that replace each other infinitely is a quite relaxing pastime.

Annamika kaleidoscope
Catherine Hubert created this Flash kaleidoscope to provide Web users with a place for meditative contemplation.

Neon Bible
This interactive video for a song by Arcade Fire is weird and hypnotizing at the same time.

Drum Machine
Drum Machine has several pre-loaders that play before the actual animation starts. In most cases, you would not wait so long for a Flash website to load, but Drum Machine is an exception. a mesmerizing combination of animation and sounds won’t let you leave.

Soundtrack for a Book
This exquisite Flash website belongs to the Singapore-based indie band Concave Scream. A myriad of colorful particles assembled into 3-D book covers, set to dreamy music, makes for a beautiful and calming Web experience.

Papervision3D.org
Before entering the official website of open-source Flash framework Papervision3D, you have a chance to explore an interactive 3-D underwater environment.

Condiment
The portfolio of creative communication agency Condiment features a clever JavaScript jigsaw puzzle. This engaging feature, set against a neat and stylish design, makes the website a pleasure to browse.

The Digital Invaders
This Flash website takes some time to load, but incredible animations, showing an awfully funny crowd of invaders, fully compensate for that.

Bio-Bak
Bio-Bak is indubitably a trendsetter when it comes to bizarre Web design. Enter this kingdom of the absurd and fun to load up on positive emotions.

Donnie Darko
Okay, here is the most extraordinary movie website you may have ever seen. It engrosses you in a mysterious and suspenseful journey based on the 2001 US psychological thriller Donnie Darko.

Paul Neave
You will never get bored on this website. This online home of interactive designer Paul Neave is a fount of engaging Flash applications and games.

Salt Films
This website of film production company Salt Films tastes delicious. Elegant and funky graphics, creative animation and interactive salt shakers for the work of film directors deliver the most pleasing Web experience.

Forgotten Bookmarks

Browsing personal things a bookshop owner finds in rare and used books is another way to explore the amazing human nature (and an extremely absorbing pastime).

Bonus

And Then There Was Salsa
Although not a website, this cool video ad shows Flash in its glory.

About the Author

Julia May is a freelance writer now working with FlashMint, a top-class provider of beautiful Flash templates and smartjQuery templates.

Original article from Smashingmagazine.

40 Beautiful E-Commerce Websites 2010

admin — Tue, 25 May 2010 09:12:03 +0000

Today we are going to showcase forty five inspirational new frash and creative e-commerce websites for 2010 year. Enjoy!

Forme

gMap – google maps plugin for jquery

admin — Thu, 29 Apr 2010 01:30:18 +0000

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

Requirements
There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3.

Installation
Download the latest version of gMap and include the Google Maps API along with jQuery and gMap in the section of your website. Don’t forget to replace “API_KEY” with your actual API key or the map won’t work when used on a real domain!

You can also customize the map in different ways.

Visit the site to get more: http://gmap.nurtext.de/

Here’s another article about 10 ways of google map installation: 10 jQuery Plugins for Easier Google Map Installation.

Contextual Slideout Tips With jQuery & CSS3

admin — Thu, 29 Apr 2010 01:09:25 +0000

This is an interesting solution for showcasing the new features of products – using contextual slideout tips.

Knowing the importance of HTML standards, the development team is making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

The main idea is to create an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

To create a slideout element, you need to include a regular paragraph p tag to the page. This means that all the content is visible to search engines in a semantic way. The paragraphs are replaced with the markup for the slideouts by jQuery on page load, with the title, class and style attributes of the paragraph passed to the newly created element.

Go to the site to download the code and learn how to use it: http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/

TipTip jQuery Plugin

admin — Thu, 29 Apr 2010 00:53:14 +0000

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

How It Works

TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.

TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element.

There are specific CSS class names added to the “tiptip_holder” div element when it appears depending on the orientation it appears in. Here is a list of the class names along with it’s orientation:

tip_top – When the tooltip appears above the element.
tip_bottom – When the tooltip appears below the element.
tip_left – When the tooltip appears to the left the element.
tip_right – When the tooltip appears to the right the element.
tip_left_top – When the tooltip appears to the left and above the element.
tip_left_bottom – When the tooltip appears to the left and below the element.
tip_right_top – When the tooltip appears to the right and above the element.
tip_right_bottom – When the tooltip appears to the right and below the element.
TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

You can visit and download the free code here: http://code.drewwilson.com/entry/tiptip-jquery-plugin

Showcase Of Beautiful Vertical Navigation Designs

admin — Thu, 22 Apr 2010 12:53:19 +0000

Riot Industries
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.

Village Version
Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).

Bruno Souza
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.

Cambrian House
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.

Comfort Brothers
Navigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.

Auberge de l’Ill
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.

The Hipstery!
This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.

Research at MICA
The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.

Power to the Poster
The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.

From the Couch
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.

Nick Jones
The portfolio of art director Nick Jones has vertical navigation towards the middle of the page. The menu summarizes his work and has an interactive component that scrolls the menu up and down based on the user’s mouse movements. When an item is clicked, the menu shifts to the left, making room for the corresponding content.

Noam Design
This dark vertical navigation for Noam Design leaves the menu option for the contact form permanently open.

The Music Hall
The vertical navigation on this website is grouped into two categories, giving users the ability to quickly find the link to the page they’re interested in.

ONETWENTYSIX
The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.

Tailored pixels
This simple vertical navigation is presented right below the website’s name, giving it a prominent position in the layout without taking away attention from the main content area. A dark gray background denotes active menu items, with an arrowhead pointing at the content, encouraging natural and effective eye flow.

Mellasat Vineyard
Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.

SIMPLE LIFE
The navigation in this elegant, minimalist, typography-based portfolio is a central element and contributes to the overall layout. The menu items are repeated on the right in a larger font.

Debbie Millman
This menu creatively weaves in the description and purpose of the website.

Utah.travel
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.

Mathias Leihu
The coloring of this navigation is subtle, but the menu manages to attract the user’s eye through its prominent location in the layout and the author’s high-contrast headshot.

Go Media Inc
Go Media Inc’s navigation is an accordion that reveals sub-menus. Clicking on a primary menu item triggers an animated downward effect that opens up sub-menu items.

Circa, the Prince
This dark grunge-themed vertical menu is subtle yet hard to miss because of its position.

Glass Tiger Surfboards
Glass Tiger Surfboards opts for a vertical navigation menu with low opacity so that the grassy background shows through.

Corey Arnold Photography
The menu on this minimalist portfolio website has a red see-through background so that the featured photo is visible even when the menu is expanded.

Uniquexport
This artistic menu is transparent, so that the distinctive floral pattern in the background isn’t obscured.

yellowood store
This menu has a dark-gray semi-opaque background that allows the background image to show through.

Van de Weghe Fine Art
This navigation system is revealed when the user hovers over “Menu.” The simplicity of the design is creative; the background images are the distinguishing element.

TheyMakeApps.com
This menu has illustrated icons beside menu items, which both complement the overall theme and help with visual recognition.

Huis Oranje
This vertical menu is a distinctive element in this layout. The icons to the right serve as eye candy and as visual representations of the menu items.

Washtenaw Community College
This menu is interesting because its grainy style is rarely seen on websites for institutions of higher education.

Brown Blog Films
The navigation here is set against a wooden background, with links in an organic scribbled font.

A J Miles
The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.

RedVelvetart.com
This menu has colorful fonts with a hand-drawn look to them, complementing the overall theme.

R.I.P. Cube Club
This vertical menu is central to the layout. It has large fonts and a 3-D effect.

LEAF TEA SHOP & BAR
On this website, you can see how big font sizes can get when you have more vertical space to work with.

Rick Monroe
The personal website of Rick Monroe has navigation links on top of a textured background, right below the website name.

Rich Brown
The big font size contributes to the minimalist theme of this website.

Strip Turnhout
This website has an organic hand-written font for its menu, which sets the tone for the layout (which is arranged as a gridded notebook).

NATIONAL TELEVISION
This menu offers an interesting interaction. When an item is clicked, the menu shifts left or right to make room for the content, thus creating an engaging user experience.

polargold
This navigation has over-sized fonts, making it the highlight of the layout. Hovering over a menu item reveals an interesting animated effect.

Notorious Design
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.

Light is Light
This simple text-based menu is findable without drawing too much attention from the focal point of the page: the slideshow.

gary’s real life
The items in this menu are done as strips of paper, adding a nice touch to the illustrated theme.

Denise Chandler
The vertical menu here takes up a large part of the layout. Hovering on an item reveals a simple CSS animation that moves the right-pointing arrows further right, giving the user a feeling of moving forward.

Envira Media Inc
This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.

Mulletized
On this website, menu items are located near the middle of the viewport. The simple navigation adds a certain elegance without dominating the layout.

Clearideaz
This website’s navigation is unique, looking a little like basket-weaving. Being in the top-right gives it prominence.

The Gates Notes
Bill Gates’ official website has a unique menu that conveys innovation and forward-thinking: themes that the technology baron surely wants to convey to visitors.

Ommwriter
This menu’s items are displayed as translucent circles. On hover, a symbol is revealed that relates to that particular menu item, making the menu memorable.

Gianni’s Steakhouse
This menu is slightly tilted, and its skewed orientation is sure to grab the visitor’s attention. The design is appropriate for the website, which is for a restaurant.

Aussie BBQ Legends
Bold, striking, eye-catching. These adjectives aptly describe Aussie BBQ Legends’ vertical navigation. The menu plays a big part in setting the tone for the website.

Sid Lee
Sid Lee agency uses an interactive navigation menu on the left side of the page. Some sections of the navigation have sub-sections which are displayed next to the primary navigation.

Harmony Republic
Harmony Republic places the navigation menu on the left side of its logo. Unusual placement, but it works nicely. The current navigation section is highlighted by a white background.

(al)

Original article from Smashing Magazine.

45+ Fresh Wordpress Tutorials, Techniques and Hacks

admin — Tue, 06 Apr 2010 13:16:10 +0000

The growth and popularity of Wordpress continues to spiral to a seemingly endless end. It continually proves itself time time and again that it has very few limitations, and is rapidly pushing itself to being, if not the best, but certainly the most versatile CMS available. Out of the box it is certainly not perfect, but in the hands of the huge WP community, it might just be.

In this article we have collected 45 fresh Wordpress tutorials and techniques, with some hacks, guides and best practices thrown in for good measure. Everyone, not just developers, should take something from this round-up.

Complete Theme Design Tutorials

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

In detailed 11 individual lessons this tutorial will show you how to build a powerful, up-to-date, SEO friendly WordPress theme from scratch. At the end of the tutorial, with code in hand, you’ll be able to do almost anything you want. You can even think of the finished Theme as your own personal website development framework for WordPress.
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial »

Custom WordPress Homepage with Customizable Widgets

In this Tutorial, you’ll learn how to build a Custom homepage for your WordPress Theme using Page Templates: Complete with a featured content slider, and customizable Widgets.
Custom WordPress Homepage with Customizable Widgets »

How to Build a Custom Wordpress Theme from Scratch

This tut shows the process of how to build a custom Wordpress theme, from design concept through to completed theme. You will see how the static design is split up into the various Wordpress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog.
How to Build a Custom Wordpress Theme from Scratch »

WordPress Theme from Scratch

The tutorial series “WordPress Theme from Scratch” teaches you how to build a WordPress theme, starting with the initial design in Photoshop, converting it to HTML and finally splitting everything into the various WP theme files.
WordPress Theme from Scratch »

How to Create a Theme Development Environment for a Live WordPress Site

Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using Wordpress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.
With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress.
How to Create a Theme Development Environment for a Live WordPress Site »

How To Design A Clean and Minimal Portfolio Website

Creating a clean and minimal design can be a difficult thing to master – if you make things too minimal you can end up with a very bare looking design that lacks substance. However, if you can get the balance right you’ll have a design that looks both classy and professional.
This tutorial demonstrates that you don’t need to use lots of fancy effects and fonts to create a clean design – it can still look professional without overdoing things.
How To Design A Clean and Minimal Portfolio Website »

Begginer Wordpress Tutorials

Your New Wordpress Website Step By Step. Beginner’s Guide

First of all and when starting on a website, you should understand that WordPress is not just some place where you can post just any kind of updates. This is an amazing content management system that can be used to create any type of website of any complexity. What you usually see online is the 10% usage of the WordPress functionality and capabilities while most possibly you’ll be using only 5% if you just plan to post news from time to time.
Your New Wordpress Website Step By Step. Beginner’s Guide »

WordPress Template Hierarchy and Conditional Comments

WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary.
Technically you only need two files for a WordPress theme to work, index.php and style.css.
However, if you would like to make your theme a bit more unique and have some variance in the way different content is presented, you will want to use some other template pages. Now this is where the hierarchy comes into play, because WordPress runs off a Template Hierarchy.
WordPress Template Hierarchy and Conditional Comments »

The Essential Elements of your First Wordpress Design Site

In this article they discuss the key points you need to cross off, if you wish to setup your own design site. They discuss finding your design sites niche, which plug-ins are the best to use and how to setup your brand image.
The Essential Elements of your First Wordpress Design Site »

General Wordpress Tutorials

Declare Multiple Widgetized Areas

Do you have a bunch of different areas you wish to declare as a widgetized area? Save repetative code by creating a quick array of their names, then loop through that array calling the register_sidebar() function on each one.
Declare Multiple Widgetized Areas »

Creating Helpful and Effective Wordpress Archives

It seems that once a post has served its initial use for us, that we carelessly discard it to the forgotten areas for the post to die, rather than institute an accessible archive that will allow those past posts to continue to deliver the punch you packed within.
In this post, they offer some great pointers on creating a quality archive section for your blog that will serve as an inspired homage to the awesome content that it contains.
Creating Helpful and Effective Wordpress Archives »

How to Create an Author Info Section in Wordpress

It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of Wordpress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.
How to Create an Author Info Section in Wordpress »

How To Make a WordPress Events List

An events list is just what you would expect; a list of upcoming events, ordered by the date they are taking place on (Not the date they were written on!).
In this post, you are going to create our own events list that will let us add events simply by writing posts and assigning them to an “Events” category.
How To Make a WordPress Events List »

WordPress query_posts Tips

The query_posts command is one of the most useful in all of WordPress. It is this command that allows all the content to be queried (extracted from the database) and then displayed by the loop. It’s powerful because it gives an incredibly flexible method for retrieving and filtering the posts and pages in pretty much any way you can imagine.
At its most basic you can use query_posts to grab just the single latest post, or to get the latest 100 posts. At its most complex you could select a random collection of the posts that a specific blog author has posted in a collection of site categories with a specific tag
WordPress query_posts Tips »

Advanced Wordpress Comment Styles and Tricks

What you will do first is create a custom comment callback that allows you to specify the way the comments are output, then lay out the structure for the comment list and reply form, add extra functionality such as author-only styles, implement comment subscription options and spam protection, and, finally, we’ll add nice CSS styling to everything we’ve done.
Advanced Wordpress Comment Styles and Tricks »

Display Google Docs spreadsheets in Wordpress

The first part of this tutorial shows a unique method for displaying tabular data, by cooking up a simple CMS using a little PHP, jQuery, HTML and Google Spreadsheets. The second part explains how it can be integrated into Wordpress.
Display Google Docs spreadsheets in Wordpress »

Showing Random Posts In WordPress

There are a lot of plugins you could use to show random posts, but why use plugins when it’s so simple to do it with just a little bit of coding. Here is how to do it.
Showing Random Posts In WordPress »

Show Your Top Contributors Without a Plugin

Do you ever wished to be able to list your top contributors without using a plugin? Simply paste this code where you want your top contributors to be displayed.
Show Your Top Contributors Without a Plugin »

Highlight Wordpress Category when on a Single Post

By adding a small piece of code to a plug-in, and by following these basic steps you should be able to get your categories highlighted when on a single post.
Highlight Wordpress Category when on a Single Post »

How to Split WordPress Content Into Two or More Columns

WordPress is a great CMS, but implementing some features within your theme can require a little lateral thinking. The content for your page or post is usually output by the theme code using a single function call: the_content(args);
But what if you need to split the content into two or more blocks? That might be necessary if your theme requires multiple columns or sections on the page.
How to Split WordPress Content Into Two or More Columns »

Make Shortcodes User-Friendly

Since WordPress 2.5, Shortcodes has proven to be a powerful features that allows for flexibility and customization. However, as with anything that has the word “code” in it, shortcodes are not very user friendly. For people who are used to using WYSIWYG, shortcode usage can be confusing sometimes. This article shows you how to make shortcodes in your themes and plugins more accessible and user friendly.
Make Shortcodes User-Friendly »

Advanced Power Tips for WordPress Template Developers

This article covers the WP topics: multiple column content techniques and associating pages with post content; discusses how to use the “More”-tag, hide standalone categories from the category list and retain the page layout for post views within a category page.
Advanced Power Tips for WordPress Template Developers »

WordPress functions.php Template with 15 Essential Custom Functions

When designing WordPress themes, it can be helpful to add some custom functions to the theme’s functions.php file. This speeds up development time because you won’t have to hunt for and individually copy the same slew of functions for every theme. Just drop in a copy of this functions.php template and build up from there. This takes care of all those little things that always need to be done.
WordPress functions.php Template with 15 Essential Custom Functions »

Control your own WordPress Custom Fields

Custom fields are really flexible. However, they’re not perfectly user-friendly. For instance, if no post or page is currently using a custom field that you’ve built functionality on, the user has to enter the name as well as the value of the field the first time it’s used. The drop-down of field names is dynamically gathered from the fields currently in use. Also, sometimes you want to make things easier for clients by having inline tips, and inputs that suit the field (e.g. a checkbox or select drop-down instead of just a plain text entry).
Control your own WordPress Custom Fields »

Ajax, Javascript and Wordpress

How to implement Ajax in WordPress Themes

AJAX(Asynchronous JavaScript And XML) as we all knows is a very democratic technology in web development that allows a web page to update the content without page reload or refresh.
And this tutorial you will be shown how you can implement Ajax in your WordPress themes.
How to implement Ajax in WordPress Themes »

5 Tips for using AJAX in WordPress

AJAX is used in many WordPress themes and plugins. However, not all of those themes and plugins implement AJAX properly. This article reveals 5 best practices in developing AJAX for WordPress.
5 Tips for using AJAX in WordPress »

Dynamic jQuery Feature Post Slider For Wordpress

What this slider does is dynamically display posts from the ‘Featured’ category, using the easySlider jQuery plugin. It’s fairly easy to do, and adds a nice animated and dynamic feature to your site.
Dynamic jQuery Feature Post Slider For Wordpress »

Images and Thumbnail Tutorials

Automatic Wordpress Thumbnail Without Custom Field

Let’s say you want to show thumbnails in your blog’s front page. A lot of blogs do that now and it’s a good way of making the page look more alive.
The only problem though is that using custom fields can be complicated and time-wasting. This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.
Automatic Wordpress Thumbnail Without Custom Field »

Add Thumbnails to Wordpress with Custom Fields

In this tutorial, you will be shown how you can easily add thumbnails, lead image, and other extras to individual posts in Wordpress. These images can be shown on the front page, archives, search pages, etc – but appear outside of the content, giving you full control of their placement and style.
Add Thumbnails to Wordpress with Custom Fields »

Post image the easy peasy way

One of the best ways to liven up a blog, and something that most of the premium themes look to do by default, is adding images to your posts. The usual method of doing this is by adding the image URL via a custom field. But there is a better and more flexible way.
When you upload images in your post they are all added to the database. This makes it very easy to get a list of all the images attached to the post. In addition, WordPress has a built in function to retrieve the appropriate image size as well, meaning you can use a thumbnail on archive pages and a medium image on post pages without messing around with resizing images and adding multiple custom fields.

How to Automatically Use Resized Images Instead of Originals

This script will replace the uploaded image (if bigger than the larger size defined in your settings) by the large image generated by WordPress to save space in your server, and save bandwidth if you link a thumbnail to the original image, like when a lightbox plugin is used.
How to Automatically Use Resized Images Instead of Originals »

Custom Post Layout and Styling Tutorials

Custom CSS Per Post

This article features two functionial solutions to apply unique CSS styling to an individual page of content
Custom CSS Per Post’/>

Styling Different Posts in Different Ways With Post_Class

With WordPress 2.7 came the post_class function. While this is a fantastic function for changing a post’s display, the classes that it outputs are actually quite limited. Luckily, we can add our own, and we can also add our own dynamic classes.
Styling Different Posts in Different Ways With Post_Class »

How to: Embed CSS in your posts with a custom field

Sometimes, a specific post needs to be styled with some custom css styles. Sure, you can directly embed CSS in your post, but that not very clean. In this tutorial, you are going to be shown you how to embed CSS in a clean way, by using a custom field.
How to: Embed CSS in your posts with a custom field »

Using HTML5 Elements in Wordpress Post Content

Here are two ways to include HTML5 elements in your Wordpress post content without Wordpress’ wpautop function wrapping them in p tags or littering your code with line breaks.
Using HTML5 Elements in Wordpress Post Content »

Custom Post Types in WordPress 3.0

In version 3.0 the developers of WordPress introduce the custom post types. I’m not sure whether it’ll be solely built into the API or also displayed as a GUI somewhere in the settings, but it doesn’t require too much coding skills to add a couple via your functions.php.
Custom Post Types in WordPress 3.0 »

Wordpress Navigation Tutorials

jQuery Dropdown Navigation in WordPress

In this tutorial you will learn how to enhance you WordPress in a whole new way. Multi-Level or Multi-Dimensional navigation menus can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. You will start off by making a HTML version, then making it compatible with WordPress.
jQuery Dropdown Navigation in WordPress »

The Easy Way To Make WordPress Ajax Pagination Using jQuery

Making your paginated content in WordPress load using AJAX is extremely easy using a bit of jQuery. Here is how.
The Easy Way To Make WordPress Ajax Pagination Using jQuery »

Wordpress Breadcrumbs Without a Plugin

Yes, there are many plugins for breadcrumbs, but if you would prefer to use short code snippets, have a look at this tutorial.
Wordpress Breadcrumbs Without a Plugin »

Wordpress Custom Fonts Tutorials

Incorporate Cufón in WordPress

In this tutorial you will find the simple steps required to integrate Cufón in your WordPress site.

How to Customize Fonts in a Wordpress Blog with CSS3

The fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and .otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf or .otf on server. After declaring the @font-face rule, reference the required font-family property in your stylesheet as outlined here.

Wordpress Admin Tutorials

How to Create a Wordpress Options Panel

In this tutorial you’ll go through the entire process of creating an admin options panel for a WordPress theme, using the excellent WooFramework as an example. You’ll then take things a step further, as you implement jQuery to improve some of the functionality.
How to Create a Wordpress Options Panel »

Remove/Replace Content from the WordPress Database

Hopefully, you have some experience working directly with the database, but even if you’re new to it, the simple recipes presented in this DiW article will help you find, replace, and delete specific text content using a few simple SQL commands. This gives you incredible power to make sitewide changes to your posts, comments, or any other database table with a few simple clicks.
Remove/Replace Content from the WordPress Database »

Customize WordPress Login Logo without a Plugin

WordPress login logo looks nice, but sometimes you may want to change it, for example when building a site for a client. In that case, you can use a plugin, or simply take advantage of this cool hack.
Customize WordPress Login Logo without a Plugin »

Wordpress 3.0 New Features

10 Features to Look Forward to in WordPress 3.0

WordPress 3.0 is scheduled to be released within the nextcouple of monthss. There are some great new features coming, including custom post types, a new default theme, and a menu manager. Read this article to find out what to expect in version three.
10 Features to Look Forward to in WordPress 3.0 »

WebDesign Collection

52 Excellent Single Page Sites Inspiring For Designers

Very Simple & Tiny Lightboxing: Lightbox_me

The plugin has various options like defining:

10+ Free HTML5-CSS3 Website Templates

Bizarre Websites On Which You Can Kill Time With Style

Bonus

About the Author

40 Beautiful E-Commerce Websites 2010

Gowalla

Olio Board

Geeksphone Shop

Crocs Store

They Make Apps

Tap Mates

I Said What

Narwhal Co.

Hello Kavita

Tapbots

Teez

Ape Commerce

Big Commerce

Gosco Valves

Interdominios

Mark Palma Media

Ski Key

Bless This Stuff

Render Wave

Fikket

MyFlowerDelivery

Obeardo

Project Shoes

Mee Templates

Ray Lewis Workout

Interface for iPhone

Sketchbook Project

Appboy

Twit Gift

Mojo Themes

Task This

SmartUpz

Motionoto

Sketchdock

FlexiThemes

Themes MGNTO

Diamondzdirect

Aussiestorez