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.

Read Free ebook: Sexy Web Design on Web Development Blog!

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.

Read Tips to creating an email signature for your online brand on Web Development Blog!

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!

Read Free WordPress Theme: Hello Little Girl on Web Development Blog!

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

Read Common elements on magazine websites on Web Development Blog!

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

Read Making a website iPhone-friendly using CSS on Web Development Blog!

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.

Read sIFR vs FLIR – Font Replacement Techniques on Web Development Blog!

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

Read Easter Special: Free WordPress Theme and discounted templates on Web Development Blog!

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.

Read Pixel Ruler for Web Developers and Designers on Web Development Blog!

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!

Read The Launch of Website Templates on Web Development Blog!

Template monster is giving 40% off on selected templates throughout the weekend of December 20th to December 21st 2008.

Hurry before this Christmas offer ends.

Technorati Tags: templates, web templates, template monster, discount, christmas offer

Read Discounted templates on Template Monster on Web Development Blog!