materialisedesign

guiguibonbon · 2006-06-22 10:55:14

so, what do you think?

castanet · 2006-06-22 11:22:20

Tasteful design. My only criticism is that it’s very busy and I’m not sure where to look first. In newspaper design there’s an expression: ‘Lead the Reader Around the Page’, meaning, make it obvious where they should start. Still, well done.

sthmtc · 2006-06-22 11:31:37

sorry, don’t want to piss you off but i have to be honest: i don’t like it all.

the typography is a disaster (way to many different fonts), also everything needs much more space. looks very busy, very messy. last point: i found these scrollbars in the boxes on the right annoying. in addition, the dropdown for “Links” is broken in safari, theres a horizontal scrollbar…

guiguibonbon · 2006-06-22 12:56:33

Thanks a lot for the comments, and no that doesn’t piss me off.

I had a hard time with the layout : sooo many things to put on a single page. And a very complex hierarchy. First time I had to do such a complex thing, which explains why I have abused in terms of font-use. So, please, go on and tell me what doesn’t work, I can learn a lot from this. And will improve it. I’d really appreciate it would you share any thoughts on how you all would change things specifically.

About the scrollbars : how did you find them annoying? I mean… they’re scrollbars. I will try to fix the safari issue very soon. Like now.

jakob · 2006-06-22 15:30:53

I like the idea, and from what I’ve read also find the content interesting. I’d love to do a magazine-site like that – must be great fun.

Like the others said it could do with some stronger emphasis, both between main content and side content and between the individual titles in articles. I don’t think it’s too bad at present, in fact with a little tweaking of the css, you’d get a long way. Perhaps play with increasing column-width for editorial/main article, main area/side area contrast etc. or an image for the main article. Then look at the hierarchy of side headings, author info, side text. I guess hierarchy and consistency are big helpers in finding one’s way quickly through lots of information, but the differences need to be finely made or else they quickly all start clamouring for attention.

In terms of structure, the right-hand column also appears to hold more informative information than the second-from-right column – maybe it’s worth thinking about swapping them. If you’re worried about pushing search and links too far off screen, maybe consider locating them elsewhere, like in the header or between header and article, or in place of about, and shift about to the footer. Perhaps take a look at uxmag (also a txp site) for ideas. There are some similarities in the approach.

Some of the different fonts which appear are a product of not defining a font-family for some tags or alternatively not defining a base font in the css for body, so it will look different on different browsers, depending upon what they have set as their base font. A lot appears in Times Roman for me, and because you’re using em’s (admirably so, but hard to predict) they can appear at very different sizes in different fonts. Sometimes the headings are large and tightly spaced, sometimes small and widely spaced, sometimes the running text is verdana, in other areas its lucida grande. Perhaps try making it consistent across the sections and usage, then change only those where you feel it has to different or serves a different purpose.
Using light fonts for headings with letterspacing makes them appear more delicate and their ‘grey-value’ (if you squint at the screen) is approximately the same as or less than the main block of text and they lose their emphasising and structuring effect. Making them smaller and bold is immediately clearer (although traditional). Personally I think the resolution on the web is insufficient for good letterspacing of fonts (with the exception perhaps of spaced small caps), so it often simply looks uneven and awkward.

scrollbars: I don’t think they’re too bad – otherwise you’d have a very long right-hand column, but I also know what st.. means – I found sites like k10k and co unusable because they have/had so many scrolling fields. Also, depending upon your browser setup/OS-skin, scrollbars in the layout can appear rather strong and don’t blend with the page at all.

Last edited by jakob (2006-06-22 15:34:29)

guiguibonbon · 2006-06-25 00:40:06

Many thanks for all the comments and explanations; that is real useful. Very much appreciated. I’ve been doing quite some changes today, focussing on the layout, and the markup that needed to be moved accordingly. I’ll work a bit on the type very soon, first have to solve some other new problems. Let me go through some of your observations :

jakob wrote:

I like the idea, and from what I’ve read also find the content interesting. I’d love to do a magazine-site like that – must be great fun.

Yeah — it really is. It was a bit of a tight schedule unfortunately.

In terms of structure, the right-hand column also appears to hold more informative information than the second-from-right column – maybe it’s worth thinking about swapping them. If you’re worried about pushing search and links too far off screen, maybe consider locating them elsewhere, like in the header or between header and article, or in place of about, and shift about to the footer. Perhaps take a look at uxmag (also a txp site) for ideas. There are some similarities in the approach.

uxmag was unsurprisingly one of the inspirations. Actually, the middel column was first especially intended to hold advertising in the future. Guess that will have to go somewhere underneath the main (first) column, if ever.

Some of the different fonts which appear are a product of not defining a font-family for some tags or alternatively not defining a base font in the css for body, so it will look different on different browsers, depending upon what they have set as their base font.

Can’t believe I did this. I thought I had noticed it rendered slightly differently in safari for instance, but just couldn’t see why. That was probably helvetica being used instead of verdana. I will leave the ems though, since slightly different font-sizes don’t really have a huge impact, as the layout is elastic.

marios · 2006-06-25 00:58:14

Probably, if you have no control over the size of the images, that get uploaded, you want to tweak your CSS, so the excess gets cut off to the right. (Fortunately the Side-bar has a higher z-Index, so it shouldn’t be a big deal)
I think, this mostly destroys the layout, and the rest are only minor problems.
Looks like a lot of work, all those things it has, as you mention on so little space.

I think it can be improved with a couple of CSS rules and maybe the header might extend its background color full-width so it shows the same symmetrically with the footer.(Add a couple of border if you can, or fake them within the graphic, or both)

Here is what I would do:

Pull off the bottom border of The main Page element, that contains the statement and the teaser excerpts (The color-scheme is good for those in combination with the font color properties) , so it lines up with the bottom border of the Events Box and make the bottom border of that Events box the same color of the main Page element border.

Then increase the line-height of the Dailies feed box, so it lines up with the line-height of the main header content-box and again change the background-color of the Dailies Header to the one in the main-box Header.

plus the other changes mentioned above, (main Header and Footer)

That way, you get a nice symmetric matrix, without the hassle to disturb the sidebar.

(And forget about the scroll-bars, those are only needed here )

regards, marios

Last edited by marios (2006-06-25 01:25:56)

guiguibonbon · 2006-06-25 20:11:33

Marios, where exactely do you see any images that would be larger than the main column? Or maybe you are thinking of when the text-size is smaller?

marios · 2006-06-25 23:07:23

guiguibonbon wrote:

Marios, where exactely do you see any images that would be larger than the main column? Or maybe you are thinking of when the text-size is smaller?

It’s from the article section here
I saw it only from Safari ( I mean all the Site )
Would you like a sreenshot ?

EDIT.: I forgot to mention, regarding the previous post, when you pull off the bottom-border from the mainbox, and match the height with that one of the teaser-boxes then you could replace the current background of the main-box column with a 1px wide gradient,
that fades into the white of the normal background.

regards, marios

Last edited by marios (2006-06-26 00:04:00)

guiguibonbon · 2006-06-26 00:56:31

I’d love some screenshots since i really see nothing strange happening over here, including in Safari.

Thanks a lot for all the advice, I’ll try and make some mock-ups of that, since it goes beyond simple css, to see what it gives.

marios · 2006-06-26 01:44:28

guiguibonbon wrote:

I’d love some screenshots since i really see nothing strange happening over here, including in Safari.

Thanks a lot for all the advice, I’ll try and make some mock-ups of that, since it goes beyond simple css, to see what it gives.

BTW.: In Firefox you don’t come to see this. This problem is probably a layout problem that is caused by em width property values on all your boxes.
In other words, you had applied a flexible layout instead of a percentage-based. Could be through inheritance, hard to tell, since I don’t know your rules.
Check all your CSS rules down to the body.

UPDATE.: It is in fact em-width properties on your column id’s.
Because Browsers tend to display font-sizes differently, this means, that you loose control over your layout.(In this case UA Safari, which is more User prefs oriented, doesn’t even have a menu control to reset your font-size to medium like Firefox has)
You should change those to percentages.

regards

Last edited by marios (2006-06-26 01:52:50)

Textpattern CMS

Textpattern CMS support forum

#1 2006-06-22 10:55:14

materialisedesign

#2 2006-06-22 11:22:20

Re: materialisedesign

#3 2006-06-22 11:31:37

Re: materialisedesign

#4 2006-06-22 12:56:33

Re: materialisedesign

#5 2006-06-22 15:30:53

Re: materialisedesign

#6 2006-06-25 00:40:06

Re: materialisedesign

#7 2006-06-25 00:58:14

Re: materialisedesign

#8 2006-06-25 20:11:33

Re: materialisedesign

#9 2006-06-25 23:07:23

Re: materialisedesign

#10 2006-06-26 00:56:31

Re: materialisedesign

#11 2006-06-26 01:44:28

Re: materialisedesign

Board footer