Blog
Link Styles
Thursday November 20th, 2008I happened to come across a blog today, iliveonyourvisits.com, and I really dig the style. The links are highlighted, not underlined, and have a really obvious “hover” state, so you know when you've moused over them. This is slightly unconventional, but makes a lot of sense. I think underlinining links is nice, but it might be too subtle. In print, people use underlining for emphasis, but on the web we‘re not really allowed to, because that would be confusing.
The coolness of highlighted links is compounded by the fact that highlighting links doesn't clash with anything else. Sure, you might think, “Well what if I want to print out and highlight an article that has links in it? Will that overlap?” Well it could be confusing, but if your print stylesheet hides the highlighting, when a page is printed, there won't be any links. It's not like hyperlinks are useful on the printed page, so that would actually be an amazing degradation.
What's more is that you could turn links into footnotes, since links and footnotes are essentially analogous. I'm not saying they're the same, but they're closely related. With a little bit of thinking ahead, you could add a superscript number using CSS after every link, and then put the link's address at the bottom of a page with that same number, just like a real footnote. This would be very functional. The one snag is that currently, print styles are not supported very well across browsers, but of course, in the future that will not be a problem. The future fixes everything, duh.
But basically, highlighted links are really cool. Using media-specific stylesheets, we can make them fit in their most natural way, like as big flashy link on an interactive web page, or simple footnotes used for reference in print. For the next revision of my site, I think I'll try to implement those kinds of links.
Comments (0)Tags: internet ramblings
Hash Tags, and Catching the Back Button
Monday November 10th, 2008I recently found a new Javascript trick that I'd like to share with the world. So it all starts when I was looking at taptaptap.com, a company that sells iPhone apps. I noticed that I could click to the different sections of the page, and they would animate. Then, I could click my browser's back button, and they would also animate. Amazing! How could they do that? In Javascript there is no way to directly catch a back button press as an event, so there is a little script running on a loop to look for the signs.
Web pages can use hash tags, or #something to jump to an element on the page with the ID set to id="something" and moving does not require a reload. This is important because it saves time, and scripts that are running stay active. So, when a user clicks on a link that goes to <a href="#something">, the location in the URI up at top changes to reflect this new “hash tag.” This means we can use Javascript to catch that change.
So, here are some important Javascript values to know:
- document.location will give you the full text of the URI
- document.location.hash will give you everything including and after the # in the URI
- setInterval(function, ms) will call function every ms milliseconds. It goes on forever, unless you use stopInterval(), which is not necessary for this exercise.
Alrighty, now we have the tools, but we are going to need to call some functions as soon as the page loads. My favorite way to do this is reference the source of the script in the <head> of the page, and then run the scripts at the end of the page.
So in the <head>, I include:
<script type="text/javascript" src="/js/functions.js"></script>
And just before the </body> tag:
<script type="text/javascript">
<!--
initialize();
//-->
</script>
Where intialize() is a method that will set up my page, and the funky comment lines are so that older browsers don't just print the text on the page.
So now, we dig a little deeper. The initialize function will look something like this.
var selectedHash = '';
function initialize() {
var currentHash = document.location.hash;
window.setInterval(function () {
if(selectedHash != currentHash) {
doSomethingWithHash(currentHash);
selectedHash = currentHash;
}, 500);
}
}
So a few important things. There is a global variable selectedHash that does not go away, and is used as a reference to what is actually goin on in the page. Also, there is an inline function in setInterval(). You can call a function reference instead, but for a simple function like this, it is much easier to read the source. Then, you might notice I picked an interval of 500 milliseconds. This is twice a second, very often for a script to run. Normally, this could be very bad, but the choice we make is to run often, to catch user actions (specifically the back button, which changes the hash), and users don't like waiting very long at all. The effect is harly noticeable.
So, what does it look like in action? Well I updated my portfolios to reflect this. Check out going to /web/ and even /web/#colours to see how this Javascript can also allow for the right section of a page to be presented immediately through Javascript. If you look at the source, you may notice that I use slightly different functions in my scripts at the bottom of the page, but the result is almost exactly the same as these sample scripts.
Comments (0)Tags: internet ramblings site update
Better Late Than Never
Saturday October 25th, 2008I just updated my web design portfolio to include projects from this summer. I guess it's only a month late or so, no big deal.
Comments (0)Tags: portfolio site update