Flowing into a better personal site
January 18, 2011 2:34 PM Subscribe
I'd like to make an incremental flowchart for my personal Web site. Is this possible using only my limited HTML + CSS skills? Long explanation and sample graphic inside.
Redesigning my personal site, and I've developed a recent fascination with flowcharts (stemming from when I did the now mildly famous Rashomon Chart). Given that the site isn't that complicated, I figure I can get away with traditional navigation and just have a big flowchart that connects to individual pages. Even if it's not optimal from a Web 2.0 standpoint, hell, it's my site.
While I'm okay with general design principles, my skills at Web stuff don't extend much past some Wordpress, HTML, and CSS. As a result, the only thing I can think of to execute this idea is (a) a really big image, and (b) a really big image map that actually captures every outlink as a link. I'm sure I can figure out how to position this really big image, and have people start at the right "place" on the image, but "image + imagemap" is about as good as I can figure out on my lonesome.
This is a crude early attempt at what the actual chart would look like; it's still missing connector lines between boxes and is obviously not complete yet.
All flowchart terminating points will all have links to pages within the site, or outlinks to other sites. There's a certain retro appeal to big picture + imagemap, but 1998 is calling and really wants its design ideas back.
Ideally I'd like something where the next section of flowchart is revealed when you click on a "yes" or "no" icon; the flowchart builds as you explore the "site." What would be the best approach for this? I think I could possibly pull something off by stretching my CSS + HTML abilities to the limit, but even then, I have no idea how to do the "this bit appears next" without having an entire image load.
In a perfect world, every click on the flowchart selectors would cause the next segment of the flowchart to fade in.
Is this something I can do with HTML+CSS? Is there a simple bit of javascript I could bully into helping me out?
Redesigning my personal site, and I've developed a recent fascination with flowcharts (stemming from when I did the now mildly famous Rashomon Chart). Given that the site isn't that complicated, I figure I can get away with traditional navigation and just have a big flowchart that connects to individual pages. Even if it's not optimal from a Web 2.0 standpoint, hell, it's my site.
While I'm okay with general design principles, my skills at Web stuff don't extend much past some Wordpress, HTML, and CSS. As a result, the only thing I can think of to execute this idea is (a) a really big image, and (b) a really big image map that actually captures every outlink as a link. I'm sure I can figure out how to position this really big image, and have people start at the right "place" on the image, but "image + imagemap" is about as good as I can figure out on my lonesome.
This is a crude early attempt at what the actual chart would look like; it's still missing connector lines between boxes and is obviously not complete yet.
All flowchart terminating points will all have links to pages within the site, or outlinks to other sites. There's a certain retro appeal to big picture + imagemap, but 1998 is calling and really wants its design ideas back.
Ideally I'd like something where the next section of flowchart is revealed when you click on a "yes" or "no" icon; the flowchart builds as you explore the "site." What would be the best approach for this? I think I could possibly pull something off by stretching my CSS + HTML abilities to the limit, but even then, I have no idea how to do the "this bit appears next" without having an entire image load.
In a perfect world, every click on the flowchart selectors would cause the next segment of the flowchart to fade in.
Is this something I can do with HTML+CSS? Is there a simple bit of javascript I could bully into helping me out?
Best answer: For each yes/no icon, you can attach a javascript onclick handler, which need not be (much) more complicated than:
thing_being_clicked_on.onclick = function()
{
document.getElementById("id_of_thing_to_show").style.display = "block";
}
This doesn't make your boxes fade in, they just appear suddenly, but it's about the minimum amount of javascript required to make this work.
You'll also have to come up with a page layout that makes sense for all of this using CSS, because you're not going to make the fading work for each element if the whole thing is just one big image.
posted by tylerkaraszewski at 2:40 PM on January 18, 2011
thing_being_clicked_on.onclick = function()
{
document.getElementById("id_of_thing_to_show").style.display = "block";
}
This doesn't make your boxes fade in, they just appear suddenly, but it's about the minimum amount of javascript required to make this work.
You'll also have to come up with a page layout that makes sense for all of this using CSS, because you're not going to make the fading work for each element if the whole thing is just one big image.
posted by tylerkaraszewski at 2:40 PM on January 18, 2011
And yeah, jQuery will let you do things like use a "fadeIn()" function, but I have a feeling that until you know some of the basics for doing it without jQuery, it's just going to be even more confusing if you jump right into a library like that. You could try it, though.
posted by tylerkaraszewski at 2:42 PM on January 18, 2011
posted by tylerkaraszewski at 2:42 PM on January 18, 2011
Best answer: If you'd like to look at an example of this [without the clicking fadein/out stuff] you might enjoy the "should I work for free" flowchart because it uses all CSS/HTML and is also amusing. Looks like she's using Typekit to get the nice fonts. The javascript part should segue into this well, but it's a little outside my range as well.
posted by jessamyn at 2:43 PM on January 18, 2011 [2 favorites]
posted by jessamyn at 2:43 PM on January 18, 2011 [2 favorites]
Best answer: I vote for the really big image, but don't use an imagemap or put the body text in the image.
Instead, set the really big image as the background of a correspondingly-sized <div>
Inside that <div>, you should create an absolutely-positioned div containing the text for each node in the flowchart. This will take some trial & error, but I think that it'd be the easiest way to do things that won't force you to use an entirely image-based website or learn extensive amounts of JavaScript.
If you're using Photoshop to do this, you can actually automate the process by using slices.
(And, actually, if you slice things neatly, you might be able to tack on some rather *simple* Javascript to trigger fades on the boxes and their connecting lines)
posted by schmod at 2:49 PM on January 18, 2011
Instead, set the really big image as the background of a correspondingly-sized <div>
Inside that <div>, you should create an absolutely-positioned div containing the text for each node in the flowchart. This will take some trial & error, but I think that it'd be the easiest way to do things that won't force you to use an entirely image-based website or learn extensive amounts of JavaScript.
If you're using Photoshop to do this, you can actually automate the process by using slices.
(And, actually, if you slice things neatly, you might be able to tack on some rather *simple* Javascript to trigger fades on the boxes and their connecting lines)
posted by schmod at 2:49 PM on January 18, 2011
You might want to look into using Flash for this.
posted by macinchik at 3:13 PM on January 18, 2011 [1 favorite]
posted by macinchik at 3:13 PM on January 18, 2011 [1 favorite]
I think the best thing for this would be SVG. Your main obstacle would be the lack of support in IE8 and below, but this can be worked around by things like svgweb, jQuery SVG or Raphaël.
The main benefit of SVG is that you still have elements, so you can have DOM objects you can attach and remove, click events and even embedded HTML content and links, but those elements have an easily managed graphical representation. It sounds like it would definitely be a learning experience for you, but at least you wouldn't be learning to make HTML and CSS do things it really wasn't designed for.
posted by robertc at 3:19 PM on January 18, 2011
The main benefit of SVG is that you still have elements, so you can have DOM objects you can attach and remove, click events and even embedded HTML content and links, but those elements have an easily managed graphical representation. It sounds like it would definitely be a learning experience for you, but at least you wouldn't be learning to make HTML and CSS do things it really wasn't designed for.
posted by robertc at 3:19 PM on January 18, 2011
SlickMap CSS isn't quite a flowchart, but it is a visual sitemap stylesheet and does cover the very rudimentary HTML + CSS skills. Could be a good reference site.
posted by Hazy Star at 5:47 PM on January 18, 2011
posted by Hazy Star at 5:47 PM on January 18, 2011
Response by poster: A couple of best answers, but kind of arbitrary ones. I'll be trying schmod's method first, as it seems the most implementable without me having to acquire a whole new skillset (SVG, HTML5). I will probably be back weeping and clawing at my eyes at regular intervals.
Thanks for pointing out the "work for free" chart is entirely HTML and CSS, jessamyn-- that had escaped me, and I think digging into its CSS will be invaluable to figuring out how I can make this work with on a giant image.
I've never done slicing before, and only have the Gimp. But we'll see how things turn out...
posted by Shepherd at 1:06 PM on January 20, 2011
Thanks for pointing out the "work for free" chart is entirely HTML and CSS, jessamyn-- that had escaped me, and I think digging into its CSS will be invaluable to figuring out how I can make this work with
I've never done slicing before, and only have the Gimp. But we'll see how things turn out...
posted by Shepherd at 1:06 PM on January 20, 2011
This thread is closed to new comments.
posted by Paragon at 2:37 PM on January 18, 2011