Posted in Tutorial
tagged with
css,
hmtl5,
javascript,
web standards
Sat 26 Feb 2011 10:13 am
This site is made with HTML5, but without a few little extras, the styling and layout would break in all except the most up-to-date browsers. For example, in all versions of IE (except IE 9, which is still currently in beta) the CSS applied to new HTML5 tags would not work, and in Firefox 3.6, the layout would not look the same as in Chrome.
Here is a quick list of things you’ll need to get around these problems. None of them are hard to apply, and all the really hard work has been done by other people. Bonus!
1. The New Doctype
From the W3C’s working draft of HTML5, finally a doctype you can remember! Without the doctype, certain browsers will enter quirks mode (in order to maintain backwards compatibility for pages designed with standards that are not the W3C’s) and you have basically no chance of getting you web page to look right.
<p class="code-para">
<code><!DOCTYPE html></code>
</p>
2. A Tag Reference
Knowledge is power, and so W3Schools HTML5 tag reference is a good place to start. How you interpret which tag is right for which part of your site is more or less up to you, but remember, the tags are to be used to give semantic meaning or context to the information in your page. Some are more obvious to apply than others.
At this point, you site will probably work with Safari, Opera and Chrome. So yeah, none of the big boys. The next two points include code that you can apply to your page, and are included (with loads of other stuff) in the fantastic HTML5 boilerplate, but if you want a simpler solution you can just include them yourself.
3. A CSS Reset
As mentioned before, even Firefox has trouble with HTML5; the new tags are inline elements by default, so applying display: block to them will fix most of the problems. A good CSS reset will do this and more, and is a great base from which to start coding.
4. The HTML5 Shiv
Now you’ve got your site working in modern browsers, you need to give IE 6-8 a kick up the backside. These versions of IE do not recognise the new tags at all, and will do all sorts of strange things with them (as they would for any other tag they do not recognise). For this site, IE will decide to push all the content out of the header and into the white content section below. Very annoying.
However, if I include Remy Sharp’s (and Jon Neal’s, with a little help from Sjoerd Visscher) brilliant HTML5 Shiv (or is it shim?), all my troubles are over. What this does is inform your browser that the world has moved on, and that other versions of HTML have come into being. You’re basically having to tell a browser how to do its job, and creating the element in the browser’s DOM.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
All done. Now go! Make a site in HTML5! Or HTML. Or whatever the cool kids are calling it these days.
Sloppily typed by Nick Pyett
Posted in News
tagged with
careers,
ux,
usability
Thu 24 Feb 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
Sat 26 Jun 2010 8: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
Thu 3 Jun 2010 11: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
Fri 14 May 2010 4: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
