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.

How's my website design?

Discussion in 'Design' started by aadi1295, Jun 17, 2015.

  1. #1
    Hey DP members,
    I am not trying to be a spammer but I just wanna know your reviews and thoughts about my website design. I made this website for a client and before delivering it to him I just wanna make sure everything is fine because this is my first project as a free lancer. I programmed and designed this website myself. Please tell me how did I do. Thanks
    URL: www.buyphone.pk
    SEMrush
     
    aadi1295, Jun 17, 2015 IP
    SEMrush
  2. ulterios

    ulterios Well-Known Member

    Messages:
    388
    Likes Received:
    58
    Best Answers:
    1
    Trophy Points:
    140
    #2
    The site looks good, I would just add an "About / About Us" page and update and add all the needed info on the "Disclaimer" page so Google won't come back at you for not meeting the AdSense requirements.

    Other than those 2 things the site looks good and performs well. Great job!
     
    ulterios, Jun 17, 2015 IP
  3. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #3
    Thanks for your advice, I have added About us page.
     
    aadi1295, Jun 20, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,631
    Likes Received:
    1,969
    Best Answers:
    249
    Trophy Points:
    515
    #4
    *WARNING* My posts may seem harsh, but I'm giving you the Gordon Ramsey treatment here. I'm not going to sugar coat it, slap the rose coloured glasses on your head and tell you everything is fine.

    The tall thin webfont is difficult to read, the fixed metric (pixel) font sizes only exacerbate that problem, the white-on-red and red-on-pink areas are of questionable legibility thanks to the lack of colour contrast (the webfont may be making that worse), the word-wrap/placement of the product names looks more like a rendering bug than intentional design, the ATTEMPT at being responsive is broken here, that social media area with the scrollbar also looks more like a mistake than intentional design, and the show/hide scripttardery is an accessibility mess on mobile and generally speaking a waste of code. Also the "latest products" as a massive tall column with the "fake viral video thing" NOT having anything below it also looks bad and doesn't result in the most useful of layouts.

    Under the hood... Well, it's nice to see someone trying to use XHTML 1.0 STRICT since it's the last spec to be worth a damn, but if that's what you are doing why are you throwing "modernizr" at it? You only need that if you're using the dumbass redundant allegedly semantic HTML 5 tags, and you didn't make an HTML 5 document!

    It's built with bootcrap so automatically you have endless pointless classes for nothing and likely as much as TWICE the markup as should be needed. I would HIGHLY recommend finding a stick to scrape that off with before you continue tracking it all over your website's carpets.

    Your keywords META is ridiculously overstuffed, redundant to itself, and generally shows an ignorance of what that tag is FOR. It is GUARANTEED in it's current state to either get you ignored (google, bing) or slapped down (baidu, DDG) for abuse. It's called keyWORDS. Not keyprases, not keysentences, but keyWORDS. It's SUPPOSED to be seven or eight SINGLE words (only exception being proper names) that exist inside <body> that you want a slight upranking on, preferably under 128 characters total (some people say keep it to 96 or less!)

    The description META is equally flawed in that it just prattles off some magic keywords instead of doing what that meta is supposed to do, a brief natural language sentence or two describing the page to be shown beneath the link on the SERP.

    The MASSIVE number of links on the dropdown menu could result in link overload for users and isn't exactly mobile friendly either... Naturally it has the bootcrap "hamburger icon" menu garbage that abuses a button tag outside of a form (it's a form element for a reason), uses endless pointless DIV and classes for NOTHING, and relies on scripttardery to do something CSS3 can do WITHOUT the scripting.

    The forms on your pages are malformed/incomplete -- where's your FIELDSET? LABEL? Again, PLACEHOLDER is NOT a replacement for LABEL.
    http://baymard.com/blog/false-simplicity
    http://www.pardot.com/faqs/forms/placeholders-and-labels/
    http://www.webaxe.org/placeholder-attribute-is-not-a-label/

    Or even the specification:
    http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-placeholder-attribute

    ... and I quote:
    The numbered heading orders are just utter and complete nonsense; remember that a h1 is the heading under which EVERYTHING on the page is a subsection, so unless you are using HTML 5's SECTION tag (that pisses all over document structure) there is no reason to EVER have more than one H1 on a page, and typically that would be the site name or logo just as how in a newspaper or book the site title is on every page / pair of pages at the top. (regardless of the different presentation). H2 indicate the start of subsections of the H1 before it, H3 indicate the start of subsections of the H2 before them and so forth -- so having H3 before you even have your first H1 is just nonsense. Having an H4 when the header before it is a H2 is nonsense... and I'm pretty sure all those "search by" headings are NOT subsections of "Mobile Prices < 5,000 Rs." -- but that's what having H3 after an H2 means!

    The static STYLE you have in the markup with the style="" attribute is instantly rubbish in all but the smallest of corner cases. (declaring a width for a progress bar/ranking or font-size for a tag cloud are the ONLY cases that immediately come to mind as "acceptable use") -- that's just code bloat that belongs in your external stylesheet. 99% of the time if you are resorting to the STYLE attribute, you're doing something wrong... because layout/presentation has NO business in your markup.

    Which is also why bootcrap is utter and complete halfwit nonsense you're better off forgetting with class stupidity like "col-xs-12 col-md-12"!

    You've got perfectly good LI, what did you need the extra DIV inside them for, much less classes on them? Leverage the LI and inherit off the parent selector. I'm seeing "clearfix" nonsense in there like it's still 2003, empty tables for Christmas only knows what (Scripttardery perhaps? If so generate them in the script!), a LINK tag in the BODY (<link> is only valid markup if it's in HEAD, particularly in STRICT), and of course even more scripttardery.

    Hell, I'd even axe the Google analytics scam artist BS since anything USEFUL it provides should be able to be gleaned from your hosting logs with tools like analog or webalizer.

    It takes a painful 30 seconds plus to load here -- MOST of that can be blamed not so much on the 1 megabyte page size (which is bad, but sadly commonplace these days), but on the homepage being built from 60 separate files. 51 of those are image files and REALLY I'd try to limit myself to 24 images. EVERY separate file past the first eight generally averages a fifth of a second in "handshaking" the first time someone visits your page, and worst case (like on mobile connections) that can be a second or more. It's why even on gallery websites you don't see them loading more than 16 to 20 thumbnails at a time.

    Also those six images across the top could use a bit heavier or better an encoding -- they're 166x190 but are sucking down 50 to 70k a pop. At that size even a 5% lossy should be 15k apiece, with 15% lossy (which is usually still barely noticeable on photographs) coming in well under the 10k mark. Little tip, don't trust Photoshop to "save for web" -- they wouldn't know image optimization from the hole in their product DVD's

    One big hiccup in the page loading is that facebook plugin -- there's a reason MOST sites just have a link to FB or the smaller "like" with a count instead of the massive "connect" version you used... That's another thing that I'd be swinging the axe at.

    You've got 53k of markup to deliver four dozen or so content images and 4.7k of plaintext -- a well/properly coded markup for that should probably be well under 24k of code -- HALF your markup likely belongs on the cutting room floor.

    So... yeah, it needs some work. STILL, for everything I just said -- for doing something for FREE and given your faulty choices of tools -- you didn't do as bad as one would expect. It's actually one of the BETTER pages I've seen with bootcrap.

    Unfortunately that's like saying it's one of the better automobiles ever made by British-Leyland.
     
    deathshadow, Jun 20, 2015 IP
  5. Matthew Sayle

    Matthew Sayle Prominent Member

    Messages:
    3,325
    Likes Received:
    464
    Best Answers:
    1
    Trophy Points:
    385
    #5
    You haven't delivered it yet but you put adsense up already?

    That's pretty weird if you ask me.
     
    Matthew Sayle, Jun 20, 2015 IP
  6. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #6
    You have no business doing web development when the page validates like this:
    https://validator.w3.org/check?uri=...(detect+automatically)&doctype=Inline&group=0

    235 ERRORS!

    if you deliver a piece of crap like that to a client and expect payment for it, you are a thief. Before you start delivering pages to clients, need to learn enough of the basic skills so you can actually code a valid page. If you were applying for a job with me and that was an example of your work; your interview would end in about 10 seconds as you are shown the door to the parking lot.

    I am not even going to comment on the design or presentation, because that is meaningless when the page is a technical garbage dump.
     
    COBOLdinosaur, Jun 20, 2015 IP
  7. ulterios

    ulterios Well-Known Member

    Messages:
    388
    Likes Received:
    58
    Best Answers:
    1
    Trophy Points:
    140
    #7
    You are most welcome. :)
     
    ulterios, Jun 20, 2015 IP
  8. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #8
    I must say I am terrified to read your detailed comment, Actually I am new to web development and didn't think all of the things you pointed out. I am very much thankful to you and very glad that your "HARSH" comment is gonna do many good things to me in future. That's exactly how a honest person should evaluate. Thanks again and I am now trying to fix everything you have mentioned.
     
    aadi1295, Jun 21, 2015 IP
  9. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #9
    Thanks for honest review, I am gonna fix all these issues now. Thanks again
     
    aadi1295, Jun 21, 2015 IP
  10. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #10
    Yeah, because client asked to put them already.
     
    aadi1295, Jun 21, 2015 IP
  11. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #11
    Well you did a nice job of cleaning up the errors. You will find that you can save yourself a lot of time if you validate as you are going along rather than waiting until the end of the task. Doing it frequently will also eliminate the possibility that you are not getting what you expect on the page because an error is confusing the browser.

    I am not a big fan of bootstrap because using it almost always makes a page more bloated than necessary and it makes maintenance difficult. There are two items I would still consider a problem if I was reaponsible for approving the page for delivery to the client. The total load for images over 500k. That is more than 3 times what I normally consider maximum image load (150k). The resulting image heavy page is not going to do well in search engines because there is no text content on the page for the SEs to index. The images are going to provide exactly zero impact. You also have no h1 tag to give the AE crawlers the name of the page. That h1 is critical in getting good search result.

    If the design with all graphics and no content is from the client, then you need to explain to them that the pages is going to be worthless as a means of bringing in traffic from search engines. If the design approach is yours, then you need to cut down on the graphics and put some real text based content on the page that will support the keywords that you want to produce traffic.
     
    COBOLdinosaur, Jun 22, 2015 IP
  12. accel

    accel Well-Known Member

    Messages:
    142
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    133
    #12
    Hi

    I would advise a small change in your English:

    Change:

    Note: We update the latest mobile prices in Pakistan on daily bases and we don't sell mobile phones on this site.

    To:

    Note: We update the latest mobile prices in Pakistan on a daily basis and we don't sell mobile phones on this site.

    Or even better:

    Please Note: This site gives the latest mobile prices in Pakistan, updated on a daily basis, but we do not sell mobile phones ourselves.

    ---

    Also, make it clear exactly what prices you are displaying. Are they manufacturer recommended prices?
     
    accel, Jun 22, 2015 IP
  13. accel

    accel Well-Known Member

    Messages:
    142
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    133
    #13
    1) BUYPHONE.pk logo top left should be clickable to home page.

    2) I think the having the bright red does not go well with the plum colours you have used in the header. The site would look better if you used a consistent colour theme throughout, either the plum / purple colours used in the header, or the bright reds used in the page body, but don't use a mixture of both.
     
    accel, Jun 22, 2015 IP
  14. Mehdi.b

    Mehdi.b Active Member

    Messages:
    354
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    65
    #14
    I was not sure if you have made the changes mentioned above yet or not, but in general I believe considering your target market, this is not bad.
    Look at your target audience before adding or dropping anything mentioned here, and do not be discouraged by what people say, take them professionally not personally.
    In my opinion the website has tons of red color which is not easy on eyes, if you look at most of fast foods they use alot of red to bring in people but make them leave soon.
    Showing so many options on the first page is a bit too many but again I believe it might suite your target audience.
    Also the voting for mobiles were not clear on how one can choose the numbers. There are no indicators in numbers to show it is a drop down menu and you can choose a number as your vote for each area.
    All in all a good job, needs some tidying up and also a good plan to make money from it.
    Have a great day
     
    Mehdi.b, Jun 22, 2015 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,631
    Likes Received:
    1,969
    Best Answers:
    249
    Trophy Points:
    515
    #15
    Improvements have definitely been made since my review.

    Still not wild about the webfont and sizes declared in pixels, but it's significantly more useful on mobile than it was... still needs a lot of work on speed and how the responsive part works -- possibly axing floats for inline-block and centering things once it's narrow enough that the items wrap would probably go a long ways towards making it look better in that regime.

    I do think too many percentage widths are in use, some things are changing size (like the sidebar) that shouldn't given the content (like that FB plugin that's still sucking down WAY too much load time).

    Still needs work, but progress has definitely been made.
     
    deathshadow, Jun 23, 2015 IP
  16. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #16
    Bootstrap is client's requirement, and he wants a lot of images on home page but I am trying to compress images with loss less quality to reduce sizes. "Latest Mobile Prices in Pakistan" is a h1 tag. I know it's not much for SE to crawl, but what can I do if client wants it like that. Thanks for pointing out W3C errors.
     
    aadi1295, Jun 23, 2015 IP
  17. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #17
    Thanks for your comment, Yes I always take criticism professionally, and changing the colors and removing a lot of red. Thanks for pointing that out.
     
    aadi1295, Jun 23, 2015 IP
  18. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #18
    Hey mate, Thanks so much for your harsh comment above, actually it's client's decision about the fonts, he want the "Rajdhani" fonts for his site and bootstrap as well. I have tried to explain him about that facebook like box, but he want it that way. right now my main concern to compress image sizes with loss less quality. Thanks again for pointing things out.
     
    aadi1295, Jun 23, 2015 IP
  19. aadi1295

    aadi1295 Well-Known Member

    Messages:
    184
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    Digital Goods:
    1
    #19
    Thanks for pointing this out, my english is always bad because it's not mother tongue, Yeah I am taking off that annoying red color soon. Thanks man
     
    aadi1295, Jun 23, 2015 IP
  20. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #20
    The way you have the h1, degrades it value . It is buried three elements deep inside of divs. and is being used more like a component label instead of page title. The SEs will pick it up and give it some value, but the surrounding content will hurt it semantically. To have the most value it should be a direct child of the <body> to introduce all the page content, not just a local heading for a div based structure.
     
    COBOLdinosaur, Jun 23, 2015 IP