Posted in News, tagged with 24/02/2011 3:56 pm
Wow, its been ages since I blogged. Look - its been over seven months! That's a capital offence in some circles, and basically SEO suicide. (Or is it?)
But I've not been completely idle. I've been busy on Twitter and keeping up with other blogs. Copyblogger is a great blog and always comes up with interesting posts, Codrops is cool for dev stuff and there are some great UX sites like UX Booth and 52 Weeks of UX. Also check out the Baymard Institute for usability.
The sharper eyed among you will also have noticed I've redesigned my website. But there's also quite a lot of development to it as well. I've been working with CodeIgniter a lot over the past year (making bespoke CMS's, delegate management systems, registration sites, you name it) so I decided to have a stab at building my own PHP framework. Its powering this site at the moment, but is still quite a way off it's first release.
There are still a few more i's to dot and t's to cross on my site, but its coming together. I'll post something soon about the design inspiration. And like I said, I'm not dead.
Sloppily typed by Nick Pyett
Posted in Tutorial, tagged with firefox 26/06/2010 7:53 am
Searching using the default Google search from Firefox's address bar will use Google US, but if you want to change this to Google UK, you can use the following method.
You can edit many of the Firefox's preferences by opening Firefox and typing "about:config" (without the quotes) into the address bar. You will then be greeted by a screen that reads "Hear be dragons!". Click the button that reads "I'll be careful, I promise!" (and make sure you are), and the preferences list will appear. As you can see, there are loads. Type "keyword" into the "Filter:" search field at the top of the page and two preferences will be displayed, "keyword.URL" and "keyword.enabled".
http://www.google.co.uk/search?ie=UTF-8&oe=UTF-8&q=
Firstly, copy the line of text above and then double click on the "keyword.URL" preference. A pop-up box titled "Enter string value" will appear. Paste the text into the input field and click "OK". Next, if the text in the "Value" column of the second preference "keyword.enabled" reads "false", double click on the preference to change it to "true". This will allow the search keyword we just set to be used. With this setting set to "false", any search in the address bar will take you to the closest URL to your search term. You may like this functionality, but the sites you will be taken to will only be in relation to the URL, not in relation to any search engine page-rank or site quality.
Close the "about:config" tab or Firefox itself to close the preferences menu. Other resources on Firefox include my blog post How to view your Firefox bookmarks in a tab and MozillaZine's About:config entries article.
Sloppily typed by Nick Pyett
Posted in Tutorial, tagged with css, html, seo 03/06/2010 10:50 am
Image replacement is a great technique for anyone wanting to maximise SEO and design on a web page. What with the "do they don't they" question of whether Google penalise pagerank for those using it more or less answered, I thought I'd have a look at how Google do it themselves.
On any Google search results page, you will see their logo at the top left of the page, next to the search box. This image is an image sprite consisting of most of the images used on the page. If we disable images on the page, we are left with a text link back to Google's homepage where Google's logo was. Disabling both styles and images leaves a similar result. Google achieve this with the following HTML.
<h1>
<a href="http://www.google.com/">
Google
<img width="167" height="222" src="nav_logo13.png" alt="" />
</a>
</h1>
The HTML used is what you'd expect for a text based link, apart from the empty alt text attribute and with the addition of some text reading "Google" between the anchor tags. It is this text that we need to hide (or replace) in order to get the look we need. This is achieved with the following CSS.
h1
{
font-size: 1em;
font-weight: normal;
}
h1 a
{
height: 49px; width: 137px;
display: block;
position: relative;
overflow: hidden;
}
h1 a img
{
border: 0;
position: absolute;
left: 0;
top: -41px;
}
Let's start with the CSS applied to the image itself. The border property is to remove the default anchor border style. So far, so boring. The position property is more interesting, as it allows us to hide the "Google" text between the anchor tags. Absolutely positioned elements can be positioned with the top, right, bottom and left properties. These properties set the margin (in pixels) between the element and the next parent element with a position property other then the default "static" value.
In our case, the parent element is the anchor. The left property is applied to our image with a value of zero, which means the image will have no left margin in relation to the anchor. As a result of this, the text between the anchor tags is covered by the image. Image replacement complete!
The rest of the styles are only necessary if you are going to use an image sprite. The height, width, display and overflow properties applied to the anchor trim the image so that only the Google logo appear, and the same goes for the top property applied to the image. The font styles applied to the h1 element are to make the text small enough to hide behind the image.
Alt text is used to give context to an image for a screen reader or if images have been disabled by the user. In this case, it is not necessary; the "Google" text between the anchor tags serves this purpose. One criticism you may make of this method is that it generates "double text" if the user has disabled styles but not images, as both the image and text are visible. Please bear that in mind if you would like to implement this method.
If you would like to learn more about the CSS discussed in this article, W3 Schools is a great resource. If you're wondering how on earth I figured out the CSS applied to each element, you need to get Firebug for Firefox in your life!
Sloppily typed by Nick Pyett
Posted in Tutorial, tagged with firefox 14/05/2010 3:02 pm
There are many great add-ons for Firefox (the open-source web browser from Mozilla), some of which allow you to open your bookmarks in a formatted tab. Both Bookmarks Tab and MyBookmarks do this, but if you want something even simpler, copy and paste the following line into Firefox's address bar.
chrome://browser/content/bookmarks/bookmarksPanel.xul
Easy! If you want to be even craftier, you can bookmark the address, right click, choose "Properties", check the box that says "Load this bookmark in the sidebar" and click "Save". You now have a bookmark that will open all your bookmarks as normal when you left-click, or open in them in a new tab when you Ctrl+click or middle-click, just like opening a normal tab window.
Other great Firefox resources include the Basic Bookmarks add-on, a jimmyrcom YouTube tutorial showing you how to speed the browser up with about:config and LifeHacker's guide to FF3.
Sloppily typed by Nick Pyett
Posted in Article, tagged with seo 23/09/2009 8:30 am
At launch, my homepage joined the ranks of those trying to rid the net of a deprecated convention, and decided against the www.
Why is the www. deprecated? Well, it just isn't necessary, as the people at No-WWW. explain, "Mail servers do not require you to send emails to recipient@mail.domain.com. Likewise, web servers should allow access to their pages though the main domain unless a particular subdomain is required".
So if the www. is deprecated, what are the benefits of not using it? Well, none. The most important thing is that you CHOOSE TO USE IT OR NOT and then stick to it. The problem arises with search engine optimisation, as Canonical SEO explains. A search engine may well list your homepage twice, once with the www. and once without. This is bad for your page rank, because the more inbound links to your site, the higher your rank. With your links potentially being split between two pages, your site will appear lower in search listings.
This problem can easily be remedied, all by adding three lines to your .htaccess file that will direct all the traffic from the www. site to the non-www. site or visa-versa. The .htaccess file is an Apache configuration file located in the root directory of your website. You can edit it through your FTP program. It may be hidden, much like a hidden file on a PC, so go to your FTP program's settings and find and click the box that says "Show hidden files and folders" or similar.
To always remove the www. add this.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
To always use the www. add this after changing "example.com" to your own URL.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]
Whether you choose www. or not is up to you. But, answer me this. When was the last time you said the www. whilst discussing a website? Or saw it on an ad? Or typed it into your browser? Without it, devilishly clever URLs have been created, such as http://del.icio.us and http://tr.im. And don't forget, www is the most inefficient abbreviation ever. It has three times the syllables (nine) than the phrase it is an acronym of (three).
Sloppily typed by Nick Pyett
Posted in Tutorial, tagged with css, javascript 25/06/2009 1:05 pm
Fixed and variable width CSS layouts both have their strengths and weaknesses, and have each been adopted widely, but there is a third way.
Paul Sowdens's "style-switcher" article on A List Apart describes (with a little help from PPK) how to use alternate style sheets and Javascript to let a user switch between the style sheets applied to a web page. The most widely known use of this technique is probably Wired.com's text size widget, where by clicking on a smaller or larger text icon changes the size of the article text.
As the style-switcher technique allows us to switch between whole style sheets, it is not just the text size a user can be allowed to adjust. By the same token, whatever styles we put into our alternate style sheet will override the styles set out in the persistent or preferred style sheets, when enabled by the Javascript (as long as they are put in order to cascade properly).
We can now set up multiple alternate style sheets, each with different styles applied, and the user change between them. My homepage is styled with a fixed width of 800px, but a user can click on the links at the top of the right column to change this width to suit their screen, be it a portable device, wide screen or standard.
This approach overcomes the two main issues associated with fixed width layouts, namely, that either they are too wide for your screen and necessitate horizontal scrolling, or, that they look lost in a sea of emptiness on your snazzy high-res screen. It also does not suffer the problem often criticized of variable width solutions; that they can produce paragraph widths too wide as to be comfortable to read. The widths can be chosen and tested before anyone applies them.
And I know what some of you will say before you say it: "If you're using Javascript anyway, why not just use the screen.width property and match the page width with that?" Good point, but this is just another way of producing a variable width layout. Admittedly, you could then use Javascript to choose between alternate style sheets, but we don't want Javascript to choose the width of our page - we can do that for ourselves.
There is no reason, however, that one of these methods should not be available to the user, or even set as default. We could have a standard width for the page, for example, and a "match my screen size" button for those who felt the standard width was not appropriate for their screens. What I am proposing is that users should have the choice over how best to view content in their own browsers.
Sloppily typed by Nick Pyett
Posted in Article, tagged with web standards 17/06/2009 11:27 am
The World Wide Web Consortium (W3C) is an organisation dedicated to developing standard practices and guidelines to help the internet grow in a positive way.
The W3C produce recommendations about how to best apply a web programming language. Everything from current standards, such as XHTML, the mark-up language this website is coded in, to newer languages, such as Service Modeling Language, a language used to model complex services and systems, are explained in detail. These guidelines are only recommended after the endorsement of W3C members and its Director.
By complying with the W3C recommendations set out for web programming, a web designer can produce sites that are easily accessible to a user and compatible with the range of browsers that are available today. Why should the browser you're using effect how the web looks? Well, in a perfect world, it shouldn't, but different browsers support different programming languages to different degrees.
To aid web programmers in complying with the recommendations for HTML, the W3C provide a validator to check a designer's code against its own guidelines. This service shows errors and warnings if your code does not match the specific guidelines set out for HTML (or XHTML). Validators for CSS, hyperlinks and mobile devices, among others, are also provided.
Membership to the W3C is open to companies and individuals, of which there are over 400. The advantages of membership for a company is to get an early insight into market trends and emerging technologies, not to mention the kudos received for being an innovator within the industry and the networking possibilities.
To give you an idea of the sort of early insight we are talking about, the W3C launched the Mobile Web Initiative, to facilitate mobile web access, in May 2005, over a year and a half before the release of the iPhone. In February 1998, XML, the language used for RSS news feeds and blogs, became a W3C recommendation, five years before Google bought Blogspot.com.
Currently, the W3C is focusing on the tools to bring about a Semantic world wide web. This is a vision of the internet where data is easily accessible to a wide range of applications, rather than the model we have now, where applications control data.
Since its creation in October 1994 by Tim Berners-Lee, the inventor of the internet, the W3C has been at the forefront of the development of the web, and now, with the creation of the Web Science Research Initiative, the goal for the future is to "build synergies between Web Science and Web Standards - to ensure that the Web benefits all people on the planet". If you are anybody from a web enthusiast to an associate in a large corporation, news from the W3C and its associated bodies is always worth following.
Sloppily typed by Nick Pyett
