1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

New Website - Feedback Much Appreciated!

Discussion in 'Websites' started by JordanHenryOwen, Sep 18, 2015.

  1. #1
    Hi Guys,

    I've spent the last couple of months working on developing my new portfolio website to showcase my skill set and to give an insight into the flow of my design process.

    I've also spent a lot of time making it responsive across all mobile devices, I would love to get some feedback DigitalPoint community.

    Check it out here: https://jordanowen.co.uk

    Thanks for your time!
     
    JordanHenryOwen, Sep 18, 2015 IP
  2. yudi18

    yudi18 Active Member

    Messages:
    73
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    63
    #2
    All the sections of the One Page website have same background, which makes it look like 1 webpage & not one page website.
    So you should either divide the sections properly or change the backgrounds of the different sections.
    Also, no link to workflow section?
    Overall, the site doesn't impress me much to hire you as such. Though work may want me to hire you.
     
    yudi18, Sep 18, 2015 IP
  3. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Looks great man! Few small suggestions:

    1. Maybe speed up the scrollTo a bit

    2. This breaks for a few hundred pixels
    https://www.dropbox.com/s/xxutzn04uvl2zfh/Screenshot 2015-09-19 02.12.35.png?dl=0

    3. I'd add another breakpoint so the columns dont get to narrow. Maybe image on the left text on the right inbetween.
    https://www.dropbox.com/s/8byi9xp9kftfb9z/Screenshot 2015-09-19 02.13.47.png?dl=0

    4. Code looks clean, but maybe change those <sections>'s to divs. When you open a section tag you have to start from h1 again. This is giving you a bunch of validator errors.

    5. Optimize your images, you can cut half the page weight

    Overall a nice site, much better than most of the garbage i see around here.
     
    Last edited: Sep 19, 2015
    KewL, Sep 19, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Minor issue - the red "call to action" button is, for some reason, not using an id-tag to get to whereever it's going, which breaks page-control - I can't use back/backspace to scroll back up, since there is no #something in the URL. Minor, perhaps, but annoying when on mobile, for instance.
     
    PoPSiCLe, Sep 19, 2015 IP
  5. JordanHenryOwen

    JordanHenryOwen Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Thanks for the advice, I think it would definitely be worth it to try and split up the sections a bit more and maybe put some emphasis the projects section as I want to people to check out my work of course!


    Fantastic feedback and thank you for the kind words! I will revise my images and code but good catch with the project box responsive issue!

    Thanks man! I will get that sorted as soon as possible because you're right! It would be really annoying!
     
    JordanHenryOwen, Sep 19, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    First off, you might get better reviews in the reviews part of the forums.

    My first impression is "Do you even know what the WCAG is?" due to the illegible colour contrasts. Your header is effectively invisible, as is most of the blue on blue text -- and that's supported by the numbers. The text and background choices do not even come CLOSE to meeting accessibility minimums.

    Second thing I immediately noticed is my little old Wendy's lady "Where's the Beef?" --- Here's a tip. if on a 1920x1080 display you've filled the screen with nothing but two dozen words and none of it even remotely resembling "content of value"? Well, it's not all that useful. Your home page has so much of it's "meat" below the fold you might as well have made one of those annoying splash pages '90's style. A laugh since it's a monolithic single page that I'd break into multiple pages (so that menu actually is worth having) if not of it being so devoid of actual content.

    Final thing I notice on the visual inspection is the garbage use of placeholder to do label's job. Placeholder is NOT a label and should not be used as such -- since that treads into not only violating what the spec says about placeholder, but also creates "false simplicity".

    Seemed to take a while to load despite it being a fairly simple (empty) page. The 1.8 megabytes in 49 files explains why rather quickly, particularly for a page that by my worst case scenario guesstimate shouldn't be exceeding a quarter of a megabyte in a dozen files. Your image optimization reeks of "what's that" and you seem to be missing some core techniques of making websites less of a pain in the ass like the incorrectly named "CSS Sprites". That it has a train wreck of developer ineptitude in the form of 230k of CSS in 5 files -- where an entire website given you've only got one media target there's no excuse for more than 48k in one file and for such a simple site 16k would be a more realistic number! That's actually WORSE than the ridiculous 146k of scripttardery in 5 files on a site where I don't see a blasted thing being done that warrants the presence of JavaScript. (ooh, goofy smooth scroll nonsense...)

    Pulling up the document outline and testing out heading navigation, I'm pretty sure your heading orders are gibberish... While you aren't missing any it looks more like you choose your headings based on appearance than for document structure.

    Popping the bonnet to look at the markup, uhg... See, this is the type of HTML 5-tardery that gives 5 a bad name. It's bad enough the garbage header, footer, article and section tags being pointless redundancies, but all these section in a section and section in a header and nav in a header in a section in a section just reeks of slapping tags in there any-old-way.

    lang goes on HTML, not HEAD -- well, unless only your <head></head> contents are in english and you want to declare another language on BODY.

    You're in 5, you might as well lose the XML closures.

    Your viewport meta screws zooming on mobile -- WHY do people piss on their sites by doing that?

    Your overstuffed keywords meta is guaranteed to get that declaration ignored since it's keyWORDS -- not keyphrases, not keysentences, keyWORDS -- seven or eight SINGLE WORDS that exist between <body> and </body> as CDATA that you want a slight upranking on. You don't blindly stuff it full of crap like that; though I suspect you just copypasta'd how all the other people who never bothered learning how to use it properly are abusing it.

    Sending your style LINK to "all" is just gibberish, I'm so sure your screen media layout is brilliant on print or aural -- NOT.

    Lose the type attribute on the favicon, that can actually BREAK it working. Likewise put the favicon in the root not under /images as a LOT of UA's ignore the LINK altogether and will go looking for it there directly. (check your error logs, you'll probably find a good number of 404 requests looking for it there!)

    The only reason to use the scripttard html5 shiv is if you use the pointless redundant crap that exists just to make content theives lives easier -- my advice, lose that and all the pointless code-bloat tags. (article, nav, section, header, footer). Likewise static scripttardery in the HEAD? Just say no.

    Uhm, your H1 anchor doesn't go anywhere.

    If every element inside a parent is getting the same class, none of them should have clases ("smooth")

    Button outside a form is abuse of the tag, and lose the aria role nonsense, Youv'e got a half dozen perfectly good wrappers, you can do that mobile "hide the menu" thing without scripting or any of that garbage. Really though you don't have enough menu links to be dicking around with any of that... much less having the menu in the markup TWICE? I've seen a number of people pulling that bit of asshattery lately -- what broken garbage tutorial or snippet is that bit of stupidity being copied from?

    STRONG inside a heading probably doesn't make a lot of sense, it's not like you are putting "more emphasis" on "I'm"... dubious semantics at best. There's no SEMANTIC reason for that to be a different colour, so don't use a tag tht has a meaning to do that. That's span's job.

    You start out seeming to use numbered headings correctly right up until #about-me... then it goes to rot. That first H3 really doesn't seem to be the start of a subsection of the page, it's content for that H2. Getting down to a H4 at that point doesn't even seem to make any sense, and what the **** are all these hidden DIV train-wrecks even in there to accomplish?!? Number-marker code-line ad-nauseum for WHAT?!? Pretty much from that point on the code is gibbierish -- double-wrapping sections (in which case they aren't even sections) -- section wrapping JUST heading tags -- slew of H4 I'm pretty sure are NOT supposed to be the start of subsections of the "I have a prodigous" text... Then you have a H4+H5 on the form for what should probably be a H2+P... followed by a bunch of span for nothing, lack of placeholders, empty strong tags for christmas only knowss what, lack of a proper fieldset... Deeper down the page you get the bigger a laundry list it is of how NOT to write HTML, even with 5's garbage redundancies.

    Then of coures it has the mouth-breathing asshattery of jquery in the mix, for what I have no idea since again I'm not seeing a blasted thing beign done that even needs scripting.

    You'd think 15.7k of markup would mean it's lean, but since there's only 3.4k of content and nothing I'd consider to be a content image, that could be as much as TWICE the markup needed for such a simple page. (I'd ballpark it at around 8k as what's "necessary" for that)

    Even just simple stuff, like why the blazes do you have "Let's Achieve Something!<span>Let's Achieve Something!</span>" -- that's some serious herpaderp right there... or pissing off users with the TARGET attribute, something that has no business on any website written after 1997. (Well, unless you go with HTML 4 frameset as your doctype)... or simply putting spaces in the wrong places ignoring the inline behavior rules. You've got an obvious blockquote -- where's your <blockquote> and <cite>?

    So... it's got problems. I could probably do the same thing in under 32k for HTML and CSS, not that I would with the pointless white-space wasting garbage, illegible colours that don't even come close to accessibility minimums, general overall lack of content, and layout concepts that make any attempt at being responsive a useless joke.

    -- edit -- BTW, what is that barely visible image on the right side next to the giant space-waster that looks like someone damaged their LCD by pushing on it too hard supposed to even be?
     
    deathshadow, Sep 19, 2015 IP
    ryan_uk likes this.
  7. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Damn that was a brutal one DS!
     
    KewL, Sep 20, 2015 IP