Luminous Landscape Forum

Site & Board Matters => About This Site => Topic started by: alfin on July 08, 2006, 02:21:08 pm

Title: New design template
Post by: alfin on July 08, 2006, 02:21:08 pm
Congrats to Henrik Paul for winning the CSS contest! However, even with serif typeface, I still find the text a bit difficult to read, maybe that is my aging eyes, but isn’t there any other typeface that’s more easy to read? The dark background calls for an really easy-to-read font.

BR/Lars
Title: New design template
Post by: tgphoto on July 08, 2006, 04:05:45 pm
All I can say is....wow.  One would think such an important decision would have taken longer than a day to make.  

While the overall accessibility looks to benefit from this design concept, I am really disappointed to see yet another "blog-inspired" layout.  It's a good start, but let's flesh out some of the typeface and color scheme issues.
Title: New design template
Post by: michael on July 08, 2006, 04:09:16 pm
Just to clarify further. The page shown as an example happens to be based on What's New, for no other reason that there needed to be "something: chosen.

The final look will likely end up being quite different, but the overall feel and colour scheme will be based on what we see now.

Michael
Title: New design template
Post by: alfin on July 08, 2006, 04:55:27 pm
Michael,
That’s clearly understood, and the overall feel and color scheme look really good. I just want to point out that since you produce so many good and long articles, it’s important that they are easy to read for everyone. The dark background put some extra demand on readability.

BR/Lars
Title: New design template
Post by: jule on July 08, 2006, 06:35:11 pm
The feel of the new design is really good except that I find it really difficult to read. The font seems too small, especially on the black background. For me, a step backwards I'm afraid. I would rather a 'tired design' that I can read more easily, than a 'new feel' that is difficult to read.
Julie
Title: New design template
Post by: ricwis on July 08, 2006, 06:47:56 pm
Looks nice but it seems on Safari, it is not rendered well.  The left side is cut off and I cannot scroll to see what is there.
Title: New design template
Post by: Scott_H on July 08, 2006, 10:04:39 pm
It has been a long day, I am tired, etc but I agree on the font being difficult to read.
Title: New design template
Post by: DarkPenguin on July 08, 2006, 11:07:04 pm
Looks awesome.
Title: New design template
Post by: jliechty on July 08, 2006, 11:39:40 pm
The layout is fine; I like that aspect. Unfortunately, the font doesn't work quite as well for readability in Firefox on XP. Also, light text on a dark background isn't what works best for reading long articles, but I guess form over function is the preferred method of design these days, so it's not surprising.
Title: New design template
Post by: Eric Myrvaagnes on July 09, 2006, 12:00:03 am
I agree. The layout is fine, but I, too, find the font still hard to read.

There is a (rather awkward) work-around that reverses the text to black on white: Just use the Print Preview option. This works with Opera, Firefox, Netscape, and IE. I would guess it does in Safari, but I don't have that one.

The proposal is a step in the right direction, but I feel that dark text on light background is much better, especially for long articles. If desired, photographs could be set off in a black frame.

Eric
Title: New design template
Post by: john beardsworth on July 09, 2006, 06:38:57 am
Michael

The redesign does just about address the excessive width issue, but the white on black is still rather tough on the eyes.

Quote
Ps: I well realize that there's more needed that just a change to the CSS, but it'll serve as a first step once an acceptable design is put forward.
Can I also utter a gentle cry of "foul" here? The contest was for a style sheet, quickly fixing the legibility issue, not for the long term redesign of the site. Maybe Henrik did only submit a style sheet - in any case well done to him - but I hope you've not compared apples and fruit salads here.

John
Title: New design template
Post by: Dennis on July 09, 2006, 07:17:21 am
Very nice design! And a huge step according to the readability.

I find this a bit funny:
Some years ago, I 'nagged' about the bad readability. One of the first things, you learn with software engineering or UI design, is about the contrast and the eye fatigue. So white text on a black background is a plain no-go. I am 37 years young, not wearing glasses with a very good sight. Not later than reading of two screens of text of LL articles, I start seeing horizontal lines and the reading becomes very uncomfortable. Of course a close inspection of an image is almost impossible.

Well, literally NOBODY was on my side. So I made my own color scheme for this site. Using Mozilla with add-on's, it's only a click to change the colors to a friendly grey background with darkgrey text.

So, it's nice to see, that the readability is an issue, though. The dark grey background with light grey text is much, much better!
Title: New design template
Post by: john beardsworth on July 09, 2006, 07:20:09 am
Exactly - using Firefox's Web Developer extension I often knock out the LL stylesheet altogether.

John
Title: New design template
Post by: franta on July 09, 2006, 07:27:59 am
This is my first post here, so I'll try to be helpful rather than just complain

I think the (un) readability issue is due to the current trend of making the
text gey on a grey background rather than font choice
The easy workaround is to use Opera and choose the "High Contrast (b/w)" mode, this keeps all of the style but renders the text as black on white.

I do not know whether firefox has a similar option, I guess there must be an extension for it somewhere.

Fra
Title: New design template
Post by: bcf on July 09, 2006, 07:49:12 am
Quote
Looks nice but it seems on Safari, it is not rendered well.  The left side is cut off and I cannot scroll to see what is there.
[a href=\"index.php?act=findpost&pid=70107\"][{POST_SNAPBACK}][/a]

No problem here on Safari, except when reducing the width of the window to less than the central column (box) width: I guess you are using a very small screen.

The css uses a width of 950px for the main, central box. So the design assumes a screen witha  width of 1024 pixels or more, which I think is fine nowadays. Looking at a graphics-oriented site on a 800*600 screen is pushing it, imo.
Title: New design template
Post by: bcf on July 09, 2006, 07:51:51 am
I for one like the dark (bit not black) background, and the light (but not white) font, I find it very comfortable to reaf, and very elegant too.

However I think that a sans-serif font would make for an even easier read, something like:
font-family: "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, sans-serif;
Title: New design template
Post by: john beardsworth on July 09, 2006, 07:54:29 am
Quote
However I think that a sans-serif font would make for an even easier read, something like:
font-family: "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, sans-serif;
[a href=\"index.php?act=findpost&pid=70150\"][{POST_SNAPBACK}][/a]
Classically, serif fonts can be read at a smaller size than sans - the serifs hook you.

John
Title: New design template
Post by: Mike Louw on July 09, 2006, 09:14:23 am
I like the design, but agree with others regrding the readability issue. Also, I hope the pages will be spread/expanded over a full Mac 23" screen, as the current site is! I don't know the technical term for this, but on my screen many sites occupy only part of the screen.
Title: New design template
Post by: john beardsworth on July 09, 2006, 09:29:59 am
Quote
Also, I hope the pages will be spread/expanded over a full Mac 23" screen, as the current site is! I don't know the technical term for this, but on my screen many sites occupy only part of the screen.
[a href=\"index.php?act=findpost&pid=70160\"][{POST_SNAPBACK}][/a]

This is one of the two problems I see with the current site's legibility. Wide paragraphs make the content tougher to read as the eye tends to drop off the line as you move from left to right, and scrolling back onto the next line becomes awkward too. Henrik's 950 pixel width is ideal. Classically, wide lines only work when you have more space between each line. So the last thing to do is spread text screen wide - other content can go there.

By the way, the site's content is great - I just find long articles hard to read here.

John
Title: New design template
Post by: Jay Kaplan on July 09, 2006, 10:47:32 am
Design OK readability tough on the eyes.

There is a reason books are printed using white paper and black type, readability.

The last color combination I found reable was in WP 5.1. That is pre windows for us older folks, a blue screen with white type. Of course back then, I did not need   bifocals.

As it stands today, if an article is of interest and quite long, I find it useful to just print the thing, sit back in my easy chair and read it at my leisure. Since I work in an office all day and most of the time is in front of a computer screen, the last thing I want to do after work is read an interesting, but lenghty article on my computer.

Maybe I am old fashioned, but readability is very important to me and white on a colored background just does not do it.
Title: New design template
Post by: dlashier on July 09, 2006, 03:32:45 pm
While I like the clean look of the new design, it does little or nothing to solve the readability problems. In fact it's a step backwards because it violates one of the cardinal rules (best practices, scalability)  (http://www.w3.org/WAI/GL/css2em.htm) of CSS design not just some places like the current site, but everywhere.

As others have noted, it also doesn't fix the light on dark eyestrain issue. I'll admit that my own site also uses light on dark, but my site is primarily images as opposed to being predominantly text like LL.

I agree with the comment about this being the quickest contest I've ever seen. I was planning on spending an hour or so constructing an entry this weekend, but now I'll just sit back and watch the world cup

- DL
Title: New design template
Post by: ricwis on July 09, 2006, 04:15:27 pm
As a design consideration, remember that not everyone runs applications in full screen mode.  I choose not to so other windows are visible and useful to me.  This is the reason I posted earlier that in Safari, the left part of the content is cut off.  This forces me to change the size of the window to fit the content where I would like to see scroll bars that allow me to scroll the content and not change the window size.  My window sizes are such that I have my three most used applications open and positiioned on the screen.  Having to resize a window to fit content ruins the desktop setup.
Title: New design template
Post by: Mike Louw on July 09, 2006, 05:15:47 pm
Quote
This is one of the two problems I see with the current site's legibility. Wide paragraphs make the content tougher to read as the eye tends to drop off the line as you move from left to right, and scrolling back onto the next line becomes awkward too. Henrik's 950 pixel width is ideal. Classically, wide lines only work when you have more space between each line. So the last thing to do is spread text screen wide - other content can go there.

By the way, the site's content is great - I just find long articles hard to read here.

John
[a href=\"index.php?act=findpost&pid=70161\"][{POST_SNAPBACK}][/a]

I must have unusual eyes then! I like the text being spread right across the page. Seems a waste of screen estate otherwise   I second your comments about the content. Excellent site; very informative.
Title: New design template
Post by: Nick Rains on July 09, 2006, 06:52:25 pm
I quite like the look but agree that it is no easier to read than the last version. Contrary to previous opinions, serif fonts are not easier to read on screens, only on printed pages and then only in certain sizes. Non-serif fonts are much better for on screen reading because serifs do not display well on 80-100dpi LCD screens. The subleties of the serifs are lost and italics look awful.

There has been much reseach done on web readablilty and fonts like Verdana are designed for screen reading and scale well. Verdana and its ilk might not look as cool as other fonts but they are easy on the eye.

Also, the most readable colours are apparently, wait for it, yellow on green. Sounds hideous and it certainly is not 'cool'  but anyway, see here:

http://hubel.sfasu.edu/research/AHNCUR.html (http://hubel.sfasu.edu/research/AHNCUR.html)

Personally I quite like the black on grey and would be happy if it stayed, but please get rid of the serifs.

Long lines of text are to be avoided as well, maximum of 12-18 words per line, otherwise the eye finds it tiring to follow the line - in fact this may actually be the problem as opposed to the colour scheme. Try narrowing the display window on a normal LL page, I find it much easier to read at about 700-800 pixels wide.

Style over substance should be passe these days - LL is all about content, it does not have to be the last word in style.
Title: New design template
Post by: dlashier on July 09, 2006, 07:29:07 pm
Quote
Also, the most readable colours are apparently, wait for it, yellow on green. Sounds hideous and it certainly is not 'cool'  but anyway, see here:

http://hubel.sfasu.edu/research/AHNCUR.html (http://hubel.sfasu.edu/research/AHNCUR.html)

[{POST_SNAPBACK}][/a] (http://index.php?act=findpost&pid=70193\")

Wow, that's one of the most unreadable pages I've seen

Note that black on gray and black on white did quite well. I don't trust their arial versus times results (which show times better) as I doubt they account for the fact that most browsers render times larger for the same font setting, at least with the metrics in use at the time of this study (1997).  Their results don't provide a sample of the test page but it wouldn't surprise me that they didn't account for this. I agree that at equivalent font sizes, sans serif is more readable on screen, particularly in the smaller sizes.

There's many other studies that show sans serif is better on screen, eg [a href=\"http://www.wilsonweb.com/wmt6/html-email-fonts.htm]this one[/url]

- DL
Title: New design template
Post by: andythom68 on July 10, 2006, 10:53:57 am
First, my congratulations to Henrik Paul for winning.

But I think there is something strange in announcing a competition  on the 4th and posting news of a winner on the 8th. This gave none of the "weekend programmers" a real chance to submit a entry. Just out of curiosity, how many entries did you receive Michael?

Ofcourse it is Michael's site and he can do what he wants with it but I think next time a competition like this is announced a closing date for submissions should be given. Or, another option is collect all the entries and ask people to vote on what they like best and Michael picks what he likes best from the "Top X" voted for. Thats just my 2c worth.


I quite like the layout of Henrik's design I think it is a improvement over the existing design. However, I agree with the general comments about the text/background colours,. Lets have dark(er) text on a light(er) backgound. I would also change the font used for the 2 "shop" buttons on the top-right. To me they look out-of-place with the rest of the fonts used.

For the final version it could also use a dedicated "home" button in main menu on the top-right. I know you will probably use the main title as the "return to home" but I personnally prefer to see a home button.

I am sure the final design will look a wee bit different as it goes through development over the next few weeks.

To Michael: If you do decide to pay someone to develop a new version of the site maybe you would be interested in hearing from readers what they would like to see the new site include (or heaven forbid, something removed). You never know, someone might come up with a great idea that you and the rest of us never thought of ...


Andy  
Title: New design template
Post by: michael on July 10, 2006, 11:25:56 am
The contest was a bad idea. I ended up being inundated with questions by people who didn't have a clue about CSS, and also a great many submissions which, frankly, wern't very good.

So, to end the pain, I chose the best submission to that point (which was quite good) and ended the contest early.

I am working with a developer to implement a new design based in part on the winning submission. It's going to take a while because the current site design was badly implemented, with too many components hard coded. The job is therefore very complicated because the site has over 3,000 pages.

A new face on the site will appear some time in the months ahead, as soon as we fugure out the best way to implement it.

Michael
Title: New design template
Post by: john beardsworth on July 10, 2006, 11:37:42 am
As the one who suggested the style sheet competition, it's sad to hear that you got so much junk. Clearly the prize was too attractive or maybe you should have said: if you don't know CSS, don't enter, don't ask. It's possible to improve the legibility right now with just a few tweaks to the existing stylesheet, and then deal with the redesign over a much longer period. Anyway, it's your baby!

John
Title: New design template
Post by: macgyver on July 10, 2006, 03:37:08 pm
I second the lack of readability, but am I the only one who thinks that the front page photo (something I always look forward to the changing of) makes the page far too cluttered?

Or just too cluttered in general?
Title: New design template
Post by: fike on July 10, 2006, 05:18:26 pm
Whew!  I had to read through lots-o-comments to see if my $0.02 had already been entered.

First, I agree that a sans-serif font is better online versus a serifed font like times roman.  The two articles posted seemed to agree on this point.  Readability may improve with a font that is sans-serif.  

Second, As long as the style sheet is written using relative sizes instead of absolute sizes (CSS people should know what that means) the function of any browser to enlarge or reduce the font size should help improve the readability.  It is clear by the comments that readabillity is a critical feature of the website. ( I will not make any inferences about the average age of the LL reaeder ;-) ).

Third, while I tend to like dark text on light backgrounds for readability, I don't think the light text on dark backgrounds is the problem here (see serifed issue number one above).  On the other hand, I think that dark backgrounds are far superior for evaluating images.  That is part of the reason that I mat my images on balck mats.

Fourth, I have a suggestions for the blog style format--which I like.  In addition to the name of the article and the date, the author should be prominently identified in the header.  I have noticed myself reading LL articles (and articles from similar photo-minded websites with contributing authors) and searching to find out if the article was written by the "big man" himself or one of his contributors.  The issue is not about credibility to me.....it is more out of my effort to form a general impression of the photographic style and ethos of each photographer as a virtual mentor.  It helps me to figure out who is most compatible with my attitudes and photographic ideas.  So, please prominently add the author.

Fifth, I agree that a narrower column would be better.  Weblogs may seem to be a passing fad to you, but in something like web design, I imitate what works.  Narrower columns are used on every website where reading text is important.  As a matter of fact, good old print media use the same technique--have you picked up a newspaper lately.  Wide and expansive is arty.  Narrow is readable.  the side columns can be used for other content like menus, search boxes, what's new, previews of latest articles, etc...  this would be easier if the site was built over a weblog software like Movable Type.

Sixth and final, I have frequently found the LL drop-down menus to be inadequate.  I am assuming that they are slated to go away, but I think it is important to take a look at the information architecture (heirarchy) of the articles.  Today, I find myself frequently going to the index to browse the articles.  This is not ideal.  Perhaps a few categories that could be used are: by author, reviews, field reports, technique, criticism, tutorials.....etc...  These categories needn't be mutually exclusive.  An article could occur in more than one category.  While many people have focused on the readability of the site, I would be more worried about making the excellent and voluminous resources easily available to the reader.  A week doesn't go by when I don't find some other hidden gem in LL.  That is exciting, but it is no way to drive readership.

regards,
marc
Title: New design template
Post by: katemann on July 10, 2006, 07:22:55 pm
I rather like the proposed layout for the site - it is a little more lively. I do, however, agree that the slab-serif font against the dark background is a little difficult to read. If the blackish ground were a little more charcoal grey and the type a titch larger ... maybe a larger x-height like Helvetica Neue ...

Congrats to the winner.
Title: New design template
Post by: Uwe.B on July 11, 2006, 06:19:48 pm
Dear Michael, hi folks.
Being a frequent guest on LL I stumbled across the css-design-pitch-call and I instantly thought: may this be a way to contribute to the community, give something back in return for all the knowledgable advice and entertainment I received over time?

While I started to think about colorscemes, typo and corporate design I looked at the source-code of the news-template, realized the impossibility of changing it via css, I meandered through the site's structure ... and I felt ... uncomfortable.

I visited this forum (for the first time), found out about some readability-grunts and felt even more uncomf ... sad.

Why do we visit LL since years? What has made your site so popular, Michael?

I'll answer that for myself: the LL-site has something that is impossible to buy or set up –  authenticity.

We face the mature and independent valuation of a knowledgable professional with the drive for making a statement. *(... the growing number of industry-executives in m's entourage in my eyes starts zu interfere here ...)

This is not part of the all-so-hyped bloggosphere. This is in part the origin of all that. Over years and 3000 pages the site/Michael has managed to stand out of the crowd.

The actual Look n' Feel of the site is the prominent vehicle for the trust-worthyness of its content. It is (huh ;  ) the door into our, the viewers, heart. This site is apparently handmade, the yield of (nightly) hours spent coding/uploading – the outcome of passion!

All this shall now be sacrificed to ... I'm sorry to say that ... bad taste?

You have yourself realized, Michael, that pitching was a suboptimal choice (as it allways is, btw.: http://www.spiekermann.com/iblog/C19328905...244/index.html) (http://www.spiekermann.com/iblog/C1932890584/E16157244/index.html)).

I honestly hope that after carefull deliberation you will revoke the decision to change the look of your website so radically into something indistinguishable from all that white noise (or brownish) out there.

And you folks, photographers, the audience ... don't you think it's worth a resolute commitment to the genuine LL-style? (Which doesn't mean it has to stay hardcoded and completely unrevised visually ;  )

The ongoing serif/antiqua-discussion is, in any case, pixelpeeping – I thought that's frowned upon on LL ...

Cheers, Uwe
Title: New design template
Post by: Nick Rains on July 11, 2006, 06:56:54 pm
Quote
Dear Michael, hi folks.
Being a frequent guest on LL I stumbled across the css-design-pitch-call and I instantly thought: may this be a way to contribute to the community, give something back in return for all the knowledgable advice and entertainment I received over time?

While I started to think about colorscemes, typo and corporate design I looked at the source-code of the news-template, realized the impossibility of changing it via css, I meandered through the site's structure ... and I felt ... uncomfortable.

I visited this forum (for the first time), found out about some readability-grunts and felt even more uncomf ... sad.

Why do we visit LL since years? What has made your site so popular, Michael?

I'll answer that for myself: the LL-site has something that is impossible to buy or set up –  authenticity.

We face the mature and independent valuation of a knowledgable professional with the drive for making a statement. *(... the growing number of industry-executives in m's entourage in my eyes starts zu interfere here ...)

This is not part of the all-so-hyped bloggosphere. This is in part the origin of all that. Over years and 3000 pages the site/Michael has managed to stand out of the crowd.

The actual Look n' Feel of the site is the prominent vehicle for the trust-worthyness of its content. It is (huh ;  ) the door into our, the viewers, heart. This site is apparently handmade, the yield of (nightly) hours spent coding/uploading – the outcome of passion!

All this shall now be sacrificed to ... I'm sorry to say that ... bad taste?

You have yourself realized, Michael, that pitching was a suboptimal choice (as it allways is, btw.: http://www.spiekermann.com/iblog/C19328905...244/index.html) (http://www.spiekermann.com/iblog/C1932890584/E16157244/index.html)).

I honestly hope that after carefull deliberation you will revoke the decision to change the look of your website so radically into something indistinguishable from all that white noise (or brownish) out there.

And you folks, photographers, the audience ... don't you think it's worth a resolute commitment to the genuine LL-style? (Which doesn't mean it has to stay hardcoded and completely unrevised visually ;  )

The ongoing serif/antiqua-discussion is, in any case, pixelpeeping – I thought that's frowned upon on LL ...

Cheers, Uwe
[a href=\"index.php?act=findpost&pid=70391\"][{POST_SNAPBACK}][/a]


Well that's an interesting take on the issue. I actually agree with Uwe here that the 'home grown' history of LL is/was one of its huge attractions. It started as a site run by one person and has evidently outgrown that situation many times over.

OTOH, LL is now firmly established as a leading site in its field, so it may be that it is indeed time to polish up the look, slightly.

Personally I have never been too bothered with the design - I visit and I read. It's the content that is King.

Sure it would be nice to have a more readable design but quite frankly I would much rather Michael did not spend too much of his limited and valuable time on worrying about the look of the site, but rather spent that time generating content for the site. I am sure we would all agree that in this respect LL is one of the best sites on the planet.
Title: New design template
Post by: fike on July 11, 2006, 09:23:16 pm
It is true that some websites have style and no substance.

There is no risk of that problem here; LL has substance.

I disagree that a redesign is undesirable because it will detract from the authenticity of Michael's creation.  By that logic we should all be shooting with a brownie camera and printing in a darkroom.  Technology and art constantly change.  

Redesign the website!  With the substance of a great site, and a little bit of conscientiousness, you can only improve on the website.  What a great challenge.

Just don't use any flashing text or animated GIFs.  haha.

thanks for the great website. I am looking forward to a cool and artistic redesign.
Title: New design template
Post by: 61Dynamic on July 18, 2006, 02:24:35 pm
Wow. That was a very quick contest. Clearly it was put up a bit too quickly and needed some guidelines (i.e. Don't know CSS? Don't bother. And a reasonable deadline). 3 days is a darned impossible amount of time to put together a well thought out website design (which would explain why Michael was inundated with bad submissions). As the saying goes, you get what you pay for. Although, if the contest lasted a week or two longer, you might have gotten more than what you pay for...

Can't say I'm a fan of the new design and am glad to hear the final will be a bit different. While not a terrible design, I can't say there is any element of it I find appealing design wise or usability wise. Given the state of web design today, I'd give it a C-. In '95, a B.  Black backgrounds can work, but they don't typically lend themselves well for text-heavy sites. The key is in contrast. Light grey text on dark grey background can tire the eyes as do small serif fonts on the web. I digress.

I tried to enter the contest but looking back, it appears I submitted just couple hours after it abruptly ended. I was able to get together a PS mockup of my idea before leaving for vacation which I will attach for the curious (the header is made from one of my favorite photographs by Michael. Take a guess which one). For those wanting to know what I consider to be good text layout, you can get a good idea of what I would have implemented in the LL design at my own site (http://www.dynamicartwork.com/blog/archives/2006/04/25/121/).

My Mini portfolio:
Oaktree Imaging (http://www.oaktree-imaging.com) - My Business site.
Dynamic Artwork (http://www.dynamicartwork.com/) - Personal site
SVPIP (http://www.svpip.com) - Local photo club
61Dynamic (http://www.dynamicartwork.com/61dynamic) - I forget the exact reason why I built this.

In the end, I won't complain about whatever design Michael chooses to go with. It is his site and his aesthetic appeal. The site's content is top-notch and that's what really counts as long as it's readable. I look forward to seeing the new design work out and hopefully the designer he's hired has some history in type-facing or at least a working knowledge of it.

(http://www.dynamicartwork.com/tmp/ll-entry.jpg)