This is achieved with CSS3 media queries, either in your main stylesheet or using a seperate stylesheet.

The key point is that you can simply add the following code to the bottom of your main stylesheet:

@media only screen and (max-device-width: 480px) {
/* Add iPhone styles here */
}

Or you can refer to an external stylesheet below your main stylesheet as follows:

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

Read the full article here: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

WordPress 3.0 includes lots of improvements and updates—from a simpler and cleaner user–interface, to some more major changes such as improved post type options (I.e. Newsletter, Product and Contacts).

You’ll see more about the new features in the video below. But here are a few of the highlights that stood–out to me with this latest release:

• Bulk updates – Update your WordPress installation or up to 15 plugins at once
• Custom menu’s – More advanced menu options, such as drop–downs
• Custom header image – Easily apply different custom header images to individual posts
• Custom post types – New post types including Products, Contacts, Employees and Newsletters takes WordPress closer to being a fully–fledged CMS
• MU + WP 3.0 – Control multiple WordPress sites from a single installation

See what’s New in Wordress 3.0

Read more about WordPress 3.0 “Thelonious” here, or you can download it here.

Sometimes it can be useful to ensure that a piece of content stays on a single line (e.g. a title), or make sure that some text stays to less than 255 characters (e.g. a description) and gets truncated after that point.

My previous blog article showed how to do this with PHP, and I will give a brief recap below. However, the focus of this blog post is to improve truncation of content even further.

Old Truncation Technique

The following PHP string truncates or shortens the title to 45 characters and then echo’s the list of titles parsed from an RSS feed and displays it on the page with ellipses (…) appended to the end of the title: < ?php echo substr($item->get_title(), 0, 42) . '...'; ?>

For example: Here Is a Title That Is 42 Characters long… You can see that the title itself is 42 characters long so it hasn’t been truncated, but the PHP has appended ellipses (…) to the end of the title. Doing this is quite unnecessary unless the title is over 42 characters.

Improved Truncation Technique

The way to deal with this more effectively is to determine the length of the string and then only append the ellipses (…) if the length of the string exceeds the parameters we have set. This can be done as follows:

<?php
  echo substr($item->get_description(), 0, 45);
  $str = $item->get_description();
  if (strlen($str) > 45) echo '...';
?>

To explain the above code line by line, echo substr($item->get_title(), 0, 45);, this line echo’s or outputs the parsed feed title using SimplePie. The substr function returns the portion of string specified by the start and length parameters. In the above case, 0 represents the first character, and 45 represents the 45th character (spaces are included as characters).

If the title is 45 characters or less, the above code works fine and doesn’t append the ellipses (…), which is ideal. However, what if the title is 60 characters in length?

The second line of the above code, $str = $item->get_description(); converts the whole title into a string called $str.

The third line of code uses the strlen function, which returns the length of the given string (which we have called $str). By using an if statement in the final line of code if (strlen($str) > 45) echo '...';, we are saying, if the length of the string is greater than 45 characters show the ellipses (…) otherwise ignore the if statement and don’t show the ellipses (…).

It’s a very simple tweak that can be applied to outputting SimplePie or any other PHP, and it can help to retain a better looking page by avoiding text wrapping.

SEO

Official Google Webmaster Central Blog: Using Site Speed in Web Search Ranking
Google announced the use of page load time in their algorithm. We saw this one coming with the inclusion of page load time data in Webmaster Tools and Google’s Page Speed tool.

Currently, fewer than 1% of search queries are affected by the site speed signal in our implementation and the signal for site speed only applies for visitors searching in English on Google.com at this point.

Further reading:
Search Engine Roundtable: April 2010 Google Webmaster Report
Yoast: Site Speed Ranking Factors
Matt Cutt’s Blog: Site Speed

jQuery

Sitepoint: Earle Castledine highlighted some of his favourite new features in jQuery 1.4. This is worth a read if you don’t want to get bogged down with every single new feature in jQuery, but instead see some practical uses for the new features and changes in version 1.4.

Other News

Ajaxian: Firefox Account Manager
Mozilla have been working on an interesting project called Account Manager that will enable users to log into the browser and subsequently have access to their stored passwords and login details.

The specification proposes using a static JSON document, automatically discovered by the browser, which describes what login methods the site supports. In addition, The browser needs a way to check which user (if any) is currently signed in. To do this, an HTTP header directive is set in the same code where you would set a cookie with a session ID. Watch the video here.

As a sidenote, I recently launched my new personal site this month, Robin Parduez.

SEO Highlights

Bing Webmaster Center Blog: Illuminating the path to SEO for Silverlight
Bing have been posting some great content on their Webmaster Center Blog, and early in March they released an article discussing optimisation of Silverlight video content for search. The article is well-worth a read for SEO’s and Webmasters (and a lot of the principles apply to Flash as well).

LBi Search Blog: SEO breadcrumbs for site hierarchies in Google
My colleague at LBi – Simon Howland – wrote an interesting article looking at breadcrumb trail best practice for SEO.

SEO Gadget: Surviving a Site Migration (An SEO’s Guide)
Moving a site is something that strikes fear into the hearts of many webmasters. Loosing rankings and traffic are a real risk if site migration is done incorrectly. This article gives some good pointers for moving a site to a new domain the right way.

Search Engine Journal: SEO for Ajax
Ajax has long been a sticky subject when it comes to creating search-friendly websites. This simple, best practice guide should help make Ajax-heavy sites more search-friendly (although I would still recommend steering away from heavy use of Ajax for content that should be crawled and indexed by search engines).

Conversation Marketing: Subfolders, subdomains and new domains: Where your blog should live
Ian Lurie wrote a nice article highlighting some of the Pro’s and Con’s of using a subdomains, subfolder or a new domain for adding a blog to your current site. In agreement with Ian’s article I have to say in a lot of cases, using a subfolder would be my preference (although of course each site, server setup and clients requirements are different).

Stone Temple Consulting: Matt Cutts Interviewed by Eric Enge
An extensive interview with Google’s Matt Cutts by Eric Enge. This interview is definitely worth a read for SEO’s and webmasters-alike.

Web Design/Development & Coding Highlights

Web Designer Notebook: The Little Known font-size-adjust CSS3 Property
Using font-stacks is common-practice, but how can you deal with relative differences in the sizes between fonts? The CSS3 font-size-adjust technique let’s you do just that (at least in Firefox).

Nettuts: Uncovering jQuery’s Hidden Features
Delving below the surface of the jQuery JavaScript framework to see some of its not-so-obvious features and capabilities.

CSS3, please!: Cross-Browser CSS3 Rule Generator
Quickly and easily check CSS3 capabilities within your browser by editing the inline styles. Then copy and paste the CSS into your own stylesheet. This is definitely a bookmarked tool for me.

Cats Who Code: 10 Useful code snippets to develop iPhone-friendly websites
Some very practical code snippets for detecting an iPhone, optimising content width, applying CSS and hiding the toolbar… among other tips.

Each month I will be hand-picking a selection of the most useful articles in SEO, web design/development and coding in a digest format. If there are any specific topics you would like me to include please drop me a comment below.

Chris Coyier over at CSS-Tricks, has written an excellent article discussing a CSS3 progressive enhancement technique for rendering gradients, whilst retaining a fallback image-based option for non-compliant browsers. Read the post here.

I’m all in favour of improving page load times as you’ll see from other posts on Brightscape here, here and here. Therefore, I found this article of interest and felt it worthy of sharing with the community.

The plugin integrates with the Firebug addon in Firefox making this a useful addition to Firebug’s impressive list of features.

Download the CSS Usage plugin.

As a website grows so does its stylesheet. The problem is, the opposite is not true.

Permalinks for SEO

This is something I try to do straight away when setting up a new WordPress blog. The exact settings depend very much on how you want to display your content (if you want to display the category or the date in the URL). By default WordPress doesn’t use the optimal URL structure for SEO, so making this change early-on saves time with redirects later on.

However, keeping folder levels to a minimum makes sense and in the past Yahoo adviced limiting URL folder depth, it also makes URLs more memorable for users. An interesting SEO study was carried out on Google, Yahoo and Live’s (now Bing) indexing of pages up to 10 folders deep: Do Deep Folders Stop Search Engines which showed Google and Yahoo had no trouble, but Bing did have issues at the time (which may still be the case).

To make this change you need to access the WordPress admin panel and make an adjustment to the Settings > Permalinks page. You’ll see from the example image below, that I simply use %postname% for my URL structure. WordPress will automatically update your .htaccess file in the blog root if you have permissions set t allow this, otherwise you are presented with a cut and paste .htaccess file at the bottom of the Permalinks page which you can simply save and upload to your blog root folder.

The .htaccess file should look something like this, notice in this case the blog is stored in the folder /blog/ rather than at the root of the site. WordPress will automatically generate the correct .htaccess settings for your WordPress setup.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>

Secure Admin Area

This tip comes with a caveat—if you access and publish content from only a couple of locations, I.e. your home or office and these locations use a dedicated IP address then this tip is worth implementing for increased security. However, if you create content at many locations, I.e. Airport lounge, Internet café then avoid using this tip.

Basically you will lock access to your WordPress admin area by blocking all IP addresses except the ones that you specify in your .htaccess file. This .htaccess file should be saved in the wp-admin folder rather than the blog root folder. Example below:

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Access Control"
AuthType Basic
order deny,allow
deny from all
# Allow from Office A
allow from xy.xy.xyz.xyz
# Allow from Office B
allow from xyz.xyz.xyz.x
# Allow from Home
allow from xy.xyz.xyz.xyz

You will need to change the ‘xyz’s to match the IP addresses for the different locations that you want to grant access to the admin panel. If you’re unsure what your IP address is you can use a tool like this.

Easy Admin Access

If like me you don’t have an admin link on your blog sidebar, you will have to navigate to the admin panel by typing the URL into your browser address bar. To save some time, I setup a redirect within the root .htaccess file to take me to the admin control panel. It looks like this:

Redirect 301 /admin http://brightscape.net/blog/wp-admin/
Redirect 301 /admin/ http://brightscape.net/blog/wp-admin/

Now after typing the domain, I just type /admin or /admin/ and it will automatically redirect me to the admin control panel.

There’s also some advanced optimisation instructions for Mac OS users on the Adobe website. Although power users would probably want to avoid disabling some of the features discussed in this article.

By using PHP includes you will be able to create a single file which is automatically called on each page on the site automatically server-side. Once you have edited each page and included the PHP include code, you will only ever need to edit one file to make changes across the whole site.

The following tutorial will show you how to create a PHP include file for your global navigation, but the principle applies to any other content that you want to add to every page on your site.

Simple PHP Include File for Global Navigation

Firstly you will need to create your global navigation in HTML format in a blank text file. Once you have created the file remember to save it with the .php file extension. I generally call it navigation.php as the filename is quite self explanatory.

<ul>
  <li><a href="http://www.example.com/">Home</a></li>
  <li><a href="http://www.example.com/services/">Services</a></li>
  <li><a href="http://www.example.com/blog/">Blog</a></li>
  <li><a href="http://www.example.com/contact-us/">Contact Us</a></li>
  <li><a href="http://www.example.com/about-us/">About Us</a></li>
</ul>

The above code is a very basic example of a global navigation list that would generally be displayed at the top of every page on the site. Below is the HTML with the PHP include file in position. The HTML file below should also be saved with the .php file extension.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
</head>
<body>
  <div>
  <!-- Global Navigation -->
  <?php include("/home/username/public_html/navigation.php"); ?>
  </div>
  <div>
  <!-- Main Content -->
  </div>
</body>
</html>

From the code above you will see a short line of PHP code inserted into the HTML where the global navigation should be displayed.

On closer inspection the line of PHP code used for the include is as follows:
<?php include("/home/username/public_html/navigation.php"); ?>

You will need to specify the absolute path to the PHP file within your server file structure. For a file included globally across the site it is a good idea to include navigation.php within the root folder of your site. The absolute path will vary depending on your webhost and if it throws up error messages you may need to contact your host to request the absolute path for calling a PHP include file.

The above example is a very simple way to implement a PHP include file within your pages. Once you have tested the code above, you can go through the pages on your site and delete your global navigation code and replace it with <?php include("/home/username/public_html/navigation.php"); ?>. Now when you need to add or remove pages from the global navigation you simply edit the navigation.php file and upload it to your server. This will now automatically change the content on every page that you have added the PHP include file to.

More Advanced PHP Include File Options

The above code shows you the basic principle of using a PHP include file, but what if you want to have an “on state” where your link is styled differently when you are on that page, or you want to show an additional link on one page of your site but not on the rest of your site? Both these scenarios can be achieved using PHP.

Style link for the page you’re on using PHP & CSS
To style the link for the current page, you need to give each page a unique title. To do this, you need to define a variable by using the following code at the beginning of each page <?php $currentPage="Home" ?>. Each page needs a unique name, so in the above example you need to name the Homepage, Services, Blog, Contact Us and About Us pages.

The only thing left to do is to add some CSS properties to your stylesheet for the class ‘on’. This could be a different colour. In the example page below above I have included CSS within the head section of the page which will style the links to red when the visitor is on that specific page.

The following example shows how to uniquely name each page:

<?php
  $currentPage="Home";
?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <style type="text/css">
  .on {
  color:red
  }
  </style>
</head>
<body>
  <div>
  <!-- Global Navigation -->
  <?php include("/home/username/public_html/navigation.php"); ?>
  </div>
  <div>
  <!-- Main Content -->
  </div>
</body>
</html>

Now the navigation.php file needs to be edited so that when the visitor is on the Homepage, a unique class is added to the link for that page. The navigation.php file should be adjusted as follows:

<ul>
  <li><a href="http://www.example.com/" <?php if ($currentPage=="Home") echo "class=\"on\""; ?>>Home</a></li>
  <li><a href="http://www.example.com/services/" <?php if ($currentPage=="Services") echo "class=\"on\""; ?>>Services</a></li>
  <li><a href="http://www.example.com/blog/" <?php if ($currentPage=="Blog") echo "class=\"on\""; ?>>Blog</a></li>
  <li><a href="http://www.example.com/contact-us/" <?php if ($currentPage=="Contact Us") echo "class=\"on\""; ?>>Contact Us</a></li>
  <li><a href="http://www.example.com/about-us/" <?php if ($currentPage=="About Us") echo "class=\"on\""; ?>>About Us</a></li>
</ul>

Using the above principles you can take it a step further by replacing the link with ‘#’ when the visitor is on a specific page.

Remove the link on current page
You will notice in the following example if and else logic has been used. Edit the navigation.php file as follows:

<ul>
  <li><a href="<?php if ($currentPage=="Home") echo "#";
       else echo "http://www.example.com/"; ?>" <?php if ($currentPage=="Home") echo "class=\"on\""; ?>>Home</a></li>
  <li><a href="<?php if ($currentPage=="Services") echo "#";
       else echo "http://www.example.com/services/"; ?>" <?php if ($currentPage=="Services") echo "class=\"on\""; ?>>Services</a></li>
  <li><a href="<?php if ($currentPage=="Blog") echo "#";
       else echo "http://www.example.com/blog/"; ?>" <?php if ($currentPage=="Blog") echo "class=\"on\""; ?>>Blog</a></li>
  <li><a href="<?php if ($currentPage=="Contact Us") echo "#";
       else echo "http://www.example.com/contact-us/"; ?>" <?php if ($currentPage=="Contact Us") echo "class=\"on\""; ?>>Contact Us</a></li>
  <li><a href="<?php if ($currentPage=="About Us") echo "#";
       else echo "http://www.example.com/about-us/"; ?>" <?php if ($currentPage=="About Us") echo "class=\"on\""; ?>>About Us</a></li>
</ul>

These are just a few basic ways to use PHP includes for global navigation and subsequently defining extra variables. If you have any specific requests please leave a comment and I can create a separate tutorial.