Hi people, I'm currently going through a redesign of my site- to make sure it converts the best it possibly can. I am not by trade a web designer, I only know rudimentary CSS. So I am quite likely to want to devolve the design implementation to someone else. This is my site. http://healthcareinsured.co.uk I've already made a number of amendments, but I think it's still too cluttered, and looks to clinical rather than intuitive. I am also considering commissioning someone to move it to a Wordpress system to make it easier to manage/change. The question is what would you change and why? I am thinking how can the text, graphics, etc be rearranged so that it flows better, and looks nicer on the eye? I am also thinking of changing the colour scheme, or at least split testing it. For example the position of the "Act Now" Bullet points- should they be above or below the form?
Well the first problem I see as a "large font/120dpi/125%/whatever they are calling it this week" user is that it's built with pixel measurements -- it's not auto-scaling so it sends me diving for the zoom to read anything. Whoever you get to redo it for you be sure they know what dynamic (em) measurement fonts are, and how to use them. The white on blue is on the edge of legibility, possibly thanks to tall the white surrounding it. "By the numbers" it's sound, but that's not always the best determining factor. The red on blue for the submit is outright invisible to the colour blind, and probably as much as 30% of "normally sighted" people, a eyesore / difficult to read for another 40%. Again, verify your colours against the WCAG formula's... This tool here is handy for double checking your legibility of foreground vs. background colours: http://webaim.org/resources/contrastchecker/ Likewise some consistency in text sizes would be nice, you've got oddball differing line-heights and font faces that interrupt "flow" from a legibility standpoint; I know the artsy marketing types cream their panties over that sort of asshattery, but when it pisses on usability that's when you need to kick their hoodoo-voodoo to the curb. The logo's next to the form are "filler" -- I'd move those to the bottom and axe the pointless stock photo to try and move more important content up the page. In the form, lose the placeholders on things that don't need them. You've got perfectly good labels, so why waste code on that? I rarely if ever say this, but the homepage is actually content-heavy. When/if it becomes time to bother making it properly responsive, that's just going to be a waste of bandwidth as nobody is going to scroll trough 20 screens of text. I would either break that into multiple pages, or pitch half the text in the trash. Probably the stuff in the semi-bolded list would be first to go just because it's a blurry hard to read mess with poor spacing; people will gloss over that like they would fine print. I say when/if as right now it TRIES to be responsive, but falls apart miserably with that form overlapping content. I suspect I know why, but we'll get to that in a moment. I'm not a fan of the goofy webfont, it too compromises legibility particularly since that font blows chunks on windows rendering -- probably looks great on a Mac though; again it's just a sans-serif font so just use the stock stacks instead of wasting bandwidth on something 90%+ of people wouldn't notice, and the people who do notice are going to complain about it. It loads a bit sluggish but not horribly so -- at 20 seperate files it's a bit heavy given what's on the page, but not disastrously so... the 520 megs uncompressed feels heavy, but not disastrously so since gzipped around 250k of that gets reduced to 100k... Popping the bonnet to look at what it's built with, my earlier suspicion on why it's broken AND bloated is confirmed. Bootcrap; do yourself a favor and find a stick to scrape that off with -- same goes for the mouth-breathing halfwit idiotic nonsense known as jQuery, since I'm really not seeing a blasted thing on the page that warrants the PRESENCE of scripting. To be brutally frank, the markup is gibberish nonsense... <!DOCTYPE html> <html> <body> <html lang="eng"> <h1 style="text-align: center;"> <span style="font-size:28px;">Private Health Insurance Comparison UK: Aviva, AXA PPP, BUPA, Simplyhealth, Standard Life</span></h1> <html class="bg-black"> <head> Code (markup): Muliple HTML tags, classes on the HTML tag, <body> content in the form of a <h1> before you even have the document <head>... and that's just the first few lines? Whoever built that has NO business making websites. It gets worse deeper in, with little if anything resembling semantics, pointless HTML 5 code-bloat, stupid malfing HTML 5 shim/polyfill scripttardery you wouldn't need if you kicked the pointless code-bloat redundant crap (header, section, article, footer, nav) from HTML 5 to the curb. The keywords meta is overstuffed and self-redundant guaranteeing to get slapped down or ignored by search; It's called keyWORDS. Not keyphrases, not keysentences, but keyWORDS! Seven or eight pb]SINGLE WORDS or proper names[/b] that exist between <body> and </body> that you want a slight upranking on, preferably totalling less than 128 characters (some people say 96!) -- That's ALL it's FOR! (Then we wonder why so many people are under the DELUSION that keywords is ignored, of course it's ignored if you aren't using it right!) You've got anchor+div+img doing a H1's job, H3 doing P's job since it's not starting a new subsection, h2 for the form nowhere actually near the form, broken/incomplete forms (empty FOR attributes, no fieldsets, endless pointless DIV for Christmas only knows what), pointless redundant value attributes on your SELECT (in an invalid format to boot), clearing DIV like it's still 2002, static style in the markup, no media targets on your stylesheet LINK or your <style> tags. (Not that any modern site should be using the <style> tag or style="" attributes in all but the rarest of cases), paragraphs around things that are not grammatical paragraphs like image tags, LI without UL or OL wrapping them, and even more endless pointless scripttardery. .. and then you have scripttardery tacked on after the </html> closure! It reeks of being slapped together from off the shelf parts by someone who to be frank, had no business working in HTML or CSS. Hardly a shock it's 28k of markup for 5k of plaintext and a dozen form elements, with few if any images I'd consider to be content. That's two, possibly three times the markup such a simple page should need! Same as how it's a 520k pageload in 20 files for something I probably wouldn't break 144k in half a dozen or less files for.
It looked good to start with and then I realised... just another one of those crappy give-us-your-details-before-we-start-the-spam sites The ribbon shouldn't overlap the word "today" The red free quote now looks dreadful this needs to explain that the free quote won't be online, that it'll come from whoever you are selling the leads to
Okay thanks for the detailed response. The get my Qoute now button was green before but I'm about to turn it into Orange, and there was meant to be a white fill in the text but Okay, should I ask the designer to change all text into dynamic measurement fonts then? Including H1, H2 etc? The form box was previously a shade of lighter purple, so I may change it back in that case. I chose this shade of blue as I identified it is one of the "highest converting shades of blue" (as tested by Bing/Yahoo). Yep I'll take that into consideration. How do I identify if I need them or not, or what am I looking for? Fair point. I was thinking of changing the font to something like Helveca. What are you referring to by "stock stacks"? Or are you saying I should use the default webfont? What does that even mean, can you talk in layman terms please? You mean remove the Bootstrap/ J Query scripting? To be honest I don't care if some of the script is nonsense so long as it doesn't have a direct negative effect on performance or appearance. I won't waste my time telling the developer to clean it up unless it will improve performance. Will it improve things if I cleared it up? I've checked the tagging, and Meta via SEMrush site analysis and as far as I'm aware it has passed the crawling testwith no warnings. Unless any of this directly affects site appearance or performance, again I couldn't care less, and this is far too much technical jargon which is irrelevant to me. The main functions on the site work fine, unless there is any of this specifically which will affect site performance, which I need to notify the developer/ designer about? Can you make a succint practical recommendation or will this have no real effect otherwise if left?
First off, if that's "jargon" to you, you don't know enough about websites to have one. Second, everything I'm outlining impacts performance AND accessibility -- the latter should be quite important since who's going to be looking for insurance assistance more than people with disabilities -- even minor ones. The elderly for example with vision impairment. That's why I kept outlining the file sizes and counts, it's SLOW. It's going to remain slow until it's built properly. It's inaccessible and will remain inaccessible until many of those underlying issues are fixed -- and since that appears to be a UK oriented site, your government can FINE YOU for that **** now, particularly on medical related services like Insurance. Helvetica typically doesn't exist on Windows machines. A "Defualt stack" is a list of fonts (a "stack") in order you'd like them used, typically used in the font declaration. Usually you pick a common windows font, a common mac font, and then a default family for everything else. arial,helvetica,sans-serif for example. Use arial if it's present, if not look for helvetica, if not available use whatever the default sans-serif font is. That's a "font stack". These days if you want system consistency, modern windows defaults to "segoe ui" which is a fairly attractive consistent font, so you could do far worse than "segoe ui",arial,helvetica,sans-serif; -- Modern windows gets the system font, XP/earlier gets arial, macs get helvetica, and then the fallback for everything else. Correct. Both are slow bloated garbage and to be frank the page isn't doing a single thing that warrants the use of either. They're trendy garbage sold to the ignorant as buzzwords, and anyone telling you it's "easier" or "better" doesn't know enough HTML or CSS to be flapping their gums on the topic. Typically such "frameworks" are promoted by the type of halfwits who think they can get sound technical advice from the pages of Forbes -- which is akin to taking financial advice from the pages of Popular Mechanics. I wouldn't be telling you this if that wasn't the intent; sadly if your developer vomited up this train wreck of ineptitude I kind of doubt they were qualified to take on the job in the first place, much less fix it. Never even heard of that one, but if it passes that with no warnings then their tool is full of manure. How can I say that? How about we use the ONLY tool that means a damn when checking HTML? https://validator.w3.org/nu/?doc=http://healthcareinsured.co.uk/ 215 errors before it even started parsing stuff inside BODY, and it threw up it's hands and GAVE UP ON GOING ANY FURTHER!!! Made worse by that being the HTML 5 compliance check, which compared to the old 4 Strict is so ridiculously permissive I consider it near meaningless by comparison. If it can't pass the 5 checker to even get into checking actual body content and throws it's hands up saying "whatever", whoever built that code has ZERO business coding websites! Might be time to fire your developer, since they plainly have no clue what they are doing! All those things you're calling "jargon" is the equivalent of flipping the bird at speed, search, usability and accessibility! Hence why my real advice would be to pitch that entire mess in the trash and start over using semantic markup, progressive enhancement, and *SHOCK* valid code... Hell this line ALONE: <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> Code (markup): Is such a giant "Go plow yourselves" to mobile users that one has to be in rock-star awe of the ineptitude! Particularly when there's more to a website than the screen you just so happen to be seated in front of with your perfect vision. P.S. this site has QUOTE bbcode tags, try using them instead of italic...
I hate websites were you give away all your info to get an email back. Can't you replace that with a quote calculator? Why is the navigation on the bottom? Does not make sense to me.