Please rate my website (digital agency)

Hello,

I'm front end web developer and I'm freelancer, I've started my digital agency LIONET in Ireland (Dublin).

Please review my website, I would really appreciate this.

www.lionet.ie

Regards,
Igor

 

Good work done Igor , (Y)

 

Thank you Sam, however I've met some opinions that for example theres too many fonts, and chaotic layout...

 

1) on my browser (Safari), the checkbox for EU cookie compliance moves.
2) On your "About", I think you should add some more. Integrate your vision for customer service, creativity, forward-thinking, accountability, etc. Also, and please don't be offended, it reads like it's been translated. Let a fluent English speaker give your copy a good going over to iron out things like "In my life, as far I can remember I'm always trying to be a perfectionist as much as possible, why?
well I'm believing the world would be so much more interested." This is great sentiment. But grammatically, it's comes across very stilted.
3) Your "Analyze, Mockup, etc" sections need to be filled out, but you probably already know that.

Good start, lots of work to do,
Sebastian James

 

Thank you so much Sebastian James, the issue with "about me" is I don't have any idea what should I've put, however I will put something more.

Thanks again
Igor.

 

If I was looking for someone to do a web site and saw this it would knock you completely out of consideration. Presentation is about 20% of web development; but it looks like that is where you put in 90% if the work to produce a technical disaster just wait for a the right combination of factors to blow sky high.

The validator reports 40 errors, before it gives up and quits validating at line 267. I don't if it quit because of the in valid way the page is attempting to close with the sequence </html> then comes </body> and another </html>. I don't know where you think you learned HTML, but obviously you need to learn the basics like not using obsolete and depreciated attributes and not having duplicate ids. Structurally it is about as stable as quicksand. This is the validator output:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

I have not even mentioned the slow loading because of the bloated graphics load, but it does not matter. If all you can do is frontend and that is your best effort; I suggest you invest some time learning basic technical skills, because successful website don't necessarily look like art, but they work, are technically sound, and are not about presenting design skills when what they are trying to do is sell something.

 

First of all, allow me to state this: I understand that you didn't join this forum to read only positive and noncritical comments about your website, which by definition bring nothing of value to it. If the only thing you get from this is "good job, well done, great website (etc)", you're either being lied to, or the comments are simply made by people who don't know much about the subject and find the website and/or the concept clever, aesthetically pleasing (i.e. unprofessional and subjective opinions that, again, bring NOTHING of value whatsoever).

That said, I also do NOT want you to think that I'm trying to "rip you a new a-hole" , even though it may seem like it. The purpose of that approach is to completely eliminate all parasitic emotion that may interfere with common sense and lead to ignorance.

To begin, let's put the technicalities aside and only consider the user experience in first person.
The very first moment I visit your website, while not having a clue what it is going to be about (correctly assuming that the domain name doesn't give out any), the first thing that comes to my mind is that your website is painfully slow. I will talk about this later, but for now, I can affirm that 4 out of 5 visitors will "bounce" AT LEAST. Very few people will have the patience needed to wait for your website to load. Those who make it through won't be thrilled either. The first thing they will get to see is a picture of a lion (?!), that weighs no less than 1 whole megabyte, which is already the DOUBLE of the upper limit of the recommended size for the markup + css + scripting + images, and that for the whole page!!! That, right there, is a serious problem. On a side note, that image shouldn't be content image, but a presentational one (even though the latter is AS RIDICULOUS), but we will talk about semantics later.
Aside from that (useless) content (?) image, you've got some illegible text (white on light gray = NOT GOOD) and a button that a) doesn't look like one and b) doesn't even work with javascript off! The rules of progressive enhancement clearly state that you have zero reason to add scripting to your website if it's already a broken mess without it.

Scrolling down, it doesn't really get any better. As the header pops out (and get this - it doesn't if js is off!), the only thing I'm left with is your lion's nose, at which point I can already hear Morgan Freeman's voice in my head...
Given that all your fonts are in pixels, which is an accessibility suicide, your tiny logo is barely visible on my big screen, while being perfectly fine on handheld devices.
The rest is riddled with pointless scripting which would piss of anyone that didn't bounce already, some more huge pictures that bring nothing of value while making your website even slower, more illegible color contrasts - light gray on light green, white on light gray (????). To quote M&M, "Blue-and-red, like I don't see what the big deal is"...

Focusing on your source code, it only gets worse... A complete lack of semantics, endless, pointless DIV for no apparent reason, SPAN doing a heading's job, H3 and H4 without H1 and H2 preceding it. I mean this : <div id=span></div> #FAIL On top of that, you still use CENTER which is obsolete for almost 2 decades, paragraphs that should be headings, as well as BR doing css's job. All that pointless scripting just makes it worse, and of course, the inevitable jQuery. #FAIL All that scripting alone takes 5 websites' worth of space. No wonder why your website is so painfully slow.

Bottom line : over 40 markup errors (100% presentational) 44 handshakes, all equaling to -- disaster. As much as I don't enjoy saying this -- nothing to salvage here.

Again, I am sorry if I was to harsh here, but that's reality. To prove to you that I'm not a hater, I'll toss in a complete rewrite here on the forums, if you want it of course.

 

Its okay, thanks to your opinion I can fix problems, also I fixed some problems posted before (w3c validator showing 12 errors only instead of 40 )

The CTA is Lion as you can assume lionet - name of my agency .

The website is created only from mobile devices till 19' inch monitor (in future will be media queries for bigger screens).

 

Hm. Other comments (purely estethical, as I haven't looked at the actual code):
First off - you're using too many font-types.
Second, your colors is a bit lacking. When scrolling (not using the top menu), the headings for each part of the content are hard to see, and have no connection to the actual content below it - when using the menu, the heading disappears alltogether (behind the top / header / menu-bar) and leaves no information (apart from the colored active menu-item).
Third: in "workflow", all you have is an open space, and a black line up top, which shows something when hovered (haven't tested on a touch-screen, but how does that work there?) - when clicking on the link, I get taken to a website which asks me in Polish and English what language I want - just, no - never, ever have a landing/loading page with language-selection - base it on whatever the user-agent is reporting (or set a default language), then people can chose to change it if they need to. Besides, the page that loads doesn't work on a full-screen, full-HD LCD - the button gets covered by the text, and isn't clickable. Not the best ad for your work. Nor does links to your portfolio have anything to do with the word "workflow". If this is the portfolio, you should change it to that.
The text in the "about"-section flows to the right (looks misaligned on my screen).
And as others have commented, there are both structural flaws and bad markup behind the scenes.

As for the look and design, I find it... I dunno. Sort of blunt. I would perhaps create a proper, smaller logo with a lion in it, and use that in a header, instead of as a background on only the top - it's useless, and the "explore" button is pointless - people coming to your site will most likely try to figure out what you do, and what you can do - so provide some info at the beginning, before "the fold", so that potential clients don't have to search for, or try to track down the information they're after.

 

Thank you so much for opinion, I think I need to change maybe the whole website...

 

@Phil S hit most of the salient points; it's a train wreck of scripttardery, artsy fartsy bull to cover up for a lack of meaningful content of value, and the code is just outright gibberish. It's a laundry list of how NOT to build a website. From the goofy scrolling tricks, inaccessible design with zero graceful degradation, and HTML that reeks of "semantics, what's that?" that you have a "design agency" at all simply makes me pity anyone DUMB enough to be wowed by your very pretty but ultimately useless form over function sites. If the stuff you do for other people bears any resemblance to what you've done to yourself, it may be time to back away from "design" for a while.

You have 3k of plaintext, and not one single image I'd even consider content -- so what the blue blazes is it wasting 12.7k of markup on, much less a batshit insane 1.21 megabytes in 41 separate files?!? You don't even have enough content to fill a 1920x1080 screen, but you've spread it out with annoying bounce-inducing garbage to take three scrolls down to even find something meaningful!

ONE POINT TWENTY-ONE MEGABYTES?!? GREAT SCOTT!

No media targets for the CSS embeds, 82k of CSS in 6 files when there's no legitimate excuse for 99% of websites to need more than 48k of CSS and two CSS files per media target, a FULL MEGABYTE OF SCRIPTTARDERY on a site that probably shouldn't even be USING javascript, two conflicting versions of jQuery, overstuffed keywords meta (that completely ignores what meta[keywords] is even FOR), LINK pointing at a JavaScript (what the?!?), illegible bandwidth wasting webfonts, illegible colour contrast, garbage broken attempt at being responsive, massive background images that have ZERO business on a website, false simplicity through abusing placeholder-type text instead of proper labels, willy-nilly formatting...

Progressive enhancement, semantic markup, separation of presentation from content, accessibility norms like those outlined in the WCAG -- have you even HEARD of any of those things?

Don't take this the wrong way... no, scratch that, go ahead and take this in as wrong a way as possible; if this is what you would do for a site for yourself, you have ZERO business making sites for anyone else. Do yourself a favor, back away from the code until you learn what HTML is, what CSS is, what logical document structure and content first development is, and don't even TRY making a website until you understand those things.

That said, it's VERY much what I expect when I see a HTML 5 doctype, jQuery... or even the mere presence of the word "agency" on a page.... and as you can probably tell, that's not a good thing. I don't know who taught you to build a website that way, but they packed you so full of sand you might as well go down to the courthouse and have your name legally changed to Sahara.

 

Everyone is so obsessed with looking at your HTML people forgot to look at the visual of your page... Personally...I like the direction you are going but it looks like you are trying to do too much... In fact it looks like you have been influenced by a lot of trends and visual features of other sites you tried to combine them all together. I think it's over kill. Less is more.

You also have to correct an error... When you click on "Workflow" it takes you to a content section with a big header that says "Worfklow"

 

Really good point -- I tried to mention it, but it got lost in everything else. The visuals and usability are so bad the first thing I did was try to use heading navigation to see if I could find anything useful or disable CSS to try and get at the content which is where the lack of semantics, rubbish code and graceful degradation became the focus... but yeah, let's talk the appearance!

The "giant picture of a lion" with ZERO page content with the goofy scripttard menu hide? Might as well be a splash page; guaranteed to make people think "this site has no content" and bounce. We've been told for fifteen years to stop doing that; stop doing that! The most important thing on a site is the CONTENT, so move your blasted content up. The plans/services should be front and center alongside that contact form -- those are the two most important things on the site, and they're so far down most people will give up before they ever even find them!

The blue-green on blue-green form is illegible, the font sizes are useless rubbish, the MASSIVE padding and spaces between sections puts so much below the fold most people aren't even going to get to what's ACTUALLY important on the page -- there's that annoying animated slide-in crap (the "process" section) that seems to serve no purpose other than a bunch of unrelated pointless words that seem to have nothing to do with what the site is about (striking me more as a artsy "look what I can do with CSS" than actual useful design)... and now it looks like you added some scripttard warning about cookies making it even MORE likely to be bounce-city.

... and the willy-nilly inconsistent padding / slap things into the page any old way is disastrously bad.

As I said, there's not enough actual content on the page to have it take up more than 1 or maybe 1 and a half screens at 1920x1080; there isn't enough content or subsections to even bother having a MENU for that matter, much less the goofy scripttard auto-scroll nonsense. You mix in the lack of semantics preventing heading navigation, lack of graceful degradation so if anything is broken/missing the whole page is banjaxed, and host of other "how not to design a website" issues is why I'd say pitch the whole mess in the trash and start over.

@lionet, I have some spare time being the weekend with no doctors appointments and being home for a change, I might do one of my rewrites/breakdowns of how I'd approach delivering that same basic content just to show you what we're talking about in this thread both in terms of using HTML/CSS properly, and making the page useful instead of this vague painful scripttard mess. This would involve tossing most all of the visual concepts as to be brutally frank, just say no to the massive endless whitespace scrolling MESS! First order of business would be to clean up the markup, and put the content into a logical document structure.

When I build a site I start with the content (text and content images, NOT presentational images) or a reasonable facsimile of future content, and put them into a flat text editor as if HTML didn't even exist. I then markup things up semantically... If we look at the original, the semantics is gibberish.

1) Numbered headings -- H1 is the heading under which EVERYTHING on the page is a subsection, the H2 is supposed to mark the start of subsections of the H1, with H3 being subsections of the H2 and so forth... You have no H1 or H2 so how can you even HAVE an H3 on the page... and those H4, are " Alpha Pack", "Zeta Pack" and "Omega Pack" REALLY subsections of "05/05/15 - Fixing bugs for mobile friendly"?!? I don't think so... do you think so? That's what those H4 after the H3 means. Numbered headings imply structural depth and the start of subsections, they do NOT mean "draw text in different sizes"! Horizontal rules <hr> also function like headings, they mean a break in content / section where a numbered heading is unwanted or unwarranted. They do NOT mean "draw a line across the screen" since horizontal rules in professional writing (courses people taking web development SHOULD ALSO BE TAKING) can be conveyed by any number of means from page-breaks, to three asterisks, to a row of any number of different characters. All of this being why I consider HTML 5's idiotic SECTION, ARTICLE, NAV, ASIDE and FOOTER tags to be pointless redundancies.

2) Paragraphs around grammatical paragraphs -- this is funny as you have paragraphs around single words, paragraphs inside anchors around one or two words -- in other words around things that are NOT paragraphs, then you have line-breaks and DIV around your ACTUAL content paragraphs; your use of the tag is completely back-assward.

3) Lists for actual lists -- you've got a bunch of hyphens and line-breaks around "obvious lists".

At the semantic markup stage I don't declare DIV or SPAN since those have no semantic meaning, and likewise I don't tend to declare a whole lot of ID or classes unless it's really obvious it's going to need them. Those get added when I start creating the visual layout -- and I do NOT even THINK about the visual layout during the semantic markup stage since doing so is putting the cart before the horse; it's why WYSIWYG editors and preview pane bullshit is just begging for "epic fail" as big as the asshat nonsense many "designers" use of spanking it on the screen in photoshop and having the giant set of brass to call their inaccessible ignorant bloated trash "design".

Then and only then would I work on the semantics, headings and so forth...

The baseline semantic markup for a page like that would probably go something like this -- at least once I swung the axe at all the pointless crap that's either near invisible (that weird gray symbol mid-page) or serves no point (the goofy show/hide menu that doesn't even go anywhere but the same page).

<h1>
	<a href="/">
		LIONET - <small>Web Design Agency</small>
	</a>
</h1>

<h2>About</h2>
<img src="images/cirlceme.png" alt="About Igor Galicki" class="leadingPlate">
<p>
	My name is Igor Galicki, I'm Front End Web Developer based in Dublin. My passion is web designing and internet trends. <br>Since 2012 I've started working with web designing. In 2013 I have finished Web Development Programme in National College of Ireland in Dublin. I do have knowledge in HTML 5 / CSS 3 / JavaScript / PHP, also I've done some films with post production editing so I'm familiar with Adobe Photoshop, Premiere Pro and Sony Vegas.
</p><p>
	In my life, as far I can remember I'm always trying to be a perfectionist as much as possible, why? Well I'm believing the world would be so much more interesting.
</p>
			
			
<h2>Blog</h2>

<h3><a
	href="https://lionetblog.wordpress.com/2015/04/10/weve-started-our-blog-system/"
>
	10/04/15 - WordPress Blog has connection!
</a></h3>
<p>
	"...founder of web design agency which has started 8th of April 2015.I would really appreciate any shares..."
</p>
<a
	href="https://lionetblog.wordpress.com/2015/04/10/weve-started-our-blog-system/"
	title="We've Started our Blog System"
>Read More &raquo;</a>
			
<h3><a
	href="https://lionetblog.wordpress.com/2015/05/06/watch-as-a-gift-from-my-recent-client/"
>
	25/04/15 - Gift watch from my client!
</a></h3>
<p>
	"...has really nice and decent watches for gents (but also there are unisex versions)..."
</p>
<a
	href="https://lionetblog.wordpress.com/2015/05/06/watch-as-a-gift-from-my-recent-client/"
	title="Gift watch from my client!"
>Read More &raquo;</a>

<h3><a
	href="https://lionetblog.wordpress.com/2015/05/06/fixing-bugs-on-smaller-devices/"
>
	05/05/15 - Fixing bugs for mobile friendly
</a></h3>
<p>
	"...thanks to my friend I know there's little issues on android devices as well. Working as OMA..."
</p>
<a
	href="https://lionetblog.wordpress.com/2015/05/06/fixing-bugs-on-smaller-devices/"
	title="Fixing bugs on smaller devices!"
>Read More &raquo;</a>

<form action="contact.php" method="post">
	<h2>Contact</h2>
	<fieldset>
		<label for="contactName">Your Name:</label><br>
		<input type="text" name="name" id="contactName" required><br>
		<label for="contactMail">E-Mail Address:</label><br>
		<input type="text" name="email" id="contactMail" required><br>
		<label for="contactMessage">Message:</label><br>
		<textarea rows="4" cols="50" name="message" id="contactMessage" required></textarea><br>
		<input type="submit" value="Send">
	</fieldset>
</form>

<h2>Plan Packages</h2>
		
<h3>Alpha Pack</h3>
<ul>
	<li>4 Pages</li>
	<li>Hosting server and original domain ie, com, etc.</li>
	<li>Code and image optimisation</li>
	<li>Mobile friendly (Responsive Web Design)</li>
	<li>Search Engine Optimisation for 1 month*</li>
	<li>Favicon</li>
	<li>Social Media</li>
	<li>JavaScript and jQuery features</li>
	<li>High Standard<br></li>
</ul>
			
<h3>Zeta Pack</h3>
<ul>
	<li>Unlimited Pages</li>
	<li>Hosting server and original domain ie, com, etc.</li>
	<li>Code and image optimisation</li>
	<li>Mobile friendly (Responsive Web Design)</li>
	<li>Search Engine Optimisation for 3 months (free)</li>
	<li>Content Managment System</li>
	<li>Maintaing website (free) for 3 months</li>
	<li>Free video commercial for Your business (optional)</li>
	<li>Customer Service</li>
	<li>Favicon</li>
	<li>Social Media</li>
	<li>JavaScript and jQuery features</li>
	<li>High Standard</li>
</ul>
		
<h3>Omega Pack</h3>
<ul>
	<li>8 Pages</li>
	<li>Hosting server and original domain ie, com, etc.</li>
	<li>Code and image optimisation</li>
	<li>Mobile friendly (Responsive Web Design)</li>
	<li>Search Engine Optimisation for 1.5 month*</li>
	<li>Content Managment System</li>
	<li>Maintaing website (free) for 1 month</li>
	<li>Customer Service</li>
	<li>Favicon</li>
	<li>Social Media</li>
	<li>JavaScript and jQuery features</li>
	<li>High Standard</li>
</ul>

<h2>LIONET</h2>

Ireland<br>
Blanchardstown<br>
Dublin 15<br>
<br>
Phone: 089 956 1433<br>
contact@lionet.ie

<h3>FOLLOW LIONET.IE ON:</h3>
<img src="images/paw.png" alt="Paw of Lion Vector">
<ul>
	<li>
		<a
			href=https://www.facebook.com/lionetdesign
			title="Like Us on Facebook"
		>FACEBOOK</a>
	</li>
	<li>
		<a
			href=https://twitter.com/LionetWeb
			title="Tweet with Lionet Web Agency"
		>TWITTER</a>
	</li>
	<li>
		<a
			href="https://www.linkedin.com/profile/preview?locale=en_US&amp;trk=prof-0-sb-preview-primary-button"
			title="My Linkedin profile social media"
		>LINKEDIN</a>
	</li>
</ul>

<hr>

2015 &copy; lionet.ie

Code (markup):

H1 for the site title since everything on the page is subsections of the site, h2 and HR indicating the start of major subsections, h3 indicating the start of subsections of the H2 preceding them. Paragraphs around ACTUAL content paragraphs (one word is NOT a paragraph any more than an image is!) and obeying the structural rules of 4 STRICT even if I were to deploy as 5, since 5's structural rules are idiotic nonsense that just makes things like JAWS have to work harder. ACTUAL labels instead of the false simplicity of abusing placeholder, removal of pointless titles (like those on IMG tags) and placement of titles on elements where they might be needed (like anchors with uselessly vague text like "Read more" inside them), and of course trying to re-organize the content into a meaningful/useful order with a more sensible priority; though that last part is hard since your content seems to have been slapped together for visual layout instead of as actual content with an actual purpose!

If I have time later tonight I'll create the full markup and a rewrite of that page -- though the above alone should explain a LOT of why the responses so far have been as negative as they have been!

Though if what you built is what they are teaching at the "National College of Ireland" you might want to sue for malpractice and contact INAB to have their Accreditation revoked -- whoever taught you to build websites that way needs far, FAR more than a good swift kick in the junk -- if they got paid for teaching that they need jail time.

 

nice website

 

Hi Igor,

I check the site.

The concept is of-course good but I found About section & contact form is some how a bit off with the main concept.

Also you have used a few images which seems might not reflect the business you are up to. Over all flow & single page structure seems modern.

 

Hello,

So, I've posted around month ago my submission to review website.

I've met harsh and really depressing opinions, about my website, however I like it.

I have redesign my whole site, using different colours, less scripts, more informations.

Thank you so much for Your opinions, they are really important for me, and just wondering, how can you review now my website ? How it looks? how it works?

www.lionet.ie

Regards,
Igor

 

Again, I'll give you the Gordon Ramsey treatment so... Let's get it on.

The company name and it's subtext look like a rendering error thanks to it being flush with the massive space wasting call to action, which again has legibility issues due to the uselessly thin font and lack of color contrast from the background image. This is worse in the areas with the cursive font because, well, it's cursive (which screen lacks the pixels to render clearly just like the problems with serif fonts on screen). Those cursive bits seem to be in a different font "just because" and breaks the flow of said text as well.

... and even with the box around it I simply don't find it clear that "start your project" is actually a link. The hover state helps with that on mouse, but not on tablet and I'd suggest at the very least darkening the image even further or axing it entirely (on bandwidth grounds ALONE I'd be swinging an axe at that) and then adding a further dark opacity to the button as it's background. Also not wild about it being completely square, just a hint of corner rounding might make it clearer as well.

Simple fact is that with an average of #8E8E8E as the background, #FFFFFF really shouldn't be used atop it as text. The headings below that are even worse, you're using #A9A9A9 atop #FFFFFF which is also far below the 50% minimum, and things are only further compounded by the thin glyph webfont where I'd consider 70% or more the minimum even with the 'larger' font size. The bars are so thin I'd treat that font as "small" regardless of size so the brightest text-color I'd even consider would be #666666 to meet WCAG AA, and realistically #4C4C4C would probably be a better choice meeting WCAG AAA minimums.

It's not a perfect tool, but try to follow what this tells you about your foreground and background colors:
http://webaim.org/resources/contrastchecker/

At some point I'm going to write my own version of that which will tell you a bit more about the colors entered with a bit more explanation than they provide; but for now that should suffice. (even if it doesn't quite match the methodology presented by the WCAG)

I consider all those logo's at the bottom, or at least the manner in which they are presented a waste of space, particularly when some of them have no damned business being used to build a website or make zero difference compared to other tools. Some of them (the apple logo for example) could even drive potential visitors away... Apple is, well. Polarizing. You either love them, or you hate them so much that even just having the logo on your page will garner a giant **** you. While I dislike Apple and their ALLEGED quality intensely, I'm not THAT bad, but I know plenty of people who are.

Again, the white on red is no winner either. That red's #F64747 is WAY too bright for white to be atop it. #DD1111 would be bare minimum in the same hue and I'd consider going down to #AA0000 to meet WCAG AAA minimums.

Not wild about the concrete texture at the bottom, just because you don't use textures anywhere else on the page. It just feels inconsistent and "thrown in there". Likewise the massive amount of space wasted on just a handful of text seems off -- and are you REALLY going to have enough pages to warrant linking to a sitemap? As always if all your pages are linked to properly, sitemaps as a XML are redundant pointless BS... if you need it for your users to navigate your site, there's something wrong with your site!

Also not wild about the background in the header being fixed in position when scrolling, just because it makes the CPU spike and chews on battery on mobile for a minor visual effect nobody REALLY cares about when visiting the site. That type of nonsense (akin to parallax scrolling) has had it's five minutes.

It also seems odd that your headings are inconsistent in size and placement, particularly the ones I'd assume are h2 where the first one has this goofy chopped off bar while the second does not, and neither lines up the same on the right side.

Under the hood? You've got WAY too much crap in your title; title is NOT for keyword stuffing no matter how many SEO scam artists try to tell you otherwise. Say the company name, with the be done with it on the home page. Sub-pages put the name of the current page BEFORE the company name. TITLE is for use as the link on search, the tab on taskbars and browsers, and the browser window itself -- NOT for stuffing full of crap that's likely to get cut off.

Also, lose the stupid vertical breaks (or "pipe" for the linux-tards who don't know what the character is); the browsers use a hyphen there, use a hyphen there. Don't know how/what/why people started using "|" as a separator, but it's always looked stupid.

Your icon link is similarly flawed -- simply saying "TYPE" on a favicon link can break it, and PNG only works in FF and Chrome; IE and Safari both ignore it. Get a proper .ico file in there. In that same way avoid putting it in a subdirectory and instead put it in the root or at the very least alongside the markup location since some browsers immediately look for 'favicon.ico' in the root ignoring <link rel="shortcut icon"> altogether.

Your viewport meta is broken-trash thanks to restricting the minimum/maximum scale -- completely breaks zooming. Lose both of those and state height=device-height since some android browsers will report height as width when rotated.

Your description meta pointlessly restates the company name, and lacks a natural language feel thanks to being keyword stuffed...

... and then there's the keywords meta which is uselessly bloated and overstuffed in ignorance of what that tag is FOR. Keywords is called keyWORDS for a reason. It's not keyphrases, or keysentences, or keyStuffMeFullOfCrap, but keyWORDS -- which is SUPPOSED to be 7 or 8 words that exist inside <body> as CDATA that you want a slight uprank for. You say the same word more than once? You're doing it wrong. You say multiple words that aren't a proper name (the only exception), you're doing it WRONG! You use words that don't exist as text in your BODY, you're doing it WRONG! How many times are you saying "agency" there, how many of your 'terms' between comma's actually exist in the document? That's guaranteed to get that META ignored (in fact it's why so many people THINK it no longer works and is ignored by search -- it's not, it's just nobody uses it right!)

One big flub? The lack of quotes on attributes and values; that was valid HTML 3.2, but if you're going to use a modern doctype you might want to at least TRY and code to meet 4 transitional minimums.

Why you'd want to force Google not to offer a translation is beyond me, but yeah the open directory project can go plow itself.... but for robots there's no such thing as "index" and "follow" and really, NOTHING actually gives a flying frig about the author meta.

Your stylesheet <link> has no media targets, and from here it goes really goofball. You've got this asshat scripttardery for loading stylesheets mcSwitchy style, something developers stopped doing a years ago as CSS3 became viable. ANYONE telling you right now to use scripting to control your layouts -- much less doing so in PIXELS -- doesn't know enough about building websites to be flapping their gums on the subject. Media queries exist for a reason, USE THEM, not some goofy scripttardery!

From there I see the typical abuse of P inside HEADER doing H1's job, SPAN doing small's job, the stupid HTML 5 code bloat tags that serve no legitimate purpose if you use numbered headings properly (header, nav, section, footer), gibberish numbered heading orders, <i> doing <em>'s job since that text is NOT the name of a book, (though really that should be inside the anchor as the text, instead of the pointlessly vague "learn more" text), paragraphs around non-paragraph text, DIV around obvious paragraphs, double-breaks doing padding's job, and even more scripting for Christmas only knows what since I'm not seeing anything on the site that warrants the presence of JavaScript!

You've even got presentational garbage class use like "boxes-3-column-2" or "box-lefty" instead of saying WHAT the section is... or <p class="text-box"> when OF COURSE it's a text box, that's what a P is. Again the habit of throwing classes at everything instead of inheriting off a like parent means you aren't leveraging selectors properly.

Realistically there is little reason for your markup to vary significantly from this:

<!DOCTYPE html><html><head><meta charset="utf-8">

<meta
	name="viewport"
	content="width=device-width, height=device-height, initial-scale=1"
>

<meta
	name="description"
	content="An Irish web design agency, we create, renew and maintain websites for clients while providing accessibility, search optimization and other 'must have' modern design technologies."
>

<meta
	name="keywords"
	content="design,agency,responsive,seo,Irish,development,dublin"
>

<meta
	name="robots"
	content="noodp"
>

<link
	rel="shortcut icon"
	href="favicon.ico"
>

<link
	rel="stylesheet"
	type="text/css"
	href="screen.css"
	media="screen,projection,tv"
>

<title>
	LIONET.IE
</title>

</head><body>

<!-- empty span below are image sandbags, do not remove -->

<div id="top">

	<h1>
		<a href="/">
			LIONET <span>Creative Agency</span>
		</a>
	</h1>

	<ul id="mainMenu">
		<li><a href="index.html">Home</a></li>
		<li><a href="work.html">Our Work</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>

<!-- #top --></div>

<div id="callToAction"><div class="widthWrapper">
	<h2>Freelancing Web Design Agency based in Dublin</h2>
	<p>
		<em>designing</em> and <em>building</em> websites for clients who prize innovative and outstanding solutions for business
	</p>
	<a href="contact.html">Start your project &raquo;</a>
<!-- .widthWrapper, #callToAction --></div></div>

<div id="content"><div class="widthWrapper">

	<div id="whatWereDoing">
		<h2>What we're doing?</h2>
		<ul>
			<li id="optimizing">
				<span></span>
				Optimizing and Renewing Old Websites.
			</li>
			<li id="responsiveDesign">
				<span></span>
				Web Designing / Mobile Websites
			</li>
			<li id="seoSolutions">
				<span></span>
				SEO / Marketing Solutions / Keywords Plans
			</li>
		</ul>
	<!-- #whatWereDoing --></div>

	<div id="whyChooseUs">

		<h2>Why choose us?</h2>

		<div id="businessPlan">
			<span></span>
			<h3>Business Plan</h3>
			<p>
				Lionet has possibility of having few installments for your website, if you can not afford paying everything at once.
			</p>
		</div>

		<div id="innovativeCreative">
			<span></span>
			<h3>Innovative and Creative</h3>
			<p>
				We're have creative and innovative technics which allows us to create outstanding and decent website for client purposes. Our main motto sounds "perfectionism is everything." and we're really keep doing every single project, with passion and commitment - because we believe it's all about.
			</p>
		<!-- #innovativeCreative --></div>

		<div id="forEveryone">
			<h3>For Everyone</h3>
			<p>
				Lionet aims services for everyone, it's truly dosen't matter if you are a serious company who needs a website or a single independent people. Website can be build for everyone, and we are here to help you.
			</p>
		<!-- #forEveryone --></div>

	<!-- #whyChooseUs --></div>

<!-- .widthWrapper, #content --></div>

<div id="art">
	<hr>
	<p class="widthWrapper">
		Don't miss your opportunity of being successful! We highly recommending for reading an article on our website <a href="top-5-reason-why-need-website.html">TOP 5 REASONS WHY YOU WOULD NEED A WEBSITE FOR YOUR BUSINESS</a>.
	</p>
<!-- #art --></div>

<div id="footer">

	<div class="contact">
		<hr>
		+353 89 956 1433<br>
		contact@lionet.ie<br>
		Blanchardstown / Dublin 15 / Ireland
	</div>

	<div id="socialMedia">
		<h2>Visit us on Social Media</h2>
		<ul>
			<li class="facebook">
				<a href="https://www.facebook.com/lionetdesign">
					Facebook<span></span>
				</a>
			</li>
			<li class="twitter">
				<a href="https://twitter.com/lionetweb">
					Twitter<span></span>
				</a>
			</li>
		</ul>
	<!-- #socialMedia --></div>

	<div id="disclaimer">
		<hr>
		<a href="privacy-policy.html">Privacy Policy</a>
	<!-- #disclaimer --></div>

<!-- #footer --></div>

</body></html>

Code (markup):

Not to be throwing shapes, but that's how I'd be going about it. H1 as the heading under which everything is a subsection, h2 as the start of subsections of that, H3 as the START of subsections of the h2 which is why those first three h3 got axed as those are NOT headings or the start of sections, those are the section content appearing to be a list of bullet points. HR for breaking out semantically where content doesn't have a heading but isn't part of the section before it, and that final H4 now being a H2 since it's NOT a subsection of "For Everyone". Those images are presentation and as such have NO business in your markup, which using those span sandbags you could even leverage CSS sprites to reduce the handshakes and possibly the file sizes as well. If you don't care about IE7 and earlier getting those images, one could even axe those in favor of generated content. (really ~50 bytes of span on the page? Worth it in my book for ease of targeting)

... and as I said on your other thread, you need a bit o' work on yer English as 'tis a wee bit banjaxed. What you have tis far better and isnae full shilling, it could use some work still. Seriously, get a proofreader or a real writer in there to help you out a bit.

Iffn ye like, I can do a full rewrite to show you what I mean -- I'm out the door but sometime afternoon (EST) I could probably belt out how I'd approach the CSS for that, and then document it so you can learn from the methodologies I advocate.

Side note, havenaye ever mentioned how dangerous tis for me to be around different vernaculars and accents? Probably comes from my having learned Olde Englisc the same time as modern English and to switch between 17th century New England and modern dialect on queue.