Don’t pay too much attention to the actual test results - they are all being tested from the same location for the staging site (and the forums link doesn’t work but will work when it goes to the real production site)
The layout is a bit wonky on IE7 but I thought the addthis widget was more useful than having everything look perfect on IE7 (and lets face it, the target user group for this isn’t very likely to be using IE7). Other than that feel free to comment on anything that’s not quite right.
I’ll look to push the new UI to production either at the end of this week or during the last week of August (depending on how I feel about pushing code right before running off to vacation :D).
Last chance to stop the train, I’ll be launching the new UI in the morning when usage is (relatively) low. The forums are already sporting the new look (if things are broken, try a refresh - MyBB wasn’t all that friendly about updating the css).
All of it looks fine… except for the main nav. To give you a useless designer phrase, “it feels too heavy”. I’d try to reduce the font size a bit, then decrease the height of the container div to make it more sleek.You could also go the extra step and give the container background that classic glassy look too. If you want to hold off until tomorrow i can do a quick mockup in photoshop first thing in the morning when i get to work (can’t seem to find my personal license of photoshop, so i can’t do it at home).
Sure, if you don’t mind throwing something together and shooting it my way. It probably fit better with the original site color scheme before I went and changed the yellow background to blue: WebPageTest - Website Performance and Optimization Test
I may go ahead and launch anyway and then refine/tweak the UI over time. Since I’m going to be out of town next week I want to give it a little time to bake so I can minimize the emergency work while on vacation.
The original design actually had a lot of (very slight) gradient backgrounds that I removed and made solid colors to help speed up the site (didn’t want to be a hypocrite). The nav bar wasn’t one of them though. I will see about making it feel a bight lighter with a smaller (or non-bold) font as well as making it a bit narrower though - getting more realestate back to the users is a good thing.
What i did:
1.) Reduced the font size of the main nav elements.
2.) Reduced the height of the main nav container.
3.) Did a glassy background.
4.) Made the “current” nav selection non-bold, underlined, and italic so that a user could get the appropriate visual queue without having to change the fonts color.
5.) Reduced the height of the container holding the “recent industry blog posts” and “recent discussions” text.
6.) Remade the “Start Test” button to be more glassy like and reduced its size so that it is still prominent but not drawing too much attention to itself.
7.) Used a slightly desaturated version of the current background color so that it is not drawing as much attention to itself (currently its a little distracting imo). For some reason the background in my mockup appears to have lines in it, if you see that just ignore it, the background is only a flat color (might be photoshops save for web introducing it).
If you can i’d also recommend moving, or reducing the size of, the ‘provided by AOL’ graphic. From a usability standpoint it’s drawing too much attention away from the navigation elements themselves.
Thanks. If you don’t mind me asking, what are the specifics for the glassy background (starting opacity, midpoint, ending opacity assuming a linear filter)? I’m going to create a single transparent png that I can use as a treatment on both the header and the start button (the optimizer in me ). Most of the others are pretty trivial to implement (and I wanted to shrink the AOL logo anyway). Some of them are live now and I have some more ready to go once I put the “glassy png” overlay on the nav bar.
I have never tried to use a .png for the glass/gloss look (most sites i work with have ie6 users), so i don’t know the specifics for it. For a proper gloss look you’ll want to have a lighter gray at the top and bottom and a slightly darker gray in the middle, then have a white bar blended over top of the result with something like a 50% opacity. If you want to be optimized, you can probably do it using only css, but you will then have to do without the three way gradient unless you want to get fancy with some css gradient implementations. You could then have a white div that is overlayed over the nav background and give it some transparency, which would act as the main highlight.
Thanks. I took a crack at it and it looks pretty good (given my non-existent design skills). I have the solid background color with a transparent png overlaid for the glass/gloss effect. Only did the header bar so far but I’ll see about converting the button to use the same overlay.
Yeah, doesn’t look too bad at all. Though i’d recommend making it just slightly more subtle. If you decrease the opacity just a bit more you’ll still achieve the same effect but give a bit more contrast to the text on top of it.
lol, thanks. I threw it in quickly as I’m getting ready to head out of town for the next week (and if I didn’t do it now I’d just forget). Thanks for your help with it.
Homepage: IE7 vs IE8
I think it must be made more clear (bigger text!) what browser version runs on each location. Choosing a test location is not just about geographical location of the machine, but also about which browser to use.
Remember my custom settings
Every time … I have to enter the custom settings for down speed, up speed and latency.
Please get a cookie to remember that! I’ll you forever
I just threw in #3 so your custom settings should be remembered across sessions now. It also remembers the state of the advanced settings window for the frequent advanced testers.
). Most of the others are pretty trivial to implement (and I wanted to shrink the AOL logo anyway). Some of them are live now and I have some more ready to go once I put the “glassy png” overlay on the nav bar.
you forever