For Advanced Users and Developers

WPtouch Pro

WPtouch Pro is a premium version of the popular WPtouch theme for WordPress. It is a WordPress plugin which adds powerful, easy-to-use features to WordPress for mobile + tablet theme support, while keeping it completely independent of your desktop theme. It also has a robust theming framework, perfect for creating awesome mobile & tablet optimized versions of websites.
Pricing:
$39 for 1 site, $69 for 5 sites, and $199 for an unlimited developer license (Prices in Canadian (CAD) dollars)
Why would I buy it:
The technologies used (HTML5, AJAX, CSS3) are ideal for mobiles and tablets (iPad). WPtouch Pro is compatible with not just iPhone and iPad but also with high-end mobile devices like Android and Blackberry and tablet devices like iPad.

Purchase WPtouch Pro

Obox Mobile

Obox Mobile works by detecting supported devices like iPhones, Android & Blackberry and more, serving an optimised theme instead of your regular desktop theme. It is a WordPress plugin with a Plug ‘n Play Installation. Obox Mobile is built for developers with a custom mobile framework giving them the ability to create child themes and make custom modifications. It integrates well with WooThemes and other Obox Themes for WordPress.
Pricing:
$50 for single pack, $100 for developer pack
Why would I buy it:
As with WPtouch Pro, modern technologies such as HTML5, AJAX and CSS3 are used to deliver a seamless user experience like a native app. It also works on most smartphones such as iPhones, Androids, Nokia Smartphones, Blackberry and Opera Mobile based browsers. The ‘Child Themes’ feature enables developers to create custom themes based on the existing mobile framework in a short amount of time.

Purchase Obox Mobile

For Normal Users

Simple Mobile

This is a WordPress Mobile Theme available for sale at ThemeForest. It is one of the earliest mobile themes made for sale. This theme is designed especially for iPhone and best viewed in Portrait orientation. There are 8 color schemes available to choose from and 2 widget areas for easy customisation.
Pricing:
$20 for a Regular License
Why would I buy it:
Multiple color schemes and easy customisation. Comes with built-in twitter and flickr photostream modules. Good for a blog with social media presence.

Purchase Simple Mobile

My Mobile Page V2

This is another WordPress Mobile Theme available for sale at ThemeForest. It uses a fluid layout and therefore supports both portrait and landscape orientations. It comes with a few page templates such as blog page template, gallery page template, generic page template and contact us page template. It is designed for WordPress 3.0.
Pricing:
$20 for a Regular License
Why would I buy it:
Easy to install and customise. Works well on both portrait and landscape orientations. Good for a portfolio or an agency site with a blog.

Purchase My Mobile Page V2

An easy-to-follow guide that reveals the secrets of how to build your own breathtaking web interfaces from scratch.

You’ll be guided through the entire process of creating a gorgeous, usable web site by applying the timeless principles of user-centered design. Even if you’re short on design skills, with this book you’ll be creating your own stunning web sites in no time at all.

Download Now

PS: Check out other free ebooks and guidebooks from sitepoint.

There are basically two types of email signatures; HTML and Plain Text. HTML signatures are obviously more colorful and interesting, however, there are times when a Plain Text email signature is more appropriate for your brand. In this post, we will cover common elements you can put in your email signature to represent your online brand (in this case: blog).

Here are sample email signatures for Web Development Blog.

HTML Email Signature

-------------------
Ei Sabai Nyo

Web Development Blog
A blog about  Web Development, Web Design, Web Applications, Web 2.0, AJAX, WordPress Themes, Search Engine Optimisation, Latest Technologies and more..

Blog: http://eisabainyo.net/weblog | Email: eisabainyo@yahoo.com  

Linked In: http://au.linkedin.com/in/eisabai
Twitter: http://twitter.com/eisabai
Facebook: http://www.facebook.com/eisabainyo
Delicious: http://delicious.com/eisabai
Skype: eisabai
-------------------

Plain Text Email Signature

Our email signatures consist of the following elements.

HTML Email Signature
1. Logo
2. Name
3. Title of your blog/website
4. Short description about your blog/website
5. URL of your blog/website
6. Email
7. Social networking accounts
8. Disclaimer (optional)

Plain Text Email Signature
1. Name
2. Title of your blog/website
3. Short description about your blog/website
4. URL of your blog/website
5. Email
6. Social networking accounts
7. Disclaimer (optional)

Elements in an HTML Email Signature

So how does this differ from a traditional/corporate email signature? In corporate email signatures, you have your position title underneath your name and your address along with phone number, fax number and mobile number. You can put those information in your signature for your online brand, however, we chose not to include them because they are not a primary mean of communication for our blog.

Smashing Magazine has published a blog post titled The Art And Science Of The Email Signature where you can see examples of email signatures for many online brands.

We will be writing a tutorial on coding for an HTML email signature in the near future.

If you are looking for an email newsletter template for your web development company, check out iNewsletter template from ThemeForest.

Hello Little Girl is a cute, fresh and summery theme, featuring a little girl. The template was created originally for Website Templates. Main colors are blue, green, yellow and dark brown. It is a two-columns template with a sidebar on the right.

Features:

• Search Engine Optimised
• Useful 404 page with links to categories
• Large font
• Support Gravatars
• Support widgets
• Comments enabled for pages
• Show post categories and tags for each post
• Custom Favicon

Download now!

Hero module
A hero module on a magazine website usually consists of featured articles from various categories across the site. Javascript tabs / carousel functionality is often used to rotate the items within this module.

Latest articles
Latest articles section consists of a list of recent articles, each of which have a thumbnail image of the article and a short teaser with a link to the individual article page. There are usually between 5 to 10 articles within this section on the homepage.

Categories
Links to categories becomes the primary navigation on magazine websites and essentially replaces the pages navigation you see on most corporate websites. For example, for a Lifestyle magazine website, the primary navigation may consist of categories such as Entertainment, Travel, Fashion, Food and Living where as for a corporate website, the primary navigation links to main pages such as Home, Products, Services, About Us and Contact Us.

List of articles
A list of articles is simply a bunch of links to various articles on the websites. Not only is this good for Search Engine Optimisation purposes, it is also a good reason to give users an easy access to archived articles.

Photo gallery
Most magazine websites have many photo galleries and this module is used to give users a one-click access to latest/seasonal photo gallery on the website. For example, a lifestyle magazine may have a photo gallery called “Grammys Fashion” that they want to promote on the homepage.

Featured video
With fast Internet connections available these days, videos have become a huge part of online media. According to Comscore study, 75 percent of the total U.S. Internet audience viewed online video in July last year. It is no wonder videos have become a staple of content distribution methods.

Social networking
Integration with social networking sites and tools is a must for any website these days as it is one of the most effective ways to generate traffic and increase participation. It is not uncommon for most online brands to have its own YouTube Channel, Twitter presence and Facebook page to facilitate interaction with users everywhere.

Search
Having a search engine for a magazine website is a key requirement because over time, a magazine website will have hundreds and thousands of articles and the only way for users to quickly access an article is through a search engine.

Ads (Medium rectangle, Leaderboard, Half page, etc)
Be it a small block ad, a medium rectangle ad, a leaderboard ad or a half page ad, ads are one of the most profitable ways to generate revenue from a website. After all, someone has to pay for all the hosting, design, development, content and have the magazine up and running online.

RSS feed
RSS feeds enable users to retrieve the latest content from your website using a push technology which mean whenever a new article is added to the website, they will be informed of it via their RSS reader without them having to visit the website. It is especially important for magazine websites and blogs because new content is being added all the time and RSS feeds provide an easy way for users to view updates and keep up to date with latest news and articles.

—

Here are some of our favourite Premium WordPress themes for magazine websites.

WordPress Version: 2.8, Columns: 2, Widget Ready: Yes, Functionality: CMS $27

WordPress Version: 2.9, Columns: 2, Widget Ready: Yes, Functionality: CMS $32

WordPress Version: 2.9, Columns: 3, Widget Ready: Yes, Functionality: Blog $27

Screenshot of Web Development Blog on iPhone

Here are the steps to make a website iPhone-friendly using just CSS.

1. Create a separate stylesheet for iPhone

Tips:
1. Hide unnecessary elements
On this blog, I set the following elements to display: none in CSS. Use display: none rather than visibility: hidden because visibility: hidden will also hide the content inside an element and not hide the element completely.
2. Use a fluid layout
Set the width of your main container (or any other containers) to 100% rather than a specific width in pixel.

For example:

body {
background-color: #fff;
}

.header, .footer {
width: 100%;
}

.sidebar {
display: none;
}

<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />

The viewport of an iPhone is 320 pixels in portrait orientation and 480 pixels in landscape orientation.

2. Specify meta data for viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Here, I am not specifying any width because I am using a fluid layout. Setting the user-scalable property to 0 (false) ensures that the user isn’t able to zoom in or out the website. Refer to Safari HTML Reference – Supported Meta Tags to see any other meta tags that you might want to use.

3. Create an icon

This is very much like a favicon that will be used when the user add your website to their home screen. Use the following code to specify a custom icon. The icon should be at least 57×57 pixel.

<link rel="apple-touch-icon" href="/iphone.png" />

An example of apple-touch-icon for Facebook

An example of apple-touch-icon for Web Development Blog

4. Putting it altogether

Add all of the above to the <head> section of your website.

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

For WordPress (template specific)

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="<?php echo bloginfo('template_url'); ?>/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="<?php echo bloginfo('template_url'); ?>/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

A few things to note

• The overflow CSS property does not work very well on iPhone. The scrollbars aren’t displayed but you can use two fingers and scroll across the area.
• This solution does not make the website light-weight because all elements on your website are still loaded. However, it does look neater and cleaner because many elements are hidden via CSS using display: none.
• The ideal solution is to develop a special version of the website for iPhone using mobile detection script and essentially reduces the bandwidth required to load the website on mobile devices.
• Have a look at a few websites that are optimisied for an iPhone for an inspiration. View this blog on an iPhone, check out iBloggr theme (WordPress iPhone Theme) or view demos of these mobile templates.

Recommended books

• Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa
• Beginning Smartphone Web Development: Building Javascript, CSS, HTML and Ajax-Based Applications for iPhone, Android, Palm Pre, Blackberry, Windows Mobile and Nokia S60
• Developing Hybrid Applications for the iPhone: Using HTML, CSS, and JavaScript to Build Dynamic Apps for the iPhone

sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.

Pros

• Looks nice
• Does not require a server side language
• Text created with sIFR can be copied/selected
• Graceful degradation (If flash is not installed, it will just display normal text)
• Works well with screen readers

Cons

• Not easy to configure
• Not easy to make font adjustments
• Requires Flash installed on client’s browser
• Can be slow if there are too many sIFR elements on a single page

Website | Demo

FLIR

FLIR stands for Facelift Image Replacement. FLIR uses PHP and Javascript to generate text into images with your desired font and replaces them on the fly.

Pros

• Looks nice
• Relatively easy to configure
• Does not require Flash

Cons

• Text cannot be selected/copied
• Uses a server side language (PHP) to generate images and therefore requires a server with PHP
• Requires GD library on the server
• Slow if there are too many FLIR elements on a single page

Website | Demo

My two cents

These techniques are good alternatives to using normal image replacement techniques with CSS for websites that use CMS and require content editors to update text and headings. However, they should be used sparingly as there is always an issue with speed and bandwidth. For example, it is ok to use these techniques for headings but not for body content. After all, websites should not only look pretty, but also accessible and usable. I prefer sIFR to FLIR because although it is harder to implement, it does not require a server side language, and looks nicer. It also degrades gracefully which is an important factor in ensuring a website’s accessibility.

Template Monster is giving away a Free Easter WordPress Theme and 20% discount on Religious templates.

—-

Hop to it and check out this awesome Easter Collection by ThemeForest. From egg-tastic audio, vectors, photos and flash to flyers. We have your Easter project covered.

On-screen Ruler 1.0.1 is a nice little on-screen pixel ruler with many features (available in one right-click). It will make your life easier when you’re transforming a psd to xhtml + css, designing a layout in photoshop or simply measuring something on the screen.

Download link on CNET

Publisher’s description of On-screen Ruler

This program is a semi-transparent on-screen ruler with keyboard shortcuts to help you lay out GUIs and Web pages or measure anything on your screen. Right-click to learn the options and shortcuts. The ruler saves its settings upon exit, so it always looks the way you configured it last. The program comes with a built in uninstaller. It is safe for work, since it does not modify your registry.

Website Templates is your one-stop shop for Website Templates and Flash Templates. Our website templates, flash templates and other products are ready-made web designs, that can be used as a basis for fast and high-quality website. They are completely customisable and ready for immediate download. We are affiliated with Template Monster, the world’s #1 website templates provider and we strive to provide you with website templates of a premium quality!