itmitică - My personal professional site - Have your say

[itmitică]

itmitica.com

After almost a year since I first decided that it's time to make one for myself, I finally have a graphic design I like. Right now I took the whole site down and only left the first page, and I'm turning my self deeply onto the media queries and backend parts, but I'd like to hear opinions about the way it looks.

Thanks for any and all comments.

itmitică

[erickillebrew]

Nice Layout, would definitly want to add links to each of the topics you are covering ithere for example: Debug make that a link and be sure for a professional website to list specific achievements for example write how you debug I.T. difficulties and specific examples of how you have done so in the past.

The top part of the website is really nice i like that cartoon guy and the banner and logo are great looking

I also feel like there should be something to separate subjects you have like the red and blue sqaures give a sense of seperation between the topics but the subjects below are lacking a clear division beside being bold and indented.

[itmitică]

What cartoon guy? That's me! LOL

Thanks for suggestions, nice ones, will definitely look into those.

[kohoutek]

Hey Mitica,

it's a nice design, definitely very solid and clean. While I like that you have an illustration of yourself on the homepage to give it a more personal feel, I find it's still a bit lacking in that regard. I'm missing some kind of introductory text, be it about you, your skills, a good sales-pitch, something that entices me to want to hire you, something more engaging/inviting/personal.

I'd also create more descriptive icons. They're adding to the slightly "sterile" feeling I am getting when viewing the site.

Oh, and I noticed when I switch from English to Romanian (and vice versa) the layout jumps.

Other than that, I like it a lot.

[itmitică]

Hello Maleika! Good to see you again and thanks for taking the time!

Some good points. Now it definitely seems like I'd have to add some more icons, like Eric also said, for the subcategories. It also seems I'm gonna need some stories in there, next to my cartoon face Maybe an animated slider with news and stuff to keep my visitors interested and on the edge.

I'm not sure what you mean though when you say the layout jumps...? The content is different in "size", in "weight" for those two pages: Romanian (itmitica.com) and English (itmitica.com/en/)... It's a jump to another page, it's not an AJAX in the same page. Maybe this is what you expected, an AJAX in the same page?

[kohoutek]

Good to see you too.

No, I meant the button itself makes the page "jump" left or right by a few pixels, depending on what language version it is. It's not happening in FF or Opera, but it's clearly visible in Chrome.

[itmitică]

I tried to catch the glitch, I just can't seem to be able too. It looks fine on my W7/Ch 17.0.963.56 m. It's probably because of the pseudo fluidity in the CSS that's supposed to temporarily replace media queries I'm looking into now. It may also be affected by the translation bar appearing/disappearing in your Ch?: unlikely

Most likely: the element is set at 41% from the left, and that's what's causing the "glitch", transforming the relative value into effective value. Rounding happens differently in UAs.

[kohoutek]

No, it isn't the UA as you'd see it in your Chrome version, too. It's in fact the scroll bar that appears in one version and not in the other! Duh. I didn't notice it. Shame on me.

[ralph.m]

I agree that more introduction is needed—to make it crystal clear what the site is for. Also, on my large screen, I don't like the way there is white space under the footer. That's Design 101 to me. How about making the body bg color the same as the bottom of the footer gradient, so that the footer color merges into the background?

I also don't like the lowercase i.t. in "home for your i.t." It doesn't look right to me or read too well. It's better to use capitals for an initialism like that. I know capitals aren't cool any more (like everything else that is right), but as I say, it just doesn't read well anyway.

[itmitică]

No, it isn't the UA as you'd see it in your Chrome version, too. It's in fact the scroll bar that appears in one version and not in the other! Duh. I didn't notice it. Shame on me.

LOL! That's a weight off my chest though!

[itmitică]

Hi ralph, thanks for your suggestions.

I agree that more introduction is needed—to make it crystal clear what the site is for.

OK, it seems this is generally agreed upon, so it sounds like a good idea.

Also, on my large screen, I don't like the way there is white space under the footer. That's Design 101 to me. How about making the body bg color the same as the bottom of the footer gradient, so that the footer color merges into the background?

I agree and I actually thought about the footer part, except I'd like to keep the color for background for body white. I'll cover this one as well.

I also don't like the lowercase i.t. in "home for your i.t." It doesn't look right to me or read too well. It's better to use capitals for an initialism like that. I know capitals aren't cool any more (like everything else that is right), but as I say, it just doesn't read well anyway.

This one is already changed, not only in the tagline but in the menu as well. I kept the lowercase on the rest though, I like it that way Thanks again.

[itmitică]

I'm missing some kind of introductory text, be it about you, your skills, a good sales-pitch, something that entices me to want to hire you, something more engaging/inviting/personal.

I agree that more introduction is needed—to make it crystal clear what the site is for.

I've added a callout of introductory text, about me and my skills, a little engaging/inviting/personal sales-pitch, to shortly describe what the site is for. Is it?

[Fokebox]

That's a really great work. Perfect layouts, colors and images. There is nothing that I would change!
Keep it up and good luck,
Fokebox

[deathshadow60]

Fixed width too big for my netbook, too small for my desktop, px fonts have accessibility issues, the indent on the H4 looks more like error than intentional, the grey on grey has legibility issues due to insufficient contrast, the social buttons overlapping the columns above them looks like a rendering error, as does the uneven/excessive padding at the top and bottom of those areas.

The h2 for the tagline makes no sense since it's not starting a new subsection...

Your filesize and counts are PERFECT... 76k in only 15 files. WELL DONE!!! Loving it. We need more people doing that with their pages!

Let's see under the hood... HTML 5 nonsense for nothing (not a fan), why isn't the menu in a list? Excessive number of wrapping elements given everything is fixed in size, Again the H1/H2 thing that doesn't make any sense... (I'd move the h2's content into the H1 in a small tag, then demote the rest one level)... why isn't your menu in a list? With no block level containers you have a runon sentence:

"Home I.T. Tender Articles About" -- doesn't make much sense as a sentence. Remember anchors do NOT change the semantic meaning of what you put them in.

You're using an aside on an element that... well, isn't breaking the fourth wall; it's not an aside. Aside semantically in markup does not mean "off to one side" or sidebar; or float; it means content with which the main content it's related to still makes sense without, but that further expands upon the concepts. It's not for "setting it aside", it's for "further expanding a concept or letting the audience in on behind-the-scene details". This is the HTML 5 element that is probably going to see the most mis-use and abuse; even the people writing the specification can't figure out what it's really for

The DIV.row don't seem to serve any real purpose, the wrapper in the footer doesn't seem to serve any real purpose, the anchors in the footer are also a run-on (while that HTML 5 nonsense 'nav' is just a waste of an element on the DOM)...

But at least the code is compact; you cut away the HTML 5 'bloat for nothing', tweaked the semantics slightly, got it into at the very least a semi-fluid or switchy layout, you'll be on to something.

[ralph.m]

I've added a callout of introductory text, about me and my skills, a little engaging/inviting/personal sales-pitch, to shortly describe what the site is for. Is it?

It certainly does help. Just on the grammar, it would be better to add "an" here:

I'm an I.T.professional

I guess the only other thing I'd recommend it to have some kind of text fallback for that callout for those not able to read image text.

[TehYoyo]

Grammar mistake on the speech bubble.

I'm I.T. professional

to

[quote=speech bubble]
I'm an I.T. professional.
[/quote

~TehYoyo

[itmitică]

That's a really great work.
Fokebox

Thank you.

[itmitică]

It certainly does help. Just on the grammar, it would be better to add "an"
[...]
I guess the only other thing I'd recommend it to have some kind of text fallback for that callout for those not able to read image text.

Hello ralph,

Thanks for looking again and thanks for reminding me about a text alternative for the callout text.

About the grammatics. To be honest, I wasn't so sure about this one my self.


My logic was like this:

I'm professional/I'm I.T. professional

instead of

I'm a professional/I'm an I.T. professional.


I guess it's looking weird to readers though?

Grammar mistake on the speech bubble.
~TehYoyo

Hi TehYoyo,

Maybe I'm right, but since it raises (an ) immediate reaction I'll change it to "an".

Thanks for noticing.

[itmitică]

Hi Jason,

Thanks for taking the time.

Let’s see.

Your filesize and counts are PERFECT... 76k in only 15 files. WELL DONE!!! Loving it. We need more people doing that with their pages!

Subject of future improvements.

Counts will be lower once I “sprite” some of the images. I didn’t do it yet, I wanted to first see if other graphics turn up, at least for the home pages.

The reason is that I haven’t found an automated tool to do a decent job at “sprite-ing” so I have to build the sprites by hand if I want the canvas space in it to be used efficiently.

I use HAML and SASS. I love them. I tried Compass. I love Compass less. Sprites in Compass, like in some other automated tools for sprites, can be canvas space wasters since they create only a column/row of graphics by default. One may tweak this, but it will be satisfying only up to a point.

If the images don’t have comparable dimensions, one of the bigger image will dictate the maxwidth/maxheight of the final sprite, while the rest of the images will only occupy down to only a small portion of their assigned column/row.

If one can live with that, it’s fine, it’s not that much worse. I’ve decided I’m going to manually build it. Just not yet.

But at least the code is compact; you cut away the HTML 5 'bloat for nothing' [...]

Some bits I learned myself, some bits I learned around here too, at SitePoint, from you also. Not wasted time at all.

The h2 for the tagline makes no sense since it's not starting a new subsection...[...]

[...] tweaked the semantics slightly [...]

A matter of interpretation, like any semantics. I’ll cover this in more detail below.

[...] got it into at the very least a semi-fluid or switchy layout [...]

Fixed width too big for my netbook, too small for my desktop, px fonts have accessibility issues [...]

Subject of future improvements.

The fixed width with pseudo fluidity are poorly substituting media queries I’m cooking at the moment. A reminder never hurts though.

[...] the indent on the H4 looks more like error than intentional, the grey on grey has legibility issues due to insufficient contrast, the social buttons overlapping the columns above them looks like a rendering error, as does the uneven/excessive padding at the top and bottom of those areas.

A matter of taste.

That’s intentional design, every bit of it, and I like it, especially the part where I overlap the columns with the social buttons. It suggests a 3D perspective, in tone with the header. I'll push them up a little, and increase the padding on h4, see if it's better.

Some may like it, some may not. If I get enough negatives, I’ll consider a change.

I’m not sure what you mean about uneven padding. On the contrary, they’re pretty much evenly padded and aligned with each other.

Let's see under the hood... HTML 5 nonsense for nothing (not a fan), why isn't the menu in a list?

[...] why isn't your menu in a list? With no block level containers you have a runon sentence:
"Home IT Tender Articles About" -- doesn't make much sense as a sentence. Remember anchors do NOT change the semantic meaning of what you put them in.

[...] the anchors in the footer are also a run-on (while that HTML 5 nonsense 'nav' is just a waste of an element on the DOM)...

A matter of interpretation.

Lists are easily abused.

A list, in a broader meaning, almost always exist outside the ul/ol element too. You could either write:

red, orange, blue

or

o red
o orange
o blue

My menu is a list, an enumeration. It’s not a sentence, I use nav and not p. As such, it’s not suppose to be looked at as a sentence, you should not try that, it’s wrong.

To summarize, I use nav elements: siteMenu, socialLinks (my choice, that I like, you may not, that’s fine, but it exists) w/o redundant HTML list elements since I have no other elements in them but links. It’s an enumeration and self explanatory. Using a list element also would mean an overkill, a tribute to a habit.

Excessive number of wrapping elements given everything is fixed in size [...]
[...] the wrapper in the footer doesn't seem to serve any real purpose[...]

As I understand, you believe I should have only one wrapper, for body.
But that’s a different solution for a different problem.
My design asks for a wrapper in each header, section, footer. That makes for three wrappers.
I need every one of them, maybe it’s not that obvious at this point, with the current content in the footer, and it doesn’t look excessive to me.

The DIV.row don't seem to serve any real purpose [...]

The div row purpose is to top align every other h4 after every other h3.

Actually, that’s one solution I’m pretty much proud of thinking it. It seems you were expecting more of those, and that sent you off on a wrong path, but I used the minimum required to get the job done.


With the previous three wrappers, a total count of seven wrappers still doesn’t look excessive to me.

Again the H1/H2 thing that doesn't make any sense... (I'd move the h2's content into the H1 in a small tag, then demote the rest one level)...

A matter of interpretation and probably taste.

For me it doesn’t make sense what you’re proposing. While you may say mine pushes the envelope, I would say yours pushes the boundaries.

For you it’s wasting the h2. For me it’s bloating the h1. Something like „anchors can be anything”, a big container for images, text and even whole document portions. Which I don’t agree with. Not that you do. You probably don’t.

You're using an aside on an element that... well, isn't breaking the fourth wall; it's not an aside.

A matter of interpretation.

To be clear, choosing the aside for language redirect had nothing to do with the CSS positioning and style part.

For me, changing the language for a website is an aside service, provided outside the content in the page, and outside navigation between pages for a specific language of that site.

[kohoutek]

I like it much better with the speech bubble, though, as TehYoyo said, you have a syntax error in there. In English you need an article, unlike in many other languages.

[itmitică]

Hi Maleika,

In course of changing that and adding a few tweaks as ralph and Jason suggested.


On a side note, I'm sure English grammar is nothing like Romanian grammar, but I was thinking:

I'm I.T. professional (I belong to the I.T. tribe, like I'm Romanian, I'm German)

vs.

I'm an I.T. professional (I'm an individual with I.T. training, like I'm a Romanian, I'm a German).


But I agree it sounds weird to most and it's a no keeper.

[kohoutek]

I see your logic, and that actually would be correct in German, but in English this is considered an error. Before a job description phrase, you need an article.

[itmitică]

So I guess no I have to say thank you twice

[DaveMaxwell]

Visuallly, it's nice. I'll gloss over the technical discussions since those are already taking place, but here are the things which jumped out at me:

• Is that a comma or period after "Hello". If it's a comma, it should be a period (IMO). Either way, the word my should be capitalized on the next line. It also seems like there should be a word after I.T. (problems, difficulties, issues, etc) for the sentence to make sense gramatically (in English at least)
• The tagline gets lost on the overlay of the planet. Outlining one of the two (either the world graphic, or the words) might solve the view problem.
• The planet looks off, and I think it's 90% because of the opening at the top. Not sure how to fix it, but it looks squished at the moment....
• If there's a drop shadow on the image right below the world, it needs to be more pronounced. It looks like there's one there, but it looks like a mistake next to the language button.
• I personally would move the header (the mt logo and the menu items) farther out on each side. Right now, they look indented, which looks odd...
• Either the boxes on Consulting and Education need to be shorter, or the social media icons need to be dropped lower or higher. Right now, the 1/2 on, 1/2 off of the twitter and facebook icons look to be a mistake. Personally, I would vote for making the boxes shorter and getting rid of the vertical scrollbar which doesn't look like it's needed.
• The footer doesn't look like it matches. It's the only item with rounded corners (yes, the column colored boxes are rounded, but very slightly. The color is also very harsh and draws your eyes to it too quickly and causes usability and eyeflow problems.

[itmitică]

Hi Dave,

Thanks for looking over. Very good suggestions. Already put some of them to good use.

Is that a comma or period after "Hello". If it's a comma, it should be a period (IMO). Either way, the word my should be capitalized on the next line. It also seems like there should be a word after I.T. (problems, difficulties, issues, etc) for the sentence to make sense gramatically (in English at least)

Nice ones. It really is better like you've suggested.

The tagline gets lost on the overlay of the planet. Outlining one of the two (either the world graphic, or the words) might solve the view problem.

I've outlined the world, it's not good. I may use some text shadow on the tagline.

The planet looks off, and I think it's 90% because of the opening at the top. Not sure how to fix it, but it looks squished at the moment....

I'll rotate it, put some solid above.

If there's a drop shadow on the image right below the world, it needs to be more pronounced. It looks like there's one there, but it looks like a mistake next to the language button.

I actually made that one softer by intent. It supposed to be a check mark disguised as a house ("home for your I.T.") w/o a roof, from a soft material, so it wouldn't cast a strong shadow. However I made it stronger now, not sure if it's better though.: update, not better, reverted.

I personally would move the header (the mt logo and the menu items) farther out on each side. Right now, they look indented, which looks odd...

It's "mit" logo, from mit, as in mitica+it, or m+it, or simply mit as short for Mitică

They are indented, I don't like them being on the edges.

Either the boxes on Consulting and Education need to be shorter, or the social media icons need to be dropped lower or higher. Right now, the 1/2 on, 1/2 off of the twitter and facebook icons look to be a mistake. Personally, I would vote for making the boxes shorter and getting rid of the vertical scrollbar which doesn't look like it's needed.

The footer doesn't look like it matches. It's the only item with rounded corners (yes, the column colored boxes are rounded, but very slightly. The color is also very harsh and draws your eyes to it too quickly and causes usability and eyeflow problems.

This one throws people off it seems. And I'm glad it does. But I'm afraid you're making a confusion here. The columns only serve as a display wall for them, they're not making part of the same element.

The social links and the copyright note are all in the footer. I raised the footer over the section element above to make a 3D effect for the icons similar to the one in the header (like them standing over a hill or something), so they all are at the same level. They were lower, but Jason suggested to put them higher.


If you mean the copyright note is too dark, I'll see if I can find another way to create a contrast there.