Please Review My Website

Greetings, I’m a new member here. You appear to be a very friendly and helpful community. When I gain more experience, I hope to contribute as well.

After many years (in medicine) I’m switching my career to web design and development. I’ve been building websites for years (amateur status) and have a good handle on Wordpress. I’d appreciate any feedback and suggestions you can offer with regard to my new business website (it’s a work in progress and needs additional optimization).

https://spyderwebpro.com/

I also have a few questions about the nuts and bolts of the business:

• How do you normally handle a client who wants a new website with regard to hosting and maintenance? Do many/most new clients want you to host their site? And do you? (on a sub-directory of your site)
• Are many clients amenable to retaining your services for monthly maintenance, SEO, updates, etc.?
• If a client wants you to redesign their established website, do you normally log into their Wordpress account and work on it on a staging platform, or do you package their site with Duplicator and work on it on your host, then upload back to their host on completion?
• Do you give the average non-tech savvy client limited administration privileges so they don’t mess up the back-end?
• Do you think it’s a good idea to focus on a niche market (e.g. building medical websites)?
• Do you find most clients appreciate humor along with professionalism, or are most strictly business minded?

That’s all the questions I’ll bore you with for now. Maybe I can repay the kindness by answering any medical questions you may have (particularly foot related questions. I was a podiatrist for 30+ years).

Thanks in advance for your feedback.

 

Several questions.

1) Why do you have the RED lines OVER the menu?
2) Why is there NO CONTENT above the fold (just a blank white page with menu & header)?
3) When I scroll down one click, why do I see a BLANK WHITE page?
4) When I scroll down two clicks, why do I see MINISCULE text that is UNreadable?
5) Why are you using THIN glyph fonts? Are you trying to scare people away?
6) Why aren't you using WCAG legibility standards? Light gray on white is a headache.
7) Why are you HIDING your image and co-workers' images UNDER a blurb?
8) At the bottom why do you have a WHITE line OVER the ABOUT link?
9) Why is it PODIATRIST instead of PEDIATRIST, like PEDAL and PEDESTRIAN?
10) Why doesn't the SUBMIT button work on your contact page?

 

Thanks for your input thus far. For one thing it made me look over the site and see that I didn't properly optimize it for tablet and mobile mode (lot's of scrunched up items). I know better than that. I should'nt rush to "publish" before I have that all ironed out. Mea culpa.

From mmerlinn:

1) Why do you have the RED lines OVER the menu? They were above and below the menu, but I took your advice and eliminated the top bars and made the bottom bars blue.
2) Why is there NO CONTENT above the fold (just a blank white page with menu & header)? Not sure what you mean by that. I understand the “no content above the fold”, but I’m not sure what you mean about the blank white page—I have a banner, headline and call to action there. If you’re not seeing it, I’ve got some investigating to do.
3) When I scroll down one click, why do I see a BLANK WHITE page? I’m not seeing what you’re seeing. Again, I’m not sure what you mean about a BLANK WHITE page. I have content there. If you’re not seeing it, I’ve got more investigating to do.
4) When I scroll down two clicks, why do I see MINISCULE text that is Unreadable? That I see and corrected it, hopefully enough.
5) Why are you using THIN glyph fonts? Are you trying to scare people away? Good point. I increased the size and weight of the font. Do you think it's enough, or do you suggest a different font?
6) Why aren't you using WCAG legibility standards? Light gray on white is a headache. Good point. I switched to black.
7) Why are you HIDING your image and co-workers' images UNDER a blurb? Not sure exactly what you mean. It’s only supposed to flip up the blurb on mouse-over, which it does for me. If you mean that effect is bad design as Sarahk says, I’ll take it off. You guys know better than me.
8) At the bottom why do you have a WHITE line OVER the ABOUT link? I’m perplexed, it shows as a white line under all the menu items in the footer on my browser.
9) Why is it PODIATRIST instead of PEDIATRIST, like PEDAL and PEDESTRIAN? The word podiatrist is composed of two ancient Greek parts: pod, meaning "foot," and iatrist, meaning "healer."
10) Why doesn't the SUBMIT button work on your contact page? I just checked it and it worked for me, my submission is in my mailbox. Not sure why it didn’t work for you. I’ll look into it.

From Sarahk:

Your logo is appalling. Just to be clear, is it appalling because it looked fuzzy as in your clip, or because the design is appalling? If it’s the former, I believe I corrected it (although it always looked clear on my browser). If it’s the latter, I’ll scrap it and let my daughter design a new one (she’s the artistic one, not me).

1. You appear to have removed the red lines, well done. Thanks. I abide by suggestions from those who know more than me.
   
   
2. I don't mind the lack of content, there's only so much to say really. I agree.
   
   
3. I'm in agreement about fonts, this is hard to read. I took your and mmerlinn’s advice and enlarged it.
   and how unreliable are you that the email gets sent to three different in boxes?
   Getting 3 emails instead of 1 makes me feel wanted But, I took your advice and eliminated 1.
   
   
4. I'd use actual photos for the meet the team section and have the text permanently visible. "Hidden meat" doesn't really work. I'd make more of the family connection and the strength of the team because of it. Well, my daughters are attractive, but my attractive years are long gone. My pic really would scare clients away. I better stick with silhouette. But, I will play up the family connection, that’s solid advice.
   
   Now I get why you quit. My Mum was a T2 diabetic, by the end of her life her podiatrists had quite a lot to deal with. Indeed, diabetes is hard on the feet. And, I’m sorry for your loss. Losing parents is tough no matter what your age or theirs.

Your use of the term “mum” makes me believe your British. Are you? I’m American, but my “mum” was a WWII British War Bride. I lost her and my father a few years ago. I really miss them.

I enjoyed practicing very much. I didn’t quit because I wanted to. A number of unanticipated circumstances transpired forcing me to quit and work from home. I’m in no financial position to retire, so I’ve got to learn this business. I do love it.

Again, thanks for all your feedback. This place rocks!

 

From Sarahk:
I'm a New Zealander, countries from the Commonwealth tend to stick to English English. I agree, we Americans are barbarians and speak American English. But, we do drive on the correct side of the road
The photos aren't about being attractive, it's about rapport. Good point. Perhaps I could be photographed behind some sort of muslin screen.

The logo looks clearer on both mac and pc now. I'm not a fan of the serifed font especially when you repeat the company name and just below. I wouldn't necessarily go for that font but you could do something along these lines
<pic>
Where the logo has a discrete web, and the animation shows it being filled in. That would be a nice effect. I’ll see if I can figure out how to animate the web being woven.

A New Zealander, eh? Flight of the Condors was one of my favorite shows. Years ago I befriended a group of Aussies who were working in the US for a few years. Some of the rowdiest, but nicest people I’ve ever known. I figure you New Zealanders must have a lot in common with Aussies, correct? Do you eat Pavlova, marmite, meat pies and chickos? I’d love to visit your country someday … but not if you have those terrible funnel web spiders, blue-ringed octopuses and the dreaded killer wombats!

 

@Tibby, I am on a desktop computer which displays differently from mobile. Mobile is taking over the world, but for heavy duty browsing nothing beats a desktop, so you need to test your site on as many different combinations of each, unless of course you want to limit your customer base to those that use the same configuration as you do.

1) They were above and below the menu, but I took your advice and eliminated the top bars and made the bottom bars blue. Now you have a BLUE bar covering the ABOUT link.

2) I understand the “no content above the fold”, but I’m not sure what you mean about the blank white page—I have a banner, headline and call to action there. If you’re not seeing it, I’ve got some investigating to do. I see nothing.

3) If you’re not seeing it, I’ve got more investigating to do. I see nothing.

4) That I see and corrected it, hopefully enough. Much much better. Now can be read.

5) I increased the size and weight of the font. Do you think it's enough, or do you suggest a different font? Font looks good to me. Serif fonts, thin glyph fonts, etc never look good on a web page mainly due to the graininess of the medium.

6) I switched to black. Black on white is a good choice. There are other color options, but one must first thoroughly test them.

7) It’s only supposed to flip up the blurb on mouse-over, which it does for me. If you mean that effect is bad design as @sarahk says, I’ll take it off. You guys know better than me. The blurb is ALWAYS over the pictures. Mouseover does nothing.

8) I’m perplexed, it shows as a white line under all the menu items in the footer on my browser. No white line anywhere except on top of the ABOUT link.

9) The word podiatrist is composed of two ancient Greek parts: pod, meaning "foot," and iatrist, meaning "healer." So, you are telling me that PEDAL should be PODEL, and PEDESTRIAN should be PODESTRIAN since both relate to the foot?

10) Not sure why it didn’t work for you. I’ll look into it. When I click it all that happens is scrolling me to the top of the page. No error message. No confirmation message.

 

Mmerlin,

I’m stumped. I have the site open on my desktop, tablet and phone (and my daughter tested on her phone) and we see none of the issues you describe. The site appears fully responsive on all our devices. No bars covering “about”, the banner etc is above the fold, the mouseover flips the blurb up on the “team” except for phone where the flip up doesn’t appear, but the name/title appears under the pics (which is fine), and the submit button works on all 3. The only difference occurs when I flip the tablet to vertical and the regular menu turns into a hamburger menu, but that’s not a problem.

Re: when you click “submit” you scroll to the top. I do have a “scroll to the top” widget on the site, but it appears on the bottom right, separate from the “submit”button on all our devices.

This is a mystery to me. I don’t know how to fix problems that I can’t re-create. Does anyone else see the problems mmerlin sees? Or, mmerlin do you have another device you can check on? Are you running a Mac, maybe I’m not Mac friendly.

 

I am on a Win machine. Have not tried it on my Mac, but will in a few days.

You might want to look at some of @deathshadow's posts and website, but be aware that you better have a thick skin as he WILL get in your face. He is by far the best coder & site builder on DP.

 

I just checked your site on this Mac. Pretty much the same as on the Win machine.

Only difference that pops out is the footer is totally different. No menu of any kind, just 3 little bars.

 

Which sadly means you haven't learned the first thing about building websites properly, given that I've only ONCE ever seen a site built with turdpress that was worth a flying purple fish, and the effort contributed to sending the person who did it to an early grave!

This is evident in your site since, well... 90%+ of what I wrote in this series of articles here:

http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_index

Applies to your site. It has a broken mix of pixels and EM for measurements, hard to read webfonts (that probably look great on a Mac and NOWHERE else), massive space-wasting pointless animated slideshow crap pushing anything resembling actual content below the fold... and on content generation alone it is far, far too light. In general there's way too much "gee ain't it neat" animated garbage more likely to piss off users than draw them in -- no matter how many marketing and scripting derps make wild unfounded claims to the contrary!

This is evident in that there's 4.85k of plaintext on the site, but around 2k of that is menus and pointless broken redundancies... see how navigating non-visually the headings read as "Marcia Lewis Marcia Lewis M. Sharma M. Sharma Marcia Lewis Marcia Lewis M. Sharma M. Sharma Marcia Lewis Marcia Lewis M. Sharma M. Sharma Janu Janu Doc Doc Chloe Chloe" etc, etc, etc...

Under the hood it is ENTIRELY the train wreck of developer ineptitude I've come to expect from turdpess development, and the sheer ignorance that goes hand in hand with using said platform by choice. This is self-evident in the simple fact that your back end is spitting out 102k of HTML that doesn't even work properly when JavaScript is off or blocked -- the cause of mmerlin seeing giant empty sections -- for that 4.85k of plaintext and not even a dozen actual content images. That's basically TEN TIMES or MORE the HTML that should have been used to do that job. Said massive bloat is only exacerbated by the presence of 1.2 MEGABYTES of CSS with no media targets spanning 33 separate files on a SITE that doesn't warrant the presence of more than 48k of CSS in a single file PER media target, or the absolutely INSANE 1.42 megabytes of JavaScript spanning 55 files on a site that I'd probably axe scripting on ENTIRELY (by ditching the animated crap) but even retaining that nonsense has no excuse for more than around 64k of JS!

The massive total file sizes (3.6 megabytes) spanning 115 separate files explaining why it takes around 40 seconds to load here... since the ping time from here to your hosting is around 320ms on file counts ALONE we're talking around 34 seconds of handshaking. There's a reason concepts like CSS Sprites exist, and why just slopping in dozens of separate CSS and seperate scripts is an epic /FAIL/ at web development.

Even if such ineptitude and/or ignorance is the norm in turdpress development.

Bottom line it's 3.6 megabytes in 115 files doing the job of around 500k in 16 files or less!

... and that's before we even discuss the semantic gibberish of the markup, where clearly whoever made that template doesn't know enough about HTML to be making templates -- but again that's just par for the course with turdpress and everything it deludes people into thinking is a good website. More so when the train wreck that is woocommerce is slopped on top with zero cleanup.

Let's just use one little section of code to illustrate what I mean:

<body itemtype='https://schema.org/WebPage' itemscope='itemscope' class="home page-template-default page page-id-8 wp-custom-logo woocommerce-no-js ehf-header ehf-footer ehf-template-astra ehf-stylesheet-astra ast-page-builder-template ast-no-sidebar astra-1.4.8 ast-header-custom-item-inside ast-single-post elementor-default elementor-page elementor-page-8">

<div id="page" class="hfeed site">
	<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

	
			<header id="masthead" itemscope="itemscope" itemtype="https://schema.org/WPHeader">
			<p class="main-title bhf-hidden" itemprop="headline"><a href="https://spyderwebpro.com" title="spyderwebpro.com" rel="home">spyderwebpro.com</a></p>
					<div class="elementor elementor-1690">
			<div class="elementor-inner">
				<div class="elementor-section-wrap">
							<section data-id="be142f3" class="elementor-element elementor-element-be142f3 elementor-section-height-min-height elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-items-middle elementor-section elementor-top-section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
				<div class="elementor-row">
				<div data-id="739f9761" class="elementor-element elementor-element-739f9761 elementor-column elementor-col-50 elementor-top-column" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
					<div class="elementor-widget-wrap">
				<div data-id="75b2933c" class="elementor-element elementor-element-75b2933c elementor-mobile-align-center elementor-hidden-phone elementor-widget elementor-widget-icon-list" data-element_type="icon-list.default">
				<div class="elementor-widget-container">
					<ul class="elementor-icon-list-items elementor-inline-items">
							<li class="elementor-icon-list-item" >
											<span class="elementor-icon-list-icon">
							<i class="fa fa-phone" aria-hidden="true"></i>
						</span>
										<span class="elementor-icon-list-text">904-315-5981</span>
									</li>
								<li class="elementor-icon-list-item" >
					<a href="mailto:info@spyderwebpro.com, webguy1105@gmail.com,spyder@spyderwebpro.com">						<span class="elementor-icon-list-icon">
							<i class="fa fa-envelope-o" aria-hidden="true"></i>
						</span>
										<span class="elementor-icon-list-text">info@spyderwebpro.com</span>
											</a>
									</li>
						</ul>
				</div>
				</div>
						</div>
			</div>
		</div>
				<div data-id="9f6d946" class="elementor-element elementor-element-9f6d946 elementor-column elementor-col-50 elementor-top-column" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
					<div class="elementor-widget-wrap">
				<div data-id="7ed535f1" class="elementor-element elementor-element-7ed535f1 elementor-shape-rounded elementor-widget elementor-widget-social-icons" data-element_type="social-icons.default">
				<div class="elementor-widget-container">
					<div class="elementor-social-icons-wrapper">
							<a class="elementor-icon elementor-social-icon elementor-social-icon-facebook" href="https://www.facebook.com/spyderwebpro/?ref=settings" target="_blank">
					<span class="elementor-screen-only">Facebook</span>
					<i class="fa fa-facebook"></i>
				</a>
							<a class="elementor-icon elementor-social-icon elementor-social-icon-twitter" href="https://twitter.com/DocD08729427" target="_blank">
					<span class="elementor-screen-only">Twitter</span>
					<i class="fa fa-twitter"></i>
				</a>
							<a class="elementor-icon elementor-social-icon elementor-social-icon-instagram" href="https://www.instagram.com/spyderwebpro/" target="_blank">
					<span class="elementor-screen-only">Instagram</span>
					<i class="fa fa-instagram"></i>
				</a>
							<a class="elementor-icon elementor-social-icon elementor-social-icon-youtube" href="https://www.youtube.com/channel/UCirW8VF9tl8uyduWxI8AZcQ?view_as=subscriber" target="_blank">
					<span class="elementor-screen-only">Youtube</span>
					<i class="fa fa-youtube"></i>
				</a>
					</div>
				</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</section>

Code (markup):

If you have to itemscope the bloody BODY tag you're doing something criminally wrong... same goes for the endless stream of "classes for NOTHING" on the BODY tag. Generally if you need a class -- or at most more than one class -- on BODY you probably shouldn't be writing HTML! (not counting those added at runtime by JavaScript)

The 'skip to' link is an outdated pointless bit of nonsense that should be redundant to either the first H2 (if using 4 Strict structure) or either the MAIN and NAV tags (if using HTML 5 Structure)

Where's THE H1? It's clearly not using HTML 5 structure properly, but it's not HTML 4 structure either -- you've got a strange hodge-podge of nonsense here... and you certainly lack THE heading (singualar) that every section of every page of your site is a subsection of -- aka what an H1 MEANS. (and why HTML 5's SECTION tag is a dumbass pointless redundancy.

Much less the first two content-bearing sections do not seem to be related... Endless pointless DIV and classes for NOTHING, static style in the markup, presentational use of classes, target attributes shoving new windows down the user's gullet whether they want them or not like it's still 1997. You've REALLY been taught the opposite of good practices here.

There is NO legitimate reason for any developer to have written that section of code as anything more than:

<body>

<div id="top"><div class="widthWrapper">

	<h1><a href="/">Spyderwebpro.com</a></h1>
	
	<ul class="contact">
		<li class="phone">
			904-315-5981
		</li>
		<li class="mail">
			<a href="mailto:info@spyderwebpro.com, webguy1105@gmail.com,spyder@spyderwebpro.com">
				info@spyderwebpro.com
			</a>
		</li>
	</ul>
	
	<ul class="social">
		<li class="facebook">
			<a href="https://www.facebook.com/spyderwebpro/?ref=settings">
				Facebook
			</a>
		</li>
		<li class="twitter">
			<a href="https://twitter.com/DocD08729427">
				Twitter
			</a>
		</li>
		<li class="instagram">
			<a href="https://www.instagram.com/spyderwebpro/">
				Instagram
			</a>
		</li>
		<li class="youtube">
			<a href="https://www.youtube.com/channel/UCirW8VF9tl8uyduWxI8AZcQ?view_as=subscriber">
				Youtube
			</a>
		</li>
	</ul>
	
<!-- .widthWrapper, #top --></div></div>

Code (markup):

899 bytes where turdpress has you wasting 4,375! There's not a SINGLE thing provided by the code you have that's done correctly, semantically, or provides anything useful to the end user that the code I just wrote can't do as-is!

But your result is entirely what happens when train wreck laundry lists of how NOT to build a website like turdpress has endless off the shelf plugins and garbage off the shelf templates just slopped together any-old-way.

To that end the rest of your questions are relatively pointless since you need to step away from the turdpress, and take the time to actually learn to use HTML and CSS properly before you even THINK about taking on clients. To put it in familiar terms what turdpress has duped you into thinking is how websites should be built is like the people telling diabetics to soak their feet in epsom salts.

What turdpress does for websites about as legitimate as reflexology, magnet therapy, or shoving jade eggs up a steamed clam. You know how as a trained MD you laugh (and cringe) at those? Yeah, that.

 

design and color combination of theme doesn't look appealing and professional... which is must as you are into web-designing only. Logo looks too kiddish... You need a designer for template design and logo design..... which will give 1st impression of being professional web developer..

 

I appreciate all your feedback so far!

Spyderwebpro.com

I’ve taken a lot of your advice (and will continue to do so) and designed a new logo, changed the color scheme, added content and got the site to load a bit faster (but, not fast enough for my liking).

Seems to work well with Windows: Chrome and Edge on desktop, tablet and mobile. A page or two has a problem with Firefox which I’m trying to figure out. I don’t have a Mac to test on.

I’d be grateful for any additional advice you can offer with the update. Particularly interested to know if mmerlinn still has problems loading, submitting, etc.

deathshadow, I’m starting to understand your dislike of Wordpress. It’s pretty buggy and bloaty. But, I’m stuck with it for now until I learn to code. I used to know CSS (back in the Dark Ages, when I toyed around with Dreamweaver and Front Page), but I’ve long forgotten it.

I do appreciate that you guys (and gals) don’t blow smoke up people’s asses (American for “arses”). I’m here to learn, not have my ego stroked.

 

OK. I am on my Mac desktop with FF.

Now looks totally different here apparently because of the changes you have made.

1) Logo looks MUCH better after your redesign.
2) No menu, just 3 bars for nothing.
3) Cute picture of a little boy. Does not look professional. Needs to be changed.
4) "Website design" and other blurbs are still vertically left justified with a huge blank white space to the right.
5) Have no idea what the "Audience" image is for or what it is supposed to do.
6) Too much space between the above and CEO information.
7) All testimonials are gone, which I think is good.
8) Bottom menu is gone replaced by 3 bars for nothing.