Website Theming Work

[Orion Pobursky]

Work has begun on changing the main site theme. Right now I'm focusing on cleaning up and consolidating the code. Later I will rearrange the page elements. The end goal is to have a unified look across all LDraw websites. The main site is first since its the easiest to change. The forum will most likely be the last since the templating engine will change with MyBB 1.9 and I don't really want to duplicate effort.

If you are a website expert or otherwise, I want to hear from you. Now is the time to make suggestions, desires, ideas known. If possible, show me an example of what you mean. If there's a site you really like, let me know and I can try to incorporate the elements of the design that work well.

The current working design is here:
http://www.ldraw.org/test-home.html
Article template is here:
http://www.ldraw.org/hidden-content/testpad.html

Note: I'm focusing on layout right now, styling and interactivity will come later.

[Willy Tschager]

This looks really clean, love it.

w.

[Philippe Hurbain]

Yes, Zen style!

[Johann Eisner]

Work has begun on changing the main site theme. Right now I'm focusing on cleaning up and consolidating the code. Later I will rearrange the page elements. The end goal is to have a unified look across all LDraw websites. The main site is first since its the easiest to change. The forum will most likely be the last since the templating engine will change with MyBB 1.9 and I don't really want to duplicate effort.

If you are a website expert or otherwise, I want to hear from you. Now is the time to make suggestions, desires, ideas known. If possible, show me an example of what you mean. If there's a site you really like, let me know and I can try to incorporate the elements of the design that work well.

The current working design is here:
http://www.ldraw.org/test-home.html
Article template is here:
http://www.ldraw.org/hidden-content/testpad.html

Note: I'm focusing on layout right now, styling and interactivity will come later.

?? Looks fine.

[Finegold]

The new design is severely broken on iPad. The nav bar at the top extends beyond the width of the screen and does not scroll. The latest forum posts section is extremely narrow which causes text to wrap way down the page far beyond the length of any other content. The main sections like news and getting started are not clearly defined like they used to be with proper headings. Beyond that I think the whole thing just looks really ugly and misaligned. The old design was very clean and fit neatly in a browser window of any size. There's no reason to change it.

Why does every website cave into pressure to constantly update the layout? When big companies do it, they often poll the users, find out everybody hates it, obviously, and do it anyway. It's usually just a trick to sneak in more ads.

If you guys have nothing better to do, clean up the code WITHOUT changing the layout that we're all already used to. Freshen it up if you must, change images, do some recentering. This is a technical site, not a trendy fashion store.

[Magnus Forsberg]

I agree on both comment made so far.

• It looks very clean, and white. May be even too white. I like the old look of the blue shaded header ribbon better. But the dropdown menues are easier to use.
  
• The new layout doesn't work on smaller screens, like on my phone. The last Help "button" is even offscreen and impossible to use.
  

If it ain't broke, don't fix it.

[Orion Pobursky]

The new design is severely broken on iPad. The nav bar at the top extends beyond the width of the screen and does not scroll. The latest forum posts section is extremely narrow which causes text to wrap way down the page far beyond the length of any other content. The main sections like news and getting started are not clearly defined like they used to be with proper headings. Beyond that I think the whole thing just looks really ugly and misaligned. The old design was very clean and fit neatly in a browser window of any size. There's no reason to change it.

Why does every website cave into pressure to constantly update the layout? When big companies do it, they often poll the users, find out everybody hates it, obviously, and do it anyway. It's usually just a trick to sneak in more ads.

If you guys have nothing better to do, clean up the code WITHOUT changing the layout that we're all already used to. Freshen it up if you must, change images, do some recentering. This is a technical site, not a trendy fashion store.

A few points:
- As I stated, this is a work in progress. There is much to do. The current system is confusing and not very modification friendly. The code base needs to change and this is the first step.
- I am well aware of the limitations on mobile. This is part of the reason I started this process, to fix the problem. For example, if you noticed, the menu system on both the new and old designs is broken and does not respond to touch.
- I don't really appreciate the tone of your post. I don't get paid to work on this website. If fact, I spend my own money to help maintain it. Your criticism of constant change is unfounded as we have quite literally only changed our design 3 times in the last 15 years.

[Orion Pobursky]

I agree on both comment made so far.

• It looks very clean, and white. May be even too white. I like the old look of the blue shaded header ribbon better. But the dropdown menues are easier to use.
  
• The new layout doesn't work on smaller screens, like on my phone. The last Help "button" is even offscreen and impossible to use.
  

If it ain't broke, don't fix it.

I'm focusing on changing the back end code while also mimicking the current layout as closely as possible. The epic whiteness will definitely change when I get to styling.

[Roland Melkert]

The current working design is here:
http://www.ldraw.org/test-home.html

It looks nice but at first I thought it was broken cause my plugins where blocking the third party content. 

Please make those temporary, I always liked LDraw being one of the few 'standalone' sites.

[Orion Pobursky]

The current working design is here:
http://www.ldraw.org/test-home.html

It looks nice but at first I thought it was broken cause my plugins where blocking the third party content. 

Please make those temporary, I always liked LDraw being one of the few 'standalone' sites.

It will be standalone. I'm using the CDN versions of the CSS/JS framework for now. This will shorty change to a site specific version located on the server.

[Magnus Forsberg]

Sounds good.
Let us know when you have something to show.

[Orion Pobursky]

Sounds good.
Let us know when you have something to show.

The link above is a live preview. It will change as I change things. I've already made some changes today and will be working on this throughout the month.

[Orion Pobursky]

The current working design is here:
http://www.ldraw.org/test-home.html

It looks nice but at first I thought it was broken cause my plugins where blocking the third party content. 

Please make those temporary, I always liked LDraw being one of the few 'standalone' sites.

This is done. There should now be no external dependencies.

[Gerald Lasser]

Some ideas for the front-page:

- An easy entry point for a "wish-list" of parts that does not need an entry into the forum, e.g. people could leave the design-id etc of a part that should be made.

- A more prominent link to the OMR

- An entry point/Drop-Off point for Sticker Scans so that we have a common dropbox where people could simpla upload high-qulity scans of sticker-sheets

[Orion Pobursky]

Work has begun on changing the main site theme. Right now I'm focusing on cleaning up and consolidating the code.

Principle code cleanup and layout is done.

I'd like feedback for layout and styling.

Known issues:
  - Menus do not work on iPhone mobile. This is a known bug. As LDraw.org is principally desktop based, I feel waiting for an upstream fix is acceptable.

[Orion Pobursky]

I’d like some more (or any really) on the layout before I move on to more customizations. 

Note: I already know that the menu does not work at all for iOS Safari and is kinda clunky on other touch devices. I’ll be working on a more mobile friendly menu system in the near future.

[Willy Tschager]

I would invert the "News" with the "Get started" box and expand the news article since ther is now enough room.

The JJMA is not centered properly:


  Site.PNG (Size: 15.51 KB / Downloads: 165)

w.

[Travis Cobbs]

I’d like some more (or any really) on the layout before I move on to more customizations. 

Note: I already know that the menu does not work at all for iOS Safari and is kinda clunky on other touch devices. I’ll be working on a more mobile friendly menu system in the near future.

Note: I haven't read most of the posts in this thread, so I apologize if I say something that's already been said.

The menu also gets cropped (with no way to scroll) if the browser window is too narrow, even on a PC.

I don't personally like the fact that the blue banner at the top is slightly wider than the menu. To me, that ends up looking messy. Since the banner is just a gradient, I assume it could be made to be the exact width of the top menu.

The News section only containing one entry per page is very strange. There is definitely space for more than that on each page.

[Orion Pobursky]

What are the thoughts on the cards for the home boxes? I realize the graphics scale badly but that can be fixed.

[Orion Pobursky]

The menu also gets cropped (with no way to scroll) if the browser window is too narrow, even on a PC.

This will be fixed when I make the menu more responsive.

I don't personally like the fact that the blue banner at the top is slightly wider than the menu. To me, that ends up looking messy. Since the banner is just a gradient, I assume it could be made to be the exact width of the top menu.

The News section only containing one entry per page is very strange. There is definitely space for more than that on each page.

I'll see if I can make the menu scale with screen size.

The news thing is just a tag setting. I left it at the same setting as the current homepage but can change it.

[Travis Cobbs]

What are the thoughts on the cards for the home boxes? I realize the graphics scale badly but that can be fixed.

I think they would look good with appropriate images. I think they would look better without the border under the images.

[Orion Pobursky]

I’m thinking about the menu. Is the fixed menu at the top a useful feature? It seems to be large and long. Should we collapse some of the categories to make it more concise? What other thoughts are there?

[Travis Cobbs]

I’m thinking about the menu. Is the fixed menu at the top a useful feature? It seems to be large and long. Should we collapse some of the categories to make it more concise? What other thoughts are there?

I'm not sure if having the menu at the top is a good thing or a bad thing. In olden days, much of that stuff would be in a "Site Map" page, but I can well understand why site maps fell by the wayside. I think it has too many top-level entries right now.

I think both "Models" and "The LDraw Organization" could go into the Community menu. ("Models" could also go in "Downloads".) "Parts" could go under "Downloads" (although I understand why it is top-level, since it is what LDraw is all about). "Forums" is currently present in two places (top-level, and "Community"). I understand why that is the case, but I'm not sure it's ideal. "Documentation" and "Help" perhaps could be somehow combined. "Home" isn't really needed if the logo always links back to home. I definitely like the fact that the top-level items that are menus have triangles to indicate such.

[Willy Tschager]

I’m thinking about the menu. Is the fixed menu at the top a useful feature? It seems to be large and long. Should we collapse some of the categories to make it more concise? What other thoughts are there?

I'm not 100% sure about it. I've got a toolbar with my favorite urls below the address bar and the menu in that position gets easily confused with the browser itself. As talking about integration you could - as Travis pointed out - add the OMR link to the downloads, integrate the "community" stuff with "The LDraw Organisation" add the "About Us" as well (actually it is doubled) and add all the help stuff and tutorials to the "Documentation", where also the "Wiki" could go.

w.

[Orion Pobursky]

I’m thinking about the menu. Is the fixed menu at the top a useful feature? It seems to be large and long. Should we collapse some of the categories to make it more concise? What other thoughts are there?

I'm not 100% sure about it. I've got a toolbar with my favorite urls below the address bar and the menu in that position gets easily confused with the browser itself. As talking about integration you could - as Travis pointed out - add the OMR link to the downloads, integrate the "community" stuff with "The LDraw Organisation" add the "About Us" as well (actually it is doubled) and add all the help stuff and tutorials to the "Documentation", where also the "Wiki" could go.

w.

I moved the menu below the banner. I think I like that better but I'd like some feedback.

[Travis Cobbs]

I moved the menu below the banner. I think I like that better but I'd like some feedback.

I think I like it better there also, although it feels too tall now.

Also, with the new look, I think the logo should be moved to the right inside the gradient box by 13-14 points to match the gradient box margins above and below the logo.

[Merlijn Wissink]

I moved the menu below the banner. I think I like that better but I'd like some feedback.

I think I like it better there also, although it feels too tall now.

Also, with the new look, I think the logo should be moved to the right inside the gradient box by 13-14 points to match the gradient box margins above and below the logo.

I agree about the tall menu bar. I think the previous height was perfectly fine.

[Orion Pobursky]

I think I'm satisfied with the way things look. Any more tweaks?

With that, Willy, I think you were the one who made the current images. Any chance you could make new images that are about 4 time the size of the current ones so I can scale them down appropriately? The icons are what's going to hold up the show.

[Magnus Forsberg]

I think I'm satisfied with the way things look. Any more tweaks?

Don't know how ready the rest is, but the page doesn't work at all if I make the browser window narrower than the width of the meny. And it is not possible to scroll horizontally.

   

But it certainly looks good.

[Orion Pobursky]

I think I'm satisfied with the way things look. Any more tweaks?

Don't know how ready the rest is, but the page doesn't work at all if I make the browser window narrower than the width of the meny. And it is not possible to scroll horizontally.



But it certainly looks good.

Yes. I’m aware of this. I was focusing on normal monitor resolutions. The small screen tweaks will happen soon.

[Travis Cobbs]

Don't know how ready the rest is, but the page doesn't work at all if I make the browser window narrower than the width of the meny. And it is not possible to scroll horizontally.

But it certainly looks good.

Yes. I’m aware of this. I was focusing on normal monitor resolutions. The small screen tweaks will happen soon.

I actually have a request in the opposite direction. Do you think you could make the right column wider if the screen is wide enough to handle that? In other words, have another width that it jumps to that is bigger than the current width, but only happens if the window is wide enough. The right column is pretty narrow right now.

[Willy Tschager]

The "Get started" is here:

https://www.dropbox.com/s/s4rb8mhswn4ipp...g.png?dl=0

the other one has to be remade. Give me a couple of days.

w.

[Orion Pobursky]

I tweaked the menu again. Check it out.

[Travis Cobbs]

I tweaked the menu again. Check it out.

I don't personally like the fact that it is now fully expanded when you open the menu. It makes it too hard to find things than if the groups were collapsed by default.

[Orion Pobursky]

I tweaked the menu again. Check it out.

I don't personally like the fact that it is now fully expanded when you open the menu. It makes it too hard to find things than if the groups were collapsed by default.

I think I can make it expanded on computer screen and sidebar on smaller screens

[Travis Cobbs]

I don't personally like the fact that it is now fully expanded when you open the menu. It makes it too hard to find things than if the groups were collapsed by default.

I think I can make it expanded on computer screen and sidebar on smaller screens

The problem is that there are so many entries when it is fully expanded, that even on a computer screen, it's really hard to use.

[Orion Pobursky]

I don't personally like the fact that it is now fully expanded when you open the menu. It makes it too hard to find things than if the groups were collapsed by default.

I think I can make it expanded on computer screen and sidebar on smaller screens

Done. Should now be more responsive.

[Willy Tschager]

Tutorials:

https://www.dropbox.com/s/nxdi45fwivrd9x...1.png?dl=0

w.

[Orion Pobursky]

Would someone be so kind as to redo or revamp this image:


I'd like it to be fairly large (>1000px wide) and I will scale to suit.

Note: you do not have to copy the above image exactly. This icon will replace the default image for all parts updates so some creativity is welcomed.