Arial, Verdana, Trebuched, Georgia, Lucida are a part of some popular and frequently used typefaces for webpages. In the past years web designers had a their disposition only a restricted set of fonts for web sites. With the introduction of CSS 3 @font-face property things are changing and we can start using any font we want. But in the meantime, which is your favorite font for the web among “old” typefaces? Arial, Verdana, Helvetica, Georgia, Lucida, Times, Trebuched?
Archive for October, 2009
Arial, Verdana, Trebuched, Lucida. Which is your favorite font for the web?
Saturday, October 31st, 20095 Must Read Presentations about CSS Coding
Saturday, October 31st, 2009If you are looking for documentation to improve your CSS skills I suggest you to take a look at the following 5 must read presentations about CSS coding. The following presentations help you learn how to write efficient and maintainable CSS code, understand secrets of CSS inheritance, line-height and CSS System approach (a practical way to write high-quality, reusable CSS code with a shared vocabulary for developers), learn Object Oriented CSS in order to develop high performance web applications and websites. Good reading!
Efficient, Maintainable CSS
CSS Inheritance
Line Height
CSS System
Object Oriented CSS
How to Improve your WordPress Theme with 9 Useful Plugins
Friday, October 30th, 2009This post presents a roundup of 9 essential and really useful plugins that help you improve your WordPress theme making just some simple changes to the PHP code. For each plugin I’ve provided a description you can follow to quickly implement it on your pages.
I Like This
I Like This is a nice plugin that allows your visitors to like your posts simply with a click of mouse. The style is fully customizable with the layout of your WordPress theme. After activating the plugin you can use default options that display the like button below the body of your posts or customize your theme adding the button wherever you want, using the following code:
<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>Feed Subscribers Counter
Feedburner Circulation is a plugin that provides you a valid alternative to Feedburner chicklet to display the number of your RSS feed subscribers in plain text. You can add the counter into header.php, sidebar.php or footer.php using the following code:
<?php feedburner_circulation_text('feed_id');?>and modifying feed_id with the correct ID of your Feedburner feed.
Advertisements within post body
If you use AdSense or other advertising services to monetize the traffic of your site, a good way to increase your revenues is to insert sponsored links into the body of your posts. Quick Adsense allows you to do that easily, simply copy and paste the code of your Ads into the Administration Panel (Setting > Quick AdSense). So, the only thing you have to do is to add a comment in your post in order to display sponsored links where you want. Here is an example of comment:
<!--Ads1-->Pagination
WP-PageNavi enables an useful pagination feature on your posts. Here is an example:
After activating this plugin the only thing you have to do is open index.php (or search.php, archive.php, tag.php) and change the following code:
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
with the following one:
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>Then you can modify the CSS code provided within the folder of this plugin in order to customize the look of pagination with the style of your pages.
Preserve HTML code formatting
If you have a blog about web design you can need to post the source code of tutorials you publish as plain text. Preserve Code Formatting is a very useful plugin that allows you to preserve code formatting by preventing its modification by WordPress and retaining original whitespace and characters. After installing this plugin you can specify a list of tags that will have their contents preserved (for example I used <code> and <pre>) and other options. Here is the result (preserved whitespace and indented code):
#footer{font-size:12px;}
#footer ul{padding:10px;}
#footer ul li{float:left;}
#footer ul li a{display:block;}Related Posts
WordPress Related Posts is a versatile plugin that displays a list of related posts of a certain article via tags. I tried several similar plugin but this is definitively my favorite. You can customize the maximum number of posts to display, exclude categories, display comments count and excerpt for suggested post directly on your WordPress dashboard from Settings > Related Posts. After activating the plugin, to enable its features on your pages open the single.php file and add the following code after the post content:
<?php wp_related_posts();?>Comment Rating
If you want to emulate the comment rating feature of digg.com on your WordPress site, you can use Comment Rating a very powerful plugin that allows your visitor to like or dislike comments on your posts. After activating the plugin, it will appears on each comment the following rating feature:
Highly-rated comments can be highlighted and poorly rated comments can be hidden (just like those on digg.com).
Twitter Followers
The TwitterFollowers plugin is a customizable badge that displays on the sidebar of your WordPress theme a list with your Twitter followers or with people that you are following on Twitter.
Twounter simply returns the number of followers for a twitter username in plain text. You can fetch the number of followers adding the following function into your template:
<?php echo twounter('username') ?>and changing username with your Twitter username.
Any suggestion? Please leave a comment, thanks!
jQuery, Scriptaculous or MooTools: Which JS Framework Do You Prefer?
Thursday, October 22nd, 2009There are many JavaScript frameworks that a web developer can chose to implement a website or a Rich Internet Application. The most famous are without doubt jQuery, Scriptaculous and MooTools. I’ve started programming some years ago using Scriptaculous, than I switched to MooTools and definitively to jQuery in the last two years. I like jQuery for its simplicity and potentials and it’s now my favorite framework to implement JavaScript interactions on my web pages. And you, which framework do you prefer? Why?
Inspiring Music Playlist for Web Designers n. 03
Tuesday, October 20th, 2009This week our weekly inspiring playlist for web designers contains eight new beautiful tracks. Any suggestion for the next issue? Please leave a comment or subscribe to our RSS feeds to stay update on our news!
Goldfrapp – Pilots [on a star]
Ryan Adams – Desire
James Bright – Set Me Free
Sigur Rós – Hoppípolla
Balligomingo – You’re A Star
Devics – Song For A Sleeping Girl
DeVotchKa – How It Ends
Husky Rescue – City Lights
PageLime: Flat File Hosted CMS for Designers and Developers
Monday, October 19th, 2009If you are looking for a free and easy to use solution for you or your clients to manage a web site, I suggest you to try PageLime. PageLime is a remote Content Management System that allows you to manage web sites update the content, images, and documents without installing any software and only using CSS classes to mark which areas of your site are editable.
After creating your account, you have to register the web site you want to manage and mark up editable areas using the class cms-editable (you can also use a custom name for this class). In this way, you or your clients will be able to modify all marked areas using the PageLime WYSIWYG editor, without modify directly the HTML code of your pages. For example, if you want to make an header editable via PageLime you can use this code:
<h1 id="heading"" class="cms-editable">Your Editable Title Here</h1>Once you’re done with your edits, you can publish your pages with a simple click. PageLime is free, very easy to use and is an interesting alternative to other similar stand-alone applications. Here is a five minutes videos that illustrates more in detail how PageLime works.
Cross Browser Testing: Which Tool Do You Use?
Sunday, October 18th, 2009Cross browser testing is a crucial part of the design process of a website. Releasing a website not suitable for certain browsers is always a risk because you could lose a consistent percentage of users that visit your pages. There are many interesting online tools to test how a specific browser renders the code of a webpage such as Adobe Browser Labs or Litmus but their limit is they only generate a screenshot of tested pages so you can’t have a full control of the code.
For cross browser testing I use an useful feature of Dreamweaver called “Browser Compatibility” that helps check HTML/CSS code by providing alerts and suggestions about how to solve eventual issues related to a certain browser. Then before publishing a website I take a look at the final result with IE, Firefox, Chrome and Safari. And you, which tool do you use?
5 Rules To Write More Readable CSS Files
Sunday, October 18th, 2009PSD to HTML We’ll convert your design to xHTML/CSS
Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding.
This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier.
I also suggest you to download my CSS2 Visual Cheat Sheet, a practical and essential reference guide to all CSS2 properties with detailed descriptions and some example of code.
1. Order CSS properties alphabetically
When you start adding properties to a CSS element, probably you don’t pay attention to the order you are using to list them. Without doubt, a better approach to proceed is to use alphabetical order like in the following example:
#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
} In this way, if you need to change a specific properties, will be simpler to find it at a glance.
2. Indent child elements
Indenting child elements of a main element (in this example #nav) is a good way to highlight dependencies between related portions of code.
#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}3. Use comments to separate logical sections of code
Comment lines are really useful to improve code readability because, if used with certain criteria (and not abused), can help you separate sections of CSS code related to the structure of the HTML document:
/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}
4. Use extra spaces and tabulations to separate single properties from their values
I think this way to organize CSS code, by using tabulations to separate properties from their values, noticeably improves the readability of CSS files but in general is rarely used:
#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}
5. Group elements with the same properties
If you have a group of element with the same properties and values you can think to group them in a single declaration and manage separately their difference in order to optimize your code. For example take a look at the code below:
.icon-facebook {
background:url(facebook.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}You can improve the previous code in this way:
.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}
Conclusion
When your project is ready to go live, I suggest you to create and publish a lightweight version the CSS file by using a CSS compressor (such as http://www.csscompressor.com/ or http://www.cssoptimiser.com/) that allows you to reduce dramatically the size of your CSS files.
If you have suggestions or other “rules” you use to improve the readability of your CSS files, please leave a comment. Thanks!
Most Used HTML Tags in 50 Popular Web Sites
Saturday, October 17th, 2009Which are the most used HTML tags in web design? I received this curious question form a friend of mine some days ago and I tried to find an answer analyzing the HTML structure of a selection of 50 popular web sites that includes CNN, Time, New York Times, ABC, Apple, Reuters, Yahoo, Technorati, AOL, Amazon and here is the result.
The most used tag is the <a> tag and this is natural enough considering web sites are full of hyperlinks to internal and external pages. Often the <a> tag is used with the <li> tag to list links in specific page sections or implement navigation bars.
The second most frequent tag is the <div> tag that is used mainly to describe the elements that compose the structure of web pages (header, navigation bar, sidebar, footer) and more in general to represent block-level sections cannot be described by other HTML tags.
The third place is for the <p> tag. For their versatility <li> and <ul> tags are used in many different situation for example, as I said before, to describe sections of links and navigation bars. The <span> tag is often used to highlight particular inline text contents.
<h1> – <h6> are used for headings. <h1>, <h2>, and <h3> are more frequent than <h4>, <h5>, and <h6> tags. In some cases headings are also described by <div> instead of <h1> – <h6> tags.
Last place is for the <script> (yes, these pages are really full of scripts!).
Naturally these results are limited to a small sample of web sites but I think can be quite indicative for a general trend. What do you think? Do you use these tags with the same frequency?
HTML Editors War: What are you using?
Thursday, October 15th, 2009A little survey for you! What’s your favorite HTML editor you use to design and develop websites? And what’s the reason for your choice? In the last year I tried a lot of interesting products but my favorite one remains Dreamweaver CS4. And for you?
Results
I want say a big thanks to everyone for your participation to this survey. Shortly, there are some interesting informations to highlight: 68% of users use more then a single HTML editor. The favorite editor for MAC users is Panic Coda. The favorite one for Windows users is Notepad++ a free code editor that supports several languages and offers a lot of features that make this product really interesting. The third place appertains to Dreamweaver but mainly for professional users (I think because it’s a little bit expensive). TextMate and Aptana follow in the list. Some Linux users use Komodo. Here is the chart with all results (comments are closed):
