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.
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.
What cartoon guy? That's me! LOL
Thanks for suggestions, nice ones, will definitely look into those.
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.
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?
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.
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.
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.
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.
LOL! That's a weight off my chest though!
Hi ralph, thanks for your suggestions.
OK, it seems this is generally agreed upon, so it sounds like a good idea.
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.
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.
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?
That's a really great work. Perfect layouts, colors and images. There is nothing that I would change!
Keep it up and good luck,
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.
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.
Grammar mistake on the speech bubble.
I'm an I.T. professional.
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
I'm a professional/I'm an I.T. professional.
I guess it's looking weird to readers though?
Maybe I'm right, but since it raises (an ) immediate reaction I'll change it to "an".
Thanks for noticing.
Thanks for taking the time.
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.
Some bits I learned myself, some bits I learned around here too, at SitePoint, from you also. Not wasted time at all.
A matter of interpretation, like any semantics. I’ll cover this in more detail below.
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.
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.
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
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.
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 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.
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.
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.
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.
next page →