Any brief opinion about a web page

Hello,

I don't mean to spam not-worth threads, but still needing an opinion for my current project:

http://vladimirlisovets.pancakeapps.com

Points of interest

• Design
• Performance/Loading time
• Feelings

Thanks in advance and with the best wishes,
Vladimir Lisovets.

 

Is that hard to give an opinion ? Wtf. "I like", "I don't","It sucks". whatever.

 

Maybe you are not getting comments because everyone is afraid of hurting your feelings. I don't have that problem.

The page has virtually no content except for links presented to with too low a contrast, and the links are disguised and don't look like links. I don't want to hear how there will be content latter. That is backward. Content comes first and you build the layout and theme around it. You never make content fit the page. the page must be fitted to the content.

Technically it is flawed by the float that ends up below the side bare on a re-size down. semantically it really sucks, there does not appear to be and h1 and you are using h3 and h4 for styling instead of layout.
If I was grading it it would get; it would get a fail in the courses I have taught over the years.

If you want to do it right start with content fine tune it and hone it. Then when it is ready do layout to enhance it and support the content. Don't even think about CSS until you have a perfect layout that will stand up to anything; then apply the styling with a light hand.

 

First of, you're in the wrong forum. We have reviews forums for a reason. Second, a passive-agressive reply to your own post, because you haven't gotten any replies within half a day? Really?

The site is incredibly confusing on mobile, at least. You have a menu that doesn't seem to do much, some text with no padding, and more links, which again doesn't seem to do much. Then you have a menu button which shows a search bar and a couple more links, which at least work, but then the job listings doesn't do anything apart from light up a color. Right now it's a confusing mess with no real value.

 

Please refer to the above quote....there happy now?

 

Thank you, I do appreciate your answer as well your time and approach to this, all you said were truly relevant.
I didn't had the idea it sucks that much. It looked ok to me, even nice to be honest, simple and fine.

Answering :
I made this low contrast intentionally, believing it would work fine and simple. That's all I wanted.
Btw, there is a h1 and I never used headers to style.
I graded and I didn't fail, my course is far from design.

 

Certainly yes! I got what I want
such low try to hurt someone due the agressive own response, looks like it worked.
I may suck at design, but I got some skills in psychology, so used it to achieve what I want, otherwise I had not.

 

Wrong forum: sorry for that.
Passive-agressive reply: That was intentional, looks like worked.
Bad mobile approach: Got it.
Emptiness: I was testing 3 pages (index, jobs and houses), I won't be wasting time to fill it when I don't need for now.
At least works: Everythings works fine lol. Design is the implementation of functionalities and not functionalities itself.
Job listings: Well, It was just a test.

This website shouldn't do a lot more, that was just a try. That's not even 25% of the final product.
I was merely testing the design and early data management.

I did appreciate your approach,
Thank you, as "at least".

 

The background is too bright.
The designer could have thought of a nice, neat and simple layout but there is too much of white in the background so much so visitors may not able to see certain important tabs.
Would be nice to have dark colored border for page, in contrast with the white background. Alternatively or additionally have all the side menu tabs in color.

 

Really??? What do you call this garbage:

<li><a href="#"><h4>Culture</h4></a></li><li><a href="#"><h4>Tourism</h4></a></li><li><a href="#"><h4>Climate</h4></a></li><li><hr/></li><li><a href="#"><h4>Find Houses</h4></a></li><li><a href="#"><h4>Find Jobs</h4></a></li><li><a href="#"><h4>Find People</h4></a></li><li><hr/></li><li><a href="#"><h4>Us</h4></a></li><li><a href="#"><h4>Support</h4></a></li><li><a href="#"><h4>Contact Us</h4></a></li>

Code (markup):

To start with h4 should only be a subsection of an h3; which should only be a subsection of h2;

You have absolutely no clue about semantics, standards or accessible design. Plus you did not address the lack of content. You and just playing games with crap code with no content it is like a three-year-old attracted to shiny things.

Give you head a shake. You do not have a web page you have a load of worthless code being displayed by a browser. A waste of time; effort; and bandwidth. Do some real work by creating some content, and then find the best way to present it. At least then you will be doing something more like development instead of just playing with badly written code to see if you can have something shiny in your toybox..

 

You don't know you're talking about, there are no "subsections" in html.
And you're funny

 

He knows EXACTLY what he's talking about. A h1 indicates the start of a page, the heading under which EVERYTHING is a subsection. A H2 indicates the start of a subsection of the H1, a H3 indicates the start of a subsection of the h2, so forth down the line... They don't simply mean "text of different sizes" even if that's the default appearance, they mean heading levels JUST as in professional writing... JUST as HR does NOT mean "draw a line across the screen" it means the start of a subsection of the content

That's what headings and rules are for, to break the content into sections and subsections. (which is why HTML 5's idiotic SECTION, ARTICLE, NAV, HEADER and FOOTER are pointless code-bloat redundancies!). What makes ANY of those the start of subsections of the page when they don't even have content AFTER THEM? That's gibberish markup and a utter/complete waste of code!

As to your page, visually it's fairly simple and clean, not wild about a few of the extra lines, but overall the layout concept is sound. That said it's an accessibility disaster with the fixed metric (px) measurement fonts, goofy thin-glyph webfont that on cleartype rendering dips the colour contrasts below accessibility minimums, actual colours (like that grey on white on the bold heading) FAR below accessibility minimums -- you REALLY should probably read up on the WCAG and spend some quality time with the articles at NNGroup. You've got a slew of accessibility failings.

Even the line-heights on what should be a flow paragraph (that for some jacktard reason you have a H4 around?!?) borders on an accessibility flaw!

The ATTEMPT at being responsive is disastrously broken here, I have a suspicion as to why, but I won't know that until I look under the hood.

Popping the bonnet, mein gott, what the **** is all this scripttardery even for?!? Much less endless pointless scripting in the markup?!? Of course it's doped to the gills with pointless META no legitimate UA's give a flying purple fish about, the stupid X-UA crap that you should only be resorting to with OLDER poorly written sites, sitemap like it's still 2003 (if the page cross-links itself properly XML sitemaps are utter and complete bullshit), no media targets on the stylesheet embed... and as I suspected and the leading cause of the pathetically broken attempt at being responsive...

BOOTCRAP. Do yourself a favor and go find a stick to scrape that off with before tracking it all over the Internet's carpets. This explains the broken ATTEMPT at being responsive, the endless pointless code bloat with DIV for nothing, endless pointless classes for nothing, gibberish document order, gibberish use of numbered headings, endless pointless classes for nothing...

You seem to have some good ideas in terms of layout and overall feel, but to be brutally frank you don't know enough about HTML or CSS to be implementing those ideas yet; hence your reliance upon crutches and bloated nonsense like Bootcrap, YUI, jQuery, etc, etc...

Hell, bootcrap AND YUI at the same time? Just ASKING for it to blow up in your face!

As I often say if you don't know what's wrong with this:

<body id="index">

    <!-- NAV -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a href="/">Foreign</a></h1>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/jobs.html"><h2>Jobs</h2></a>
                    </li>

Code (markup):

You probably don't know enough about HTML to be building websites yet. It's a mix of blind copypasta of bad code, mixed with gibberish use of numbered headings on things that ARE NOT HEADINGS!!!

... before we even talk that asshat menu code that the halfwits, morons, and fools behind bootcrap seem to think is a good idea.

IF I was writing that same page, the markup would go something more like this:

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

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

<meta
	name="description"
	content="Now you can find what or who you need, doing anything anywhere."
>

<meta
	name="keywords"
	content="spot,house,job,employer,friend,housemate,people,living,studying,working"
>

<meta
	name="og:image"
	content="images/openGraphImage.jpg"
>

<meta
	name="twitter:image"
	content="images/twitterImage.jpg"
>

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

<title>
	Foreign - Find anything with us.
</title>

</head><body>

<div id="top">

	<h1><a href="/">Foreign</a></h1>

	<ul id="sectionsMenu">
		<li><a href="/jobs.html">Jobs</a></li>
		<li><a href="/houses.html">Houses</a></li>
	</ul>

	<form id="search" action="search.php" method="get">
		<fieldset>
			<label for="searchText">Search:</label>
			<input type="text" name="q" id="searchText">
			<input type="submit" id="searchSubmit" value="Go">
		</fieldset>
	</form>

	<ul id="userMenu">
		<li><a href="#">Login</a></li>
		<li><a href="register.php">Register</a></li>
	</ul>

	<div id="extras">

		<ul id="mainMenu">
			<li><a href="#">Culture</a></li>
			<li><a href="#">Tourism</a></li>
			<li class="break"><a href="#">Climate</a></li>
			<li><a href="#">Find Houses</a></li>
			<li><a href="#">Find Jobs</a></li>
			<li class="break"><a href="#">Find People</a></li>
			<li><a href="#">Us</a></li>
			<li><a href="#">Support</a></li>
			<li class="break"><a href="#">Contact Us</a></li>
			<li class="break"><a href="#">English</a></li>
		</ul>

	<!-- #extras --></div>

	<div id="content">

		<div class="standout">

			<h2>
				Dear user, now you can find a <strong>spot</strong>, <strong>house</strong>, <strong>job</strong>, <strong>employer</strong>, <strong>friend</strong>, <strong>housemate</strong> or just a <strong>mate</strong> and connect with people <strong>living</strong>, <strong>studying</strong>, <strong>working</strong>, <strong>doing anything</strong> anywhere!
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur finibus eros et vulputate. Integer venenatis metus viverra mollis auctor. Nam ullamcorper erat laoreet nulla pellentesque consectetur. Pellentesque quis lacus ac tellus vulputate tempor. Cras sit amet justo at risus luctus tincidunt eget quis odio. Ut maximus velit ut lorem condimentum, eget varius massa suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla rutrum ultrices sagittis. Duis imperdiet, nisi a dictum elementum, tortor arcu pharetra elit, quis tristique est nulla et nulla. Aliquam erat volutpat. Sed vitae magna vel massa ultrices commodo. Etiam quis metus ultrices, placerat ligula id, bibendum nunc. Quisque sodales pulvinar velit nec semper. Vivamus non molestie risus, ut pharetra metus. Maecenas mi purus, mollis quis nisl non, malesuada facilisis magna. Duis a mi in odio pulvinar molestie a sed justo.
			</p>

		<!-- .standOut --></div>

		<div class="moreSection">
			<h2>Find Jobs</h2>
			<ul>
				<li><a href="#">Administrator at CoffeeShop</a></li>
				<li><a href="#">SEO at PT</a></li>
				<li><a href="#">Junior developer at M-Profiler</a></li>
				<li><a href="#">Clients Manager at Remax</a></li>
				<li><a href="#">Call Center at D2D</a></li>
				<li><a href="#">Team Leader at Manpower</a></li>
			</ul>
			<a href="#" class="more">See More</a>
		<!-- .moreSection --></div>

		<div class="moreSection">
			<h2>Find Houses</h2>
			<ul>
				<li><a href="#">House T3 for 200 euros</a></li>
				<li><a href="#">Apartment T1 for 150 euros</a></li>
				<li><a href="#">Apartment T5 for 1000 euros</a></li>
				<li><a href="#">House T2 for 400 euros</a></li>
				<li><a href="#">House T4 for 400 euros</a></li>
				<li><a href="#">Apartment T2 for 485 euros</a></li>
				<li class="more"></li>
			</ul>
			<a href="#" class="more">See More</a>
		<!-- .moreSection --></div>

		<div class="moreSection">
			<h2>Find People</h2>
			<ul>
				<li><a href="#">Vladimir, Web Developer from Moscow</a></li>
				<li><a href="#">John,  Engineer from United Kingdom</a></li>
				<li><a href="#">Alex, Psychologist from Amsterdam</a></li>
				<li><a href="#">Rodrigo, Consultant from Lisbon</a></li>
				<li><a href="#">Francis, Otolaryngologist from Marseille</a></li>
				<li><a href="#">Karim, Programmer from Dubai</a></li>
			</ul>
			<a href="#" class="more">See More</a>
		<!-- .moreSection --></div>

		<div class="moreSection">
			<h2>FAQ</h2>
			<ul>
				<li><a href="#">What happens when I block someone?</a></li>
				<li><a href="#">How can I tell if someone has blocked me on WhatsApp?</a></li>
				<li><a href="#">Are my messages secure?</a></li>
				<li><a href="#">Using the Broadcast List feature</a></li>
				<li><a href="#">Exporting my messages</a></li>
				<li><a href="#">Sending media and other data</a></li>
			</ul>
			<a href="#" class="more">See More</a>
		<!-- .moreSection --></div>

	<!-- #content --></div>

	<div id="footer">

		<hr>

		&copy; Foreign 2015

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

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

</body></html>

Code (markup):

That's semantic markup and proper separation of presentation from content! (though honestly I'd axe that annoying red/grey interlace on what SHOULD be the H2)

You aren't doing a blasted thing warranting the presence of JavaScript, this actually tries to use numbered headings for what they are FOR, even the HR is there to say "this is a new section" (making <footer> a pointless redundancy) and not "draw a line across the screen".

I even fixed that it shouldn't be "Copyright Copyright" -- use the word OR the symbol, not both!

Also gutted the pointless META, since if twitter and opengraph users are too malfing stupid to extract description from the EXISTING description META or the title from the blasted TITLE tag, then they are dumbass crap not worth wasting bandwidth for on every page-load. Admittedly, I'm starting to flip the double-bird right in Twitters face with the dumbass halfwit bull they are duping ignorant fools into crapping all over their websites with! It's reaching the point of feeling like they are using their reputation to dupe possible competitors into sabotaging themselves with such mouth-breathing idiocy as bootcrap or their pointless redundant META.

If I have the time later (I'm catching up code-wise to a number of folks I promised to help as I've been sick and in and out of supervised medical care the past week) I'll see about tossing together the CSS such a page actually needs so you can have a better clue what I'm talking about.

 

Design and feelings- too pale, not interesting(boring),not appealing, feels discomforting looking at it because it's too white and fonts are thin.
Load time- good, acceptable

 

You don't needed to spend your time on me, I'm already studying everything from the scratch, I've been trying to build something without basis, true.

Then html/css before implementing a design I did yesterday (http://postimg.org/image/5zml3h52l/).

I implemented jquery just for bootstrap but don't used it, angular instead.

And I know exactly why did he wrote that commentary, that was pointless, his goal wasn't referring about any technical aspect.

 

Based on your response and inability to even understand the definition of semantics I will assume you are a 12-year-old and tailor my answer to that level.

Go find some different toys. You have no idea what a web page is or is supposed to do. Your parents should not let you play with the computer unless you agree to only use if for games and not try to do web development until you learn the definitions for semantics, structure, layout, content, and accessibility.

If you were one of the many students I have taught I would give you a failing grade and recommend your parents get you a tutor; so that you are not handicapped in the long term by what appears to be a cognitive malfunction; or perhaps is is just a manifestation of the Dunning-Kruger Effect

 

Looks like something harsh is going on :O

I think we should help who wants to learn something. Isn't it?

 

The why don't you post a creative list of all the things, you think will help. The question ask for opinions. Those were given along with advice on the direction that needs to be taken. Harsh is making nonsense comments that add nothing to the thread; tough love to push an OP in the right direction is not harsh, it just an alternate means of communication when conventional channels appear to be failing.