10 Basic Tips for Improving WordPress Themes

A lot of people use WordPress as their blogging platform. After installing WordPress, newly christened WordPress users will usually try to find and download WordPress themes that they can use so that their site looks different from the default theme. Whether a WordPress theme is free or premium, there are plenty of ways to improve them. The following WordPress theme tips cover basic customization, styling and optimization.

1. Reduce the Size of Theme Images

Images are an important part of every WordPress theme, yet WordPress theme developers sometimes forget about optimizing them. Images in a WordPress theme include CSS background images, template logos, default stock images, icons, and so on.

Optimizing images can save you in bandwidth consumption and can improve page response times for your blog readers.

Photoshop, for example, offers a Save for Web feature that optimizes images for the web. What I usually do is lower the quality settings of the image until I start to see changes in color or quality.

Furthermore, you can use a lossless image optimization tool like Smush.it that will squeeze out excess file size without loss in image quality. You can find more image optimization tools here.


by Julius Kuhn-Regnier

http://sixrevisions.com/wordpress/improve-wordpress-themes-tips/

10 Tips for Improving WordPress ThemesA lot of people use WordPress as their blogging platform. After installing WordPress, newly christened WordPress users will usually try to find and download WordPress themes that they can use so that their site looks different from the default theme. Whether a WordPress theme is free or premium, there are plenty of ways to improve them. The following WordPress theme tips cover basic customization, styling and optimization.

 

1. Reduce the Size of Theme Images

Images are an important part of every WordPress theme, yet WordPress theme developers sometimes forget about optimizing them. Images in a WordPress theme include CSS background images, template logos, default stock images, icons, and so on.

Optimizing images can save you in bandwidth consumption and can improve page response times for your blog readers.

Photoshop, for example, offers a Save for Web feature that optimizes images for the web. What I usually do is lower the quality settings of the image until I start to see changes in color or quality.

Furthermore, you can use a lossless image optimization tool like Smush.it that will squeeze out excess file size without loss in image quality. You can find more image optimization tools here.

Reduce the Size of Theme ImagesYahoo! Smush.it is a lossless compression tool.

Learn all about web image optimization via this guide to saving images for the web. Leer más “10 Basic Tips for Improving WordPress Themes”

Important Features All Blogs Should Really Have

Blogging is more commonplace now than ever before. It’s estimated that there are at least 147 million blogs[1] covering topics from technology to Japanese theme restaurants.

But regardless of the vastness of the blogosphere and the diversity of blog topics, there are a handful of site features that you’ll likely find in most of them. In addition, readers have come to expect these site features to be available to them when they visit their favorite blogs.

This article covers the standard features that all blogs should have. These features are meant to improve the user experience by enhancing community engagement, content sharing, findability of posts, and more.
Blog Post Archive

Typically, when site visitors first land on a blog’s homepage, they’re greeted with the latest blog posts sorted from newest on top to oldest at the bottom. This is what blog readers expect to see, but that’s not to say it’s all they want to see.

Many visitors will enjoy going through your older posts once they decide that they like what you have to say. Having a post archive — a web page or section in your blog that lists previous blog posts, customarily sorted in a logical fashion such as by date or by category — is an excellent way to draw in more page views and improves the ability of readers to discover content on your site.

A post archive can serve as a way to increase the conversion of first-time visitors to steadfast readers because it shows them what to expect if they choose to follow your blog. For existing readers, a post archive gives quick access to posts they want to revisit.

It’s not difficult to construct an archive of past blog posts either; most blogging platforms and good content management systems have the capability to display and list your posts. Take for example, WordPress. WordPress has core functions, a core template, and API hooks specifically for dealing with archives (e.g., wp_get_archives and archives.php).


by Jake Rocheleau |http://sixrevisions.com/user-interface/important-features-all-blogs-should-really-have/

 

Important Features All Blogs Should Really Have

Blogging is more commonplace now than ever before. It’s estimated that there are at least 147 million blogs[1] covering topics from technology to Japanese theme restaurants.

But regardless of the vastness of the blogosphere and the diversity of blog topics, there are a handful of site features that you’ll likely find in most of them. In addition, readers have come to expect these site features to be available to them when they visit their favorite blogs.

This article covers the standard features that all blogs should have. These features are meant to improve the user experience by enhancing community engagement, content sharing, findability of posts, and more.

Blog Post Archive

Typically, when site visitors first land on a blog’s homepage, they’re greeted with the latest blog posts sorted from newest on top to oldest at the bottom. This is what blog readers expect to see, but that’s not to say it’s all they want to see.

Many visitors will enjoy going through your older posts once they decide that they like what you have to say. Having a post archive — a web page or section in your blog that lists previous blog posts, customarily sorted in a logical fashion such as by date or by category — is an excellent way to draw in more page views and improves the ability of readers to discover content on your site.

A post archive can serve as a way to increase the conversion of first-time visitors to steadfast readers because it shows them what to expect if they choose to follow your blog. For existing readers, a post archive gives quick access to posts they want to revisit.

It’s not difficult to construct an archive of past blog posts either; most blogging platforms and good content management systems have the capability to display and list your posts. Take for example, WordPress. WordPress has core functions, a core template, and API hooks specifically for dealing with archives (e.g., wp_get_archives and archives.php).

Viget InspireAt Viget Inspire, a company blog, posts are listed and categorized per month in their archive page. Leer más “Important Features All Blogs Should Really Have”

Evolution of Websites: A Darwinian Tale

The web is constantly evolving. It doesn’t take a rocket scientist to see how quickly new technologies are being adopted and how fragile design trends are. While the web is still an infant relative to other mediums such as print, TV and radio, and still has fair amount of growing up to do, it has already amassed a rich history. Let’s take a look at how the medium has evolved throughout the years.

A Matter of Carbon Dating

Evolution is inevitable. As British philosopher Herbert Spencer put it — inspired by Charles Darwin’s theory on natural selection — it’s “survival of the fittest.”

If we examine any aspect of web design, we can see that trends and technologies being discarded, improved on, or superseded by something better is common. Evolve or die, pick one of the two options. And if we delve deeper, we can see three core elements that dictate this natural selection and evolution.


by Alexander Dawson | http://sixrevisions.com/web-technology/evolution-of-websites-a-darwinian-tale/

 

Evolution of Websites: A Darwinian Tale

The web is constantly evolving. It doesn’t take a rocket scientist to see how quickly new technologies are being adopted and how fragile design trends are. While the web is still an infant relative to other mediums such as print, TV and radio, and still has fair amount of growing up to do, it has already amassed a rich history. Let’s take a look at how the medium has evolved throughout the years.

 

A Matter of Carbon Dating

Evolution is inevitable. As British philosopher Herbert Spencer put it — inspired by Charles Darwin’s theory on natural selection — it’s “survival of the fittest.”

If we examine any aspect of web design, we can see that trends and technologies being discarded, improved on, or superseded by something better is common. Evolve or die, pick one of the two options. And if we delve deeper, we can see three core elements that dictate this natural selection and evolution.

A Matter of Carbon Dating

 

Certain web browsers tend to be more evolved than others!

Code

One of the core elements of the web is code. As web designers and web developers, the success of a particular language largely depends on how much value it brings to our work. I’m sure only a handful of you remember VRML with the fondness of the concept that we could soon be browsing the web using the same virtual reality as used in the movie Tron. Alas, virtual reality didn’t take off.

A Matter of Carbon Dating

 

The idea of virtual reality and 3D objects fascinated developers. Leer más “Evolution of Websites: A Darwinian Tale”

WordPress Custom Post Types Guide

One of the most anticipated features of WordPress 3.0 was the ability to add your own custom post types to WordPress, which allows you to display and categorize different types of content outside of the 5 native WordPress content types (i.e. Post, Page, Attachment, and so forth). The addition of this feature is a big step forward in making WordPress a full-fledged CMS, extending outside its normal use as a blogging platform.

In this guide, we’ll go through the process of creating and using your own custom post type. More specifically, we will create an “Event” post type for your special events and dates, sort of like a calendar.
What is a Custom Post Type?

If you’re familiar with WordPress, then I’m sure you’ve already had some exposure to the default WordPress post types used for content creation: Post and Page. Almost all of the content in any WordPress site prior to 3.0 is composed of some combination of posts and pages.

Posts are generally used for content that is updated frequently (blog posts, for example), and pages are generally used for static content (such as the About page of a site).

Often, however, you may have a more specific type of data that you want to include on your site. This is where custom post types come in.

We’re going to create a custom post type that we’ll call “Event”. This content type will let us add events such as birthdays, holidays, conference dates, and so forth.

We’ll be working with the default TwentyTen theme that comes with WordPress 3.0 so that we have a uniform code base, but the concepts and techniques will be applicable to any theme.


October 5th, 2010 by John Gadbois
http://sixrevisions.com/wordpress/wordpress-custom-post-types-guide/

WordPress Custom Post Types Guide

One of the most anticipated features of WordPress 3.0 was the ability to add your own custom post types to WordPress, which allows you to display and categorize different types of content outside of the 5 native WordPress content types (i.e. Post, Page, Attachment, and so forth). The addition of this feature is a big step forward in making WordPress a full-fledged CMS, extending outside its normal use as a blogging platform.

In this guide, we’ll go through the process of creating and using your own custom post type. More specifically, we will create an “Event” post type for your special events and dates, sort of like a calendar.

What is a Custom Post Type?

If you’re familiar with WordPress, then I’m sure you’ve already had some exposure to the default WordPress post types used for content creation: Post and Page. Almost all of the content in any WordPress site prior to 3.0 is composed of some combination of posts and pages.

Posts are generally used for content that is updated frequently (blog posts, for example), and pages are generally used for static content (such as the About page of a site).

Often, however, you may have a more specific type of data that you want to include on your site. This is where custom post types come in.

We’re going to create a custom post type that we’ll call “Event”. This content type will let us add events such as birthdays, holidays, conference dates, and so forth.

We’ll be working with the default TwentyTen theme that comes with WordPress 3.0 so that we have a uniform code base, but the concepts and techniques will be applicable to any theme. Leer más “WordPress Custom Post Types Guide”

Giveaway: PSD to HTML Conversion Service from P2H.com

Their expansive resources of over 300 full-time employees, coupled with guaranteed effective communication and customer care, ensure the highest quality for each project.
P2H Features

P2H’s work includes:

* The highest level of W3C-standards-compliant markup
* Table-less layouts
* XHTML 1.0 Strict DOCTYPE
* SEO-friendly
* Semantic HTML/CSS that follows best practices
* Optimized shorthand CSS
* Separation of presentational (CSS), structural (HTML), and functional (JS) layers
* Emphasis on page load speed
* Cross-browser compatible with IE, Firefox, Chrome, Safari and other browsers
* It takes only 1 working day to do the conversion of the 1st page, and 3-6 hours for each additional page

For additional details about the P2H features and the prize you could win, check out p2h.com order page.


October 6th, 2010 by Jacob Gube
http://sixrevisions.com/contests/giveaway-psd-to-html-conversion-service-from-p2h-com/

Giveaway: PSD to HTML Conversion Service from P2H.com

This one’s going to be a treat for you web designers out there: P2H, the first and premier PSD to HTML conversion service provider, has decided to provide up to 3 pages of their Hi-End Package markup, valued at $450, to a lucky Six Revisions winner. Read on to see how you can win this spectacular service.

What is P2H?

Founded in early 2005, P2H.com (also known as PSD2HTML.com) was the first service of its kind to provide taking a web designer’s Photoshop file (PSD) and converting it into standards-based, high-quality HTML/CSS template. Since then, they have established over 40,000 clients and is recognized as the most experienced and trustworthy company in the Design and HTML marketplace.

order now

Their expansive resources of over 300 full-time employees, coupled with guaranteed effective communication and customer care, ensure the highest quality for each project.

P2H Features

P2H’s work includes:

  • The highest level of W3C-standards-compliant markup
  • Table-less layouts
  • XHTML 1.0 Strict DOCTYPE
  • SEO-friendly
  • Semantic HTML/CSS that follows best practices
  • Optimized shorthand CSS
  • Separation of presentational (CSS), structural (HTML), and functional (JS) layers
  • Emphasis on page load speed
  • Cross-browser compatible with IE, Firefox, Chrome, Safari and other browsers
  • It takes only 1 working day to do the conversion of the 1st page, and 3-6 hours for each additional page

For additional details about the P2H features and the prize you could win, check out p2h.com order page. Leer más “Giveaway: PSD to HTML Conversion Service from P2H.com”

5 Fundamental Steps to Deploying a Website

Something that is overlooked by a lot of web designers and developers is what is actually involved in the deployment of a website; the process when you’ve finished developing the site, tested to make sure it works, and are ready to push it to a live web server.

In a lot of cases, you will be dealing with clients who are getting their website for the first time, and there is nothing for you to really consider apart from the hosting solution to set them up on. As time goes on, you will start getting larger clients that may have existing websites already, or who have more complicated needs. You may find yourself in a scenario where the outcome could be a very unhappy client with data loss and a whole company’s worth of missing emails and site assets. Here are some basic steps that will ensure that you have covered all the bases for a smooth website deployment.
Step 1: Preparation

There are a few things to consider when you are finalizing a website, and they all depend on what type of deployment you will be completing.

The three general scenarios of a website deployment is:

1. The client has nothing (i.e. this is their first website)
2. The client already has hosting and you will be deploying the site on their server
3. The client already has hosting but you will be moving to a new server

The first scenario is the most desired because you are starting with a blank slate. Scenarios 2 and 3 are a bit trickier and involve a more thoughtful deployment process.

Once you have worked out what your deployment scenario is, you will be able to better prepare yourself for everything you need to do in order to carry out a smooth transition from the old website to the new one.

If you are dealing with scenario 1, then all you need to do is register their domain name and purchase (or provide) web hosting. Simple and fast deployment.

Scenarios 2 and 3 require some information gathering. You need domain management credentials for the existing web host so that you can manage the DNS records (more on this in a bit). You will find that, in many cases, the client has no idea what these are or where to get them, so you will need to do as much as you can before you approach your client.

So let’s gather information on our own. We can use a tool like whois.domaintools.com to find out some information about the existing domain name.


by Mark Biegel | http://sixrevisions.com/web-development/5-fundamental-steps-to-deploying-a-website/

5 Fundamental Steps to Deploying a Website

Something that is overlooked by a lot of web designers and developers is what is actually involved in the deployment of a website; the process when you’ve finished developing the site, tested to make sure it works, and are ready to push it to a live web server.

In a lot of cases, you will be dealing with clients who are getting their website for the first time, and there is nothing for you to really consider apart from the hosting solution to set them up on. As time goes on, you will start getting larger clients that may have existing websites already, or who have more complicated needs. You may find yourself in a scenario where the outcome could be a very unhappy client with data loss and a whole company’s worth of missing emails and site assets. Here are some basic steps that will ensure that you have covered all the bases for a smooth website deployment.

Step 1: Preparation

There are a few things to consider when you are finalizing a website, and they all depend on what type of deployment you will be completing.

The three general scenarios of a website deployment is:

  1. The client has nothing (i.e. this is their first website)
  2. The client already has hosting and you will be deploying the site on their server
  3. The client already has hosting but you will be moving to a new server

The first scenario is the most desired because you are starting with a blank slate. Scenarios 2 and 3 are a bit trickier and involve a more thoughtful deployment process.

Once you have worked out what your deployment scenario is, you will be able to better prepare yourself for everything you need to do in order to carry out a smooth transition from the old website to the new one.

If you are dealing with scenario 1, then all you need to do is register their domain name and purchase (or provide) web hosting. Simple and fast deployment.

Scenarios 2 and 3 require some information gathering. You need domain management credentials for the existing web host so that you can manage the DNS records (more on this in a bit). You will find that, in many cases, the client has no idea what these are or where to get them, so you will need to do as much as you can before you approach your client.

So let’s gather information on our own. We can use a tool like whois.domaintools.com to find out some information about the existing domain name. Leer más “5 Fundamental Steps to Deploying a Website”

The Science Behind a Single Page Website

We have all come across them whilst browsing the web, and many of the examples that exist are quite awe-inspiring, the single page website is a paradigm of the modern web in which everything that needs saying can be placed in a single document.

Whilst the single page layout option can lead to overwhelmingly large documents of endless scrolling, a series of clever mechanisms using modern standards and techniques such as CSS3 and Ajax have burst onto the scenes, offering a method of simply giving information as they’re required.

This article is on single page websites that use HTML, CSS and JavaScript; we are skipping the discussion of Flash-only websites, which can technically be classified as a single page website as well.
Once Is Enough for Me

It’s understandable that not every type of website will be well suited to having “one page to rule them all,” however, a common trend that’s seen especially in portfolio websites shows that certain sites can benefit from a simple, yet still multi-faceted, single page.

The idea that a website can be created with just one page seems crazy, but with our industry shifting towards advocating simplicity for ease of use, single page web designs have become a viable and effective option.


by Alexander Dawson | http://sixrevisions.com/web_design/the-science-behind-a-single-page-website/

We have all come across them whilst browsing the web, and many of the examples that exist are quite awe-inspiring, the single page website is a paradigm of the modern web in which everything that needs saying can be placed in a single document.

Whilst the single page layout option can lead to overwhelmingly large documents of endless scrolling, a series of clever mechanisms using modern standards and techniques such as CSS3 and Ajax have burst onto the scenes, offering a method of simply giving information as they’re required.

This article is on single page websites that use HTML, CSS and JavaScript; we are skipping the discussion of Flash-only websites, which can technically be classified as a single page website as well.

Once Is Enough for Me

It’s understandable that not every type of website will be well suited to having “one page to rule them all,” however, a common trend that’s seen especially in portfolio websites shows that certain sites can benefit from a simple, yet still multi-faceted, single page.

The idea that a website can be created with just one page seems crazy, but with our industry shifting towards advocating simplicity for ease of use, single page web designs have become a viable and effective option.

Once Is Enough for Me

CSS Zen Garden is a classic example of a single page with multiple layers of interesting bits.

Trends and Tribulations

While traditional designs with multiple pages will always have its place, there are a number of advantages that give the single page website some potential uses for your own projects.

The ability to construct a site that is entirely self-contained gets a bit of getting used to, and involves a lot more thought and planning. Some questions you have to answer are:

  • Will a single page meet the project’s requirements or will multiple pages be better?
  • How do you organize the content?
  • How does the navigation work?
  • What content do I need and what can I leave out?

Benefits of Single Page Websites

Single page designs have the following advantages over multi-page sites:

  • No page refresh when navigating the site (content is either in the page or loaded using Ajax)
  • User experience can be improved because navigating through content is quicker and more responsive than having to go to a new web page
  • Easier maintenance because you only have to maintain one web page
  • You can design for quality over quantity — instead of having to design multiple page layouts for different types of site content, you can focus on just one solid and high-quality design
  • Your Google PageRank applies to the whole site
  • Higher core content density for search engine spiders
  • Distinction from most other websites; single page websites are less common, and can thus leave an impression on your site visitors (and that’s why they are popular on portfolio sites)
  • Easy solution for simple “brochure” sites that serve one product (i.e. iPhone app) or one purpose (i.e. a designer’s work)
  • Preferred solution for web apps designed for the Mobile Web

http://www.squarefour.net/

Once the page has loaded, there’s nothing else to download.

Disadvantages of Single Page Websites

Single page designs have the following disadvantages against multi-page sites:

  • Potentially large file size of the page
  • A requirement for scripting or CSS3 support if you want to stand out
  • Tabbing through elements can become trickier (for accessibility) because there might be plenty of content on one page (though this wouldn’t be a big problem for well-structured markup that use headings and other best practices)
  • Producing the design is more time-intensive because it involves a lot more thought and creativity to be able to fit everything in one page and to devise a great interaction design
  • The page can take much longer to load if you have a lot of content

http://2advanced.com/

File size is an important issue to contend with, especially where Flash is concerned.

The truth is that whenever you implement a specific design pattern, chances are that you will not be able to please everyone. While single page sites can be made to be 100% accessible and highly usable, there will be situations where a single page site is not a good option for you. For example, an e-commerce site such as Amazon.com wouldn’t be able to pull off a single page web design successfully because of its vast amount of content — and that’s fine because it’s better when these types of sites are multiple pages.

Production Theory

Before we look at some lovely single page designs, it’s worth taking a few moments to explain the various mechanisms used to produce such a site. Your emphasis should be on keeping file sizes as slim as possible and about a thoughtful way of presenting and structuring your web page. Think about user flow and interaction design — how does a user move from section to section of the page?

Here are some techniques that are used in single page websites. It’s important to note that they are not mutually exclusive, so you might find yourself using them in combination.

Manual Scrolling

The first mechanism implemented by conventional single page designs is to display all of the content on the page, structured logically and laid-out in sections.

The way people navigate through the content is simply by using the native scrollbars in their web browser. While this method is simple to implement because it’s just a regular web page with no special interaction, it’s also probably the most boring of the options.

http://www.authenticstyle.co.uk/

Sites that have no need for fancy effects could easily produce a simple and beautiful single page layout.

CSS3 Interaction

The next mechanism for navigating through content on a single page website worth mentioning is CSS3. With the latest version of the CSS specification, the ability to go beyond existing CSS2 selectors allow for a more unique single page experience. Most notably, you can do interesting, interactive things that deal with content by using CSS transition properties for animation and messing about with the :target and :checked pseudo-classes.

For example, the ability to use the :target pseudo-class (combined with anchor links) gives you the option to make the targeted section a different color or to give it a different background-image.

http://downloads.sixrevisions.com/css-light-box/source.html#content

Using CSS3 pseudo selectors, we could form a powerful cross browser “paneling” system.

JavaScript

Finally, we have good old JavaScript, which has been serving us a widespread range of functionality since the web’s early days. With the popularity of web development JS frameworks like jQuery, the ability to swap out existing on-page content has never been easier, and with the rise in Ajax, calling content as it’s required has an even greater potential for eliminating the need for page refreshes. Take note, though, that there are accessibility and SEO concerns with content that is remotely loaded.

You can also use animated scrolling to sections of the web page using JavaScript — a step up from manual scrolling and using anchor links. For example, check out the jQuery ScrollTo plugin. You can see smooth scrolling in action via Laco Janic’s portfolio (click on the primary navigation links such as “identity & print” or “about”).

While it’s not an option for the poor souls with no scripting knowledge, using JavaScript is certainly the most flexible and robust method out of all three.

http://jquery.com/

jQuery amongst other scripting frameworks offer easy to implement content swapping.

A Showcase of Single Page Web Designs

As we have now finished examining the general ways that designers and developers go about creating a single page site, it’s worth looking at some great single page web designs for inspiration. Perhaps these designs will give you some ideas and inspiration!

Camera+

Camera+

Webdots

Webdots

Pear Hosting

Pear Hosting

Playmation

Playmation

Enrichmint

Enrichmint

Basil Gloo

Basil Gloo

Fran-boot

Fran-boot

Milk ‘n Honey

Milk 'n Honey Leer más “The Science Behind a Single Page Website”