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.

Review our Site

Discussion in 'Design' started by Bransol, Oct 8, 2019.

  1. #1
    Hi there!
    I am currently at the final stages of introducing packages onto my site,
    and would like some non biast feedback for my site.

    I am a graphic designer offering professional graphic design services, and this is my
    registered agency website I have built. Let me know what you think I could add/remove to improve seo/ design and user journey.

    link: bransol.net
     
    Bransol, Oct 8, 2019 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Whiskey Tango Foxtrot is "non-blast"?!?

    The typical "splash" / banner area seems to cut off your logo at anything less than 1440p, looking more like a rendering bug than intentional design, showing only the top of half of the circle. In general I would call that entire area poor design since it is devoid of "content of value" giving zero indication what it is you even do. Don't waste and entire screen-worth of space on 8 words that don't tell the user jack about why they should even give a flying purple fish. Generally it's been shown 80%+ of users won't even scroll down on anything that lacking in "content of value".

    From there downwards it feels like just another cheap bootstrap-style template. Even if you didn't use bootcrap, it FEELS like it. Again, far too much whitespace for far, FAR too little content.

    The white on bright red is also dancing the knife-edge of legibility / accessibility norms.

    the ATTEMPT at being responsive seems to have broken break-points here, engaging the media queries at the wrong times. As a "IBM 8514 / Legacy Windows "large" / 125% / 120dpi / Windows 7+ "medium" / 20px / pick a huffing name for it already" user on most of my machines, I assume this is from mixing and matching metrics, and likely a direct result of flipping the bird at accessibility by declaring a bunch of things in PX.

    Good rule of thumb? Use EM -- not PX -- whenever possible. Media queries in PX? DON'T! Widths in PX? DON'T'! Font-sizes in PX? OH F*** NO!!!

    These surface issues indicate much deeper rooted coding and design problems that likely stem from the common mistake of thinking that design is nothing more than art unto and of itself. It isn't!. Design is engineering that incorporates art, and they must both be taken in equal measure.

    To that end we have to look at the code and, well... no offense, but it's trash.

    ... and accessibility in terms of non-visual navigation and screen/braille reader activity is utterly banjaxed. This means the page was not "written for the user" which is bad for SEO. As Matt Cutts told us over a decade ago, "write for the user, not the search engine".

    Again, design is not simply art, it's engineering that incorporates art.

    Redundant opengraph nonsense, stylesheet links with no media targets, outdated/outmoded attributes, a failure to recombine files making the page slower, blocking scripts in the <head>, noscript <img> in the head where content of any sort is utterly invalid gibberish, data= attributes that seem to indicate JavaScript being used to do HTML and CSS' job, endless pointless DIV for nothing, DIV+IMG doing H1's job, endless pointless classes for nothing, bandwidth wasting redundant TITLE attributes, sandbag DIV doing generated content's job, static style in the markup where it has ZERO business being in the first place, NAV wrapping run-on sentences of Anchors, NAV wrapping NAV, P wrapping multiple paragraphs with double-BR doing P's job, BR doing max-width's and/or SPAN's job, STRONG around words that shouldn't recieve "more emphasis" like "the" guaranteeing search going "Screw this page", lack of BLOCKQUOTE and CITE around obvious quotes and who's being quoted, H1 doing H2's job since you didn't use the (pointlessly redundant) SECTION tag, mulitple H1 on elements that aren't even the start of sections of the page in a manner GUARANTEED to get you pimp slapped for abuse by search...

    Seriously, since you don't have <SECTION> it is improper to have more than one H1 on a page... but you've gone and thrown it at nearly EVERY huffing element! That's useless trash to users with accessibility needs, and a sure-fire way to get backhanded by search for black hat SEO abuse.

    Without <SECTION>, an H1 (singular) is the (singular) heading (singular) that everything on every page of a website is a subsection of. An H2 marks the start of a major subsection of the page, with the first H2 (or HR) indicating the start of the main content. H3 marks the start of a subsection of the H2 preceding it, and so forth down the line, with lowly HR meaning a paragraph level (or H2 depth) change in topic. They do not mean fonts in different weights and sizes or drawing a line across the screen! -- that's just their default appearance.

    HTML 101 -- if you choose any of your semantic markup (everything other than DIV, SPAN, and A) based on what you want things to look like, you're choosing the wrong tags for all the wrong reasons. Not one of your H1 should be a H1, and 90%+ of them should't even be numbered headings. That IS going to hurt you on SEO, since the way they're used tells usability and accessibility to go suck an egg.

    In the end, it all contributing to how you're wasting 24k of markup to deliver not even 3k of plaintext and a dozen content images. There is NO reason for that to be taking more than around 9k of HTML. Similarly the CSS is a bloated wreck lacking condensed properties and being slopped together by some kind of WYSIWYG trash.

    Oh, it's webflow.... Well there's your problem. Nube predator scam artist TRASH like webflow only teaches you how NOT to build websites. No matter how "easy" or "fast" it might seem, the results are most always broken buggy inaccessible messes that tell large swaths of potential users to sod off.

    Nobody calling them a professional should be using a tool like that. The only thing about such software that can be considered professional grade tools are the people promoting its use.

    So yeah, you've got problems.
     
    deathshadow, Oct 8, 2019 IP
    Bransol likes this.
  3. Bransol

    Bransol Member

    Messages:
    115
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    43
    #3
    I thankyou for your honesty and time to write this review.
    I will make sure to apply this now to better the site immediately.
    I do want to make sure the site is attractive and usefull to my clients.

    Thankyou deathshadow!
     
    Bransol, Oct 8, 2019 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #4
    It's also your portfolio

    A potential customer might ask a friend for an opinion on the companies they have shortlisted for a job - if the friend happens to be a fraction as knowledgeable as @deathshadow then you've lost the work before they even pick up the phone.
     
    sarahk, Oct 8, 2019 IP
    Bransol likes this.
  5. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #5
    Bottom line is that FIRST impressions COUNT. Give a bad first impression and YOU WILL NOT GET A CHANCE FOR A SECOND IMPRESSION.
     
    mmerlinn, Oct 8, 2019 IP
    Bransol likes this.
  6. Bransol

    Bransol Member

    Messages:
    115
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    43
    #6
    Guys please don't speak on behalf of deaths experience. A review from your own experience and opinion is really what im after.
    Thanks a bunch however for taking the time to view and respond!
     
    Bransol, Oct 9, 2019 IP
    qwikad.com likes this.
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #7
    Do what you believe is right for you. If you keep chasing other people's opinions and reviews you will almost always get a negative feedback. Plus, I don't believe you're going to make any changes to your website. You know how I know that? You want it to look the way it looks now. And there's nothing wrong with that. What you really need now is a nice portfolio and you'll be good to go.
     
    qwikad.com, Oct 9, 2019 IP
    Bransol likes this.
  8. Bransol

    Bransol Member

    Messages:
    115
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    43
    #8
    Hey Qwik
    Thanks for the feedback.
    I am working on a version 2, however for now this is the shell to work in the interim while I start preparing for the updates.
    I will say this that I currently started doing web development this year seriously however I still felt I needed to do a UI course,
    but as I work for an agency I was learning practices through them, this build happened as I was learning and implemented the
    necessary changes as I learned them. I now am in a far better understanding on web dev and user journey and do feel
    that my site does not display these qualities hence why I wanted the reviews to also help align right decisions and necessary implantations
    when the new site is developed. I am currently in the UI phase in XD and will roll out hopefully next month.

    I needed a portfolio to stand for my current clients as my previous site is absolutely atrocious. I am using webflow and I do feel it
    is a great platform however it lacks logic. The function of the static pages I think though work perfect for the size of my business.
    I will have a separate client page included that will have the logic required. Its much easier for me to maintain and allows me the freedom.

    I hope to keep getting feedback for this because all feedback will be included into the update and I will definitely share it for a round of review.

    Thanks again all for the reviews! Please do keep it coming!
     
    Bransol, Oct 9, 2019 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    A VERY healthy attitude, and a feeling you shouldn't let go of. This is an ever changing industry and there are always new and better (and new and crappier) ways of doing things. Web development as a whole is a never ending process of learning. As a dearly departed friend used to say, "The say you stop learning is the day the rest of the world leaves you behind."

    Sadly a LOT of agencies are riddled with bad practices. There are so many sleazy, dishonest, fly-by-night places right now that do nothing but rape customers, taking advantage of the client's ignorance just long enough to "take the money and run"

    I'm not saying that's what happens where you work, but the code you presented kind of says that's the case. It's entirely likely that even if they've been doing it for a decade or more, they have likely been coding WRONG for a decade or more. It's a common affliction in this industry.

    That's being excessively generous. You look at the code it vomits up and it becomes plainly apparent that like most such tools, the people who CREATED it didn't know enough about HTML or CSS to teach others how to build pages. It's the same problem that idiocy like bootcrap or jquery bring to the table. The people who make, sustain, and promote such tools always seem -- as evidenced by their work -- utterly and completely unqualified to write a single blasted line of HTML... so what's that say about the people who learn to develop from such systems?

    I mean, take this simple section alone:

    
    <body class="benefits-section">
      <div data-collapse="medium" data-animation="default" data-duration="400" class="nav-bar w-nav">
        <div class="container w-container"><a href="#" class="w-nav-brand"><img src="images/bransol-logo.png" width="170" alt="" class="image"></a>
          <nav role="navigation" class="w-nav-menu"><a href="index.html" class="nav-link w-nav-link w--current">HOME</a><a href="about-us.html" class="nav-link w-nav-link">ABOUT US</a>
            <div data-delay="0" class="w-dropdown">
              <div class="nav-link w-dropdown-toggle">
                <div class="w-icon-dropdown-toggle"></div>
                <div>PACKAGES</div>
              </div>
              <nav class="dropdown-list w-dropdown-list"><a href="packages.html" class="drop-link w-dropdown-link">LOGO DESIGN</a><a href="packages.html" class="drop-link nodisplay w-dropdown-link">CORPORATE IDENTITY</a><a href="packages.html" class="drop-link nodisplay w-dropdown-link">WEBSITE DEVELOPMENT</a><a href="packages.html" class="drop-link nodisplay w-dropdown-link">SOCIAL MEDIA</a><a href="packages.html" class="drop-link nodisplay w-dropdown-link">POWER POINT DECKS</a><a href="packages.html" class="drop-link w-dropdown-link">GRAPHIC DESIGN</a><a href="packages.html" class="drop-link nodisplay w-dropdown-link">PRINT &amp; OUTDOOR</a></nav>
            </div>
            <div data-delay="0" class="w-dropdown">
              <div class="nav-link w-dropdown-toggle">
                <div class="w-icon-dropdown-toggle"></div>
                <div>LEARN</div>
              </div>
              <nav class="dropdown-list w-dropdown-list"><a href="blog.html" class="drop-link w-dropdown-link">BLOG</a><a href="portfolio.html" class="drop-link w-dropdown-link">PORTFOLIO</a><a href="frequently-asked-questions.html" class="drop-link w-dropdown-link">HELP/ FAQ</a></nav>
            </div><a href="contact-us.html" class="nav-link w-nav-link">CONTACT US</a></nav>
          <div class="w-nav-button">
            <div class="icon w-icon-nav-menu"></div>
          </div>
        </div>
      </div>
    Code (markup):
    Endless pointless "DIV for nothing" that provide ZERO semantics to the content they wrap, such as "LEARN" and "PACKAGES". These are choices in a list... we have a tag for that, it's called UL. The presence of data- attributes and pointless icon DIV indicates JavaScript being used to do CSS' job as if it's still 2003. The Anchors inside the NAV lacking a UL come across on aural and braille (so also likely to search) as a run-on sentence and certainly don't alternative-navigate well. THEN there's the endless pointless classes thrown in there willy-nilly, and the DIV+IMG doing a H1's job.

    Hence, written "properly" using semantic markup and leveraging hidden checkboxes to kick the JavaScript to the curb there's little reason for that to vary significantly from:

    
    <body>
    
    	<div id="top">
    
    		<h1><a href="/">BRANSOL</a></h1>
    		
    		<input type="checkbox" id="toggle_mainMenu" class="toggle" hidden>
    		<label for="toggle_mainMenu"></label>
    		<ul id="mainMenu">
    			<li><a href="index.html" class="current">HOME</a></li>
    			<li><a href="about-us.html">ABOUT US</a></ii>
    			<li>
    				<input type="checkbox" id="toggle_mainMenu_packages" class="toggle" hidden>
    				<label for="toggle_mainMenuPackages">PACKAGES</label>
    				<ul>
    					<li><a href="packages.html">LOGO DESIGN</a></li>
    					<li><a href="packages.html">CORPORATE IDENTITY</a></li>
    					<li><a href="packages.html">WEBSITE DEVELOPMENT</a></li>
    					<li><a href="packages.html">SOCIAL MEDIA</a></li>
    					<li><a href="packages.html">POWER POINT DECKS</a></li>
    					<li><a href="packages.html">GRAPHIC DESIGN</a></li>
    					<li><a href="packages.html">PRINT &amp; OUTDOOR</a></li>
    				</ul>
    			</li>
    			<li>
    				<input type="checkbox" id="toggle_mainMenu_learn" class="toggle" hidden>
    				<label for="toggle_mainMenu_learn">LEARN</label>
    				<ul>
    					<li><a href="blog.html">BLOG</a></li>
    					<li><a href="portfolio.html">PORTFOLIO</a></li>
    					<li><a href="frequently-asked-questions.html">HELP/ FAQ</a></li>
    				</ul>
    			</li>
    			<li><a href="contact-us.html">CONTACT US</a></li>
    		</ul>
    
    	<!-- #top --></div>
    Code (markup):
    a ~2/5ths reduction in size despite having more formatting and those INPUT+LABELS to trigger the show/hide of the submenus and implementing the mobile menu. EVERYTHING else being done goes in the external stylesheet.

    OR this:

    
      <div class="intro-section">
        <h1 class="h1 intro">We Design. On brand.</h1>
        <p class="p1 margin">We are professional design agency ready to assist with your visual communications.<br><br>Your brand deserves to look good on every platform from;</p>
        <div class="w-layout-grid our-services">
          <div id="w-node-03202b1df9b4-e9a3b3f0" data-w-id="393fbc33-3307-dcfd-fc13-03202b1df9b4" style="opacity:0" class="our-services-card lower"><img src="images/design-icon-white.png" alt="" class="design">
            <h1 class="h2 white">Design</h1>
          </div>
          <div id="w-node-4fc78a678ea9-e9a3b3f0" class="our-services-card lower"><img src="images/digitial-icon-white.png" alt="" class="digital">
            <h1 class="h2 white">Digital</h1>
          </div>
          <div id="w-node-639304a0fdcf-e9a3b3f0" class="our-services-card lower"><img src="images/print-icon-white.png" alt="">
            <h1 class="h2 white">Print</h1>
          </div>
        </div>
      </div>
    
    Code (markup):
    Structurally those H1 aren't even headings since they have no content to be the headings OF! The images also come across as presentational meaning they probably don't belong in the markup. If they were moved to the CSS for not being actual content, you could also leverage the incorrectly named "CSS Sprites" to reduce the number of separate files.

    As such there's little legitimate reason for said section to be much more complex than:

    	<div id="weDesignOnBrand">
    		<h2>We Design. On brand.</h2>
    		<p>
    			We are professional design agency ready to assist with your visual communications.<br><br>Your brand deserves to look good on every platform from;
    		</p>
    		<ul>
    			<li class="design">Design</li>
    			<li class="digital">Digital</li>
    			<li class="print">Print</li>
    		</ul>
    	<!-- #weDesignOnBrand --></div>
    Code (markup):
    Reducing it to a third the code where again, everything else being done there goes into the stylesheet.

    Also the hover effects there are confusing since they aren't links. Don't send visual animations like that to things that don't do anything -- and if they do something, get the anchors in there as your hooks so it can be done with style, not scripting.

    ... or these:

    
      <div id="our-packages" class="packages-section">
        <h1 class="h1 intro service">How can we help you today?</h1>
        <p class="p1 margin black _01">Personalize your design visual communications in just a few clicks.</p>
        <div class="w-layout-grid packages-grid">
          <a href="packages.html" class="link-block card w-inline-block">
            <div class="package-box"><img src="images/icon-05.png" width="75" alt="">
              <h1 class="h1 package-card">Logo<br>Design</h1>
              <p class="p1 package">Click to see packages</p>
            </div>
          </a>
          <a href="packages.html" class="link-block card w-inline-block">
            <div class="package-box"><img src="images/icon-07.png" width="70" alt="">
              <h1 class="h1 package-card">Corporate <br>Identity</h1>
              <p class="p1 package">Click to see packages</p>
            </div>
          </a>
    
    Code (markup):
    Again, structurally these are NOT headings, and even the ONE that is a heading should be a H2 marking the start of a major subsection of the page, not a H1 saying it IS the entire page. (unless you use the stupid SECTION tag, you should have ONE <h1> per PAGE!)

    The "click" text being redundant gibberish for anything other than screen media since they're anchors. If you feel they are needed for visual users because your appareance lacks the "click on these" queues, add them from the CSS using Generated content.

    Hence:

    
    	<div id="howCanWeHelp">
    		<h2>How can we help you today?</h2>
    		<p>+
    			Personalize your design visual communications in just a few clicks.
    		</p>
    		<ul>
    			<li class="logoDesign"><a href="packages.html">Logo Design</a></li>
    			<li class="corporateIdentity"><a href="packages.html">Corporate Identity</a></li>
    
    Code (markup):
    Being all that's needed there. Again, a third the code. Forcing the breaks would be done by max-width on the anchor.

    No joke, that "click" text? CSS.

    #howCanWeHelp a:after {
    	content:"Click to see packages";
    }
    Code (markup):
    Adds them to all of them for whatever media target the styleseheet is for, without making a confusing bloated mess for non-visual UA's. A sized image container could be similarly added using :before as the background image, again allowing for the leveraging of CSS sprites.

    Even just setting aside the fancy CSS trickery though, methinks you need to take a step back and learn what semantic markup is, how to use it, and consider embracing a "content first" approach to design. Write ALL your content in a flat text editor FIRST as if HTML and CSS don't even exist, in as logical and seemingly useful an order as possible. Then mark up that content using tags to say what things ARE, and NOT what they look like. That's your foundation. Only once you have that do you add semantically neutral tags like DIV and SPAN, and classes/ID's to it so you can create the first (of many possible) layouts and stylings.

    Until you have that solid foundation you really have no business worrying about what things are going to look like. This is where 90%+ of "designers" utterly bone the whole process, as they start out screwing around with what it's going to look like in some goofy paint program or WYSIWYG editor... and that's not design, that's art!

    ... which is why the majority of such sites tell non-visual user-agents to go plow themselves; and as the joke goes, "Search engines don't have eyeballs". They give as much of a flying purple fish about your visual appearance as a blind man.
     
    deathshadow, Oct 9, 2019 IP
    Bransol likes this.
  10. Bransol

    Bransol Member

    Messages:
    115
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    43
    #10
    Thanks again Death for a more thorough look into things.
    I am taking your feedback and implementing it!
     
    Bransol, Oct 9, 2019 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #11
    I'm not big on reinventing the wheel.

    Take a look at this:
    upload_2019-10-10_11-58-10.png
    That's just embarrassing.

    So many "h1"s and some of them have classes that are "h2" and "heading-5". Forget SEO for a second and focus on basic, beginner html - why so many h1?

    Example: You have your div for stars which will never contain anything other than stars so you can just have the stars in there without the need to wrap them in anything. Move the style off the page and into the css file and you're all set.

    upload_2019-10-10_12-0-51.png upload_2019-10-10_12-3-45.png

    Example: Why are your contact numbers so incredibly important they need to be an h1? Hell, even the words "email address" and "telephone" are the highest priority headings and yet the text is hidden!!!

    upload_2019-10-10_12-8-15.png

    I thought, as a point of comparison, that I'd check your portfolio sites listed here at the bottom of the page - a bit much white space on mobile for my liking - and only found sites for 3 of them - PropertyCiti is "Website Powered by Prop Data", the only site I found using the Amara logo is on wordpress.com and Polo Electrical has "Design and hosting by Media Platform".
    upload_2019-10-10_12-16-53.png
    Example: Get someone to proof read your text, this is shocking. Don't talk down to your customer - your name isn't "exactly" brand solutions. You can tie the two together without insulting them, I'd start by writing it as BranSol rather than Bransol.

    Don't say "we" unless you have at least one other person working with you.

    [​IMG]
     
    sarahk, Oct 9, 2019 IP
    Bransol likes this.
  12. Bransol

    Bransol Member

    Messages:
    115
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    43
    #12
    Yes we are a team of 3 at this moment.
    As I said this version of the site is undergoing heavy redesign
    to ensure that the structure sits right going forward.

    This site was built during my phase of learning, so you can be sure
    that all these imperfections will be ironed out.

    Thankyou Sarah for taking out your time to give your feedback.
    I really do appreciate it!
     
    Bransol, Oct 9, 2019 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Also it should be just "copyright", not "copyright copyright" -- use the word OR the symbol, NOT both!

    This is a mistake I see nearly every day.
     
    deathshadow, Oct 9, 2019 IP
    Bransol likes this.
  14. scurvy

    scurvy Well-Known Member

    Messages:
    1,046
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    160
    #14
    the red is hard on the eyes. Any potential customer gonna run away.
     
    scurvy, Nov 23, 2019 IP
  15. Dani244777

    Dani244777 Greenhorn

    Messages:
    23
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    8
    #15
    Why not change the color? This dark blue is not very beautiful.
     
    Dani244777, Apr 26, 2020 IP