Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 17 2012

18:52

February 23 2012

10:00

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples

It is estimated that within two years mobile internet users will overtake the desktop internet users. The rapid advancement of mobile internet has enabled more and more people to use their mobile device as a primary web browsing tool. What does it mean for web development? Well, the usual development for just a couple of screen resolutions is already dying out.

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors.

Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Tools

1. Less Framework 4

Less-framework-responsive-web-design-showcase

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless-responsive-web-design-showcase

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile-boilerplate-responsive-web-design-showcase

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton

Skeleton-responsive-web-design-showcase

5. 320 and up

320-up-responsive-web-design-showcase

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

Fittext-responsive-web-design-showcase

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

Media-query-responsive-web-design-showcase

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

Testing-responsive-web-design-showcase

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

Media-queries-responsive-web-design-showcase

A collection of inspirational websites using media queries and responsive web design.

10. inuit.css

Inuit-responsive-web-design-showcase

Inuit.css is a CSS framework built to work on small screens. Inuit.css has a custom grid system builder for creating fixed or fluid grid system igloos.

11. PhotoSwipe

Photoswipe-responsive-web-design-showcase

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

12. Adapt.js

Adapt-responsive-web-design-showcase

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

13. Adaptive Images

Adaptive-images-responsive-web-design-showcase

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

Tutorials

We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

2. Fluid Images via Unstoppable Robot Ninja

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Awesome Tutorials To Master Responsive Web Design via Cats Who Code

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor

Publications

Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

1. Responsive Web Design By Ethan Marcotte

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin

 

If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies

Inspiration

1. Briangardner

Briangardner-responsive-web-design-showcase

Briangardner-2-responsive-web-design-showcase

2. Notloremipsum

Notloremipsum-responsive-web-design-showcase

Notloremipsum-2-responsive-web-design-showcase

3. Fortysevenmedia

Fortysevenmedia-responsive-web-design-showcase

Fortysevenmedia-2-responsive-web-design-showcase

4. Brace Yourself

Brace-yourself-responsive-web-design-showcase

Brace-yourself-2-responsive-web-design-showcase

5. Osvaldas

Osvaldas-responsive-web-design-showcase

Osvaldas-2-responsive-web-design-showcase

6. Thegregthompson

Thegregthompson-responsive-web-design-showcase

Thegregthompson-2-responsive-web-design-showcase

7. Studiopress

Studiopress-responsive-web-design-showcase

Studiopress-2-responsive-web-design-showcase

8. Food Sense

Food-sense-responsive-web-design-showcase

Food-sense-2-responsive-web-design-showcase

9. 255creative

255creative-responsive-web-design-showcase

255creative-2-responsive-web-design-showcase

10. Paperstreetinteractive

Paperstreetinteractive-responsive-web-design-showcase

Paperstreetinteractive-2-responsive-web-design-showcase

11. Raewynbrandon

Raewynbrandon-responsive-web-design-showcase

Raewynbrandon-2-responsive-web-design-showcase

12. Gonzoblog

Gonzoblog-responsive-web-design-showcase

Gonzoblog-2-responsive-web-design-showcase

13. Zync

Zync-responsive-web-design-showcase

Zync-2-responsive-web-design-showcase

14. Techdept

Techdept-responsive-web-design-showcase

Techdept-2-responsive-web-design-showcase

15. Pelicanfly

Pelicanfly-responsive-web-design-showcase

Pelicanfly-2-responsive-web-design-showcase

16. Marijazaric

Marijazaric-responsive-web-design-showcase

Marijazaric-2-responsive-web-design-showcase

17. Raymacari

Raymacari-responsive-web-design-showcase

Raymacari-2-responsive-web-design-showcase

18. Handsomecopy

Handsomecopy-responsive-web-design-showcase

Handsomecopy-2-responsive-web-design-showcase

19. Jaypegams

Jaypegams-responsive-web-design-showcase

Jaypegams-2-responsive-web-design-showcase

20. Joshuasortino

Joshuasortino-responsive-web-design-showcase

Joshuasortino-2-responsive-web-design-showcase

21. 36creative

36creative-responsive-web-design-showcase

36creative-2-responsive-web-design-showcase

22. Whitelotusaromatics

Whitelotusaromatics-responsive-web-design-showcase

Whitelotusaromatics-2-responsive-web-design-showcase

23. Forefathersgroup

Forefathersgroup-responsive-web-design-showcase

Forefathersgroup-2-responsive-web-design-showcase

24. Dentsunetwork

Dentsunetwork-responsive-web-design-showcase

Dentsunetwork-2-responsive-web-design-showcase

25. Upperdog

Upperdog-responsive-web-design-showcase

Upperdog-2-responsive-web-design-showcase

26. Teehanlax

Teehanlax-responsive-web-design-showcase

Teehanlax-2-responsive-web-design-showcase

27. Weareduo

Weareduo-responsive-web-design-showcase

Weareduo-2-responsive-web-design-showcase

28. Unfold

Unfold-responsive-web-design-showcase

Unfold-2-responsive-web-design-showcase

29. Builtwithmomentum

Builtwithmomentum-responsive-web-design-showcase

Builtwithmomentum-2-responsive-web-design-showcase

30. Glorm

Glorm-responsive-web-design-showcase

Glorm-2-responsive-web-design-showcase

31. Quazarwebdesign

Quazar-responsive-web-design-showcase

Quazar-2-responsive-web-design-showcase

32. Agenciart

Agenciart-responsive-web-design-showcase

Agenciart-2-responsive-web-design-showcase

33. Apgdesign

Apgdesign-responsive-web-design-showcase

Apgdesign-2-responsive-web-design-showcase

34. Createdm

Createdm-responsive-web-design-showcase

Createdm-2-responsive-web-design-showcase

Gathered and Arranged by: Jamal and Daniels

Sponsored post
feedback2020-admin
20:51

February 22 2012

07:43

Textured Web: Showcase of Textured & Patterned Website Designs


  

When it comes to design resources, textures and patterns are among some of the most popular tools on offer. And while we may never be able to get a single, definitive answer from the community as to why this is, one can surmise that their popularity is probably due to their extreme usefulness. Their ability to add such richness and depth to otherwise flat website designs with ease, may also factor into that equation.

In fact, one need only look around the web to find some stunning examples of these elements being deployed with fantastic results. Or one can look at the showcase we have assembled for you below. We have already done some of the leg work for you. The sites we gathered have all used textures or patterns in their website designs, and in such stylish fashion that we felt our spotlight should shine their way.

Textured Web

Rockatee is a dark design with a geometric patterned header and footer and two different textures. Both brilliantly installed in the background, one of the main content area, and a subtler one above the header.

Create Digital Media has a beautiful open, expansive website, and the minimal design is complemented by the light textured background.

Celebration Invitations has a large header that uses a light texture to really make the space pop and not feel at all underused. The patterned background adds an extra touch of style to the site.

Stedesign is a vintage styled site in which the design uses a number of textures to really pull the look off with flawless execution.

Stephanie Walter has a lovely design with a texture running all the way down and through the site. Subtle and stylish.

HD Live is another site with an extra subtle background texture that adds a richness to the open design.

The Threepenny Editor has a unique and stylistically retro look and feel, with the patterned background tying the design together in a light, graceful manner.

Alex Catalan has a site design that uses a slight patterned background to give the minimal, oversized style a depth that works wonderfully. The soft texture in the footer and the header also complement the website’s design.

Steely M Music Production uses a lined pattern to pull the somewhat unconventional layout together.

PunchTab has used a delicately textured background to set off the over-sized buttons and content areas. Very nicely paired with the rest of the design.

the Buffalo Lounge has a dark themed site with a wood grain patterned background that gives the entire design the perfect edge.

Adrian Tingstad Husby – Portfolio design is another expansive site layout that adds a touch of attitude and grunge to the otherwise clean style with a patterned background.

Decadent Cakes uses both a colorful pattern and an extremely subtle textured background to give the site a combination of class and vintage style.

Qasim Aziz Portfolio is a simple design with a lightly grained texture in the background for that added punch to the site’s look.

VUURR uses a pair of simple patterns in their website to pull off a design that is big and bold and anything but simple.

Rob Davis uses a delicate texture in both the header and footer, along with a slight patterned background to make this minimal design stand out from the pack.

Holistic Designs has a touch of grunge in their site via a textured background that really catches the eye, but does not steal away focus as the content scrolls across it. Perfectly balanced.

Launch Factory uses a combination of textures, in the background, throughout the content headers and titles, and more for a pitch perfect design full of grunge.

Agenciart has another big and bold design that is brilliantly complemented by the subtle texture in the background.

rtraction is the website for a creative design agency and their use of a light texture in the background works to set off the over-sized content and images. Though the areas where the texture is omitted ends up feeling somewhat less visually comfortable, though the colors could have something to do with that. However, it does seem the texture would soften their slightly harsh feel.

Chriswi is an example that stands out from the last, as it uses the texture down throughout the site (except for the footer) and the colors that might otherwise feel somewhat harsh on the eyes have a softness it seems the texture adds to them.

Valpo Creative uses a delicate texture in the background which does work nicely, though the site would seem better suited to have the content displayed against this lightly textured background rather than the box it sits in.

Danger Brain uses both a pattern for the background and a light texture in the header. The pattern seems like it could be visually overwhelming, but with the content box relegating it to a smaller perimeter it makes it very complementary to the tone of the site.

Open Hand Type has a couple of less than subtle textures employed in the somewhat compact design making their bold look stand out perfectly. Giving the site a certain character.

Oven Bits has a huge header whose open space is lightly textured giving it a softness and retro style. The footer has a matching texture that balances the site wonderfully.

That finishes off this showcase, but feel free to leave us your thoughts in the comment section below. Also drop us a link on a site that you feel we overlooked, and should have included in this collection if you are so inclined.

(rb)

February 20 2012

02:23

Dealing With the Misconceptions of First-Time Business Owners

If you do any kind of freelance work you’ve probably been contacted by someone wanting to start an online business or who has a small business and they want to move it to the web. Unfortunately, most of these people are very unaware of what it takes to be successful online. They don’t understand how it works, how much it costs and how much work it actually can take.


Tags: Webdesign
01:25

70+ Sites to Buy Premium Joomla Templates

All you need to make your site more attractive is to buy a template from Joomla templates providers.

This is the most complete list of Joomla templates providers where you can purchase thousands of premium Joomla templates.


Tags: Webdesign

February 17 2012

11:34

Free and Premium Customizable CSS/HTML Admin Templates

Websites are very dynamic nowadays.Especially if your website is adaptive to users with more interaction then the admin panels must be admin-friendly to control the website easily. So the design of an admin panel is very important.It must be clean,simple and of course fast loading.


Tags: Webdesign
08:59

Designing the Web: Photoshop Tutorials for Designing a Website


  

For those of us in the business of designing the web, one area of resources that always prove invaluable to have in our design arsenals is tutorials. Learning how other web designers have crafted their designs, and which tools they always rely on can always help to guide us as we are either developing or honing our own skills. So we search the web for useful tutorials. Well today we have done the searching for you.

Given that Photoshop is one of the most powerful and popular graphics programs for web design related projects, we decided to turn our focus in that direction for the search. And our search yielded some wonderfully informative results! Split up among two pages, we have compiled a small handful of great Photoshop tutorials for designing a website. We hope you find them as handy as we do.

Designing the Web

Create a Modern Lab Theme Web Design in Photoshop

This tutorial from Design Instruct will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. The process will take you from finding sources of inspiration to setting up the document in Photoshop and creating design elements that fit with the theme of the web layout. It also gives you some practical examples of how using smart objects in a web design project can improve your workflow and save you some time.

Other important lessons learned in this tutorial:

  • Working with the 960 grid system
  • Setting up the Photoshop grid
  • Creating Photoshop patterns
  • Using the rectangle tool
  • Setting layer styles
  • Using Photoshop shortcuts
  • Using the pen tool
  • Working with layers & groups
  • Working with clipping masks

Design a Professional, Clean Community Blog Theme in Adobe Photoshop

In this tutorial from Webdesign Tuts+ you will learn how simple, straight forward design techniques can create a clean community blog theme in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, colors and visual hierarchy.

Other important lessons learned in this tutorial:

  • Setting up rulers and guides
  • Using the rectangular marquee tool
  • Creating & using gradients
  • Setting layer styles
  • Pixel perfect spacing and details

How To Build a Stylish Portfolio Web Design Concept

This tutorial from blog.SpoonGraphics takes you through creating a website with a nice and clean layout making use of a contrasting header area to draw in the user. Otherwise the concept is styled with large typography and subtle details on the interface elements. You will be using various effects, blending modes and layer styles to create all the detailed elements of the design.

Other important lessons learned in this tutorial:

  • Using blending modes for transparency
  • Creating subtle shadows
  • Using pattern overlays
  • Creating a button using layer styles
  • Using the warp tool to create realistic shadows

Creating a Clean Furniture Website and Gallery Layout in Photoshop

In this tutorial from Designzzz you will learn to create a minimal but feature rich furniture gallery with a patterned background.

Other important lessons learned in this tutorial:

  • Using custom shapes
  • Using clipping masks to create images with rounded edges
  • Using opacity for variance
  • Using the rounded rectangle tool
  • Using the elliptical marquee tool

Design a Grungy Newspaper Web Layout in Photoshop

This tutorial from Bloom Web Design is a great beginner tutorial that takes you through the process of creating a simple but effective web layout.

Other important lessons learned in this tutorial:

  • Creating a grungy paper texture
  • Using the ellipse tool
  • Using rulers & guide lines to line up icons
  • Using blending options
  • Using the pen tool grid

Create a Clean, Minimal Website Design in Photoshop

In this tutorial from Visual Swirl you will be shown how to craft a clean, minimal website design using some simple techniques in Photosop. This open layout lends itself well to showcasing visual arts as the work will stand out against the minimal design.

Important lessons learned in this tutorial:

  • Using various layer styles
  • Using 960 grid system for element placement
  • Using the pen tool
  • Using the convert anchor point for smoother curves
  • Using the brush tool
  • Using layer masks
  • Using the gradient tool
  • Using image adjustments for desaturation
  • Cropping with the selection tool

Create Amazing 3D Portfolio Dark Layout In Photoshop

In this tutorial from 1stWebDesigner you will learn how to create a sharp 3D like portfolio design using simple gradients and other effects to add depth and a layered look. Using dark colors and crafting corresponding elements to put this portfolio together in simple fashion, this tutorial is certainly worth going through.

Other important lessons learned in this tutorial:

  • Using the 960 Grid for your layout
  • Using gradient overlays, drop shadows and inner glow for depth
  • Using rulers and guides to line up layout elements
  • Using the rectangular marquee tool
  • Using blending options
  • Using the rounded rectangle tool

Design a Sleek, Dark Mobile App Website

In this intermediate level tutorial from Webdesign Tuts+ you will go through the process of creating a website with an impressive interface based around promoting a mobile app. Using a wide range of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

Other important lessons learned in this tutorial:

  • Using custom Photoshop grids for layout precision
  • Using layer masks, gradients and opacity to create image reflections
  • Using the brush tool to replicate a realistic light source
  • Using gaussian blur for a diffused light effect
  • Using layer styles
  • Using the rounded rectangle tool
  • Using the ellipse tool

How to create a vintage Photoshop file

This tutorial from PSD-files.com teaches you how to create a clean, simple vintage website layout in Photoshop. Using some pre-made vintage PSD’s to help complete the look and style of the design this tutorial is easy to follow.

Important lessons learned in this tutorial:

  • Using filter textures for subtle background effects
  • Using the rectangle tool
  • Using the pen tool
  • Using the ellipse tool
  • Using gaussian blur for shading and depth
  • Using layer styles

Create a Professional Web 2.0 Layout

In this intermediate tutorial from PSD Tuts+ you will go through the extremely detailed step-by-step process to create a web 2.0 layouts using a variety of Photoshop techniques. With the level of detail paid to making this layout shine, this tutorial is fairly long, but entirely worthwhile.

Important lessons learned in this tutorial:

  • Using the 960 grid system
  • Using rulers and guides for alignment
  • Using gradient overlay
  • Using layer masks and gradients to create image reflections
  • Using the free transform tool
  • Using various marquee tool styles for detail
  • Using the custom shape tool
  • Using the rounded rectangle tool
  • Using clipping masks
  • Using the color overlay

More on Page Two

We are halfway down through the tuts, so don’t quit now, there is still so much more knowledge being dropped on page two of the post!

04:48

Circles in web design – 40 amazing examples

Today I`ve collected 40 amazing examples of websites where you can find circles as an integral part of design.Some famous sites include circles in the list of web design trends of 2011 year. Of course, there were agreements


Tags: Webdesign

February 15 2012

13:59

22 Free and Premium HTML Responsive Website Templates and Layouts

There are free and premium HTML responsive website templates and layouts available on the internet. Responsive website templates and layouts are a craze at present.


Tags: Webdesign
09:00

Free Fonts to Make a Great First Impression


  

When you’re designing a website, one of the pillars of great design is typography. Typography is an essential part of good web design, yet it’s amazing how many designers consistently don’t have the proper tools to work with! Talking of course about a quality font library. Even the best designer will struggle to come up with a professional outcome if their font library is lacking in quality.

Today we’ve compiled a huge list of nothing but quality, professional free fonts, that are perfect for making an awesome first impression with your visitors. These fonts are great for designing large headlines with plenty of impact, yet also scale well for sub-headings and in cases body text.

We encourage you to download as many of these great fonts as possible. Enjoy.

The Fonts

Alfa Slab

Alfa Slab Ultimate Free Font

Bender

Bender Free Font

Aller

Aller Free Font

Cubano

Cubano Free Font

Exo

Exo Free Font

AW Conquerer Slab

AW Conquerer Slab Free Font

Carton

Carton Free Font

Chunk Five

Chunk Five Free Font

Ribbon

Ribbon Free Font

Novecento (Wide Light)

Novecento (Wide Light) Free Font

Springsteel

Springsteel Free Font

Terms: only Springsteel light and light italic are free

Enriqueta

Enriqueta Free Font

Duke

Duke Free Font

Tuffy

Tuffy Free Font

Homestead

Homestead Free Font

Gabo

Gabo Free Font

Franchise

Franchise Free Font

Ranger

Ranger Free Font

Nevis

Nevis Free Font

Grandesign Neue Serif

Grandesign Neue Serif Free Font

Armata

Armata Free Font

Kilogram

Kilogram Free Font

Kabel

Kabel Free Font

BP Diet

BP Diet Free Font

Melbourne

Melbourne Free Font

Republic Heavy

Republic Heavy Free Font

Knema

Knema Free Font

aKa Chen

aKa Chen Free Font

Bready

Bready Free Font

Excite

Excite Free Font

Terms: Only free for personal usage

Some Related Reading

Now that you are in font collecting mode, why stop here? Below are some great links for loading up on more high quality fonts for your library. Definitely worth a look.

(rb)

07:13

20 Best Video Players for HTML5

HTML 5 is the best platform for working on the internet and so to have video players for your websites that can run on HTML 5 is the best option that you could probably have and this inspired me to write an article with 20 different video players that were best suited to be used


Tags: Webdesign
03:50

Customize Premium WordPress Theme for Sewing Business

Before and After, from a premium WordPress Theme to a personalized sewing business website. Include header design with chic illustration and design-to-match marketing set.


Tags: Webdesign

February 10 2012

18:12

Turn On HTML5 In IE8 or Lower

To get IE to know about these tags you need to add some Javascript to create the elements, which is done by using the following snippet for HTML5.


Tags: Webdesign
17:40

10 Best Clothing Website Designs

Clothes were made initially to keep us warm and also function as a form of protection. However, since then it has evolve beyond being something we wear, it is now a fashion that reflects the taste and style of an individual, the different fashion style we choose also helps us identify ourselves.


Tags: Webdesign
10:00

Extensive Roundup of the Best WordPress Plugins You’ll Ever Need: Year 2012 Edition

Besides being a beautiful, easy to use and powerful platform by itself, WordPress is also loved because of it’s high level of customization and optimization. Plugins are the best way to optimize and enrich your WordPress blog. And it’s not limited to performance only. The plugins WordPress offers range from page speed optimization, user engagement, advanced backup, full theme modification to social sharing and search engine optimization.

No matter what kind of website or blog you own, you’ll definitely find something that will make your site better. Just like with clothes some plugins are one size fits all, and other are quite specific. Almost every blog will encounter spam, security concerns and will want to expose their content to the largest audience possible. This two article series focuses on the most essential and useful WordPress plugins every blog will find useful. Whether you’re bored with the default comments platform, want to try custom fonts or just add neat social sharing options, continue reading to find the best WordPress plugins out there. The plugins are sorted into categories and only a few of them have the same features so you can find the very right ones for you.

The first part will cover optimization, forms, comments, site backup, posts, security, design & theme customization and media. Stay tuned for part 2 which will contain even more specific and targeted WordPress plugins.

The second part will cover ecommerce, SEO, social media, marketing and lot of great miscellaneous plugins.

Optimization

1. WP Super Cache

WP Super Cache is a very fast caching engine for WordPress that produces static html files. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

2. WP-Optimize

WP-Optimize is a WordPress 2.9++ database cleanup and optimization tool. It doesn’t require PhpMyAdmin to optimize your database tables. It allows you to remove post revisions, comments in the spam queue and un-approved comments within few clicks.

3. W3 Total Cache

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

Forms

1. Contact Form 7

Contact-best-wordpress-plugins-every-blog

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail content flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

2. Fast Secure Contact Form

A super customizable contact form that lets your visitors send you email. Blocks all automated spammers. No templates to mess with.

3. Gravity Forms (Premium –  $39)

Gravity-forms-best-wordpress-plugins-every-blog

Gravity Forms is hands down the best contact form plugin for WordPress. Build and publish your WordPress forms in just minutes. No drudgery, just quick and easy form-building.

4. AJAX Contact Forms (Premium – $10)

Ajax-contact-form-best-wordpress-plugins-every-blog

This is a jQuery based AJAX powered HTML / PHP contact form with Twitter Direct Messaging, easily integrated into WordPress via shortcodes and functions.

Comments

1. Disqus Comment System

Disqus, pronounced “discuss”, is a service and tool for web comments and discussions. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

2. GD Star Rating

GD Star Rating plugin allows you to set up an advanced rating and review system for post types and comments in your blog using single, multi and thumbs ratings.

3. Wizzart – Recent Comments

This plugin offers a highly customizable widget to show recent comments of your visitors in your sidebars.

4. Facebook Comments

Full Facebook Comments moderation and management for your WordPress site. Quick and easy to set up. Insert automatically or via a shortcode.

5. Thank Me Later

Automatically send a ‘thank you’ e-mail to those who comment on your blog. This plugin engages visitors by reminding them to check back for new comments and interesting content.

6. Disable Comments

Allows administrators to globally disable comments on their site. Comments can be disabled according to post type.

7. WP Customer Reviews

WP Customer Reviews allows your customers and visitors to leave reviews or testimonials of your services. Reviews are Microformat enabled (hReview).

Site Backup

1. WP-DBManager

Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of back ups, optimizing and repairing of database.

2. BackUpWordPress

BackUpWordPress will back up your entire site including your database and all your files once every day.

Posts

1. Editorial Calendar

Calendar-best-wordpress-plugins-every-blog

The Editorial Calendar makes it possible to see all your posts and drag and drop them to manage your blog.

2. Yet Another Related Posts Plugin

Related-posts-best-wordpress-plugins-every-blog

Yet Another Related Posts Plugin (YARPP) gives you a list of posts and/or pages related to the current entry, introducing the reader to other relevant content on your site.

3. SimpleReach Slide

Simplereach-best-wordpress-plugins-every-blog

The Slide recommends related posts from within your site on a widget that “slides” in at the bottom of the page.

4. WordPress Popular Posts

WordPress Popular Posts is a highly customizable sidebar widget that displays the most popular posts on your blog. You can use it as a template tag, too.

5. Raw HTML

Lets you use raw HTML or any other code in your posts. You can also disable smart quotes and other automatic formatting on a per-post basis.

6. Auto Post Thumbnail

Automatically generate the Post Thumbnail (Featured Thumbnail) from the first image in post or any custom post type only if Post Thumbnail is not set.

Security

1. Akismet

Akismet-best-wordpress-plugins-every-blog

Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

2. SI CAPTCHA Anti-Spam

Captcha-best-wordpress-plugins-every-blog

Adds CAPTCHA anti-spam methods to WordPress on the forms for comments, registration, lost password, login, or all. For WP, WPMU, and BuddyPress.

3. Secure WordPress

Secure WordPress beefs up the security of your WordPress installation by removing error information on login pages, adds index.html to plugin directories, hides the WordPress version and much more.

4. BulletProof Security

WordPress Website Security Protection. Website security protection against: XSS, RFI, CRLF, CSRF, Base64, Code Injection and SQL Injection hacking att

Design & Theme Customization

1. Widget Context

Widget Context allows you to specify widget visibility settings – you can choose to display them only on certain posts, front page, category or tag pages etc.

2. WP Google Fonts

Google-fonts-best-wordpress-plugins-every-blog

The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme.

3. WP Maintenance Mode

Adds a splash page to your site that lets visitors know your site is down for maintenance. Full access to the back- & front-end is optional.

4. Genesis Simple Sidebars

This plugin allows you to create multiple, dynamic widget areas, and assign those widget areas to sidebar locations within the Genesis Theme Framework

5. Shortcodes Ultimate

With this plugin you can easily create buttons, boxes, different sliders and much, much more. Turn your free theme to premium in just a few clicks.

6. All In One Favicon

Easily add a Favicon to your site and the WordPress admin pages. Complete with upload functionality. Supports all three Favicon types (ico,png,gif).

7. Font Uploader (Premium – $10)

Font-uploader-best-wordpress-plugins-every-blog

This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.

8. WPtouch

Wptouch-best-wordpress-plugins-every-blog

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress website into an application-like theme.

9. Widget Logic

Widget Logic lets you control on which pages widgets appear using WP’s conditional tags. It also adds a ‘widget_content’ filter.

10. WP Content Slideshow

Content-slideshow-best-wordpress-plugins-every-blog

WP Content Slideshow is the perfect Slideshow for WordPress. It displays up to 5 Posts or Pages with Tile, Description and Image for every Post.

Media

1. Easing Slider

Slider-best-wordpress-plugins-every-blog

The Easing Slider comes with various options that allow you to choose different sources to get the images from and also multiple styling options so that you”ll never have to edit any files directly & with ease. Create your own unique elegant slider.

2. NextGEN Gallery

NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with dozens of options and features.

3. flickrRSS

Allows you to integrate Flickr photos into your site. It supports user, set, favorite, group and community photostreams.

4. WordPress Video Plugin

A filter for WordPress that allows easy video embedding of supported sites. Support for 65 different video sites.

5. oQey Gallery

Qqey-best-wordpress-plugins-every-blog

oQey Gallery is a premium grade plugin for managing images and video, creating photo slideshows with music, photo & video galleries that works fantastic.

6. uBillboard (Premium – $20)

Ubillboard-best-wordpress-plugins-every-blog

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options so you can customize it all you want without being overwhelmed with options you never wanted or needed.

7. WP Lightbox 2

This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.

Commerce

1. WP e-Commerce

Ecommerce-best-wordpress-plugins-every-blog

WP e-Commerce is a free WordPress Shopping Cart Plugin that lets customers buy your products, services and digital downloads online.

2. Jigoshop

Jigoshop-best-wordpress-plugins-every-blog

Jigoshop is an eCommerce plugin for WordPress developed by professionals with years of experience delivering online shops for global brands.

3. WooCommerce

Woo-commerce-best-wordpress-plugins-every-blog

Transform your WordPress website into a thoroughbred online store. Delivering enterprise-level quality & features whilst backed by a name you can trust.

4. uPricing (Premium – $15)

Upricing-best-wordpress-plugins-every-blog

uPricing is the ultimate and unique solution for all your WordPress related pricing page needs. Creating pricing tables has never been easier. uPricing comes with easy to use jQuery powered admin interface that lets you create and edit your pricing tables.

5. PayPal Donations

Easy, simple setup to add a PayPal Donation button as a Widget or with a shortcode.

SEO

1. All in One SEO Pack

All in One SEO Pack is the best SEO plugin out there which will automatically optimize your WordPress blog for search engines.

2. WordPress SEO by Yoast

WordPress SEO is the most complete WordPress SEO plugin that exists today for WordPress.org users. It incorporates everything from a snippet preview and page analysis functionality that helps you optimize your pages content, images titles, meta descriptions and more to XML sitemaps, and loads of optimization options in between.

3. Google XML Sitemaps

This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Social

1. Add Link to Facebook

Automatically add links to posts or pages that are being published to your Facebook wall, pages or groups. Simple one time setup and forget. The way links appear on Facebook can be customized.

2. WP to Twitter

Posts a Twitter update when you update your WordPress blog or post to your blogroll, using your chosen URL shortening service. Requires PHP 5 and cURL

3. Digg Digg

Digg-best-wordpress-plugins-every-blog

Digg Digg allows you to integrate popular social buttons into WordPress easily.

4. ShareThis

Sharethis-best-wordpress-plugins-every-blog

The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more.

5. BuddyPress

BuddyPress lets users register on your site and start creating profiles, posting messages, making connections, creating and interacting in groups and much more. A social network in a box, BuddyPress lets you build a social network for your company, school, sports team or niche community.

6. bbPress

Bbpress-best-wordpress-plugins-every-blog

bbPress is forum software with a twist from the creators of WordPress.

7. The Google+ plugin

The Google + Plugin integrates WordPress with your G+ Profile and Page – now with BuddyPress and Post Format support.

8. Twitter Widget Pro

A widget that properly handles twitter feeds, including parsing @username, #hashtags, and URLs into links.

Marketing

1. Newsletter

This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in is law compliant and it means the user has to confirm the subscription following simple standard instructions sent to him via email.

2. WP125

Easy management of 125×125 ads on your blog. Ads can be run for a specified number of days, and will automatically be taken down. Track clicks too.

3. s2Member

s2Member (membership with PayPal) offers powerful membership capabilities. Protect members only content. The s2Member Framework integrates with PayPal very easily and fully supports recurring billing.

4. MailPress

The WordPress mailing platform.

5. Subscribe2

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

6. MailChimp Widget

Adds a widget that allows your users to sign up for your MailChimp mailing list.

7. Simple PopUp

A simple, attractive, extremely fast and non annoying pop up box for your WordPress Blog. It’s power lies in its ease of use.

Miscellaneous

1. WP-PageNavi

Want to replace the old ← Older posts | Newer posts → links with some page links? This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.

2. Jetpack by WordPress.com

Jetpack-best-wordpress-plugins-every-blog Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com.

3. Exclude Pages

This plugin adds a checkbox, “include this page in menus”, which is checked by default. If you uncheck it, the page will not appear in any listings of pages (which includes, and is usually limited to, your page navigation menus).

4. Broken Link Checker

This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

5. ManageWP Worker

Managewp-best-wordpress-plugins-every-blog

ManageWP Worker plugin allows you to remotely manage your blogs from one dashboard. You can read our review here.

6. Redirection

Redirection is a WordPress plugin to manage 301 redirections and keep track of 404 errors without requiring knowledge of Apache .htaccess files.

7. FD Feedburner Plugin

Redirects the main feed and optionally the comments feed seamlessly and transparently to Feedburner.com.

8. Hotfix

Provides unofficial fixes for selected WordPress bugs, so you don’t have to wait for the next WordPress core release.

9. Google Analytics for WordPress

Track your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

10. WP-Polls

Adds an AJAX poll system to your WordPress blog. You can also easily add a poll into your WordPress’s blog post/page.

11. Ozh’ Admin Drop Down Menu

The lazy and the productive will love it : all admin links available in a neat horizontal CSS driven drop down menu. No need to click on “Manage” then “Pages” to edit pages. And plenty more space on your screen.

12. Pretty Link Lite

Shrink, beautify, track, manage and share any URL on or off of your WordPress website. Create links that look however you want using your own domain name.

13. 5sec Google Maps (Premium – $8)

Google-maps-best-wordpress-plugins-every-blog

Integrate Google Maps into your WordPress blog easily without using API or any code.

14. Advanced Access Manager

Advanced Access Manager is a new way of controlling access to your single blog or multi-site setup. This easy to use interface is a very helpful tool for experienced WordPress users.

Conclusion

Do you know and use any other plugins besides the ones we suggested here? We would really appreciate your feedback here, but we are pretty sure this list will be very comprehensive for you and will satisfy most peoples needs!

09:40

Web Design Inspiration: Parallax Scrolling Effect

Parallax Scrolling both vertical and horisontal was definitely number one in web design trends of 2011 year. Plenty of designers use this kind of technique in order to make impressive website designs. For one reason it`s very simple since all information is available on one page, all you have to do is to scroll down and you don`t need to bother about proper navigation. For other reason it`s really simple and easy way to show your designer skills by creating and illustrating amazing story about your project.


Tags: Webdesign
06:28

Moving Web Page Elements Using The CSS3 Translate Transform

CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we’ll go through the process of translating a page element using a CSS3 transform.


Tags: Webdesign

February 09 2012

17:08

When Will Web Typography Catch Up With Print

Since the age of dinosaurs (1990’s) when the web was new, web typography has lagged way behind print. From the fonts used, to ligatures and special characters, setting up columns and grids, kerning, leading, tracking and pretty much all other aspects of type design, web typography just couldn’t compete.


Tags: Webdesign
15:00

Beautiful Website Designs with Heart Graphics

This is a collection of creative website designs that use hearts as their main graphic theme. Get great design ideas for designing a romantic website, wedding site or dating website.


Tags: Webdesign
08:04

How I Tried Free PSD to HTML Converters

Story of a newbie who tried online free PSD to HTML converters to find whether a markup generated automatically could be used for a website.


Tags: Webdesign
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...