CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Site Review  (Read 168 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 51
  • Karma: +0/-0
Site Review
« on: 27 Jul 2022, 10:47:04 am »
Would love to have this site reviewed which has been rewritten several times: https://AustinAccidentLawyer.com.

It started as pure html in the old days, then was a wordpress site, then wagtail, back to wordpress, most recently it was a gatsby site, and after reading several articles from Jason, rewritten to use minimal javascript and wordpress (I know wordpress has security issues). It's still a work in progress as one plugin uses jQuery and css for the testimonials, I still want to add some icons for the social media and contact us.

Don't hold back.

Thanks,

Andrew

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 849
  • Karma: +160/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Site Review
« Reply #1 on: 28 Jul 2022, 01:26:39 am »
Home page popups are a complete annoyance, with the illegibly tiny "chat" on the bottom right, the goofy distracing blue circle thing so small and illegibly coloured I can't even figurte out what it's for, and the "let's connect using e-mail" one just designed to piss users off.

100% goofball artsy-fartsy and marketing scam crap DESIGNED to drive users away. Because they'll take one look at it and go "well, this is obviously a scam site!"

The illegible colour contrasts of white on orange, white on sky blue, and so forth certainly not helping matters. Without leaning way the hell in and strainign my eyes there's no way I'd be able to read that phone number in the top corner.

The video on the home page instead of actual content of value also feels scammy.

The heading alignment -- or lack therin -- looks more like rendering error than intentional, with the white strip above the cut-off hammer, massive gap below said logo, that illegible orange button aligned bottom with the menu instead of center.. It's not good. That so much garbage -- like the chat, contact, whatever -- seems slopped in to overlap the content really making it feel like you need someone versed in design to clean things up, and someone fluent in actual marketing to help weed out the scam artist bullshit.

Though I will say the document outline seems to be correct, so alternative navigation isn't horrible.

It is painfully slow to watch load, and all the "JS for nothing" scammy crap being as much a cause as the poorly organized code. Pulling up some numbers it's a 5.98 megabyte (unpacked) monstrousity being delivered as almost 2 megabytes (gzipped) in 89 file requests. That 73k of that is markup on a page with only 11.6k of plaintext and two dozen content media? That's not even 20k of HTML's flipping job! The insane MEGABYTE of CSS in 19 separate files reeking of the developer incompetence common to just slopping turdpress extensions together with zero care how slow or unusable the result is.

A situation only further exacerbated by the 200+k of "other HTML" being loaded in by the scripttardery, and the utterly guano crazy SIX FREAKING MEGABYTES of JavaScript in 42 files?

Put a bullet in it. That site has to be costing more than it's generating in contacts and conversions.

Popping the bonnet to look at the code, it's the typical train wreck of asshattery common to turdpress sites. Perhaps even worse with all the DNS prefetch because of how it's all pissed together from different off the shelf answers, the shit-ton of stylesheets being sent to "All", the presence of ID's on elements that shouldn't ever even need ID's, blocking scripts in the head, scripts that don't belong in the head in the head, opengraph properties that are redundant to normal META, X-UA crap like it's still 2008, reduntant type="" declarations like it's still 2012...

And that's before we talk about turdpress making you shit classes like "has-text-align-center" or "wp-block-column" on it flipping the bird at why HTML exists and why CSS is separate from it. Or the STYLE tag shat into BODY where it's completely invalid... or the opening and closing of LI in places where there doesn't even seem to be a UL or OL around any of it?

I mean just look at this shit-show...

Code: [Select]
<style>#wprev-slider-2 .wprevpro_star_imgs{color: #FDD314;}#wprev-slider-2 .wprev_preview_bradius_T1 {border-radius: 0px;}#wprev-slider-2 .wprev_preview_bg1_T1 {background:;}#wprev-slider-2 .wprev_preview_bg2_T1 {background:;}#wprev-slider-2 .wprev_preview_tcolor1_T1 {color:;}#wprev-slider-2 .wprev_preview_tcolor2_T1 {color:;}#wprev-slider-2 .wprev_preview_bg1_T1::after{ border-top: 30px solid ; }</style><div class="wprevpro wprev-slider "   id="wprev-slider-2"><ul><li> <div class="wprevpro_t1_outer_div w3_wprs-row-padding wprevprodiv">
<div class=" wprevpro_t1_DIV_1 w3_wprs-col l4">
<div class="indrevdiv wprevpro_t1_DIV_2 wprev_preview_bg1_T1 wprev_preview_bradius_T1">
<p class="wprevpro_t1_P_3 wprev_preview_tcolor1_T1">
<span class="wprevpro_star_imgs_T1"><span class="starloc1 wprevpro_star_imgs wprevpro_star_imgsloc1"><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span></span></span>I endorse this lawyer. Andrew and I have worked together on a couple of clients and I am very impressed with his quality and depth of knowledge. Andrew understands the nuances of different insurance carriers and the way that courts will react to various situations. He is quite experienced and I recommend him highly for any personal injury matters. </p>
</div><span class="wprevpro_t1_A_8"><img  alt="Natalie Lynch Avatar"  data-src="https://images.avvo.com/avvo/ugc/images/head_shot/standard/lawyer_natalie_lynch_4236191_1522957469.jpg" class="wprevpro_t1_IMG_4 wprevpro_avatarimg lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img src="https://images.avvo.com/avvo/ugc/images/head_shot/standard/lawyer_natalie_lynch_4236191_1522957469.jpg" alt="Natalie Lynch Avatar" class="wprevpro_t1_IMG_4 wprevpro_avatarimg" /></noscript></span> <div class="wprevpro_t1_SPAN_5 wprev_preview_tcolor2_T1"><div class="wprevpro_t1_rname" >Natalie Lynch</div><div class="wprev_showdate_T1">3/18/2015</div> </div>
</div>
<div class=" wprevpro_t1_DIV_1 w3_wprs-col l4">
<div class="indrevdiv wprevpro_t1_DIV_2 wprev_preview_bg1_T1 wprev_preview_bradius_T1">
<p class="wprevpro_t1_P_3 wprev_preview_tcolor1_T1">
<span class="wprevpro_star_imgs_T1"><span class="starloc1 wprevpro_star_imgs wprevpro_star_imgsloc1"><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span><span class="wprsp-star"></span></span></span>I endorse Andrew Traub because he is a hard-working, diligent, knowledgeable, ethical and creative lawyer. In injury cases, he is definitely someone you would want to have on your side. From a client perspective, he is down-to-earth and easy to talk to, and from the lawyer's perspective, he is tenacious and a strong advocate for his clients. </p>
</div><span class="wprevpro_t1_A_8"><img  alt="Jeffrey Barnett Avatar"  data-src="https://images.avvo.com/avvo/ugc/images/head_shot/standard/lawyer_jeffrey_barnett_91268_1522962319.jpg" class="wprevpro_t1_IMG_4 wprevpro_avatarimg lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img src="https://images.avvo.com/avvo/ugc/images/head_shot/standard/lawyer_jeffrey_barnett_91268_1522962319.jpg" alt="Jeffrey Barnett Avatar" class="wprevpro_t1_IMG_4 wprevpro_avatarimg" /></noscript></span> <div class="wprevpro_t1_SPAN_5 wprev_preview_tcolor2_T1"><div class="wprevpro_t1_rname" >Jeffrey Barnett</div><div class="wprev_showdate_T1">6/21/2013</div> </div>
</div>
<div class=" wprevpro_t1_DIV_1 w3_wprs-col l4">
<div class="indrevdiv wprevpro_t1_DIV_2 wprev_preview_bg1_T1 wprev_preview_bradius_T1">
<p class="wprevpro_t1_P_3 wprev_preview_tcolor1_T1">
<span class="wprevpro_star_imgs_T1"><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="5 star rating"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" class="wprevpro_t1_star_img_file lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_stars_5.png" alt="5 star rating" class="wprevpro_t1_star_img_file"></noscript></noscript></noscript></noscript></noscript></noscript></span>Andrew was great, he wouldn&#38;#39;t let the insurance companies low ball me. He got the max from the other insurance company and even got a nice settlement from my company. If you&#38;#39;re in an accident, I highly recommend the Traub law office. </p>
<a href="https://www.yelp.com/biz/the-traub-law-office-austin-2?sort_by=date_desc" target="_blank" rel="nofollow noreferrer" class="wprevpro_t1_site_logo_a"><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="Yelp Logo"  data-src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" class="wprevpro_t1_site_logo lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://austinaccidentlawyer.com/wp-content/plugins/wp-review-slider-pro-premium/public/partials/imgs/yelp_outline.png" alt="Yelp Logo" class="wprevpro_t1_site_logo"></noscript></noscript></noscript></noscript></noscript></noscript></a> </div><span class="wprevpro_t1_A_8"><img  alt="John W. Avatar"  data-src="https://s3-media1.fl.yelpcdn.com/photo/agTVsSmuFaQsPhtaGM5Kng/120s.jpg" class="wprevpro_t1_IMG_4 wprevpro_avatarimg lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img src="https://s3-media1.fl.yelpcdn.com/photo/agTVsSmuFaQsPhtaGM5Kng/120s.jpg" alt="John W. Avatar" class="wprevpro_t1_IMG_4 wprevpro_avatarimg" /></noscript></span> <div class="wprevpro_t1_SPAN_5 wprev_preview_tcolor2_T1"><div class="wprevpro_t1_rname" >John W.</div><div class="wprev_showdate_T1">10/03/2019</div> </div>
</div>
</div>
</li>
   
90% of that code belongs in the trash...
   
Someone brought that to me as a client, I'd tell them to throw it all in the trash and start over from scratch. There is very little I would retain from that.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 849
  • Karma: +160/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Site Review
« Reply #2 on: 28 Jul 2022, 01:43:43 am »
Just to show what I mean, here's how I'd write that same testimonial section:

Code: [Select]
<section id="testimonials">

<h2>And some non-BS testimonials</h2>

<article>
<blockquote>
<p class="rating_5">
I endorse this lawyer. Andrew and I have worked together on a couple of clients and I am very impressed with his quality and depth of knowledge. Andrew understands the nuances of different insurance carriers and the way that courts will react to various situations. He is quite experienced and I recommend him highly for any personal injury matters.
</p>
</blockquote>
<footer>
<img
alt="Natalie Lynch Avatar"
loading="lazy"
src="/images/testimonials/head_shot/standard/lawyer_natalie_lynch_4236191_1522957469.jpg"
>
<div>
<cite>Natalie Lynch</cite>
3/18/2015
</div>
</footer>
</article>

<article>
<blockquote>
<p class="rating_5">
I endorse Andrew Traub because he is a hard-working, diligent, knowledgeable, ethical and creative lawyer. In injury cases, he is definitely someone you would want to have on your side. From a client perspective, he is down-to-earth and easy to talk to, and from the lawyer's perspective, he is tenacious and a strong advocate for his clients.
</p>
</blockquote>
<footer>
<img
alt="Jeffrey Barnett Avatar"
loading="lazy"
src="https://images.avvo.com/avvo/ugc/images/head_shot/standard/lawyer_jeffrey_barnett_91268_1522962319.jpg"
</img>
<div>
<cite>Jeffrey Barnett</cite>
6/21/2013
</div>
</footer>
</article>

<article class="source_yelp">
<blockquote>
<p class="rating_5">
Andrew was great, he wouldn&#38;#38;#39;t let the insurance companies low ball me. He got the max from the other insurance company and even got a nice settlement from my company. If you&#38;#38;#39;re in an accident, I highly recommend the Traub law office.
</p>
</blockquote>
<div class="quoteLink">
<a
class="icon_yelp"
href="https://www.yelp.com/biz/the-traub-law-office-austin-2?sort_by=date_desc"
><span>Yelp</span></a>
</div>
<footer>
<img
alt="John W. Avatar"
loading="lazy"
src="https://s3-media1.fl.yelpcdn.com/photo/agTVsSmuFaQsPhtaGM5Kng/120s.jpg"
>
<div>
<cite>John W.</cite>
10/03/2019
</div>
</footer>
</article>

<!-- #testimonials --></section>

Basically a quarter the code.. and that's me being overly generous on hooks for styling. And since I'd use flex or grid there, it wouldn't have the giant half a page-height gap between the bottom of the quote and the citation.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 646
  • Karma: +8/-0
    • GrumpyYoungMan
Re: Site Review
« Reply #3 on: 28 Jul 2022, 02:23:25 am »
I would honestly recommend doing it in vanilla HTML, CSS, etc. I am not a fan of frameworks!

Jason always calls a spade and doesn’t dress it up using nice words, which personally I like!

Don’t lose faith and take what he is saying and learn from it, I personally have learnt a lot from him and this site, but currently lost my mojo which I am fighting to return…
« Last Edit: 28 Jul 2022, 02:57:29 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

AndrewTraub

  • Jr. Member
  • **
  • Posts: 51
  • Karma: +0/-0
Re: Site Review
« Reply #4 on: 28 Jul 2022, 10:17:17 am »
A lot of the garbage is, unfortunately, added by plugins whose added benefits outweigh the extra code bloat.

The testimonial slider at the bottom is a plugin I hope to replace over time.

The logo was designed like that a long time ago, including the chopped off part of the gavel.

I removed one of the contact pop-ups but left the one that has a live person to chat to 24/7 on the site.

I have no idea how to turn off things like:
Code: [Select]
<div class="wp-container-4 wp-block-columns">
<div class="wp-container-1 wp-block-column">
Which seem to be automatically generated by wordpress.

I'll look at your other suggestions too. Thanks.
« Last Edit: 28 Jul 2022, 10:52:05 am by AndrewTraub »

AndrewTraub

  • Jr. Member
  • **
  • Posts: 51
  • Karma: +0/-0
Re: Site Review
« Reply #5 on: 23 Aug 2022, 02:49:00 pm »
Thanks for all the input. I'm ready for more abuse. Er, I meant another review. :P

I'm mostly interested in accessibility, color contrasts, etc. I continue to research on how to remove extra markup added by wordpress.

I could use help on determining why the "Get Directions" button at the bottom seems to have an unequal top and bottom.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 646
  • Karma: +8/-0
    • GrumpyYoungMan
Re: Site Review
« Reply #6 on: 24 Aug 2022, 02:12:16 am »
Thanks for all the input. I'm ready for more abuse. Er, I meant another review. :P

I'm mostly interested in accessibility, color contrasts, etc. I continue to research on how to remove extra markup added by wordpress.

I could use help on determining why the "Get Directions" button at the bottom seems to have an unequal top and bottom.
It may be abuse, but it’s good feedback and I personally like and appreciate the no nonsense approach, but I also appreciate not everyone does…

I have currently lost my mojo, so I’m currently not working on a lot bit this was only an interest of mine
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 849
  • Karma: +160/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Site Review
« Reply #7 on: 26 Aug 2022, 12:04:05 pm »
I could use help on determining why the "Get Directions" button at the bottom seems to have an unequal top and bottom.
See how your icon is correctly centered? It's 2EM tall. Your line-height is only 1.5em.

Vertical-align:middle on the parent container might fix it, though often the best solution is to just set the line-height of the parent the same as the icon size, with the icon set to 1em line-height.

Assuming:

Code: [Select]
<a class="_icon_directions featured" href="//maps.google.com/?daddr=8701%20Shoal%20Creek%20Blvd%20Austin%20TX" target="_blank" style=""> Get Directions</a>
I would do

Code: [Select]
._icon_directions.featured {
  line-height:2em;
}

.icon_directions.featured:before {
  font-size:2em;
  line-height:1em;
  vertical-align:top;
}


Just because vertical-align:middle is such unreliable crap. I'd also suggest ditching the 16px padding for 1rem. Remember, mixing and matching em fonts with px anything is just asking for the page to break, and of course using PX at all is an epic /FAIL/ at accessibility.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

AndrewTraub

  • Jr. Member
  • **
  • Posts: 51
  • Karma: +0/-0
Re: Site Review
« Reply #8 on: 29 Aug 2022, 06:06:04 pm »
Thanks!

 

SMF spam blocked by CleanTalk

Advertisement