Posts Tagged ‘website tips’
CSS Tooltips with the Pseudo Element
Last week I was on the hunt to see the ways in which people styled tooltips – a small pop-up window with descriptive text, such as a label, for a control or graphical object – as I was working on a project which specified that the tooltips must be styled and not let the browsers default styles show.
A lot of the links out there just seemed to be regurgitating the same information until I found this link on CSS Globe which was a post showing four interesting CSS techniques. The idea is to stick a span into your anchor element <a href="#">Title <span>Tooltip</span></a>. The CSS then documents the active and hover states which makes the span element visible. In the links active state the span is set to display: none; and is then set to display: block and is offset to the left and above to create a hover effect above the word.
Although the above piece of code will work it’s far from ideal as the code isn’t very semantic as you’re using an extra/meaningless element which will cause havoc with screenreader software.
This year I’ve been starting to dabble with pseudo elements, as you may have noticed from a few articles and it got me wondering if I would be able to modify this tooltip code with a little help from pseudo elements. The answer was yes, when I combined it with the CSS content property.
Lets start with our basic sentence:
<p>An <span title="This is an example of using the content property for CSS tooltips" class="tooltip">example</span> sentence for my tooltip.</p>To make the tooltip, the wording in the title attribute, work using content property we use the following code:
.tooltip:hover:after {
content: attr(title);
}
The above CSS will make the tooltip visible when you hover over the word which has been wrapped in the span in the above anchor element. However, there won’t be any style applied to this element, so go mad and add as much styling as you want; border-radius, rgba, padding and colour.
View the CSS tooltip example.
Keir Whitakers WordPress Blocks
Whilst browsing twitter during the weekend I noticed that someone had retweeted Keir Whitaker, editor of Carsonifieds Think Vitamin blog. I normally just skim through the vast majority of the tweets in my timeline but this one caught my eye.
The tweet mentioned Keirs latest development — WordPress Blocks — I reckon most people will find this quite interesting and definately something that you should look into if you develope sites using wordpress. After clicking the link, I was taken to Keirs project page of his website where he explains that:
WP-Blocks will allow you to define unlimited content blocks and have them appear in your templates via a simple PHP function call. These blocks will then be editable via the normal WordPress editor.
Keir stated that the idea for this arose when a simple page or post just doesn’t quite cut it, meaning you would have to hardcode something within the template which would then make it inaccessibile for the person who owns the site. This of course could all be avoided if the person was happy enough to poke around the backend and edit the template files but we all know that this is far from ideal. Keir suggests using these blocks for areas which might change infrequently; think of your footer or small biography in the sidebar.
Currently the plugin is scheduled for a September release but I am tempted to drop Keir an email to see if I could help with the testing as it is something that I would like to experiment with and perhaps see incorporated into future wordpress installs.
Subtle Site Improvements
Although it might not be immediately apparent, during the last two weeks I have been rolling out a series of improvements throughout this site.
Font Stacks
On my main body text I am using ff-tisa-web-pro-1 and ff-tisa-web-pro-2, which are being served up with help from Typekit. The fall back options in my font stack were; Helvetica, Arial and Serif.
Unfortunately with Typekit, sometimes you can see the font switch happen which is caused by your default fonts changing over to the ones served by Typekit and if you haven’t specified similar looking fonts then the switch over can be quite horrific, with line lengths changing and pushing words onto the next line. So to combat this problem, I switch my fallback fonts to Georgia, Palatino, ‘Palatino Linotype’, Times, ‘Times New Roman’ and serif. Although you will still see the font switch on some web browsers, the switch over should not be nearly as noticeable now.
One final thing I done, was republish my Typekit fonts as suggested on there blog in order for the fonts to render properly in the Opera browser.
Additional Information
This blog has always been pretty sparse, perhaps a little too sparse. So I decided to provide some more extra information at the bottom of each post, which give the readers more information about me. The sections are titled; who I am, what I do and where I do it.
I’ve also been toying with the idea of putting in related information that could accommodate extra information on the post.
Tweet Button
Last week I wrote about Noel Jacksons excellent little Tweethis button and if you missed out on this then it is certainly a worthwhile read. I’ve added the button to the bottom of my posts, directly above the additional information which I have mentioned above.
iPhone Version
Whenever I’ve had some spare time I’ve been chipping away at an iPhone version of this site, so hopefully I should be able to get that up and running before the month is out. Expect an accompanying blog post on how to create an iPhone version of your website in the not too distant future.
Add a body id to a wordpress template
When I created my first wordpress theme for this website, over two years ago, I had great trouble trying to attach an ID onto the body within the header code. I found it really surprising that there wasn’t much in the way of documentation as I believe that attaching an ID to your body tag is something which should be used on every website.
After several attempts at trying to settle on a method for my website I ended up using a switch statement which was placed within the header, it looked like the following:
<?php if (is_page("about")) { ?>
<body id="about">
<?php } elseif (is_archive("archives")) { ?>
<body id="articles">
<?php } elseif (is_page("portfolio")) { ?>
<body id="portfolio">
<?php } elseif (is_page("contact")) { ?>
<body id="contact">
<?php } else { ?>
<body id="index">
<?php } ?>
This ultimately ended up being far from ideal because if I ever needed to create a new page which didn’t fall within the stipulated pages then I’d have to add another option to the switch statement in order to style the page how I desired. When WordPress introduced version 2.7 they brought forward a new function which dynamically added a class to the body tag <body <?php body_class(); ?>> which would allow for multiple classes to be attached to the body, allowing designers/developers to style pages individually. However, this still wasn’t what I wanted to do with WordPress.
Nearly two years on and I seemed to have forgot all about my issues with attaching IDs to the body tag, until I was developing a WordPress website that required the body to have unique IDs, so I started my search for another solution knowing full well that my previous solution would not prove to be adequate. Thankfully there is now much more documentation on the matter and various different methods in order to accomplish this but I must admit to still being a little shocked at the fact that WordPress does not have this in it’s core installation.
I can’t remember where I found the method that I settled on but it only requires one small tweak of the template and then the body can have both IDs and classes, the code is as follows
</head>
<?php
$url = explode('/',$_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>
<body id="<?php echo $dir ?>" <?php body_class(); ?>>
Do you have a better way of attaching an ID to the body tag? Please let me know in the comments section, as I’m sure there are probably even easier ways of doing it.
If you’re interesting in finding out more about why attaching a body ID to your page is a good idea then check out this great post by Harry Roberts of Venturelab and CSS Wizardry on how to get started. In the previous link, he shows you how to apply it on your own custom framework with use of PHP.
Noel Jacksons Tweethis Button
Recently I had been debating whether to stick a tweetmeme button on this blog but the one thing that kept constantly putting me off was the fact that the button used an iframe.
I didn’t really like the idea of slowing down page load times for something so trivial as a button, so I decided to live without it. However, earlier today I was catching up on some of my favourite blogs when I noticed that Noel Jackson had developed his very own Twitter button, which didn’t use an iframe. It was perfect, it was exactly what I was looking for.
It turns out that it’s ever so simple to incorporate into your wordpress theme, all you need to do is follow the link above and copy and paste two pieces of code. The first part is pasted into your functions file and the second part is pasted wherever you wish the button to appear on your site. I’ve stuck my twitter button on my single page, so to view it please click through to the comments section or click back to another post using the navigational arrows above.
All in I probably spent a little over two minutes putting this into my theme and another fifteen fiddling about with the CSS, which I’m still not entirely happy with.
If you were like me, thinking about putting a Twitter button on your site but not wanting to slow down page load times by having to use an iframe then I can’t recommend this one enough, it’s simple and very effective.
text-rendering: optimizeLegibility
Earlier in the week Twitter was awash with a new CSS technique for text-rendering called optimizeLegibility. The premise behind this new technique is that browsers, which are notorious for rendering fonts terribly, improve the handling of kerning pairs and ligatures in modern browsers; Safari 5, Webkit Nightlies & Chrome.
After reading a lot of the big industry players talking about it I decided to implement it on my own website. Everything seemed to be running fine until I noticed the font rendering on Google Chrome for PC.
As you can see from the image above, the fonts seem to have a horrible text shadow applied to them and the li elements on my left sidebar were getting pushed onto two lines.
I’m not really sure what is to blame here as the font displayed perfectly across multiple other browsers on both Mac and PC. Is this a specific browser error for Chrome PC, even thought it says it should work or is this down to a conflict with the fonts on my website which are served up with Typekit?
I’ve commented out this technique until I can find out what is causing the error. If you have encountered anything similar then please feel free to get in touch.
iPhone Icon | Apple Touch Icon
On the iPhone/iPod you have the ability to save a webpage to your home screen, which allows you to access said website using a speed dial type method, without having to launch Safari. Incase you were completely unaware of this feature let me give you a quick run down on how to do this; when browsing the web from within Safari press the plus icon on the blue bar that runs along the bottom of the screen, a window overlay will appear which will give you four suggests; add bookmark, add to homescreen, mail link to this page and cancel.
When you select the option add to home screen, you will be presented with a page with an icon and the name of the webpage, which you can choose to completely rename if you wish. Then click the add button at the top right of the window to add the page to your home screen. Once the page has been saved to your phone, you will then be able to use it like a normal app icon, without having to launch Safari like I mentioned above.
By default the icon used is a horrible screenshot of the page in question, totally illegible to everyone but Apple have provided a mechanism for site owners to specify an icon to be used instead called Apple touch icon, which I will explain in the next paragraph but thankfully website owners have the ability to change this.
What is an Apple touch icon
In short, this icon is basically a favicon for iPhones/iPods and this is the icon which is displayed on the users homescreen, after they have added the website to their phone. For example, the Apple touch icon for this website looks like the icon below to the right. If you don’t believe me, feel free to add my website to your home screen.
As you can see from the image, you don’t need any of the fancy rounded corners or glow effect on your icon as the iPhone/iPod will handle all of that for you.
When creating an Apple touch icon, you normally had to make sure that the images dimensions were 58 by 58 pixels and saved as a .png format but Dan Rubin recently pointed out:
remember: iPad needs a larger apple-touch-icon — I’m following Apple’s lead and using a 129px icon (iPhone & iPad will resize properly).
Dan Rubin
With the arrival of Apples iPad, this icon now needs to be larger to accommodate for large screen real-estate but fret not, as the icon will scale down perfectly for other devices.
How do I implement this ?
So we’ve covered the basics of what the apple touch icon is, so how do you actually put it into your website? You will be pleased to know that Apple have actually made it pretty easy.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />The code above is to be put in the head of the document, with the correct file path specified. But you do not need to specify both:
- apple-touch-icon: The usual icon with gloss and rounded corners.
- apple-touch-icon-precomposed: Similar to the above but will not render the image with the gloss.
Hopefully I’ve been able to give you enough information to get started and you can implement your own Apple touch icon, so why don’t you give it a shot and help brighten up other peoples iPhone/iPod home screens with your own icons.
Don’t Kill Your Site
I’m sure you’ve experienced this before, browsing the internet when you stumble across a 404 page telling you that the page or post you were looking for is no longer available. It’s annoying at the best of times but it’s even more annoying when this warning message is on a web designer/developers site because as professionals we should know better and know exactly how infuriating it can be.
Content, regardless of whether it is old or new, is vitally important, especially if it has already been indexed in Google. Please take a little care and pride in your own site and make sure that everything is where it should be or at the very least have some 301 redirects to help point the end user in a new direction.
People who do the above are contributing to link rot that is building every day on the internet and I don’t want to be a part of it.
Working with RGBa Colour
With the progression of newer browsers I’ve started to move my work forward and incorporate RGBa (Red, Green, Blue, alpha) into my client work. Obviously the use of this will depend on the amount of visitors your site attracts and what browser they end-users are using. However, with that said, when I can get away with using RGBa instead of .png files then I will.
Quick Refresher Course
Hex Values
You might only be aware of one way to stipulate colour in your website designs, which will probably be a hex value. A hex, or hexadecimal, value is a colour code that starts with a hash and is followed by either 3 or 6 numbers, depending on the colour you are wanting to use.
The hex value of the colour red will look like #FF0000;
RGB Values
RGB which stands for Red, Green, Blue is another way for specifying colour values on your website. However, this method is quite different to the previous. Lets take the example from the previous paragraph.
The colour red in RGB will look like rgb(255,0,0);
So instead of stipulating a hash, that gets replaced with rgb and instead of using 3/6 numbers they get replaced with 3 sets of numbers.
What is RGBa and how can you use it in your work?
RGBa is the follow on from RGB, the basic principles are the same but you get one extra letter “a” which stands for alpha. This letter allows you to specify an opacity value for the colour you are declaring. As this is a newer technique it is unfortunately not yet supported by all browsers. Chris Coyier over at CSS Tricks has created a nice little table to show you the state of the playing field.
To carry on with our red example; rgba would look like the following rgba(255,0,0,1).
The number one is located in the alpha channel which allows us to fill areas with transparent color; where you can stipulate any value between 0 and 1 (zero being fully transparent and one being fully opaque).
Why Can’t I Use Opacity For The Alpha Channel
Above I mentioned the fact that the alpha channel is a little like an opacity value. So you might be asking yourself why you can’t just use the opacity value instead.
The reason I choose the word opacity was to make it easier for you to understand as you were reading this. The RGBa property applies transparency only to a particular element (the element the RGBa value is set on), whereas the opacity property affects the element it is applied to and all of its children.
Defining RGBa in your Stylesheets
As I touched on above, not all browsers support RGBa, so when you do declare these you should always provide a fallback colour just incase of the worst possible outcome. Your fallback should be a solid colour, so you should either use rgb or a hex value for this.
div {
background: rgb(255,0,0);
background: rgba(255,0,0,0.6);
}
If you do not declare a fallback this means that nothing will be displayed, if you are viewing the website on an older browser that doesn’t support this code.
Glasgow UX Book Club
The other day I was browsing through random twitter profiles, for people located in and around the Glasgow area, when I happened to land on a person tweeting about a Glasgow UX book club.
UX is an area that I’ve have been reading up on a lot over the past few years. Therefore, when I found out this information I jumped at the chance to register for the next event through their wiki.
If you think this is something that you would be interested in and you are located in or around the Glasgow area, then please feel free to use the Amazon affiliate link, from the UX book club and purchase yourself a copy of this months book, The Design of Everyday Things by Don Norman and take part in the discussion.