www.webdeveloper.com
Results 1 to 5 of 5

Thread: Review: Mini Site/Sales Page/Info Page

  1. #1
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15

    Review: Mini Site/Sales Page/Info Page

    Hello everyone.

    It would be nice get some inspirations/advices from you regarding the following site:

    http://webentwicklungrostock.de/_lab...d-performance/

    I would like to know what you think/feel when you browse/test the site.

    1. Do you think this site could be taken as a sales page?

    2. Do you think the color scheme is good?

    3. Do you think the font I am using is appropriate?

    4. Does this site work on mobiles/tablets correctly (if you can test it)?

    5. What would you change (please note the content is NOT done yet so the positions e.g. of the pie chart can change)?

    6. How much would you pay for this kind of page (fully done with content and stuff)?

    Would be nice to get some answers.

    Thanks,

    Michael

    Oh by the way, this site was built with the ZURB Foundation framework (my favourite).

  2. #2
    Join Date
    May 2014
    Posts
    1,051
    I'm not wild about the hard to read webfont on your content areas. Like most webfonts it's very pretty, but pretty doesn't necessarily mean useful. Probably looks great on Mac though... just looks horrible on Win/Lin... lemme boot up the VM... oh yeah, OSX's renderer that usually butchers perfectly goof fonts by making them illegibly blurry and making everything look "bold", takes that uselessly thin illegible fonts and makes it legible. That's good for a laugh.

    Something to keep in mind, font renderers across OS are different.

    There is a MINOR color issue on your main menu -- that being the orange is too dark to be on a black background. I'd try to lighten that 20-30%. More of an issue is the effectively invisible dark-gray on black in the footer. Other than that your hue and saturation choices are sound, you just need to do something about luminance contrasts.

    That sticky fixed position "Front End Performance" thing and header are annoying as hell when you scroll down as it consumes screen space that would be better used for viewing content. (in the same way auto-installing browser toolbars are annoying as they leave less space to view pages). That's one of those "gee ain't it neat" bits designers love that visitors actually hate. Though to be fair I'm one of those nutters still using Opera 12.17 as my primary browser because it lets me put tabs off to one side instead of across the top. Put all that extra unused wide-screen space to use for something!

    The responsive layout does all sorts of broken goofy stuff, and most (but not all) the problem seems to be that fixed position header. If it's annoying due to a lack of content-space at desktop resolutions, it pisses all over mobile devices.

    It could be a bit leaner -- most of the problem is the stupid "modernizr" polyfill nonsense and "prototype" -- but then prototype by itself is the same size I have as a upper limit for a content-less page template's HTML+CSS+SCRIPTS+IMAGES. It also seems a bit chunky on the images, though I'm going to assume those are placeholders and not deployment.

    Your heading orders are gibberish, breaking heading navigation and possibly giving search engines and screen readers fits. You've got H3 without a H2 for them to be subsections of, H3 and H4 that don't seem to be subsections of the H2 before them... an H5 without any H4 or H3 for it to be subsections of... Almost looks like you were choosing numbered headings based on what they look like instead of what they mean...

    ... and all that I determined BEFORE I looked at the code.

    Once I pop the hood, I see what I come to expect from the broken backwards practices common when a HTML 5 doctype is present. I would highly suggest dialing it back to HTML 4.01 STRICT or XHTML 1.0 STRICT as you aren't doing anything that warrants the presence of that fat bloated alleged specification that does nothing but encourage decade and a half out of date coding practices, and is generally used more as a sick buzzword to describe what people are doing than it is a specification for writing markup.

    You've got static CSS in the markup, hoping that's not permanent -- (I'll never understand why people make working on designs HARDER by doing that) -- endless pointless DIV for nothing, endless pointless HTML 5 containers for nothing, endless pointless classes and ID's for nothing -- all lead one to conclude you haven't quite grasped how to use selectors yet; though an equal amount of the blame for that bloated markup can be aimed at HTML 5 and that "foundation" nonsense.

    There's a reason I say frameworks like Foundation do nothing but lead people down the garden path to failure.

    JUST to illustrate what I mean, where you have:

    Code:
    </head>
    <body>
    <!-- begin topbar -->
    <div class="topbar hide-for-small">
    	<div class="row">
    		<div class="large-12 columns">
    				<ul id="social">
    					<li>Please<br>Share</li>
    					<li><i class="fi-social-twitter"></i></li>
    					<li><i class="fi-social-facebook"></i></li>
    					<li><i class="fi-social-google-plus"></i></li>
    				</ul>
    		</div>
    	</div>
    	<p class="topbartrigger topbardownarrow"><i class="topbararrow fi-arrow-up"></i></p>
    </div>
    <div class="topbarribbon topbartrigger hide-for-small"><i class="blink topbararrow fi-arrow-down"></i></div>
    <!-- end topbar -->
    <header>
    	<div class="row">
    		<div class="large-8 medium-6 small-12 columns">
    			<ul class="nav">
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Contact</a></li>
    				<li><a href="#">Imprint</a></li>
    				<li><a class="getareport scrolltoanchor" href="#getareport">Get Your Report</a></li>
    			</ul>
    		</div>
    		<div class="large-4 medium-6 hide-for-small columns">
    			<p class="small slogan ">Faster Websites For Your Success</p>
    		</div>
    	</div>
    </header>
    <div class="sticky">
    	<div class="row">
    		<h1 class="text-center headline"><i class="fi-power"></i> Front End Performance</h1>
    	</div>
    	<a href="javascript:;" class="hide small totop right"><i class="fi-arrow-up"></i></a>
    </div>
    I would have:
    Code:
    </head><body>
    
    <div id="top">
    
    	<h1>Front End Performance</h1>
    	
    	<ul id="social">
    		<li class="twitter"><a href="#STATIClinkToTwitter">Twitter</li>
    		<li class="facebook"><a href="#STATIClinkToFaceBook">Facebook</li>
    		<li class="google"><a href="#STATIClinkToGoogle">Google+</li>
    	</ul>
    	
    	<ul id="mainMenu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Contact</a></li>
    		<li><a href="#">Imprint</a></li>
    		<li><a class="local" href="#getareport">Get Your Report</a></li>
    	</ul>
    	
    	<p class="slogan">Faster Websites For Your Success</p>
    "give or take" there's little reason for that entire section to be a heck of a lot more than that, other than as I've said in some four dozen threads the past three months trying to use JS to do CSS' job, using some bloated pointless framework, and a general lack of understanding how to use selectors and inheritance. Might gain a few empty span for image sandbags, but other than that?!?

    So... needs some work. The concept is ok, but the execution could need some help.

    P.S.... the arrow in the top-right corner, is that actually supposed to do something? ... 'cause, well... it doesn't.
    Last edited by deathshadow; 07-11-2014 at 01:24 PM.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    Uh well, try to sell some "old school non HTML5, non framework-using" site @ envato... good luck!

    Buyers want latest technology with all the "buzz"... that's how this business works!

    If it would be only about the content the whole "scene" would just die. If it does look "oldschool" people just click away.

    And yes, the site is not done yet.

  4. #4
    Join Date
    May 2014
    Posts
    1,051
    Quote Originally Posted by Michael Pehl View Post
    Uh well, try to sell some "old school non HTML5, non framework-using" site @ envato... good luck!
    That's when you slap the HTML 5 doctype on it at the last minute since most of the fools who want it as a sick buzzword won't know the difference.

    ... and I'm not saying to have to sacrifice appearance for it; when you can use less code, cleaner code, faster loading code, and have effectively the same appearance WITHOUT the framework or HTML 5, why use it other than slapping the doctype on to keep the halfwits who get their tech advice from Forbes happy?

    There's a reason a LOT of developers say build in 4.01/X1.0 STRICT, and slap the 5 doctype on it at the last moment as lip service to the re-re's. Hell, half of why a lot of people call it the "lip-service doctype" -- the other half being it quite literally is lip-service to make sure you're not in quirks.

    Though marketspeak whorehouses filled with scam artists "designers" -- like envato, like templateMonster, like themeForest -- are something I try to educate people NOT to throw money away on since 99.99% of the content there is either one giant scam, or promoted by people who don't know enough on the topic to be making websites in the first place.

    Quote Originally Posted by Michael Pehl View Post
    If it would be only about the content the whole "scene" would just die.
    You say that like it would be a bad thing.

    ... and it IS about content if you care about accessibility, visitors, REAL user experience (as opposed to the goofy bloated hard to use flashy bull designers call UX), speed of page loads, search engines, and long term sustainability of a design. CONTENT is king, it's the ONLY reason for a website to even exist in the first place. Everything else is window dressing that just gets in the way.

    Which is why none of the major legitimate success stories of the Internet are exactly what you'd call a visual tour-de-force. Some of them (Craigslist comes to mind) are so hideous it makes the average PSD jockey's peeper shrink in so far it shoots out their backside. Amazon, E-Bay, FaceBook, Google -- none of them scream "hey look at what a great designer we have".

    But again, there's a reason I say that the best designs are the ones you DON'T notice, and drive you to the content... as if the visitor notices the design, it's probably not a good thing.

    I tell you what, I'm going to do a rewrite of your theme just to show you what I mean; I'll try to retain as much of the design concepts as possible, but I'm going to lean down the code, get rid of the framework nonsense and scripting for nothing... I'll even make it 'properly' responsive.

    -- edit -- BTW, you might want to look at even better image optimizers like something GD based. Adobe wouldn't know image optimization from the hole in their product DVD's.

    Side note -- It's funny to see a site talking about making sites faster using jQuery and Foundation.
    Last edited by deathshadow; 07-11-2014 at 02:47 PM.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    Once again, my friend... the content is NOT done yet. What I have added right now is just "fillers" lol

    Hope you got what I mean... and yes, I have used the "complete package" of ZURB when I started to build it.

    Hell yeah, you are even worse then I am... always complaining hehehe

    However, as long as I know my target audience and I know that my server is sending gzip'd blablabla all is fine for me in this stage of "development".

    Send me some of your sites and I will take a look at them :P

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles