Subcultural engagement for the 21st Century...
Barbelith is a new kind of community (find out more)...
You can login or register.

Underground > Art, Fashion & Design >

Web Design Roundtable

Page: (1)2 3 4

16:55 / 23.07.03

So I've been designing sites for about two years, and behind the curve all the way. Like I was getting into laying out with tables & then I found out that tables are whatever the opposite of de rigueur is. (Right now I'm using tables plus CSS to add padding & it works, but I feel like a goy doing it.)

I was just wondering, what specs are most people designing for now? E.g., I have an 800 x 600 monitor at work and a modern-sized monitor at home, so I try to design for both sizes. I'm slightly stuck on the 760-wide table, centered. I would love to have a different idea, any idea...

Yotsuba & Benjamin!

17:31 / 23.07.03

Well, I can only speak from my sheer lack of experience, but in designing my site, I desperately sought to avoid tables and what not and create something simple and elegant and slightly non-conventional. I have to say, though, that you're site is really well designed. I avoided that kind of design (consistent menu links, templates, et al) simply because I didn't know how to do it.

So, yeah. I probably shouldn't have even posted here. But I like talking about web design.

21:55 / 23.07.03

Thanks, Mr. Birdie; but you know what's wrong, the beige side just stretches out to forever on my home monitor (1440 x 900). It looks so stupid.

22:19 / 23.07.03

I'm constantly told to design to a 600 pixal wide area. I've veared from it occasionally for sure. I still use tables here & there... it still seems like a relatively sire way to get what you want on the screen.

The CSS thing is still quite over my head... How ever I've been getting more & more into the joys of FLASH....

My 2cents

22:24 / 23.07.03

But that's what the resize doodaa is for, isn't it? :-)

Seriously though, isn't 800x600 by far the most common screen size? And isn't the quest for the holy CSS grail of separate layout and content just a wild goose chase? After all, the letters have to appear in a particular order, from left to right and from top to bottom of the screen. So layout and content aren't discrete.

23:04 / 23.07.03

Most people are using 800x600 or 1024x768. I aim for something that's reasonable on 800x600, but doesn't look stupid on a maximised 1024x768. The 600px width limit is sensible; it mimics the ideal width of text on an A4 page, too.

Not everyone using 1024 has their browser on full width, either - I certainly don't, and I object to sites which require the window to be maximised.

23:06 / 23.07.03

After all, the letters have to appear in a particular order, from left to right and from top to bottom of the screen. So layout and content aren't discrete.

Speech browser?

23:45 / 23.07.03

600 pixels, really? That's super hardcore. Do you have links that I could look at?

According to the stats for our theater website, it's just about 50/50 for 800 x 600 vs. 1024 x 768 monitors. And since I have both kinds, I like things to look nice however I look at them. Saves on self-loathing. So I'm always looking for neat design solutions for this.

I don't have a reigning philosophy re: CSS-Positioning. So far I just haven't been able to make it work --i.e., with the Jenny Everywhere site. All my boxes went kablooey. Actually, it was okay until I tried centering the thing. Maybe you're not supposed to do that with CSS-Positioning.

I really like CSS for regular styles, though. It's really a time-saver, at the very least.

00:00 / 24.07.03

Speaking of neat design solutions, fridge... I like that piece of sushi that you've got in the upper right hand corner of your blog.

01:04 / 24.07.03

I'm playing with the theory that the best way to get images in a CSS-heavy page is to use a DIV with a background image. Lets you change things around easily.

Just something like

#image { background: url(/path/to/image.jpg) no-repeat top left #fff; width: whatever; height: whatever; whatever positioning you want }

You can set z-indexes and so on as you like. Certainly that's the way they seem to be doing it at csszengarden.

I think I've got the centred positioning thing sussed. If you've got any particular things, let me know....

ta about the blog, incidentally - I like the image myself, at least for the moment

04:33 / 24.07.03

CSS positioning is something I've been pondering about as well. Use it for stylesheets and the like, but was generally comfortable throwing things together in tables and centering the fixed widths in the middle of the browser space. Yes, DIV's are nice

A List Apart is a great resource for anyone looking into browser compatibility and standards compliant web design. Zeldman runs a pretty tight ship over there.

ASA dimensions, I stay at around 700 x 410 for the main design area (410 being about the height you get on a 640 x 480 at one time). I've also built stuff that's pretty big in dimensions too. Pretty much depends on the audience and what machines you have to support. I'd love to design for 1024 x 768 all the time but we need to keep some laggers in check.

So, any design horrors on CSS layout? Heard after the first site, it's much easier.

And, if anyone has any Flash questions, feel free to ask me. I've been building some nice ones for a few years... Can go to my screen name . com to check some out.

09:24 / 24.07.03

Jeffrey Zeldman'a list of design sites is also a keeper.

But when I was fiddling with the CSS for the Pagga Log and the like I relied on Little Boxes and The Layout Reservior. I ended up with some very simple CSS as some of the more interesting stuff doesn't work the same in some browsers, and I had a set piece of bbs software that I had to design around. Next time I've promised myself I'll go wild

.

You can actually get some nice designs with a 600px centered design, or something a lot smaller, I've seen a few sites with just a text column down the center with small menu to the side, apparently it's a lot easier to read.

Oh and think of us poor souls who still have to think about a large number of I.E. 4.01 users who come to the sites they work on *puts hands to head* oh the pain

Btw NetBanshee, nice site

Just wondering how you did do that Ku-Fu animation on the front page?

11:56 / 24.07.03

Wow, awesome links. Those little boxes are going to keep me busy for a while. I love boxes.

This made me feel a lot better (from Layout Resevoir):

Many a talented web designer has struggled with CSS-based centering. Though CSS vertical centering eludes us, two techniques for horizontal centering are BlueRobot approved.

...at least I know it's hard to do. *hopefully* Maybe you should write an article, fridge?

11:56 / 24.07.03

float:s and clear:s still give me hives, particularly across browsers.

The Return Of Rothkoid

12:13 / 24.07.03

I design for 800x600 only because I'm lazy, and I want more people to be able to read my site. That said, my blog page is entirely CSS - no tables - and it wasn't until I went rooting around in a friend's weblog to fix it up that I realised once more what a motherfucker nested tables are. Work o'de devil. CSS is where it's at, but it is a fucker to try and get a grip on, I will admit - it took many hours of fuckarsing around before I could get my text to float where it was meant to...

13:44 / 24.07.03

Hey fridge... if you ever want to kick out a little web design FAQ or something, let me know. Think we live somewhat near each other anyway...

And i_al, I took an mpeg video of myself against a white wall while testing a video feature in my camera. Looking at movement and stuff. Then looked at it in Quicktime, broke it up into the frames I wanted and either streamlined them or vectorized them in flash (can't remember). Then simplified them in Flash and put the animation together.

The site's going on 3 years old and I never got to up it really. Have about 10 other replacements started, but getting a clean and rich experience on the web all coming from yourself is hard in the midst of client work.

Let's keep the CSS links a comin'...

15:36 / 24.07.03

as an ex-professional designer (but I'm trying to worm my way back in) I've always designed sites as 795x434. This is the window size on a normal monitor at 800x600 resolution.

We, and I, always took that to be the standard resolution of the business folks our clients were aimming at and it works.

Okay my two personal
sites cheat a bit by being in a "letter box" format of frames, so the site stays the same and either white or black borders appear round them. But it works, especially in the tight pictorial designs I have on there.

As for the great debate of tables versus CSS, I've always gone with tables. Maybe it's the fact I came to this from a page layout/print design background and had to find a way of using what I knew through Quark and use it in Dreamweaver.

CSS is good though, only used it when doing other stuff such as the DHTML stuff on the portfolio side on internal.

All my sites, even the two above are multi-paged efforts and heavily use frames and tables. Never really played with the ideas of what can be achieved on a single page site (like Tom's for example). Maybe I should.

16:44 / 24.07.03

Wow... this thread's moving fast....

As for the great debate of tables versus CSS, I've always gone with tables. Maybe it's the fact I came to this from a page layout/print design background and had to find a way of using what I knew through Quark and use it in Dreamweaver.

In the exact SAME boat there ADAMWISH...

Persephone:
these are the 2 major sites I've been involved in developing...
MartialArtsMart.com Has been a collective effort & most of my input is Graphic development. As a Yahoo store site there's a whole templated system that I'm not even involved with...

KungfuMagazine.com Was initially designed my myself & later revamped as an automated site by a pretty amazing Code Jedi. It's all fit into 600px wide...

NetBanshee, That's some sweet stuff you've got going on... most of my flash stuff can be found littered about the "eZine" section of Kungfumagazine... Some articles use flash animated instructional bits like this and that.

20:06 / 24.07.03

All I know about design is espoused in my personal site. CSS position is useful, and it's not hard to centre it all - i used the trick of setting it in the middle, and using a left margin value of -(0.5 x width of page), to align the table bang in the middle. I usually design for 800*600, with it looking nice in 1024*768 too. At 1920*whatever, the whitespace gets a bit big... but you get the drift.

CSS positioning seems hard at first, but it's not; no harder than tables were, and it makes it easier to tweak the layout to perfection afterwards.

21:34 / 24.07.03

I like that blog, Paleface.

There are a couple of methods of getting things centred; my preferred one is to set

body { text-align: center; }

and then have yer DIVs that you want to be centred with margin-left: auto and margin-right: auto.

The advantage - or disadvantage - of this is that pretty much anything else you put in the page will also be centred, so you can put text outside of your DIVs and it will appear in the middle. This may of course not be what you want.

I do actually still use tables but only for tabular data. I come at things from a semantic, parsing, language-type background and while I got used to tables for a while I immediately jumped on CSS as soon as I found out about it.

Plus I'm a tweaking whore and change my site design at least once a month.

23:57 / 24.07.03

Whoa, this is great. I found this on the little boxes site: /CSS/ - a guide for the unglued

I just finished reading the NYPL Style Guide. It says that you should never use "marginheight" and "marginwidth"...*groan* I just learned those... at least I know to use strong and em...

10:23 / 25.07.03

The best stats to use are the Global stats at http://www.thecounter.com - they're broken down into month. Basically, in my experience, the ideal thing is not to design for any specific screen-size at all and let the page resize, but that's only really practical in very rarified situations. More importantly you should remember that it's only on PCs that people routinely browse with their windows maximised with all the available space that implies. For that reason, I would advise if you're doing fixed-width sites to design for something around 750px in width, which will look good on 800px width screens which aren't maximised (centralising often helps), and will just give more space on maximised screens - OR to go for something that just about fits maximised on an 640 screen res.

There's no reason to force yourself to fit into 640 screen res any more unless you're specifically aiming your site at people in businesses which might have legacy computers or people who can't afford to get newer monitors and the like. There are specific groups of people who are using older computers (charities, for example) and if you're targeting them, you should be more inclusive with your design principles.

10:54 / 25.07.03

I suppose you could have multiple stylesheets and allow people to select the one that fits their needs - or have a script that reads the window size and selects it automatically.

This is extremely easy if they're using Mozilla or Opera, they can just select it from the menu. I believe IE doesn't let you do that, surprise. There's other ways you can get the effect, though. I suppose if you had dynamically generated pages you could set a cookie, and have a script read the cookie and send back the right stylesheet.

tom: something around 750px in width, which will look good on 800px width screens which aren't maximised

Er, isn't a 750px width page only going to look good on a maximised window at 800px? Unless you've only reduced the window width by 50px...

10:59 / 25.07.03

That multiple stylesheets thing sounds like a lot of work but it wouldn't have to be. Most of your styles would remain the same, you could import them from the same sheet, and then just have your size-sniffing script call another stylesheet that redefined point size, column width etc. Thinking about it, you could even do it from a static page with Javascript, you wouldn't have to go dynamic.

It's still too much work for me to do on a regular basis. That is, after all, why browsers have magnify page options - though only Opera does it really well.

11:20 / 25.07.03

Did you know that your site does something wacky on IE5 Mac, fridge? I should change browsers; but I finally got all my bookmarks organized, like yesterday. I just scoot over to Husb's computer to look at your site... I was just wondering if you knew.

17:07 / 25.07.03

what wacky something does it do? I must admit I haven't checked it on IE5 Mac, given that it works on IE6 PC.

19:18 / 25.07.03

Your entries are all in long, skinny columns, like this:

Star
Wars
pisstake
net-
memed
video
results
in
lawsuit...

Actually, some of entries look normal. Your sidebar looks normal, but it's shoved way down.

But I'm told like every day that only total nonnies are still using IE5 Mac, because it hasn't been updated in forever.

21:12 / 25.07.03

Er, yeah, just checked it.

That is bizarre, and I can't explain it at all. If anyone has any knowledge of Mac IE and could tell me what the hell's going on I'd appreciate it. The floats appear to be fucked, I think that's what's causing it - the sidebar doesn't work either.

Well, I'm not going to beat myself up over that one, it works on everything else. I'll cater to PC IE grudgingly but Mac IE? nah.

03:00 / 26.07.03

Here's a page for IE5 Mac bugs.

I wonder how many people actually use IE5 Mac. Maybe I'll do something about making that one less person ...tomorrow.

15:51 / 26.07.03

IE support on mac has always been shoddy... up until recently though (since Safari basically), lots of mac users used it due to it being preloaded on the OS and not having much better alternatives. Granted there's Mozilla, Opera and the like, but the amount of people who use them, though growing, is still pretty small. Probably just due to overall laziness.

Let's see... kind of interested in document standards and web delivery a little too. Use pdfs for proofing a few times daily at the job and it's a great format when you have a system down. Now not as robust (yet), but Flash Paper sounds like it has legs.

Also, anybody like to fiddle with actionscript in Flash? Recommend picking up O'Reilly's Actionscript for Flash MX if you want the best programming resource available out there.

16:09 / 26.07.03

I'm not a designer, but my friend Merlin is... he's one of the few SF web guys still standing.

He's got some advice here and a lot more here.

05:51 / 27.07.03

I would just like to say that my "quirky" FTP program deleted my entire stylesheet about an hour ago, and the site was still readable, if a little retro. It's all done up with H1s and H2s and lists etc. So semantically-based design is handy at times.

(And I managed to rebuild pretty much the whole stylesheet from memory, but that's because I rock, and I also need something to keep me awake for Blogathon. Only six more hours to go. Jesus, I need sleep.)

17:32 / 28.07.03

The most useful thing about a site is its content, so anything that links niche groups or provides niche information or services is always a big hit, for me.

My current favourite approach to web design is a page that's made for 800x600 but leaves plenty of white space, reveals the table structure, uses strong colour and, if you're comfortable with using flash, pixel fonts.

like these sites: www.nothing.ch, www.ala.ch

02:22 / 29.07.03

Yeah, k10k has a similar design... embarrassingly enough, that was actually my model for the Jenny Everywhere site. But I don't have half the skills of those people, so the end result was quite different & not quite practical. Although I think that I'm trying to get away from image-heavy designs --e.g., for navigation, I'm trying to do the rollovers with CSS mostly. I'll be happy if I can get down the basics of CSS and XHTML & then find a design niche, so to speak, that's appropriate to my skill level.

Re: documents, netbanshee... at one time I was thinking about having pdfs of comics & zines on my site for downloading, but I hadn't realized that pdfs of comics are enormous. Duh, and comics are different from scripts how? You don't happen to know how to greatly reduce the size of pdfs that mostly consist of graphics? Are Contribute/Flash Paper documents readable/printable by anyone?

11:42 / 29.07.03

Yeah.... it's sometimes difficult to get image-heavy pdfs to have a decent file size. I usually save a ps (PostScript) file when I print and bring it into distiller and tweak it from there. Screen-res files are good to save as... Color - 72dpi, Grayscale - 72dpi, Monochrome - 300dpi. A image heavy b&w pdf comes in around 50-75k per page. Not bad but can get heavy in bigger docs...

K10k does have a well thought out design and layout... Like how the crew worked on all of the machine/browser compatibilities when dealing with rollovers, content, etc.

Oh... and the actionscript book I mentioned before... comes from Colin Moock at Moock.org. His site has a pretty good list of resources to view if anyone's considering messing with scripting, etc.

Page: (1)2 3 4