MegaGear Patreon MegaGear
Strip 546, Volume 4, Page 28

newsbox

Tokyo Threat Documentation Project
A Fredart banner S-Words
  • Megatokyo Twitter
  • Megatokyo RSS feed
  • Fred's Twitter
  • Fredart RSS Feed

console

< Piro >

beta of the new megatokyo site - a non-working template

"Megatokyo 3.0 beta"

Tuesday - April 13, 2004

[Piro] - 10:50:00 - [link here]

-- update --

First off, i want to thank all of you who took a look at the new site and took the time to take screenshots and give me feedback about the display problems you were encountering. It really helped.

Ok, for the most part it came down to three things that needed to be fixed. People using Opera and in many instances Mozilla and some other variants on various systems found that the text in the Newsbox was spilling out of the boxes and overlapping things. This was because i was hard-coding the pixel height of the boxes to try to get things to line up at the bottom. There's no real way to fix this for all browsers, but i think my fix for this is a good compromise - on many browsers, the boxes at the bottom extend to the bottom like they are supposed to, on some they don't. Better to have a slightly awkward bit at the bottom of the newsbox than overlapping text. Check it and see how that looks now.

The second problem was that the new drop down was, in many instances, dropping down and overlapping the checkboxes. This happened because the width of the drop down box varies a LOT from browser to browser - what has plenty of room on my browsers is way too wide on others. To fix this, i set a width for it. Hopefully this will prevent it from dropping down.

The last and most complex problem was the fact that the site was still very broken in Konqueror - it just doesn't like having images next to each other like that. So, to fix the prob, i made the shadows background images and placed the images over them. That should fix the problem all around. I need to tweak the shadow images a bit, but thats not too hard to do - just a bit of photoshopping. I used this trick on the banner, the comic, and the rant images.

there was also a IE white space error at the top of the page, but with the last fix, that went away anyway :P There were some other little things i tweaked here and there... cant remember it all, but if you sent in some feedback, check and see if the fixes take care of the formatting problems you were having. As far as netscape 4 stuff, there are tricks to dealing with the formatting for that problem child that i will put together later.

anyways, check it out again (its the same location, just refresh your browser). thanks again for the feedback!

-- end update --

Things seem to be moving along a little smoother now, from a writing and drawing point of view (even if some of the drawings of Yanagisawa-san in monday's comic look like he evolved differently than the rest of the human race), but onward and upward as they say.

I have a lot of things to talk about this week, lots of stuff going on, but I gotta start somewhere, so let's talk about the new website. As you may recall from a few weeks ago, I mentioned that the MT site is getting a long needed overhaul. The site has served us well for many years, and has been rebuilt completely only once since we tossed it online back in 2000. (I think it's only one major rebuild - there have been minor upgrades here and there). I don't want to re-invent the wheel when it comes to reading MT, but the navigation system for reading the archives desperately needs this rebuild - the comic has outgrown the Drop Down of Death. :)

Some of the new features include a search function that will not only let you search rants and the rest of the site, but comics for dialogue, characters and locations as well (just like the Megatokyo Database. Also, there will be check boxes that will let you read the comic with or without all the non-story comics. Fun, huh?

Even though I did cobble together the fredart website in PHP, I'm hardly what you would call a programmer. What I have been able to manage over the years (barely) is web design. The HTML code that makes up the MT site is my fault -- the good, the bad, and the very ugly. The site works, but it has tons of nested tables, little transparent pixel nudgers, hacks and wacks that look at least serviceable in most browsers. Even by early 2000 standards it was a hack job of HTML coding, and it's chances of it validating, even back then... not very good. In fact, I think that over the years some of my html has actually broken a little by the insertion of the backend coding and various tweaking of it (I believe the site still breaks Konqueror).

Like I said before, I don't really want to change the look and feel of the MT site too drastically, but just like the back end of the site, the new mark-up has to be built to higher standards than my original hack job. When I realized that I had taken this task on myself, it dawned on my just how little I knew about current standards and the way web pages are assembled these days.

Once I started reading, I could see that things have actually changed quite a bit. Using XHTML (HTML redone in XML) and CSS properly was going to take some effort to learn, and I was going to have to change my thinking. The incentive for doing so was that the nudge and kludge of nested tables and transparent gifs is horrid to work with -- being able to have a cleaner, easier to work with code would be worth the effort.

I've actually made two false starts to rebuilding and assembling the new site. The first two times, I was still trying to assemble things like I did back in 2000, just using CSS rather than tables. The hardest thing to get a handle on was this concept of separating structure from formatting. The books I had mentioned this concept, but I was having trouble applying it.

I'm sure there are people out there who obsessive to the point of needing medication about web standards. There are many flags that people fly, insisting that this way or that way is more correct. I'm just a little guy who wants to make a website most people can use without difficulty. ^^;; Web standards are an evolving thing. There are issues of backwards compatibility (it's foolish to design a page that only people who have the latest and greatest browsers can see) yet it's also dumb to not look ahead to where web standards are going (for instance, trying to kludge the current MT site on a text based PDA or cell phone is a nightmare right now). I wanted to pull together something that will work now and for a few more years without causing problems for readers.

Ok, what's this "Structure from Format" thing? Well, the current direction of web standards is that you should try to separate the structure of your page and the formatting into two parts -- let XHTML handle the structure, and use CSS to handle the formatting. Simple idea, but really hard to figure out how to implement if you are old school about web design :P The idea is that the information on your page should be structured so that many different devices can use it, and your formatting should be applied to that structure so that end users can modify it or work with that formatting to serve their needs. In other words, the formatting should not get in the way of the information and usablility of your website.

I got a number of very helpful emails from people regarding my efforts here, many encouraging me to keep lumbering along in this direction. The one that helped me the most highly recommended a book that I should read called Designing with Web Standards by Jeffrey Zeldman. Reading this book really helped me break some of my old habits, and explained things in ways that even my simple brain could fathom. Definitely a worthy read.

Anyways, all that blathering aside, I've posted here the most current version of the front page template for MT readers to look at. Now, I'm not looking for extensive feedback... for the love of god, I couldn't handle the email ^^;;. I'm posting this to see if it breaks in people's browsers. I'm designing this in a Mac environment, and even tho it works on every browser I have in this apartment (both PC and Mac) that doesn't mean it will work for all of you. If it works in your browser and in your working environment, great - you don't have to email me to tell me so :P. If it doesn't, make a screenshot and send me a link to it.

There's no way I can design a site that works in all browsers -- the current site doesn't do that -- but it will be interesting to see how well this version does. It's XHTML 1.0 transitional (it even validates! I've never been able to do that before! :) and the real amusing thing is this... the page is 20k, with a CSS sheet that's 8k. The current page, the one you are looking at, is 60kb. Yikes. ^^;; Most of that is the Drop Down of Death, but even taking that out, that the site is a good 32k of coding. Faster loading is always nice, isn't it?

[please note that this is a NON WORKING template - it's just a simple XHTML file. None of the links do anything.]

I know that many times people like to keep the 'new look' of things under wraps and then 'launch' the new site with trumpets and fireworks. Blah. I'd rather let you guys see it now. The timeline for all of this to be done and working is sometime in early june. Whee, so much to do... Hope you guys like where things are going, It'll be really nice to bring the site up to snuff.

< Dom >

Oop ack!

"A brave new world"

Thursday - April 1, 2004

[Dom] - 04:00:00 - [link here]

In case you've been wondering where I've been the past week, I've been working on some more SGDs for you while Fred's off. We've been planning this for a while--since book 2 came out, actually--and I think some of my best work is coming out of this period. Anyway, check back tomorrow when I'll have a new strip for you while Fred's in Boston.

And if you're wondering what I've been doing at work, well, check out the April Gadget Lab from Wired.

credits

megatokyo the comic - copyright © 2000 - 2024 fred gallagher. all rights reserved.

'megatokyo' is a registered trademark of fredart studios llc.