Would you please review this website?

I'm pretty good at using PHP and MySQL, and while I know HTML and CSS, I've accepted that I'm not an expert, nor do I have the best eye for design. So I could use some help.

I have a client who's asked me give him a list of changes that could be made to improve his site. It's built with Joomla CMS. I realize there are many changes that should be made. I was going to take a "triage" approach, and try to find the most important changes first:

https://longlifeautomotive.com/

I really appreciate your advice.

Sincerely,
Michael

Edit 1/9/16:
Perhaps I should have been more clear. This is a brand new client, with a pre-existing website. I don't know who built it (possibly the client himself), and therein lies the rub. Part of my dilemma is how to tell him that the best thing would be a complete redesign, without offending him. I have no relationship with him, and you don't tell a total stranger his hairstyle is ugly.

My websites load very fast, but end up looking somewhat flat:
http://www.greenlizardtech.com/
http://www.mathlocker.com/

So that's why I said I don't have a good eye for design, and was asking for advice.

 

Wow. It is like eye noise.
My eyes jumped all over the place and had to really concentrate to see what the site was about.

IMO he needs to read everything he can get his hands on from Dan Kennedy. He needs a Unique selling point.
The only Atuomotive service that offers you___________
The only Auto motive service that has won the _________ Award three year
The only Automotive service center that is recolonized by the__________

His home page should have a picture of a friendly looking man handing the keys to a smiling old lady or something else warm and fuzzy.

Perhaps some trust certificates instead of all the flashy crap.

Then some links for the more information that a costumer might need.

The people who are looking for car repair probably just want the phone number so they can call. That should be prominent on the front page.

But....

I am not sure if I am smart or not. I did a lot off stuff in the 70s that was bad for my brain.
If what I said was stupid please disregard.

Respect,
JC Dean.

PS If he had free doughnuts it couldn't hurt.

 

Thank you, JC. You make some good points. I think you're right.

 

Not a big fan of your navigation:



It's just something you don't expect in a car repair shop website. It's more fitting for some kids club or something like that.

Also, not sure why you need that much jquery to run what seems to be a very simple site:

<script src="/templates/yoo_venice/warp/vendor/uikit/js/uikit.js"></script>
<script src="/templates/yoo_venice/warp/vendor/uikit/js/components/autocomplete.js"></script>
<script src="/templates/yoo_venice/warp/vendor/uikit/js/components/search.js"></script>
<script src="/templates/yoo_venice/warp/vendor/uikit/js/components/cover.js"></script>
<script src="/templates/yoo_venice/warp/vendor/uikit/js/components/sticky.js"></script>
<script src="/templates/yoo_venice/warp/js/social.js"></script>
<script src="/templates/yoo_venice/js/theme.js"></script>

Code (markup):

As @deathshadow always reminds people you don't need to copyright copyright i.e. Copyright © (just keep one or the other)

You probably want to change the color of your footer div. Something similar to your top navigation:

 

Yeah those goofy playschool colour images, axe those. they're too big, waste of screen space, and look very unprofessional for something like an automotive service.

LAUGHABLY, the "sitelock" icons in the bottom corner, are so commonly faked their presence is more likely to make one think it's a scam/spam filled site than a legitimate one. Yes, I know -- they're supposed to represent services that make sites secure -- but they are so often faked it's like how homes with ADT stickers are now MORE likely to get broken into... since there are more people just slapping the sticker on it than there are actual clients of said company.

Some of the darker grey text area's are below accessibility minimums for that grey background -- as always consult the WCAG guidelines on accessibility. to that same end you've got useless undersized fixed metric fonts and some goofy thin webfont, also compromising legibility. The red text in some goofy script in the logo might as well not be there since Christmas only knows what the beast with two backs it says. Likewise the down-scaling of the logo on smaller displays only takes hard to read "too fancy for it's own good" and makes it worse. Much less said attempt at being *sniff* responsive *sniff* is somewhat broken, and really *sniff* you don't have enough menu *sniff* items to be wasting *sniff* code on hiding it. A simple re-arrangement in the media queries would be far more effective.

Hey, do you smell that? *sniff* it's almost like... I know the odor... Well, pressing on.

The massive scripttard banner with the stock images and poor image scaling reeks of trying to cover up for a lack of content and/or slathering something flashy in there for no good reason. I'm also not wild about the leading image (float:left) in the flow text as it breaks lead-in. I'd be floating that the other direction, English is not an RTL language.

Those rubbish fixed images for the alleged security also overlap the content on smaller displays, one of the MANY reasons position:fixed content is garbage that has zero business on websites if you care about accessibility.

Popping the bonnet... oh yeah, I knew I smelled something; Bootcrap!!! Do yourself a favor and go find a stick to scrape that off with before tracking it all over the Internet's carpets. Bootcrap is the pinnacle of developer ineptitude that offers ZERO legitimate benefits despite the wild claims made by people who to be brutally frank don't know enough HTML or CSS to be making websites, much less determining if any of the goofy halfwit dumbass frameworks provide ANY legitimate benefit. They are to site development what ceramic putty is to muffler repair.

See my article here:
http://www.cutcodedown.com/article/HTML_CSS_and_JS_frameworks

I have no clue what "uikit" is, but it looks like scripttardery that pisses all over the website from so on-high you'd think the Almighty just got back from a kegger. Basically you only have 4.26k of plaintext and NOTHING I would consider to be a content image or other such media object; making the FOUR MEGABYTES IN 49 separate files absolutely ratshit batshit insane! That 226k of that in 14 files is scripttardery, and a ridiculously absurd 407k of that in 7 files is CSS?

Just pitch that entire mess in the trash and start over -- without the stupid malfing frameworks and blind ignorant copypasta. You've got the front-end code equivalent of paining a bullseye on your backside before bending over to pick up the soap in a prison shower.

Even the HTML is... gah. You have 22k of html which is anywhere from two to three times what should be used on such a simple page. Script being loaded before the meta, idiotic mobile redirect scripttardery like it's still 1998, the X-UA nonsense that should only be put on old tranny documents to make new versions of IE act like old versions -- which you shouldn't need to do if the code works in modern browsers and was written properly... Endless pointless <link> tags, endless pointless separate scripts, endless pointless separate stylesheets with no media targets, little if anything resembling semantic markup or logical document structure, gibberish use of numbered headings, data attributes on **** that shouldn't need them, endless pointless DIV for nothing, endless pointless classes for nothing, presentational use of classes (again bootcrap just smeared all over the place), static style in the markup, strong doing H3's job, non-breaking spaces either for nothing or doing padding's job, HTML 5 bloat using Article around things that clearly aren't (not that ARTICLE serves a legitimate purpose), strong around unmarked CDATA with BR either doing a DL/DT/DD's job or H3+P's job, Paragrapsh around elements that quite clearly are NOT grammatical paragraphs, even more strong doing numbered heading's job...

Pretty much 80% of what I wrote about here:
http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_index

Well, ever heard #1 Hit off Roy Orbison's 1989 Album "Mystery Girl"?

OH, and it's Joomla too. So rarely see that anymore; much like turdpress it explains a lot of the bloated rubbish markup.

My advice would be to pitch that entire mess in the trash and start over. There is little if anything I'd try to salvage from it.

... and no offense, but how can you claim to be "pretty good" at PHP when you're knowledge of HTML is quite clearly so lacking - THE ENTIRE PURPOSE OF PHP is to output HTML! How -- much less WHY -- the blue blazes do people keep learning PHP before they have learned what it's supposed to output?!? How the devil are you supposed to use PHP for what it's for without knowing what it exists to manipulate FIRST?

As to be brutally frank, if you don't know what's wrong with this:

<body class="tm-sidebar-a-left tm-sidebar-b-right tm-sidebars-2 tm-isblog">

    
        <nav class="tm-navbar uk-navbar uk-navbar-attached">
        <div class="uk-container uk-container-center">
            <div class="tm-navbar-wrapper">

                                <div class="uk-text-center tm-nav-logo uk-visible-large">
                    <a class="tm-logo uk-visible-large" href="https://longlifeautomotive.com">
	<p>
	<img alt="" src="/images/logo-450.fw.png" /></p>
</a>
                </div>
                
                                <div class="tm-nav uk-visible-large">
                    <div class="tm-nav-wrapper"><ul class="uk-navbar-nav uk-hidden-small"><li class="uk-active" data-uk-dropdown="{}"><a href="/">Home</a></li>

Code (markup):

...then you have ZERO business working in web technologies -- front end OR back end! That's one giant bloated gibberish mess for what should likely just be:

<body>

<div id="top">

	<h1>
		<a href="/">
			Long Life Automotive
			<span>-</span>
			<small>Engine and Transmission Replacement Specialists</small>
		</a>
	</h1>
	
	<ul>
		<li><a href="/" class="current">Home</a></li>

Code (markup):

Which SHOULD be the ONLY h1 on the page... 224 bytes on how it should be done vs. 772 bytes of bootcrap asshattery; and people wonder why I say people using bootcrap use two to three times the markup they need, none of it remotely resembling proper semantics...

*SIGH*... getting really tired of seeing this same crap. Laugh is, I know people claiming to be "experts" vomiting up code worse than this.

You may want to go to my site and read not only the articles I just linked to, but also the article on progressive enhancement.

 

Oh my god....
All these 3d-colorfull texts on the left ARE LINKS ??????
No way...Very ugly navigation....
Better make a normal menu there.
You have to make a modern design, so the visitor that comes to your site, doesn want to leave immediately (like me)

 

Thank you for the feedback. I think you're absolutely right.

 

Your website looks attractive at first sight. I like your website.

 

@Michael1106 Glad you took care of most of the stuff that was brought to your attention. More often than not people come here, ask questions and then do nothing about anything. Your new site looks way more professional.

 

Thank you for the compliment. I really appreciate the help I got from this group.

Back in college, when I had a question, I would just turn to the person next to me in the computer lab and say, "What do you think of this?" Invariably, one or two people would have ideas.

Now, working at home, there's no one sitting next to me. So I'm glad I was able to turn to this group.

Thank you again.

 

I see so many websites in a week it took me a moment to remember what this one was before your changes... gets easy to forget which witch is which. (Is that Phillipa? Fringilla? OH NO, poor Sile...)

Then I saw @qwikad.com's my post with what I had jokingly called "playschool images" and.... wow, that's the same site?

This is such a ridiculously vast improvement over that I'd never have even guessed it was the same place. While I'm not wild about the massive space-wasting slideshow, use of a serif web-font on the flow text, and the colour contrasts are still "on the edge", everything is well within acceptable norms -- at least on this laptop with how I have it configured. (and a LOT of new websites these days don't even come close to that). You've moved the more important information like hours of operation and contact info up the page (I'd still try to get those farther up, possibly next to the slideshow shrinking that part?), and there are still some spots where the responsiveness kind-of breaks (the side columns overlap at a certain width?) you've come so far in relatively little time.

Even if the code under the hood still needs a wee bit of help, you're no longer in the "throw it out and start over" territory; if I came across it "in my travels" the information is there, I could get at it, it loads reasonably fast enough, so I'd no longer be a bounce as a USER.

You've gone from "mein gott, what is that" to "within industry norms" -- the remaining issues are more just nitpicks and tweaks - most of which is more the choice of technologies like bootcrap and jQuery screwing with you than it is major gaps in accessibility.

Having a sounding board is important, as Uncle Vesemir said: "How many times have I told that girl not to train alone, it only embeds your errors!" -- without another pair of eyeballs on things it is ridiculously easy to miss the simplest of mistakes.

Much less we can't all know everything... and websites are a massive topic with a lot of history and experience to draw upon, much of it sadly NOT taught in the majority of schools. In particular topics like accessibility, user experience, and caching models you are lucky if they are even mentioned! They dive you right into appearance skipping over some of the most basic of things that should be dictating what you can and cannot do for appearance -- at least if you care about users visiting the site in question!

I don't ask for help a lot -- but I've been programming since 1977 and making websites since shortly before the millennium... but when I do ask for opinions EVERY last scrap no matter if I agree with it or not is welcome... Sometimes it's just good to have that disagreement nagging in the back of your head for a while, where you can take the time to digest it, see the merits if any, and do something useful with it.

I know on my own newer recently launched site I didn't agree with a lot of user objections at first, but I've come to incorporate even some of the stuff I disagreed with. Guidelines like the WCAG and the specifications themselves area great starting point, but you have to adapt to user feedback if you want any measure of success.

... and it's part of why I spend so much time helping others for free as I remember what it was like when I was working full time (A host of things like a Parkinsonism and non-24 keep me from regular employment now) programming with NOBODY to turn to in the pre-internet days. You'd spend your down time pouring through libraries and book stores looking for that one nugget of information needed to complete a task. The Internet has really transformed things on that front...

But I still remember what it was like getting bad advice from books, bad advice from educators, and even bad advice from web tutorials when I started working on websites -- and that's why even though I may be a acerbic, opinionated loudmouth ass -- even if I disagree with you or what you've been told, I'll take the time to try and help if I can.

It's actually why a lot of us are here, to try and prevent others from having the same smoke blown up their arse that we did a decade or more ago.

So if you've got questions, we've got conflicting answers.