If you are making a responsive(or adaptive) website you’ll just need to adjust width and height of these layouts to get various version going.

If you like fluid layouts and have difficulty with or no time for the math, ‘The Perfect 3 Column Liquid Layout (Percentage widths)’ is the right solution for you. Ethan Marcotte has a chapter in Handcrafted CSS dedicated to fluid layouts, if you have the book it is a good source to learn the math behind fluid layouts.

For free layout sources check out these links listed below.

BlueRobot

An oldie but still usable, especially if you are new to CSS layout. Back in 2002 this
is the source I used to get started with table-less layouts.

Intensivstation CSS Layouts

The Noodle Incident

Code Sucks:FauxColumns

The Perfect 3 Column Liquid Layout (Percentage widths)

No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.

Primary CSS

CSS Layout Generator

CSS3 gradient faux column

A faux column without mages, using CSS3 gradients.

CSS3 Sidebar Full Height Background Color

Fax columns using CSS3 backgrounds.

Some plug-ings have been around since last year and this is the first time I come across them. Goes to show how much option there is for WordPress that one can still be surprised by what there is available plug-in wise.

HeadSpace2 SEO especially looks like one to give an extensive try. I use all in one SEO on my freelance website, which is multi-language. Needless to say it takes a lots of configuring and bending to get it working well. I’m going to give HeadSpace2 SEO a try see how it performs compared to the previous one.

Remember to remove plug-ins you don’t use anymore. There is no use to keep your WordPress installation packed with plug-ins which eventually might cause your website to break down. Also, update regularly to the newest version.

BulletProof Security

WordPress website security protection. BulletProof Security protects your website from XSS, CSRF, Base64 and SQL Injection hacking attempts.

iRobots.txt SEO

IRSEO also inhibits several WordPress system directories and files by default. Doing this ensures that the search bots do not include security sensitive pages within search results. For example, searching for “inurl:wp-content name size description” in Google will produce a list of sites with indexed and open content directories.

W3 Total Cache

Improve site performance and user experience via caching: browser, page, object, database, minify and content delivery network support.

WP Smush.it

Reduce image file sizes and improve performance using the Smush.it API within WordPress.

Fluency Admin

Fluency Admin give the WordPress admin interface a boost, with a new style and some cool features. Compatible with WP 3.1.x.

HeadSpace2 SEO

HeadSpace2 is an all-in-one meta-data manager that allows you to fine-tune the SEO potential of your site.

MaxBlog Press Affiliate Ninja

Ninja Affiliate is WordPress plugin developed to imbue lethal marketing powers into your WordPress blog and instantly double or triple your affiliate marketing commissions with almost no effort on your part.

afterRead

Provides suggestions to readers at the end of articles about what to do next, ie; read related articles, donate, read next article in category, etc.

WP-PageNavi

Replaces the basic ← Older posts | Newer posts → links with a more advanced paging navigation interface.

Digg Digg

All-in-One Social Buttons.

Gravity Forms

Build and publish your WordPress forms in just minutes. No drudgery, just quick and easy form-building. Select your fields, configure your options and easily embed forms on your WordPress powered site using the built-in tools.

TwitterLink Comments

Allow your commentators to include their Twitter username along with their comment so a follow-me link can be displayed with their details on the list.

Ozh’ Who Sees Ads

Manage your ads. Define under what condition they will show (visitor from search engine, old post,etc.).

Quick Adsense

Quick Adsense offers a quicker & flexible way to insert Google Adsense or any Ads code into a blog post.

Revision Control

Revision Control allows finer control over the Post Revision system included with WordPress.

Tweet Old Post

Plugin to tweet about your old posts to get more hits for them and keep them alive.

From personal experience I know I want and use my iPhone for all my web browsing needs when away from my desktop. I expect that websites are coded for mobile devices. To achieve that you have to use media queries to serve your website in each resolution flavor, e.g. iPhone, iPad, Galaxy Tab, landscape and portrait.

Media queries is an extension of print and screen used in CSS2.

Example:

Code by Andy Clarke

Unfortunately or not, depending on your point of view, media queries has become the new "fixed vs fluid" argument. There are people who approach media queries as responsive web design, while others approach it as adaptive web design. I was never one to mull over these thing, as long as the code I use gets the job done. But web designers and coders are passionate people, so difference of opinion is inevitable.

I collected a couple of code examples, tutorials, weblog posts on the matter of adaptive or responsive and two books about each one. Whether you are on the adaptive or responsive side, we all need to know how to implement media queries. It's so year 2004 to only serve your website for large screens only.

Tutorials and Examples

Getting Started With (and Gotchas of) CSS Media Queries

Quick Tip: A Crash-Course in CSS Media Queries

CSS3 Media Queries

Effective Example of CSS Media Queries

Using Media Query to Declare CSS for iPhone

CSS Media Queries & Using Available Space

Hardboiled CSS3 Media Queries * Hat Tip!

Responsive Web Design Articles, Tutorials & Guides

Opinions on Responsive or Adaptive

Forget responsive web design…

I much prefer the name adaptive web design. A website should not respond to changing surroundings, it should adapt to them once they’ve changed.

Adaptive or Responsive Design?

Likewise, a gas or liquid doesn't exactly "respond" to being put in a jar by taking up the free space, it "adapts" to the space it has been placed in.

Responsive Web Design

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Books

Responsive Web Design by Ethan Marcotte

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. -- A Book Apart

Adaptive Web Design by Aaron Gustafson

The web is an ever-changing medium whose scope, application, audience and platform continue to grow on a daily basis. If you’ve worked on the web for any amount of time, you’ve likely heard or even used the term “progressive enhancement.” Since the term’s inception, it has been considered a best practice for approaching web design. But what is it really?

Using a framework also takes care of important things like security and easy update of your own code and all other packages. Some frameworks have a huge and active user base and community, making it easy to look for help and solutions if you get stuck.

PHP latest version, 5.3.5 brought many changes which made some of the framework malfunction. Most of them now do support PHP 5.3.5 while others have rewritten their whole code base.

I selected 7 of the most used frameworks and listed them here with key features and some accompanying weblog entries by people with user experience.

My personal preference from past experience is CodeIgniter, but the brand new released FUEL sounds very promising.

FUEL

Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the best ideas of other frameworks with a fresh start.

Some key features:

• module and HMVC support built-in
• full package support built-in
• has more out-of-the-box functionality

FuelPHP for CodeIgniter Developers A weblog entry from a former CodeIgniter user about FUEL.

CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.

Some key features:

• MVC based
• Top notch user guide and documentation

CakePHP

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Some key features:

• MVC based
• Helpers for HTML, Forms, Pagination, AJAX, Javascript, XML, RSS and more

CodeIgniter vs CakePHP An old yet still worth to read weblog entry.

Kohana

Kohana is an elegant HMVC PHP5 framework that provides a rich set of components for building web applications.

Some key features:

• Very fast
• HMVC based

Kohana 3 & CodeIgniter 2

Zend

Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase.

Some key features:

• Makes use of commonly available API’s like, Google, Flickr, Amazon, etc.
• Enterprise ready

Symfony

Symfony is a web application framework for PHP projects.

Some key features:

• ORM (Object-relational mapping)

Yii

Yii comes with rich features: MVC, DAO/ActiveRecord, I18N/L10N, caching, authentication and role-based access control, scaffolding, testing, etc. It can reduce your development time significantly.

Some key features:

• Skinning and theming
• Database Access Objects (DAO), Query Builder, Active Record, DB Migration

I listed a couple of brands, music stars and other companies who make good use of the Facebook page. My favorite one of the list is Dell. Nice design and pretty interactive. These pages can give you an idea what all is possible with Facebook Pages.

The next list contains a couple of tutorials to help you grasp how to adjust your Facebook page. I was taken aback how few tutorials there are out there considering how popular Facebook Pages are. Not only with big names but they are also used by schools, sport clubs, small bands, etc.

I selected the most recent one, although there aren't any updated ones since Facebook changed their pages layout. Hopefully though these tutorials will help you along.

Facebook Fan Page Design Inspirations

Cranium

Starbucks

Lenny Kravitz

Dell

NFL

Adobe

CNN

KLM

Nike Football

Facebook Fan Page Creation Tutorials

A Facebook Fan Page Tutorial

Video tutorials

Facebook fanpage static fbml code and tutorial

FBML code example

Facebook Fan Page Photos Tutorial

Also shows how to take full profit of Facebook’s new way to display profile photos.

How to Create Custom Facebook Pages

A ten step tutorial with text and videos.

Video Tutorial on New Facebook Fan Page Layout

Learn what’s new in the Facebook fan page layout. A video and a text summary of the highlights.

Code by CSS Tricks

Now that CSS has become so extensive and fully implemented, web browsers extensions are unmissable if you regularly work with HTML and CSS. Extensions have become a standard in most developers their browsers, that there are even more niche ones like for JSON, jQuery and SQLite.

I collected the most used web developer extensions for all 5 main browsers. I'm not an Opera or Internet Explorer user, so I might have missed a good one. Firefox is my main browser and Chrome secondary. I don't use Safari either, only for testing. I would love to make Chrome my main browser, but I can't find a nice theme for it, like GrApple which I use with Firefox.

Whether you work with code everyday or not, these extensions are a must in your browser, they'll save you some headache along the way.

Firefox 4

Web Developer

Firebug

Screengrab

It will capture what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images - either to a file, or to the clipboard. It captures Flash too!

SQLite Manager

JSONView

View Source Chart

Firepicker

Simple color picker plug-in for Firebug.

Safari 5

Validator

This is an extension to validate your (X)HTML, CSS and RSS feed with the Unified W3C Validator (Unicorn).

User CSS

User CSS is a Safari 5 extension that will easily enable you to override stylesheets for any web page for anything—from changing fonts, colors to hiding ads and more!

Safari Developer

Safari Developer implements features like window resizing, element highlighting, stylesheet disabling, markup validation (and much more).

Chrome

Web Developer

Firebug Lite

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.4 multi-line scripts in the context of the current web page.

Eye Dropper

Resolution Test

Opera

Firebug Lite Button

Validator

HTML5 Outliner

JsonViewer

Formats and highlights JSON data loaded from file or server.

Internet Explorer

Internet Explorer Developer Toolbar

Web Accessibility Toolbar

Firebug Lite

While a handy feature, not everyone is crazy about it. Myself for one, sometimes I can get really irked by any kind of bars on a website. I want the option to hide it or remove it completely. Also, if you manage a WordPress install that has many users you might want to control which users get to see the admin bar or not.

You can disable the admin bar with WordPress native settings:

Even so there are 7 plug-ins available already to completely disable the admin bar, leaving users no option. There are also a couple of plug-ins to give you more control over the admin bar. I have no doubt, knowing the WordPress community, that the amount of plug-ins to modify the admin bar will grow fast. Meanwhile check out the seven plug-ins listed below.

Admin Bar Removal (completely disable) 3.1 only

Admin Bar Removal Completely Disable new Admin Bar Frontend and Backend that now appears on the Public Side and Admin Panel of WordPress 3.1 based blogs, plus Remove Code for minimal memory load.

Global Hide/Remove Admin Bar Plugin

Adds an option to the Settings Menu to globally turn off the Admin Bar and/or turn off the user option in the profile to show admin bar.

Hide Admin Bar Search

Hide Admin Bar Search is a small plugin that hides the search box in the 3.1 admin bar in both the dashboard and front-end site views.

WP Custom Admin Bar

This gives you options to change who sees the Admin Bar based on their user role, change or override the default styling and remove the Admin Bar altogether.

Admin Bar Disabler

This plugin supports both Per-Site and Per-Network (WordPress Multisite) settings, so you can fine tune your options based on your needs.

Stick Admin Bar To Bottom

This plugin sticks the Admin Bar to the bottom of your screen!

Admin Bar Minimiser

Now there is an easy way to minimise the new WordPress 3.1 admin bar at the click of a button!

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

As you can read from their site, MooTools is more for advanced Javascript coders. It has a more steep leaning curve than jQuery, while jQuery is easier to implement without much knowledge of Javascipt.

Javascript language was never a favorite of mine, I learned it at college before there were frameworks. Maybe it was the way they taught it that created my distaste for the language. The exam was with pen and paper instead of a computer, so we had to debug the code ourselves.

But those days are long gone, in between jQuery and MooTools there is the right framework for everyone. If you are handy with Javascript or want to be able to do more, you should give MooTools a try.

I selected nine MooTools scripts, many have their equivalent in jQuery but the MooTools versions are more versatile if you know your code.

Hat tip: Joomla! uses MooTools.

iPhone Checkboxes Using MooTools

Demo

MooTools Star Ratings with MooStarRating

Demo

Mootools Content Slider Class v2

Demo

Twitter Emulation Using MooTools 1.2 and PHP

E2 Photo Gallery

TableGear

Demo

Calendar Eightysix

Demo

ImageZoom

Facebox

But if you want to optimize your forms and add more options, Javascript is still needed. We are talking about less common options(not standard in every form) such as adding extra fields, password validator, file upload, etc.
A lot of jQuery plug-ins have become obsolete due to HTML5 and CSS3, those are mostly look enhancing plug-ins and text placeholder, which is now standard in HTML.

I have chosen the more common optimization scripts and almost all are simple ones making it easier to implement in your design or to customize. Forms are a very integral part of online interaction, it is the interface from which all data is submitted. An usable and easy to use form is guaranteed to be used again by your users.

Turn any webform into a powerful wizard with jQuery

Collapser plug-in

Password Validation

Give Your Characters a NobleCount

Submit A Form Without Page Refresh

Simple Chained Combobox

Ajax Upload; A file upload script with progress-bar, drag-and-drop

Create a Progress Bar With Javascript

Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

jQuery Add/Remove Input Fields

HTML5 is a set of new specifications added to already existing HTML specifications, plain and simple. CSS3 are the newest specification of CSS, such as box-shadow, text-shadow, transition, etc. We still use HTML to structure content and now with the HTML5 specification we can handle dynamic data such as geo-location for example. CSS is still used to style and create nice effects like shadows, nicer mouse-overs, without needing Javascript. and the old regular things such as color, margin, floats, etc.

Remember HTML5 is HTML, the new doctype; <!DOCTYPE html> is backwards compatible. If you like me always coded using the XHTML way, it is still valid. There aren't any issues with closing your tags, personally I find it neater and easier to keep the code error free.

But besides all technicality, it will continue to be HTML5 pure for marketing purposes, that's why the W3C has commissioned a logo to represent HTML5.

Now lets take a look at creating forms using HTML5. While browser support isn't 100% yet that we can forgo Javascript, we are getting close. There are now standard field attributes to recognize an email address input, placeholder text, autofocus and more.

Once you have created your barebone form it is time to style it with CSS. Add some gradients to the fields, create a nice image free button and use some nice font.

The HTML5 code

A Form of Madness

How to Build Cross-Browser HTML5 Forms

Have a Field Day with HTML5 Forms

Fun with HTML5 Forms

The CSS3 code

Styling a Simple Form using CSS3

Using CSS3 to style forms written in HTML5

Customizing web forms with CSS3 and WebKit

I selected some of the best rated plug-ins for you to try out. I had to forgo some as they aren't compatible with the latest version of WordPress. If you know of more good plug-ins do share with us.

Poll Plug-ins

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.

WP Easy Polls

WP Easy Polls is a quick and easy way to create money making polls for affiliate marketers.

PollDaddy Polls & Ratings

The PollDaddy Polls and Ratings plug-in allows you to create and manage polls and ratings from within your WordPress dashboard.

SodaHead Polls

Allows you to create and embed a poll into your blog.

PollMe

PollMe is an easy to use and easy to modify polling tool for WordPress. Written to be easy to use to none coders.

Survey Plug-ins

WP Survey And Quiz Tool

A plug-in to allow users to generate quiz’s, exams, tests and surveys for their WordPress site.

WordPress Simple Survey

A jQuery-based plugin that displays basic weighted survey, and then routes user to location based on score.

SurveyMe

SurveyMe is an easy to use and easy to modify survey tool for WordPress. Written to be easy to use to none coders.

The best practice is to always keep a recent back-up on your local disk and on an online storage that is not the same as your website. There are several WordPress plug-ins that make it easy to backup your files and database into a zip file which can be emailed to you or uploaded through FTP to a server.

Most plug-ins also support popular online storage such as Dropbox and Amazon S3. If you rather not do the heavy work yourself I listed two premium online backup services that are easy and reliable to use. Especially VaultPress has garnered a lot of attention and recommendation.

Get started with one of these options right away and sleep tight knowing your website is safe!

BackWPup

* Database Backup
* WordPress XML Export
* Optimize Database
* Check\Repair Database
* File Backup
* Backups in zip,tar,tar.gz,tar.bz2 format
* Store backup to Folder
* Store backup to FTP Server
* Store backup to Amazon S3
* Store backup to RackSpaceCloud
* Send Log/Backup by eMail

wp Time Machine

The wp Time Machine plug-in creates an archive (as a .zip file or .tar.gz file) of all your WordPress Data & Files which is ‘sent’ to a remote storage provider. You provide the remote account; this plug-in provides a connection to the offsite facility you choose. Current choices include Dropbox, Amazon’s S3, and FTP accounts.

WP-DB-Backup

WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.

Bei Fen - WordPress Backup Plug-in

You can create backups of your complete WordPress installation, only the files, or only your WordPress database.

DBC Backup

DBC Backup, is a simple way to schedule daily database backups using the wp cron system. You can select when and where your backup will be generated. If your server has support you can select between three different compression formats: none, Gzip and Bzip2. The plugin will try to auto create the export directory, the .htaccess and an empty index.html file to protect your backups.

WordPress EZ Backup

WordPress EZ Backup is a administrators plug-in to allow the easiest most feature rich method for creating backup archives of your entire site (not just WP installations but any part of your site or webspace) & allows backup archives of any MySQL database you choose & more.

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 backing up and optimizing of database.

WP S3 Backups

Using this plug-in, you can easily and automatically backup important parts of your WordPress install to Amazon S3.

WordPress Backup

Backup the upload directory (images), current theme directory, and plug-ins directory to a zip file. Zip files optionally sent to email.

Online Back Up Services

VaultPress

VaultPress enables the retrieval of files right from the dashboard. Archived versions of your plug-ins, database, uploads, and themes are all available for download on the backup page with one click. And if you ever need help, the VaultPress Safe­keepers are ready to pro­vide hands on concierge service.

blogVault

blogVault creates a backup of your blog. It backs up all aspects of your blog including full posts, comments, pages, images, plug-ins, themes and stylesheets.