I'm not addicted to the idea of the fold. I begrudge it immensely and consider it stifling and counter-intuitive that we should still try and design websites so that all of our content falls within the first few hundred pixels.
I recently came to the end of a big project for a client, dealing with multiple issues with their archaic CMS and for the most part hacking styles in so it would render correctly in both their editor and live on the web. As I thought all of the issues had been resolved, I was asked if I could make sure the homepage cleared the fold. Of course, you consider the fold at the design stage, but then generally throw it out to other concerns, like functionality and actually just getting the job done. I do admit that some of the spacing had dropped down within this CMS' reckless regard for rules, but as far as I was concerned it worked, was nicely spaced and did the job. Once I'd compensated for excess spacing, the actual element that dropped below our mythical 578 pixel boundary was the bottom of a button. You could see the button, you could read it. The bottom of the text merely dipped below the bottom of the browser status bar on a 1024x768 screen resolution.
Explaining my own personal take on this - the button is visible, you can click it, you know its there, you know how to scroll, the fold is a myth etc. didn't seem to help when dealing with people whose study of the internet included a large chapter entitled "The Fold, and why you should avoid it".
Original Designs out the window at the end of the build, I had to close up all of my lovely padding to accommodate the fold. Do I approve? No.
A quick Google uncovers many like-minded individuals and organisations - AOL, conscious of the issue designed all their pages to intentionally cut off images or text for the majority of screen resolutions (http://www.boxesandarrows.com/view/blasting-the-myth-of), and I had another article which I've completely lost, but I got through Elliot Jay Stocks' twitter feed (www.twitter.com/elliotjaystocks) that touted a more design-centric view to encouraging scrolling (as if we need to!)
It is with great sadness that I now have to turn my attention to my company's own website to investigate how the fold works. Tangible is the company and we're an advertising agency that, among other things, do digital. We make websites. That being the case, it was odd that another agency within our group designed it, and it was peculiar that the website wasn't at least passed under my nose before it was due to go live. This we forgive. The website is currently live at http://www.tangible.uk.com (no, I'm not sure about .uk.com either, but it is a real domain extension, I promise). The problem you'll see if you're on a laptop, and one with a smaller screen than I, is that the website seems entirely to consist of one large case study. At certain resolutions there is a line at the bottom of the page with a nicely fading out gradient. This appears as the end of the design - compounded by the fact it's the physical end of your screen. This issue continues on another couple of pages; should you click the case study, you'll find another page which contains one large image. We're not being feeble-minded if we say "How was I to know to scroll?", because although it's our instinct to scroll on a webpage, when we're given an indication that the page has ended, why would we? With this as the fact, I now have a redesign on my hands. Will you want to scroll? Will you need to? I'll keep you posted.
Sunday, 7 March 2010
Tuesday, 6 May 2008
An interesting gallery
So we've all seen ASCII art and probably played around with one of the online generators. A good one I found is http://www.text-image.com/convert which gives the results in HTML format so you can copy and paste the source. Wouldn't it be cool it have an image that as you rolled over every pixel it jumped out to give a preview of another image? I think so!
Although the outputted results are all in tags, a little find and replace will let you make them into divs, or 'a' tags which you can then style to give the effect you wish. This method means you needn't use the text to create your image, you can style your divs to mean the colour of the text is the background of a 1 pixel div.
for example:
my outputted result from text-image.com looks like this (but longer)
00
10101011101101001101110001110000001010011000111010001001000111111000101110011000101110110111101010110111111000
messy.
So let's find and replace ' '
replace '>1' with ' "> '
this just closes our style tag
then replace '' with ''
wrap all those new divs in a '
Although the outputted results are all in tags, a little find and replace will let you make them into divs, or 'a' tags which you can then style to give the effect you wish. This method means you needn't use the text to create your image, you can style your divs to mean the colour of the text is the background of a 1 pixel div.
for example:
my outputted result from text-image.com looks like this (but longer)
00
10101011101101001101110001110000001010011000111010001001000111111000101110011000101110110111101010110111111000
messy.
So let's find and replace ' '
replace '>1' with ' "> '
this just closes our style tag
then replace '' with ''
wrap all those new divs in a '
and close it at the end and add the style
.gallery-image a {width:1px; height:1px; overflow:hidden; margin:0; padding:0; display:block}
Also, where the text was broken into lines with
tags, we now need to clear:left to get to the next line, so we find and replace
s with
All this, alas, is making for a large file. Ideally, we want the source image to only contain a limited number of colours so that we can apply the same style to each pixel/div of the same colour.
If you make your image into a gif before you start you can select how many colours you want, this in turn will give you the number of colour styles you need to create your image. Another craftily phrased find and replace can swap your 0 for or something similar.
So, while I'd love to post my example HTM now, I've still got to do some work on it (since typing this before actually finishing one myself. The next stage is the pop up pixel on rollover, which is simply an a:hover style that increases the size of the pixel and gives it a different background image, but I'll do that once I've sorted my own example.
Hope that's of some inspiration.
Bear in mind, www.text-image.com/converter isn't the only one that'll do this, there're loads if you simply google "ASCII art HTML image converter", it's just that you'll have to find and replace slightly differently depending on the outputted code. You could even make one from scratch, and I'll give a hats-off to you if you have the time and patience for that!
Right, I'm off shopping in the real world now - later!
.gallery-image a {width:1px; height:1px; overflow:hidden; margin:0; padding:0; display:block}
Also, where the text was broken into lines with
tags, we now need to clear:left to get to the next line, so we find and replace
s with
All this, alas, is making for a large file. Ideally, we want the source image to only contain a limited number of colours so that we can apply the same style to each pixel/div of the same colour.
If you make your image into a gif before you start you can select how many colours you want, this in turn will give you the number of colour styles you need to create your image. Another craftily phrased find and replace can swap your 0 for or something similar.
So, while I'd love to post my example HTM now, I've still got to do some work on it (since typing this before actually finishing one myself. The next stage is the pop up pixel on rollover, which is simply an a:hover style that increases the size of the pixel and gives it a different background image, but I'll do that once I've sorted my own example.
Hope that's of some inspiration.
Bear in mind, www.text-image.com/converter isn't the only one that'll do this, there're loads if you simply google "ASCII art HTML image converter", it's just that you'll have to find and replace slightly differently depending on the outputted code. You could even make one from scratch, and I'll give a hats-off to you if you have the time and patience for that!
Right, I'm off shopping in the real world now - later!
Page transitions
OK, so most people should be familiar with the IE-only page transitions. They've been around since... a while. I suppose they're under-used on a grand scale because very few people want star-wars style transitions between their pages and it'll always look like My First Movie Edit to a certain extent. Just as a reminder, you simply put
<meta equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">
in the head of your page. This one gives you a random wipe-style transition each time you enter a page. "Page-Enter" can be swapped for "Page-Exit" the duration can be changed and if you change the number after Transition, you can select one of 22 different transitions on it's own - the codes for which I've copied below:
The other taransition that IE provides is content=BlendTrans(Duration=3.0) which faes the content in over the previous page, which is actually quite nice and classy :)
Although surely we like making sites that work elsewhere other than IE?
Well, I've been pondering a PNG solution to this - using a pixel that fades up from black, say and overlays your whole site until it's cycle is over, and then it disappears, allowing you to get at the content - this could probably be pulled off with a slice of Javascript, but I think that requires some thought about it on my part since I'm no JS guru, or even an apprentice monk.
Anyway, have a think yourself, and if you have anything good, or find anything on your travels in the web land - drop me a line.
<meta equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">
in the head of your page. This one gives you a random wipe-style transition each time you enter a page. "Page-Enter" can be swapped for "Page-Exit" the duration can be changed and if you change the number after Transition, you can select one of 22 different transitions on it's own - the codes for which I've copied below:
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across 10
Checkerboard down 11
Random dissolve 12
Split vertical in 13
Split vertical out 14
Split horizontal in 15
Split horizontal out 16
Strips left down 17
Strips left up 18
Strips right down 19
Strips right up 20
Random bars horizontal 21
Random bars vertical 22
Random 23
The other taransition that IE provides is content=BlendTrans(Duration=3.0) which faes the content in over the previous page, which is actually quite nice and classy :)
Although surely we like making sites that work elsewhere other than IE?
Well, I've been pondering a PNG solution to this - using a pixel that fades up from black, say and overlays your whole site until it's cycle is over, and then it disappears, allowing you to get at the content - this could probably be pulled off with a slice of Javascript, but I think that requires some thought about it on my part since I'm no JS guru, or even an apprentice monk.
Anyway, have a think yourself, and if you have anything good, or find anything on your travels in the web land - drop me a line.
Thursday, 25 October 2007
CSS Flick animated buttons
In my surfing (strictly of the web variety) yesterday, I stumbled across this tutorial that shows you how to make a CSS Flick book - literally an animation you can scroll across and change the image.
The jist of the workings is thus:
You allocate a 20px band for each frame and on :hover the you reveal the full frame across the whole div. That's the simple explanation anyway - check out the tutorial for full details.
I thought this was pretty fab so figured I could take it one step further:
animated buttons that transition as you approach them - and all without the use of javascript or flash.
Here's how I did it:
1. Create your container div for your buttons and inside it make 9 <a href="#"> links with different id's.
2. position them so you create the following pattern -
1444444444449
1255555555589
1233333333389
1233333333389
1266666666689
1777777777779
To help your positioning, you should make the outside div position:relative and the inner tags position:absolute.
3. Now you assign backround images: the outside divs (1, 4, 7, 10) need 1st frame, next in (2, 5, 6, 8) need the 2nd frame and div 3 wants the over state. Set all background positions to off screen somewhere {background-position:-500px}.
4. The best bit:
give all of your a#id:hover's a reset background positioning of '0 0' to put them in the top left of the container div
5. You also need to throw in some z-indexes. a#id = z-index:2, a#id:hover = z-index:1. This makes sure that once a frame is showing, the other a tags are still able to be rolled over (since they are now on top).
I think that's pretty much it. Have a look at this and see what you think.
The jist of the workings is thus:
You allocate a 20px band for each frame and on :hover the you reveal the full frame across the whole div. That's the simple explanation anyway - check out the tutorial for full details.
I thought this was pretty fab so figured I could take it one step further:
animated buttons that transition as you approach them - and all without the use of javascript or flash.
Here's how I did it:
1. Create your container div for your buttons and inside it make 9 <a href="#"> links with different id's.
2. position them so you create the following pattern -
1444444444449
1255555555589
1233333333389
1233333333389
1266666666689
1777777777779
To help your positioning, you should make the outside div position:relative and the inner tags position:absolute.
3. Now you assign backround images: the outside divs (1, 4, 7, 10) need 1st frame, next in (2, 5, 6, 8) need the 2nd frame and div 3 wants the over state. Set all background positions to off screen somewhere {background-position:-500px}.
4. The best bit:
give all of your a#id:hover's a reset background positioning of '0 0' to put them in the top left of the container div
5. You also need to throw in some z-indexes. a#id = z-index:2, a#id:hover = z-index:1. This makes sure that once a frame is showing, the other a tags are still able to be rolled over (since they are now on top).
I think that's pretty much it. Have a look at this and see what you think.
Wednesday, 24 October 2007
Complex image and overlay technique
As soon as you step outside of the simple block web page look, popular since time immemorial, you encounter the problem of having your images overlapping in ways that do not look entirely seemly.
If I give the example of my current portfolio website, aphasian.com, you can see that the header logo sits on a bed of grass and a gradient sky. This isn't the neatest example of the technique, but that only aids the explanation and is less neat at the top (because I wanted to preserve the shadow blur at the bottom - but trade-offs like these are things you'll have to deal with too, so don't worry!). The closer you look, the more the edges jump at you, especially at the top against the sky. It'll help you further to see the logo out on it's own against white here:
So how do we do this then? and why?
The why is simple: gif's have notoriously jagged edges. Every pixel stands to attention against the background. Ths is especially pronounced when you have a single colour curved border to an image you export as a gif. This technique is also a simple alternative while PNG support is still limited, and in most cases will save you having to create hacks so IE5+ sees one thing and the rest of the web gets your PNG's (or you could use this method in addition to your png version for the best of both worlds).
The how is a little more involved, so start opening Photoshop now while I explain...
If you're thorough in your design technique, you'll have a PSD version of the site you're about to code up. You'll have your overlapping images in exactly the places they'll overlap in Photoshop, you just want them to work in Dreamweaver.
Please note that once you've got the general idea in your head, you can automate a lot of the task using Photoshop's 'actions' pallette...
I've got a barrage of my favourite web tools hotkeyed up and ready to use... but that's a story for another day.
If I give the example of my current portfolio website, aphasian.com, you can see that the header logo sits on a bed of grass and a gradient sky. This isn't the neatest example of the technique, but that only aids the explanation and is less neat at the top (because I wanted to preserve the shadow blur at the bottom - but trade-offs like these are things you'll have to deal with too, so don't worry!). The closer you look, the more the edges jump at you, especially at the top against the sky. It'll help you further to see the logo out on it's own against white here:
So how do we do this then? and why?
The why is simple: gif's have notoriously jagged edges. Every pixel stands to attention against the background. Ths is especially pronounced when you have a single colour curved border to an image you export as a gif. This technique is also a simple alternative while PNG support is still limited, and in most cases will save you having to create hacks so IE5+ sees one thing and the rest of the web gets your PNG's (or you could use this method in addition to your png version for the best of both worlds).
The how is a little more involved, so start opening Photoshop now while I explain...
If you're thorough in your design technique, you'll have a PSD version of the site you're about to code up. You'll have your overlapping images in exactly the places they'll overlap in Photoshop, you just want them to work in Dreamweaver.
- Marquee around the area you want (in my case the Aphasian logo) and copy it to a new canvas.
- take out your eraser and just erase the top (or bottom) corner - anywhere that's not a necessary part of the logo/image, you only need to take out a single pixel.
- Turn off the background layer so your erased pixel is now transparent.
- Save for web as a gif with transparency on.
- Open your new gif (using the current open copy will not suffice).
- On the PSD flat of your site, select the layer your image element makes up and control click the layer to make a selection around the content of the layer (your image).
- With the marquee or lasso tool selected, drag the selection into your open .gif file and position it so it sits exactly over the image as you require.
- Expand the selection by 1px from the 'selection' menu.
- Invert the selection from the 'selection' menu.
- Press the backspace button to clear the selection.
- Save.
Please note that once you've got the general idea in your head, you can automate a lot of the task using Photoshop's 'actions' pallette...
I've got a barrage of my favourite web tools hotkeyed up and ready to use... but that's a story for another day.
Tuesday, 23 October 2007
An alternative to inline frames (iframe)
Today I was given the task of designing a menu on the left of a page that would load the content into an area on the right.
"Like an inline frame?" asked someone.
I interrupted. I don't like inline frames. I've used them and they work and that's fine but they're not good homepage material for search engine reasons. I also have no idea how screen readers tackle them. I'm sure they cope, but when in doubt, try an alternative.
I proposed that we hide the content in an overflow:hidden div and anchor in the links.
it works like this:
<html>
<head>
<title>iframes without the iframe</title>
<style>
<!--
div {width:40%; height:200px; background-color:#CCCCCC; border:1px solid black; margin-right:10px; float:left}
.changingContent {overflow:hidden}
.contentPages {height:200px}
-->
</style>
</head>
<body>
<div>
<a href="#kfi">KFI Thing</a><br />
<a href="#app">Application Thing</a><br />
<a href="#track">Track a Case</a>
</div>
<div class="changingContent">
<div class="contentPages">
<a name="kfi">
Content page 1
</div>
<div class="contentPages">
<a name="app">
Content page 2
</div>
<div class="contentPages">
<a name="track">
Content page 3
</div>
</div>
</body>
</html>
All you need to do is make sure the content for each anchor fills the height of the div. The best way to do this would be to have a div inside set to the right height and have them all sit on top of eachother.When I'm done with the site, I'll post the link here, but for the moment, here's the example.
bon appetit!
"Like an inline frame?" asked someone.
I interrupted. I don't like inline frames. I've used them and they work and that's fine but they're not good homepage material for search engine reasons. I also have no idea how screen readers tackle them. I'm sure they cope, but when in doubt, try an alternative.
I proposed that we hide the content in an overflow:hidden div and anchor in the links.
it works like this:
<html>
<head>
<title>iframes without the iframe</title>
<style>
<!--
div {width:40%; height:200px; background-color:#CCCCCC; border:1px solid black; margin-right:10px; float:left}
.changingContent {overflow:hidden}
.contentPages {height:200px}
-->
</style>
</head>
<body>
<div>
<a href="#kfi">KFI Thing</a><br />
<a href="#app">Application Thing</a><br />
<a href="#track">Track a Case</a>
</div>
<div class="changingContent">
<div class="contentPages">
<a name="kfi">
Content page 1
</div>
<div class="contentPages">
<a name="app">
Content page 2
</div>
<div class="contentPages">
<a name="track">
Content page 3
</div>
</div>
</body>
</html>
All you need to do is make sure the content for each anchor fills the height of the div. The best way to do this would be to have a div inside set to the right height and have them all sit on top of eachother.When I'm done with the site, I'll post the link here, but for the moment, here's the example.
bon appetit!
Subscribe to:
Posts (Atom)