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.

Launched me new blog/portfolio, feedback?

Discussion in 'Design' started by KewL, Mar 14, 2014.

  1. #1
    Hey guys, after a bunch of concepts and changes, I've finally launched my web design blog/portfolio, would love to get some feedback and see what you guys think. Here's the url:

    http://robbyk.com
     
    KewL, Mar 14, 2014 IP
  2. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #2
    Good effort, nice clean design and fast to load. need content though :D
     
    xXxpert, Mar 14, 2014 IP
  3. meetdilip

    meetdilip Active Member

    Messages:
    196
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #3
    You works looks good.
     
    meetdilip, Mar 14, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Well, for a site that has this big graphic with the term "color theory" in it, it's disturbing to see a menu that's effectively invisible to about half the population since it's WAY below the minimums outlined in things like the EGA/VGA specification, WCAG, and general emissive colourspace theory...

    Everything seems excessively large -- You designed in EM's (which is good) but when it gets that 25% enlargement here (for 120dpi) it's a bit crazy -- to the tune of making it look like you're trying to make up for a lack of content with excessive amounts of white-space and junior-reader print.

    Under the hood it's what I'm used to seeing out of HTML 5 development; no, that's not a good thing. Broken heading orders (You have HTML 4 heading orders in a 5 doctype), 5 methodologies that are proven NOT to work even in 5 compliant browsers (like wrapping block level tags with inline-level), ASIDE on things that aren't really literary asides (the only definition that would make sense for it to be a semantic tag, otherwise it's just as presentational as CENTER), classes for nothing, DIV for nothing, that malfing "NAV" tag that's redundant to properly using numbered headings and horizontal rules... The real laugh is all the HTML 5 structural tags you aren't using that are wrapped by DIV...

    But even so at only 5k of markup it's probably one of the BEST pages I've ever seen built with HTML 5... Still about a k and a half of that would end up on the cutting room floor here.

    My biggest gripe would actually be the webfonts that honest to ghu I couldn't tell the difference between them and Times/arial. The use of serif fonts on screen usually hampers legibility, and only your massively oversized fonts are preventing that from being too big an issue. I'd just swing an axe at those as wasting handshakes and bandwidth as they really aren't doing anything for you.

    You might also want to read up on what the keywords meta is for -- your's is bloated, redundant, and guaranteed to be ignored. It's called keyWORDS -- not keyphrases, not keysentences, but keyWORDS. 7 or eight WORDS that exist inside BODY you want a slight boost to. No matter how often you see it, THIS:

    "Web Designer, Web Design Portfolio, Web Design Blog, Web Development Blog, Affordable Web Design, Los Angeles Web Design, Web Design Tutorials"

    Is pointless, redundant, and likely ignored. It's why people think keywords don't work, is nobody seems to use them properly. THIS:

    "web,design,development,blog,affordable,Los Angeles,tutorials"

    Would do the same thing -- think of it like a word jumble... of course that will only work assuming those words are actually in your BODY as CDATA.

    Adding "projection,tv" to your link tag's TARGET would also be a good idea, there are still a good number of UA's out there (Wii, PS3, MSNTV boxes) that identify themselves as TV instead of screen... some do both where if you don't say "TV" they apply their own style overriding yours (ouch). Likewise many kiosks and browsers running fullscreen (without window chrome) identify themselves as projection.

    I'd also suggest swinging an axe at the "JS for nothing" and jQuery bloat, since it doesn't seem to actually be doing anything useful for you. (though I always say that about anything jQuery related, cannot fathom how people are dumb enough to see a legitimate use for it on normal websites)

    Oh, and that stupid malfing "scroll down to have a menu on mobile" crap? Get rid of that. Waste of time, waste of bandwidth, and to be frank NOT more useful on mobile than just leaving the menu at the top. (especially with a four item menu!)... much less the waste of battery pointless javascripting is.
     
    deathshadow, Mar 15, 2014 IP
  5. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Thanks man! Contents on the way, what you're seeing is just the first blog post I wrote, should be a couple weeks then I'll have a decent amount of content. I get too excited to stock up and post it all at once haha.

    No idea what about any of the technical stuff in the first paragraph, are you saying there's not enough contrast? Come on 50% of the population? Maybe 50% of the population over 65 years old.

    Can i ask what resolution/screen size you usually use? I've tried the site on my macbook which is 1280x800-something, and my laptop which is 1980x1024ish, I don't think it looks over sized. The site is mainly designed for users with 1200+ width resolution size (which apparently is the majority of web viewers), and phones. I'd like to say tablets too but I don't own one to test it on. Everything below 1200 shrinks a bit so it should look alright on 1024x768. Everything below that is really styled for phones/tablets. As far as content go, more is on the way.

    I really don't know to much about this issue, but to me html5 seems like a good thing (i know you're going to rip me apart hard here haha). The idea that it gives browsers/search engines a little more info about what's what would be good (header, nav, article, section, aside). Plus my ultimate goal with everything is to land a designer job one day. It seems like all the firms/agencys do/want html5/css3/"mobile-first responsive" etc. So i might as well get started with it. I can't really say anything here, you have a lot more knowledge then me.

    Broken heading orders? Can you explain this more to me or point me in the right direction. I didn't know the heading orders changed for html?

    Are you being sarcastic? Yeah the code can definitely be cleaned up and trimmed some. I'll never have it perfect.

    I think the differences are subtle with the web fonts, they are there though. I like them, not much to say here I know we disagree on that matter.

    Ok I will fix the keywords, i was confused on that issue. Can I ask if there's any additional meta data stuff I should include in my <head> sections? I've noticed a lot of sites use different things...

    I will definitely add the tv/projection too.

    I like the little js scroller thing. I tried to fit the 3 links and the logo within 320px originally, but I just couldn't make it work without making the font sizes so small it'd be hard for a phone user to hit the correct one without zooming.
     
    KewL, Mar 15, 2014 IP
  6. Tulyy

    Tulyy Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Nice domain +great looking blog = Awesome site!
    Good Luck mate:)
     
    Tulyy, Mar 15, 2014 IP
  7. Eddie Phillips

    Eddie Phillips Member

    Messages:
    36
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    45
    #7
    I like your site also -- very clean design. Your list of projects is impressive. Love the girl with the "smile." Suggest you build a list by using an opt-in box and give those signing up a freebie of some type.

    Cheers from Eddie P
     
    Eddie Phillips, Mar 15, 2014 IP
  8. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Thanks guys, glad you guys like it!
     
    KewL, Mar 15, 2014 IP
  9. ash1ey82

    ash1ey82 Active Member

    Messages:
    588
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    88
    #9
    Design looks really nice, however I think you should change the font and the size of the main text.
     
    ash1ey82, Mar 15, 2014 IP
  10. Anorios

    Anorios Member

    Messages:
    12
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    40
    #10
    It looks pretty good, but maybe you should change the font in the body text. It renders too boldish in Google Chrome.

    From SEO point, maybe you should start using rich snippets aka microdata. Google has pretty good guidelines about this, you can check it here. It can be extremely useful if your posts go viral in social media.
     
    Anorios, Mar 17, 2014 IP
  11. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #11
    Hmm what OS and resolution are you using?

    Can you post the url, I'd be interested to see. I don't think you can post hyperlinks until your a respected member or whatever
     
    KewL, Mar 17, 2014 IP
  12. ash1ey82

    ash1ey82 Active Member

    Messages:
    588
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    88
    #12
    http://i.imgur.com/EjOb8Dl.png

    Thats how the text looks in Windows 8, chrome.
     
    ash1ey82, Mar 17, 2014 IP
  13. KingJabeyt

    KingJabeyt Member

    Messages:
    60
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #13
    I love simple designs like this. Just a suggestion, it would be best if you can make the featured image of your article a little bit smaller. However, do not change the orientation. The image being on top of your article suits your site design.

    Great work! Hope this helps :)
     
    KingJabeyt, Mar 17, 2014 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    That's a bit disturbing given the commonality of the terms; though not entirely unexpected if you're starting out. We can fix that.

    Let's go through what I said in that first paragraph:

    EGA/VGA specification -- the specification on which all modern display systems are pretty much based or at least inherit their behaviors and colourspace from. Refers to the EGA and VGA cards for the PC.

    WCAG -- Web Content Accessibility Guidelines; a set of recommendations on how to make a website usable/accessible.

    Back about ... 28 years ago IBM, Microsoft and Apple sat down together to determine the future of how to make interfaces consistent and usable. (This was when Apple realized that they better have Word and Excel or nobody would give a flying **** about their proprietary vendor lock-in BS -- shortly after they fired Jobbo the clown). Amongst this was a set of guidelines for making certain text remained legible when displayed in colour... the formula they chose for 'luminancy' was the Y component of YUV -- aka Luma, since it seems to directly corellate to how bright colors are to the eye. Many years later this same notion worked it's way into the WCAG, the idea being that anything less than 50% difference in Luma was hard/impossible for 50%+ the population to read.

    New font rendering tech like unClearType and Apple's uselessly idiotic and blurry rendering, much less illegible train wrecks like Freetype (as found on linsux) change these rules even further, so that you often need another 10 to 20% contrast declared to actually get that 50%. (you often have to screencap and zoom to find out what's happening). Fonts with thin Arms, hairlines, bars and spines can push this another 15-20%, to the point that some fonts on some rendering engines can need as much as 80% or contrast declared to reach that 50% actually being rendered on screen.

    The PROPER formula for Y being
    Y = r * 0.299 + g * 0.587 + b * 0.114

    Though most people just use 0.3, 0.59 and 0.11 respectively as being 'close enough'.

    Case in point, your menu's declared #8F8E8E is pretty easy to calculate luma since it's basically 1:1 on it's channel, so 142.33... The background is #0C0C0C, so 12, for a contrast of 130.33 -- basically right up agains the 50% minumum assuming you actually get those colors rendered -- but with that goofy webfont (not a fan for a whole variety of reasons, the other big one being a complete and utter waste of bandwidth) on ClearType many of the bars are rendering as #875 as their brightest color when they don't line up with pixel boundaries. (one of the reasons M$ added hinting to their fonts and engine was to avoid this problem). That's WAY below the minimum contrast (to the tune of being only 31% contrast) and hence why going with the on-paper minumum is just asking for it NOT to be legible.

    ... and that's before talking the blurry mess serifs end up, which is why serif is for print, sans-serif is for screen. You want to use serif fonts on headings where things are larger and it's not 'as important' at being legible, fine... but seriously, do the world a favor do NOT use serif fonts for flow content! There just aren't enough pixels per inch to reliably render serifs (or spurse, swashes, ears, etc) without them looking like ass and making the font harder to read; the old addage that

    To reach common legibility on that menu, I would probably up it to #BBB or higher... and that blue hover color? WAY below since, well... blue is only 11.4% the visibility spectrum... and of course axe the stupid bandwidth wasting webfont.

    One nice big side effect of using that by using the formula, it's also impossible to make a page the colour blind can't read.

    I use a wide variety, from 2560x1440 on a 27" IPS, to 1920x1080 on a 42" TV, down to 1024x800 on my nettop. In this case I was looking at your site on a 1920x1080 17" laptop... BUT, there's something you're missing in all this.

    The reason you are using %/EM fonts. The ENTIRE reason you're supposed to build pages that way is so that the fonts will automatically enlarge to the system metric -- aka the default setting in the OS or browser. (or as Apple is now calling it "display scaling").

    I'm a large font/120dpi user -- have been since they were called 8514 fonts way back on Windows 3.0. Apple might be making a big stink about them now having "interface scaling" for their 4k display support, but this is something that makes anyone who knows ANYTHING about windows YAWN and say "Wow, welcome to 1987". Of course such ignorance and idiocy is to be expected from the company who spent a decade making 72dpi fixed displays, then along comes safari and their developers say "But all displays are 96dpi!"

    Since you used EM's and percentages (a good thing) your layout is elastic, auto-enlargins and even auto-shrinking to fit the user/os/browser preferences. You have to keep that in mind when you make things 20-30% larger at start than most other websites...

    Which you did. Few if any people actually use the 100% default content-wide, much less pump it up to 1.125em on paragraphs... That 1.125 also introduces rounding errors since at the 96dpi/default most users will get 18px, but FF users MAY get 17px and 18px alternating between lines because of the re-re way it handles scaling... large font/125%/120dpi/win7 medium font/whateverTheHellTheyAreCallingItThisYear users like myself will get a massive 23px fonts on most browsers and 22px in FF.

    ... and that's NOT zoom, since it's OS-wide in every program, and things like images aren't resized/enlarged/shrunk.

    You shouldn't be designing to resolutions, you should be designing to the content and the capabilities of the device. You make your media query break points where needed, and you shouldn't have to worry about "size".

    You're using EM breakpoints -- which is good, but claiming them to be px equivalent is BS pure and simple. Your 30em media query for example works out to 600px on my desktop and 960px on my TV (since it's running 200%/192dpi/win7XL for use as a ten foot interface). Remember, there is NO fixed relationship between EM and pixels, ANYONE telling you there is, well... is full of ****.

    I would also REALLY suggest setting a max-width that's in EM's -- that way lines of text don't get so long as to be illebile. There reaches a point of diminishing returns on width, particularly with widescreens in the mix. (there's a reason I like browsers that support portrait mode tabs -- do something with that extra space).

    Well, first that violates what the search engines have spent the past decade telling us; write for the user not the engine. Second, those are ALL mostly redundant to using numbered headings and horizontal rules properly HTML 4 (or even HTML 2) style. Headings are the starts of sections, Low order (higher numbered) headings are the start of subsections of the higher order (lower numbered) heading before it... horizontal rules indicate changes in sections where a heading is unwanted/unwarranted -- which when used properly leave no legitimate reason to use header, nav, article OR section. (leaving ASIDE, and that has it's own ****storm of issues).

    You used the earlier rules I just outlined. HTML 5 threw them in the trash with this idiotic halfwit BULL of "every time you open a section, reset to using a h1" -- my solution? Don't use section (numbered heading/hr)... or article (lower order numbered heading or hr)... or nav (heading navigation in browsers that support it)... or footer (last HR on the page or numbered headings if warranted)...

    That's really one of the things about 5 that pisses me off. 4 Strict was about simplifying the specification by removing redundancies and tightening up the rules. 5 re-introduces redundancies, adds all new idiotic redundancies of it's own (video and audio), and on the whole seems to be the WORST of HTML 3.2 practices legitimized. There is NOTHING of value offered by HTML 5 for anyone who bothered embracing HTML 4 Strict, separation of presentation from content, semantic markup, logical document structure and progressive enhancement; it more seems to be crafted for the wants and desires of the halfwit morons who over the past decade and a half continue to sleaze out HTML 3.2 and were slapping 4 tranny on it. Now all their buggy broken bloated outdated methodologies are legitimized -- progress... RIGHT.

    Being that it's a superset, design in 4 strict, if you REALLY need 5 crap (like audio and video thanks to Apple and freetards being a bunch of jackasses on media format support) slap the doctype on it when done; most suits don't know enough about HTML 5 to realize much more than that anyways since they only know of HTML 5 as a sick buzzword like "web 2.0" -- You know, the types who think they can get sound technical advice from the pages of Forbes, which as I often say is akin to trying to get sound financial advice from the pages of "Popular Electronics", Home gardending tips from the pages of "Guns and Ammo" or sobriety advice from the pages of "High Times".

    CSS3 and responsive? Great stuff. HTML 5? Steaming pile of halfwit inept bullshit setting coding practices back a decade and a half. Anyone calling it "the future" or "modern" needs a good swift kick in the junk...

    (assuming that's in reference to putting 1.5k of the markup in the trash bin)
    Trimming off the HTML 5 for nothing would really help gut it down, as would the "JS for nothing". Your page currently comes in at 383k in 13 files... that's three times the upper limit I usually allow for a page on a site -- while ~116k of that are two legitimate content images, 111k of that is the ridiculously massive background png on your welcome area (that is WAY too blasted big at every resolution), 117k of that is javascript that isn't actually doing anything useful (thanks to the jquery bloat factor), and the 4 style sheets coming to 29k leaves one asking "FOR WHAT?!?"

    I really WANTED to like them, but with the differences in handling by font renderer, browser and OS, many fonts people try to use simply not being suitable for web deployment in the first place from a legibility standpoint, AND the massive waste of bandwidth (even the smallest ASCII7 support only font is HALF my ideal template filesizes in terms of HTML+CSS+SCRIPTS+IMAGES) I've soured on them and just do not advocate their use excepting perhaps for non-flow text. Should be used with an eyedropper, not a paint roller.

    There's a lot of BS metadata people include that NOTHING gives a flying purple fish about, and as such are just a waste of bandwidth. AUTHOR and GENERATOR for example are pointless BS nothing uses. There's the stupid "UA-compatible" nonsense that much like IE conditional comment loading of CSS or the stupid malfing halfwit garbage Paul Irish came up with of wrapping the HTML tag a half dozen times in IE CC's is more about sweeping developer ineptitude under the rug than it is actually writing sane and rational code.

    charset, content-language, viewport, description, keywords... those are the basic ones. Anything else is usually BULL unless it's being used to pass data to scripting (like google's specific ones).

    Oh, I do notice you're dicking around with trying to force cleartype on (what is this, 2001?) both in the markup and repeatedly in the CSS; not sure what's up with that but it's a waste of time, and may even piss off some XP users.

    REALLY? I find that hard to believe. Unless you were trying for some reason to keep them next to the logo... and I design down to 192 as the lowball without issue all the time so... not getting why a 'massive' (from a mobile standpoint) 320px would have trouble fitting FIVE WORDS in there...

    In either case it sure the **** isn't worth 116k of javascript to do it. (again, thanks to that fat bloated idiotic battery chewing bandwidth sucking steaming pile of manure known as jQuery)

    Oh, and you might want to read the links in my siggy about "What's wrong with your site" -- A lot of what I talk about in this post (and my previous one) is explained more fully there... likewise "What's wrong with HTML 5" explains a lot of my issues with said alleged "specification". (and yes, those were air quotes)
     
    deathshadow, Mar 18, 2014 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    deathshadow, Mar 18, 2014 IP
  16. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #16
    I'm going to go through the long post right now, but real quick, the 125% is messing up the header image. I need to make it dynamic, I tried to originally but i got so confused by the em sizes and h1/span replace thing that i cracked and used PX sizes. How can I figure out the width and height in em?

    it's so confusing because... I made the header image roughly 200% of the normal size displayed so it'll look ok up to 200% zoom. The bar size starts at 75px then moves up to 90px (Sorry i create the mockups in photoshop so I think in pixels, kind of like how us retarded Americans think in inches and feet). I can't even begin to figure this out
     
    KewL, Mar 18, 2014 IP
  17. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #17
    Thanks buddy, I'm going to try smaller options for the featured images.

    Hmmm, I didn't realize the jquery scrolling thing was taking up so much space. Wouldn't it be a lot better if i created the same effect using javascript (because I'm pretty sure 115.8k of that is the actual jqery library).

    As far as the cleartype thing, I wasn't sure what it did. I just noticed another site using it and hoped it would make the fonts look better on windows. I just switched back to windows this past month (after solely using osx the past 5 years) and the font rendering looks horrible to me (I know you see it the opposite). To me everything looks pixelated and choppy (I actually wrote a bit about this in that mac vs. pc post).

    Yeah i wanted to keep the navigation next to the header image on 320px. I mean I could make the top bar taller and place it below the header image, but then it'll take up a lot of the screen (on mobile devices), I'm trying to get at least down to the first post title without scrolling.

    Hmm what else... ohh the background image. I think I'm going to change the actual image a bit. I'll try to optimize it a little bit more and have it do a little more for the design than the current one. I don't want solid blue or a patter though, i want an actual image. Yeah i guess it takes up the majority of the space on my layout, but its also one of the only images (outside of the post images). Looks like I should blur the edges for large resolution users like yourself too.

    Wanted to touch on my sloppy html/extra classes. While coding this theme I really had no idea how the post format was going to look, and how the pages were going to look. I kind of winged it. As a result at the end of the development, when everythings supposed to come and tie together, I had to go back and add little fixes and stuff making it sloppy. I'm going to code it again one day and it'll be alot cleaner next time.
     
    Last edited: Mar 18, 2014
    KewL, Mar 18, 2014 IP
  18. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #18
    That. And then some. But always on the money somehow.
     
    qwikad.com, Mar 19, 2014 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    I think what you are missing is that the "system metric" / dynamic font scaling provided by %/em is NOT zoom. Two ENTIRELY different things. The entire reason to use %/EM on fonts is so that the TEXT scales, but images do NOT -- since image scaling on browsers almost always looks like arse.... and hot hot juicy playboy magazine ass, but damn baby please don't wear that thong cottage cheese ass.

    You don't... you should be auto-centering that image using background-position or a mix of aPo + negative margin. That's why the little gray 'shadow' thing you have there (which I couldn't even see until I had your page up on my IPS) probably isn't viable for web deployment. It could be done, but really it's not worth the effort IMHO -- especially with it so ridiculously dark it won't be visible sandwiched between the brightness of the address bar and the blue section you have below it.

    Either that or you use the rule of image interactions; that being if you have an image interaction, you use PX even if it pisses on the accessibility; a sacrifice I'd be willing to greenlight so long as the fonts are 'big enough in the first place" (18px+) and you only do it on the main h1 and the menu.

    CSS3 DOES add the background-size property, but the implementation isn't entirely reliable cross browser and support in legacy browsers is nonexistent, I probably wouldn't try to use it (for that)... even when it does work, for anything more complex than a gradient it usually doesn't look all that great; that's why you DON'T make images auto-scale on pages in all but the rarest of cases.
     
    deathshadow, Mar 19, 2014 IP
  20. scurvy

    scurvy Well-Known Member

    Messages:
    1,046
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    160
    #20
    Nothing new- like every other blog out there- even the logo is so boring.
     
    scurvy, Mar 24, 2014 IP