ED DESIGN

[diogo]

Hi guys,

As some of you know I'm part of the Milktop team, but strategically we decided to go back to the format we had one year ago and recover ED Design, my collaboration with Erika. Today we are launching our website.

http://ed-works.com/

This is a soft launch only for the PW community because I trust that this is the best place possible to have a site tested
I hope soon I can write a case study.

Hope you guys like it!


(still some work to be done concerning SEO and accessibility)

[SiNNuT]

Great looking site! Some observations from a 5 inch (xperia z) smartphone, android 4.4.2 and chrome and firefox:

- The top language menu is quite hard to operate due to it's small height. When i tap precisely i can operate it in FF, in chrome however, when i do get the language menu to open up i at the same time seem to be hitting a home link, making it impossible to switch languages.

- When i open and then close the main menu the background color remains grey. Not sure if this is intended because in the initial closed state the menu background is just white, in line with the rest of the page.

- The project images that rotate on the homepage have different heights, causing the funny effect (at least to me) that the content that comes beneath it keeps getting nudged up and down.

That concludes my quick points, written while hunting for bloodthirsty mosquitos that are keeping me from sleeping

[horst]

Great Site!

I have chosen the german language on the desktop (win7 FF31) and mobile (iOS). Everything looks very good.

My only thought: maybe the navigation arrows under the sliders should also be visible on the desktop?

Have found 2 or 3 typos:

• not sure about a typo: "unter der Verwendung eines der fexibelsten Content Management Systems." => should it be "... Content Management Systeme." ?
• sure a typo at page signature: "komminiziert" => "kommuniziert", "Merzedes" => "Mercedes"
• typo (or not?) at http://ed-works.com/de/projects/small-mobile-big-hands/ : "wurden mehrerer Notizbücher" => "wurden mehrere n Notizbüchern" ?
  "Radaktion" => "Redaktion"

I wish much success and good customer! 

[diogo]

Thanks a lot for your comments and suggestions Horst and sinnut. Now I'm on mobile, but will address them later.

[totoff]

Very sleek, very cool, very wonderful.

However, some comments on the German version:

I'm on chrome (latest) and win 8.1. the font looks very washed out, fuzzy (see screenshot).

Generally speaking, the copy-writing could be a bit more let's say "laid back" or "inspired". Some examples:

"Unser Service umfasst, aber beschränkt sich nicht auf:" -> very complicated sentence. why not make two sentences out of it?

"Nach einigen Wochen intensiver Arbeit ist unsere neue Webseite endlich geschaltet!" -> "Nach einigen Wochen intensiver Arbeit ist unsere neue Webseite endlich online!" Yes, online is an English word - but wtf, it sounds better. And - advise from an advertising guy - no one cares if it was weeks of hard work. It's online, that's the news that matters).

"diesen ganau zu befolgen" -> "diesen genau zu befolgen" - but apart from that, that's kind of officialese, somehow not the perfect fit for a portfolio website.

Just a few examples. If possible for you, I would suggest to get in touch with a German friend who is experienced with copy-writing. I'm sure she/he could contribute to your website.

But, apart from that, great design, great functionality. Cool. 

[diogo]

Thanks totoff, I sent your suggestions to Erika.

[SiNNuT]

Very sleek, very cool, very wonderful.

However, some comments on the German version:

I'm on chrome (latest) and win 8.1. the font looks very washed out, fuzzy (see screenshot).

..........................

Chrome on Windows always has horrible webfont rendering is my experience, even common stuff like Open Sans looks quite bad.

If you take for example the new minimal site profile that comes with PW dev; it uses

<link href='http://fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />

On FF and IE it looks fine but on Chrome it looks quite bad. This is a known issue and there are some workarounds that can work out pretty nicely but you gotta try which one works best on a case by case basis. It's been a while since i had to deal with this issues but there's enough info if you google for 'windows chrome webfont rendering fix' or something like that.

In the past i've had quite good results at putting the webfont locally and changing the order so that Chrome gets a svg webfont.

http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

[diogo]

- The top language menu is quite hard to operate due to it's small height. When i tap precisely i can operate it in FF, in chrome however, when i do get the language menu to open up i at the same time seem to be hitting a home link, making it impossible to switch languages.

- When i open and then close the main menu the background color remains grey. Not sure if this is intended because in the initial closed state the menu background is just white, in line with the rest of the page.

- The project images that rotate on the homepage have different heights, causing the funny effect (at least to me) that the content that comes beneath it keeps getting nudged up and down.

Addressed first and second points and planning the third.

I'm on chrome (latest) and win 8.1. the font looks very washed out, fuzzy (see screenshot).

I installed montserrat on the server and changed the order from the formats as suggested in the article linked by SiNNuT. totoff can you check how it looks like now?

Very sleek, very cool, very wonderful.

(...)

But, apart from that, great design, great functionality. Cool. 

:)

Thanks again for the suggestions, we really appreciate!

[wayne]

In theory there shouldn't be such a big problem with fonts on the latest Chrome for Windows, if DirectWrite is enabled.

It's not an experimental feature anymore. Under the URL "chrome://flags/" DirectWrite should be activated.

Maybe there are still some quirks, but for me it looks quite similar or even identical to IE and FF.

[diogo]

- The project images that rotate on the homepage have different heights, causing the funny effect (at least to me) that the content that comes beneath it keeps getting nudged up and down.

I half solved this. I still wanted the images to have different weights, but now I pause the rotation when you scroll the image up. I think it's a nice compromise

@totoff, can I ask you to check the font again?

[SiNNuT]

I half solved this. I still wanted the images to have different weights, but now I pause the rotation when you scroll the image up. I think it's a nice compromise

@totoff, can I ask you to check the font again?

That pause solution works fine.

About the font: I tested this on my Win 7, 17 inch laptop (1920x1080). For me it's looking pretty good on Chrome, although it's has less weight than how it is displayed in FF and IE. I threw together the schreenshots. I also noticed that in IE the menu bar is always grey.

https://dl.dropboxusercontent.com/u/14376901/ed-works.png

[diogo]

Thanks for the testing Sinnut!

[totoff]

@totoff, can I ask you to check the font again?

Sorry diogo, I was offline for more than a week (vacation). The font looks pretty good now on my machine.

[Mike Rockett]

Quite an interesting site, I must say. Love the fact that it's just different.

With regards to the font, all my browsers are rendering just fine. The issue at hand is with regards to DirectWrite. If it's turned off, it doesn't look so good at all. But, as stated already, it should be on by default now, so the majority of Chrome users will see the correct rendering.

With regards to the grey button, that's a silly IE thing that Redmond has never, ever bothered to change. Alternatively, it's the order of your CSS rules. By that, I mean that you are declaring a color for all buttons after you're declaring them for the menu in particular. Still, that seems to be an IE thing, because no other browser has an issue. I think adding !important to the rule for the menu button should fix it. I know, using that flag is bad. But sometimes, you just gotta use it anyway, because it does its job.

I find it quite interesting that you chose to use a strike-out on the bottom menu links when viewing a page. Any particular reason why you chose to do that?

[diogo]

Thanks Mike! I had forgotten that SiNNuT referred the grey background, and didn't take care of it. I added the !important and according to BrowserStack the problem seems to be solved! We added the strike-out to the active link after our first very professional usability test (with my sister ). We chose the strike-out after trying changing the color to green, but that didn't go well since in our system the color represents the links, and this link is deactivated. The strike-out besides being a very clear visual differentiation, also tells you that you can't press that link.

---

I did some —well, a lot— optimisations on the website concerning speed. Would be great if you guys could tell me how the site feels like now, especially those on the other side of the ocean

[cstevensjr]

Looks great and loads fast from Southern California.

[Mike Rockett]

@diogo - I see, great stuff Works great.

In terms of speed, from here in SA, an initial complete reload took 5.92 seconds over 34 requests, including render-time. DOMContentLoaded (before assets) was 1.41 seconds.

[diogo]

@Mike, sound ok, thanks! I reduced the amount of pictures in the slideshow on the homepage to make those times a bit better

[Mike Rockett]

Does seem a tad slower though... Loaded up in just over 6 seconds this time around. Then again, yesterday's results were also a bit jumpy. First test was under 5 seconds, second test was as I mentioned before, and the third test was over 7 seconds... Nonetheless, load times are good enough, the way I see it.